Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kanye West Social Media Manager</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f2f2f7; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| .game-header { | |
| display: flex; | |
| justify-content: space-between; | |
| width: 375px; | |
| margin-bottom: 20px; | |
| } | |
| .followers-box, .score-box { | |
| background-color: #000; | |
| color: white; | |
| padding: 10px 15px; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| } | |
| .iphone-frame { | |
| width: 375px; | |
| height: 812px; | |
| background-color: #000; | |
| border-radius: 50px; | |
| padding: 20px; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .screen { | |
| width: 100%; | |
| height: 100%; | |
| background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| border-radius: 40px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .status-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 20px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: white; | |
| text-shadow: 0 0 2px rgba(0,0,0,0.5); | |
| } | |
| .app-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 20px; | |
| padding: 20px; | |
| } | |
| .app-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 18px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| font-size: 12px; | |
| font-weight: 500; | |
| position: relative; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); | |
| } | |
| .app-icon:hover { | |
| transform: scale(1.05); | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background-color: #ff3b30; | |
| color: white; | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| .modal { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 100; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s; | |
| } | |
| .modal.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .modal-content { | |
| background-color: white; | |
| width: 90%; | |
| border-radius: 20px; | |
| padding: 20px; | |
| transform: translateY(20px); | |
| transition: transform 0.3s; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| } | |
| .modal.active .modal-content { | |
| transform: translateY(0); | |
| } | |
| .response-input { | |
| width: 100%; | |
| height: 100px; | |
| border: 1px solid #ddd; | |
| border-radius: 10px; | |
| padding: 10px; | |
| margin-top: 10px; | |
| resize: none; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .submit-btn { | |
| background-color: #007aff; | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 10px 20px; | |
| margin-top: 10px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| } | |
| .action-btn { | |
| background-color: #34c759; | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 10px 20px; | |
| margin-top: 10px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| width: 100%; | |
| } | |
| .notification { | |
| position: absolute; | |
| top: 50px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: rgba(0, 0, 0, 0.8); | |
| color: white; | |
| padding: 10px 15px; | |
| border-radius: 10px; | |
| font-size: 14px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| pointer-events: none; | |
| } | |
| .notification.show { | |
| opacity: 1; | |
| } | |
| .home-indicator { | |
| width: 130px; | |
| height: 5px; | |
| background-color: rgba(255,255,255,0.8); | |
| border-radius: 3px; | |
| position: absolute; | |
| bottom: 10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .app-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 20px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .back-btn { | |
| background: none; | |
| border: none; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .post-content { | |
| padding: 20px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .comment { | |
| padding: 15px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .comment-user { | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .progress-bar { | |
| height: 5px; | |
| background-color: #007aff; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| width: 0%; | |
| transition: width 0.3s; | |
| } | |
| .game-over { | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .restart-btn { | |
| background-color: #007aff; | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 10px 20px; | |
| margin-top: 20px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| } | |
| .responses-list { | |
| max-height: 200px; | |
| overflow-y: auto; | |
| margin-top: 20px; | |
| border: 1px solid #eee; | |
| border-radius: 10px; | |
| padding: 10px; | |
| } | |
| .response-item { | |
| padding: 8px 0; | |
| border-bottom: 1px solid #f0f0f0; | |
| } | |
| .response-app { | |
| font-weight: 600; | |
| color: #007aff; | |
| } | |
| .response-text { | |
| color: #333; | |
| } | |
| .action-modal .modal-content { | |
| text-align: center; | |
| } | |
| .action-icon { | |
| font-size: 40px; | |
| margin-bottom: 15px; | |
| color: #007aff; | |
| } | |
| /* App-specific styles */ | |
| .instagram-post { | |
| background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .twitter-post { | |
| background-color: #1da1f2; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .facebook-post { | |
| background-color: #1877f2; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .tiktok-post { | |
| background-color: #000; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .youtube-post { | |
| background-color: #ff0000; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .reddit-post { | |
| background-color: #ff5700; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .linkedin-post { | |
| background-color: #0a66c2; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .messages-post { | |
| background-color: #34c759; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .email-post { | |
| background-color: #ea4335; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .discord-post { | |
| background-color: #5865f2; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .messenger-post { | |
| background-color: #0084ff; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .spotify-post { | |
| background-color: #1db954; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .cashapp-post { | |
| background-color: #00d632; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .doordash-post { | |
| background-color: #ff3008; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .snapchat-post { | |
| background-color: #fffc00; | |
| color: black; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .settings-post { | |
| background-color: #8e8e93; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| margin-right: 10px; | |
| object-fit: cover; | |
| } | |
| .post-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .post-image { | |
| width: 100%; | |
| border-radius: 10px; | |
| margin-top: 10px; | |
| } | |
| .wifi-list { | |
| margin-top: 15px; | |
| } | |
| .wifi-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px; | |
| border-bottom: 1px solid #eee; | |
| cursor: pointer; | |
| } | |
| .wifi-item:hover { | |
| background-color: #f5f5f5; | |
| } | |
| .wifi-icon { | |
| color: #007aff; | |
| } | |
| .snap-image { | |
| width: 100%; | |
| height: 300px; | |
| object-fit: cover; | |
| border-radius: 10px; | |
| margin: 10px 0; | |
| } | |
| .snap-buttons { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-top: 15px; | |
| } | |
| .snap-btn { | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .snap-like { | |
| background-color: #ff3b30; | |
| color: white; | |
| } | |
| .snap-dislike { | |
| background-color: #007aff; | |
| color: white; | |
| } | |
| .notification-count { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| background-color: #ff3b30; | |
| color: white; | |
| border-radius: 50%; | |
| min-width: 24px; | |
| height: 24px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 12px; | |
| font-weight: bold; | |
| padding: 0 5px; | |
| } | |
| .follower-count { | |
| font-size: 1.2em; | |
| color: #ff3b30; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="game-header"> | |
| <div class="followers-box">Followers: <span id="followers" class="follower-count">10,000,000</span></div> | |
| <div class="score-box">Score: <span id="score">0</span></div> | |
| </div> | |
| <div class="iphone-frame"> | |
| <div class="screen"> | |
| <div class="status-bar"> | |
| <span>9:41</span> | |
| <div> | |
| <i class="fas fa-signal"></i> | |
| <i class="fas fa-wifi ml-2"></i> | |
| <i class="fas fa-battery-full ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="app-grid" id="app-grid"> | |
| <div class="app-icon bg-gradient-to-br from-purple-500 to-pink-500" data-app="instagram"> | |
| <i class="fab fa-instagram text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-blue-400" data-app="twitter"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-blue-600" data-app="facebook"> | |
| <i class="fab fa-facebook-f text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-black" data-app="tiktok"> | |
| <i class="fab fa-tiktok text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-yellow-400" data-app="snapchat"> | |
| <i class="fab fa-snapchat-ghost text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-red-600" data-app="youtube"> | |
| <i class="fab fa-youtube text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-orange-600" data-app="reddit"> | |
| <i class="fab fa-reddit-alien text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-blue-700" data-app="linkedin"> | |
| <i class="fab fa-linkedin-in text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-green-500" data-app="messages"> | |
| <i class="fas fa-comment-dots text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-red-500" data-app="email"> | |
| <i class="fas fa-envelope text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-indigo-500" data-app="discord"> | |
| <i class="fab fa-discord text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-blue-500" data-app="messenger"> | |
| <i class="fab fa-facebook-messenger text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-green-600" data-app="spotify"> | |
| <i class="fab fa-spotify text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-emerald-500" data-app="cashapp"> | |
| <i class="fas fa-dollar-sign text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-red-500" data-app="doordash"> | |
| <i class="fas fa-utensils text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| <div class="app-icon bg-gray-800" data-app="settings"> | |
| <i class="fas fa-cog text-2xl"></i> | |
| <div class="notification-count hidden">0</div> | |
| </div> | |
| </div> | |
| <div class="home-indicator"></div> | |
| <div class="modal" id="response-modal"> | |
| <div class="modal-content"> | |
| <div class="app-header"> | |
| <button class="back-btn" id="back-btn">← Back</button> | |
| <h3 id="modal-app-name">Instagram</h3> | |
| <div></div> | |
| </div> | |
| <div id="app-post-container"> | |
| <!-- App-specific content will be loaded here --> | |
| </div> | |
| <textarea class="response-input" id="response-input" placeholder="Type Kanye's response here..."></textarea> | |
| <button class="submit-btn" id="submit-btn">Send</button> | |
| </div> | |
| </div> | |
| <div class="modal" id="action-modal"> | |
| <div class="modal-content"> | |
| <div class="app-header"> | |
| <button class="back-btn" id="action-back-btn">← Back</button> | |
| <h3 id="action-app-name">Instagram</h3> | |
| <div></div> | |
| </div> | |
| <div id="action-post-container"> | |
| <!-- Action-specific content will be loaded here --> | |
| </div> | |
| <div class="action-icon"> | |
| <i id="action-icon" class="fas fa-heart"></i> | |
| </div> | |
| <p id="action-description">Like this comment from @fan123</p> | |
| <button class="action-btn" id="action-btn">Confirm</button> | |
| </div> | |
| </div> | |
| <div class="modal" id="snapchat-modal"> | |
| <div class="modal-content"> | |
| <div class="app-header"> | |
| <button class="back-btn" id="snap-back-btn">← Back</button> | |
| <h3>Snapchat</h3> | |
| <div></div> | |
| </div> | |
| <div class="post-header"> | |
| <img src="https://randomuser.me/api/portraits/women/1.jpg" class="avatar" id="snap-avatar"> | |
| <div> | |
| <div class="font-bold" id="snap-username">@hotgirl1</div> | |
| <div class="text-sm text-gray-500">2m ago</div> | |
| </div> | |
| </div> | |
| <img src="https://source.unsplash.com/random/300x400/?concert,kanye" class="snap-image" id="snap-image"> | |
| <div class="snap-buttons"> | |
| <div class="snap-btn snap-like" id="snap-like-btn"> | |
| <i class="fas fa-heart"></i> Like | |
| </div> | |
| <div class="snap-btn snap-dislike" id="snap-dislike-btn"> | |
| <i class="fas fa-times"></i> Skip | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal" id="settings-modal"> | |
| <div class="modal-content"> | |
| <div class="app-header"> | |
| <button class="back-btn" id="settings-back-btn">← Back</button> | |
| <h3>Settings</h3> | |
| <div></div> | |
| </div> | |
| <div class="settings-post"> | |
| <h3 class="font-bold">Wi-Fi</h3> | |
| <p>Connect to a network to manage notifications</p> | |
| <div class="wifi-list"> | |
| <div class="wifi-item" data-wifi="Starbucks Free WiFi"> | |
| <div> | |
| <i class="fas fa-wifi wifi-icon"></i> Starbucks Free WiFi | |
| </div> | |
| <div> | |
| <i class="fas fa-lock-open"></i> | |
| </div> | |
| </div> | |
| <div class="wifi-item" data-wifi="Airport WiFi"> | |
| <div> | |
| <i class="fas fa-wifi wifi-icon"></i> Airport WiFi | |
| </div> | |
| <div> | |
| <i class="fas fa-lock-open"></i> | |
| </div> | |
| </div> | |
| <div class="wifi-item" data-wifi="YeDomeNetwork"> | |
| <div> | |
| <i class="fas fa-wifi wifi-icon"></i> YeDomeNetwork | |
| </div> | |
| <div> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| </div> | |
| <div class="wifi-item" data-wifi="Hotel Guest"> | |
| <div> | |
| <i class="fas fa-wifi wifi-icon"></i> Hotel Guest | |
| </div> | |
| <div> | |
| <i class="fas fa-lock-open"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="notification" id="notification"> | |
| +<span id="points-earned">0</span> points! | |
| </div> | |
| <div class="modal" id="game-over-modal"> | |
| <div class="modal-content game-over"> | |
| <h2 class="text-2xl font-bold">Game Over!</h2> | |
| <p class="mt-4">Your final score: <span id="final-score">0</span></p> | |
| <p class="mt-2">Followers lost: <span id="followers-lost">0</span></p> | |
| <h3 class="mt-6 font-bold">Your Responses:</h3> | |
| <div class="responses-list" id="responses-list"> | |
| <!-- Responses will be added here --> | |
| </div> | |
| <button class="restart-btn" id="restart-btn">Play Again</button> | |
| </div> | |
| </div> | |
| <div class="progress-bar" id="progress-bar"></div> | |
| </div> | |
| </div> | |
| <audio id="tapSound" src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3" preload="auto"></audio> | |
| <audio id="keySound" src="https://assets.mixkit.co/sfx/preview/mixkit-quick-jump-arcade-game-239.mp3" preload="auto"></audio> | |
| <audio id="bgMusic" loop> | |
| <source src="https://assets.mixkit.co/music/preview/mixkit-funky-hip-hop-2084.mp3" type="audio/mpeg"> | |
| </audio> | |
| <script> | |
| // Game state | |
| const state = { | |
| score: 0, | |
| followers: 10000000, // 10 million | |
| gameActive: true, | |
| currentNotification: null, | |
| startTime: null, | |
| followerInterval: null, | |
| notificationInterval: null, | |
| difficulty: 1, | |
| responses: [], | |
| musicPlaying: false, | |
| appNotifications: {}, | |
| connectedToWifi: false | |
| }; | |
| // Initialize app notifications | |
| const apps = [ | |
| 'instagram', 'twitter', 'facebook', 'tiktok', 'snapchat', | |
| 'youtube', 'reddit', 'linkedin', 'messages', 'email', | |
| 'discord', 'messenger', 'spotify', 'cashapp', 'doordash', 'settings' | |
| ]; | |
| apps.forEach(app => { | |
| state.appNotifications[app] = 0; | |
| }); | |
| // Kanye-themed data | |
| const posts = { | |
| instagram: [ | |
| "Just designed a new Yeezy prototype in my sleep. Woke up and sketched it immediately. Genius works 24/7. 🌙✏️ #Yeezy #Visionary", | |
| "Taylor Swift owes me 50 million streams. Facts. 🎤🔥 #TruthHurts #Famous", | |
| "Kim would still be working at a gas station if it wasn't for me. Changed her life. Changed the world. 🌎 #ThankMeLater", | |
| "Just bought a new ranch in Wyoming. Gonna build a dome city for all my fans. Utopia coming soon. 🏡✨ #YeezyDomes", | |
| "Presidential campaign 2024 starts now. We bringing truth to the White House. 🇺🇸 #Ye2024" | |
| ], | |
| twitter: [ | |
| "The media wants to paint me as crazy but I'm the only one telling the truth. Wake up people! 🚨 #FreeThinker", | |
| "Drake still using ghostwriters. I write all my own lyrics while designing shoes. Multitasking king. 👑 #NoHelpNeeded", | |
| "Adidas tried to drop me but I dropped them first. Yeezy season never ends. 👟 #Independent", | |
| "All these fashion designers copying my style but can't copy my mind. Original thinker. 🧠 #Uncopyable", | |
| "The education system is designed to make you a slave. I dropped out of college and became a billionaire. Think about that. 💰 #FreeMind" | |
| ], | |
| facebook: [ | |
| "Sharing some behind-the-scenes photos from my Sunday Service. Healing the world through music. 🎶🙏 #GodsPlan", | |
| "My new album is 90% done. It's gonna change music forever. Again. 🎧 #HistoryInTheMaking", | |
| "Just adopted 10 more dogs. My ranch is now a sanctuary for all God's creatures. 🐕 #AllLove", | |
| "The matrix doesn't want you to see this documentary. Watch it before they take it down. 🎥 #RedPill", | |
| "Building schools in Africa. Education is the key to freedom. 📚 #WakandaForever" | |
| ], | |
| tiktok: [ | |
| "POV: You're the greatest artist of all time but they don't want to admit it. 😎 #UnderratedGenius", | |
| "Trying this new dance challenge but I'm making up my own moves. Creativity can't be contained. 💃 #Innovator", | |
| "When you realize all your old tweets were prophecies. 🔮 #AheadOfMyTime", | |
| "Me explaining to the label why I need complete creative control. They never listen. 🤦♂️ #TrustTheVision", | |
| "Reacting to my old interviews. I was right about everything. 🎯 #ToldYouSo" | |
| ], | |
| youtube: [ | |
| "New vlog: Touring my underground bunker. Gotta be prepared. 🏗️ #SafetyFirst", | |
| "Reacting to reaction videos of my music. Y'all still don't get it. 🎶 #DeepArt", | |
| "Documentary: The truth about the music industry they don't want you to know. 🎥 #IndustrySecrets", | |
| "Tutorial: How to design a billion dollar sneaker with just a marker and paper. ✏️ #YeezyDesign", | |
| "24 hours in my life. This is how a genius operates. ⏳ #Productivity" | |
| ], | |
| reddit: [ | |
| "AMA time! Ask me anything about music, fashion, or the meaning of life. I got answers. 💡 #AskYe", | |
| "Breaking down why modern architecture is destroying our souls. We need domes. 🏛️ #DomeLife", | |
| "The real reason I interrupted Taylor at the VMAs. She needed that moment. 🎤 #CharacterBuilding", | |
| "Explaining my presidential platform: Free Yeezys for all, dome cities, and chicken tenders on every corner. 🍗 #YePolicy", | |
| "Debunking music theory. The rules are made to be broken. 🎼 #NoRules" | |
| ], | |
| linkedin: [ | |
| "How I turned a shoe design into a billion dollar empire. Spoiler: Believe in yourself. 💪 #Entrepreneur", | |
| "The education system failed me so I created my own curriculum. Now teaching masterclasses. 🎓 #SelfTaught", | |
| "Why I fired all my managers and became my own CEO. Too many middlemen. ✂️ #DirectControl", | |
| "Case study: Yeezy brand growth through authentic self-expression. No focus groups needed. 📈 #BeYourself", | |
| "Looking for architects to help build my dome city. Must think outside the box. Literally. 🏗️ #DomeJobs" | |
| ], | |
| messages: [ | |
| "Text from Kim: We need to talk about the kids.", | |
| "Text from Jay-Z: You crossed a line this time.", | |
| "Text from Elon: The Twitter deal is happening. You in?", | |
| "Text from Manager: The label is threatening to drop you.", | |
| "Text from Producer: The beat is ready when you are." | |
| ], | |
| email: [ | |
| "From: Adidas Legal - Contract Termination Notice", | |
| "From: White House Invitation - Arts Committee", | |
| "From: Harvard University - Honorary Degree Offer", | |
| "From: TMZ - Interview Request", | |
| "From: Sunday Service Choir - Setlist Approval" | |
| ], | |
| discord: [ | |
| "Yeezy Fan Server: @everyone New merch drop tomorrow!", | |
| "Music Producers Channel: Need feedback on this track", | |
| "Gaming Group: Who's on tonight?", | |
| "Dome Designers: New blueprints uploaded", | |
| "Moderators: Need help with spam bots" | |
| ], | |
| messenger: [ | |
| "Message from Drake: We need to squash this beef", | |
| "Message from Elon: Twitter deal update", | |
| "Message from Kim: The kids miss you", | |
| "Message from Fan: Can you sign my shoes?", | |
| "Message from Producer: Album mix ready" | |
| ], | |
| spotify: [ | |
| "Playlist: Kanye's Morning Motivation", | |
| "Notification: Your monthly listeners reached 50M", | |
| "Alert: New release from artist you follow", | |
| "Update: Your top fans this month", | |
| "Reminder: Update your artist profile" | |
| ], | |
| cashapp: [ | |
| "Payment Received: $2M - Yeezy Royalties", | |
| "Payment Sent: $200K - Dome Materials", | |
| "Request: $50 - from @yeezyfan123", | |
| "Alert: Large withdrawal detected", | |
| "Reminder: Tax documents ready" | |
| ], | |
| doordash: [ | |
| "Order Confirmed: 50 Chick-fil-A meals", | |
| "Driver En Route: Your sushi is coming", | |
| "Special Offer: Free delivery today", | |
| "Rating Request: How was your order?", | |
| "Alert: New vegan restaurant nearby" | |
| ] | |
| }; | |
| const comments = [ | |
| "Yo Ye, you ever think maybe you ARE crazy? Just asking...", | |
| "Kanye I love you but please take your meds", | |
| "Bro you need Jesus. And a therapist.", | |
| "Yeezy season approaching but so is your midlife crisis", | |
| "How much for a pair of Yeezys signed with 'I hate fish sticks'?", | |
| "You interrupted Taylor Swift AND my childhood. How do you sleep?", | |
| "Ye if you're reading this blink twice if the illuminati has you", | |
| "I'll vote for you if you promise free Yeezys for all", | |
| "You say you're a genius but can you solve a Rubik's cube?", | |
| "Kim was famous before you but go off I guess", | |
| "Remember when you said slavery was a choice? Pepperidge Farm remembers", | |
| "Your music slaps but your takes are trash", | |
| "Ye vs. Drake beef is the only thing keeping me alive rn", | |
| "You built a dome but can you build a healthy relationship?", | |
| "I bet you think this comment is about you... it is", | |
| "How many times you gonna change your name bro?", | |
| "You need help but not the kind you can buy", | |
| "I made a remix of your tweet about fish sticks", | |
| "You're not wrong about the education system tho", | |
| "Drop the album or drop the act" | |
| ]; | |
| const actions = [ | |
| { type: "like", icon: "fa-heart", text: "Like this comment from", points: 5 }, | |
| { type: "follow", icon: "fa-user-plus", text: "Follow this user", points: 10 }, | |
| { type: "subscribe", icon: "fa-bell", text: "Subscribe to this channel", points: 15 }, | |
| { type: "tip", icon: "fa-dollar-sign", text: "Send $10 to this creator", points: 20 } | |
| ]; | |
| const usernames = [ | |
| "@yeezystan", "@kimye4eva", "@fishstickhater", "@domeenthusiast", "@yeezy2024", | |
| "@truthsayer", "@yeahright", "@kanyedoesntsleep", "@yeezytaughtme", "@notacultmember" | |
| ]; | |
| const avatars = [ | |
| "https://randomuser.me/api/portraits/men/1.jpg", | |
| "https://randomuser.me/api/portraits/women/1.jpg", | |
| "https://randomuser.me/api/portraits/men/2.jpg", | |
| "https://randomuser.me/api/portraits/women/2.jpg", | |
| "https://randomuser.me/api/portraits/men/3.jpg", | |
| "https://randomuser.me/api/portraits/women/3.jpg", | |
| "https://randomuser.me/api/portraits/men/4.jpg", | |
| "https://randomuser.me/api/portraits/women/4.jpg", | |
| "https://randomuser.me/api/portraits/men/5.jpg", | |
| "https://randomuser.me/api/portraits/women/5.jpg" | |
| ]; | |
| const snapImages = [ | |
| "https://source.unsplash.com/random/300x400/?concert,kanye", | |
| "https://source.unsplash.com/random/300x400/?selfie,woman", | |
| "https://source.unsplash.com/random/300x400/?party,celebrity", | |
| "https://source.unsplash.com/random/300x400/?model,beach", | |
| "https://source.unsplash.com/random/300x400/?club,dancing" | |
| ]; | |
| const snapUsernames = [ | |
| "@hotgirl1", "@yeezyfan99", "@modelalert", "@clubqueen", "@partyanimal", | |
| "@selfiequeen", "@celebfan", "@musiclover", "@fashionista", "@trendsetter" | |
| ]; | |
| // DOM elements | |
| const appIcons = document.querySelectorAll('.app-icon'); | |
| const notificationBadges = document.querySelectorAll('.notification-count'); | |
| const responseModal = document.getElementById('response-modal'); | |
| const actionModal = document.getElementById('action-modal'); | |
| const snapchatModal = document.getElementById('snapchat-modal'); | |
| const settingsModal = document.getElementById('settings-modal'); | |
| const responseInput = document.getElementById('response-input'); | |
| const submitBtn = document.getElementById('submit-btn'); | |
| const actionBtn = document.getElementById('action-btn'); | |
| const backBtn = document.getElementById('back-btn'); | |
| const actionBackBtn = document.getElementById('action-back-btn'); | |
| const snapBackBtn = document.getElementById('snap-back-btn'); | |
| const settingsBackBtn = document.getElementById('settings-back-btn'); | |
| const scoreDisplay = document.getElementById('score'); | |
| const followersDisplay = document.getElementById('followers'); | |
| const appPostContainer = document.getElementById('app-post-container'); | |
| const actionPostContainer = document.getElementById('action-post-container'); | |
| const notification = document.getElementById('notification'); | |
| const pointsEarned = document.getElementById('points-earned'); | |
| const gameOverModal = document.getElementById('game-over-modal'); | |
| const finalScore = document.getElementById('final-score'); | |
| const followersLost = document.getElementById('followers-lost'); | |
| const restartBtn = document.getElementById('restart-btn'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const responsesList = document.getElementById('responses-list'); | |
| const actionIcon = document.getElementById('action-icon'); | |
| const actionDescription = document.getElementById('action-description'); | |
| const snapAvatar = document.getElementById('snap-avatar'); | |
| const snapUsername = document.getElementById('snap-username'); | |
| const snapImage = document.getElementById('snap-image'); | |
| const snapLikeBtn = document.getElementById('snap-like-btn'); | |
| const snapDislikeBtn = document.getElementById('snap-dislike-btn'); | |
| const wifiItems = document.querySelectorAll('.wifi-item'); | |
| const tapSound = document.getElementById('tapSound'); | |
| const keySound = document.getElementById('keySound'); | |
| const bgMusic = document.getElementById('bgMusic'); | |
| const modalAppName = document.getElementById('modal-app-name'); | |
| const actionAppName = document.getElementById('action-app-name'); | |
| // Format number with commas | |
| function formatNumber(num) { | |
| return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| } | |
| // Initialize game | |
| function initGame() { | |
| state.score = 0; | |
| state.followers = 10000000; // 10 million | |
| state.gameActive = true; | |
| state.difficulty = 1; | |
| state.responses = []; | |
| state.connectedToWifi = false; | |
| // Reset all app notifications | |
| apps.forEach(app => { | |
| state.appNotifications[app] = 0; | |
| }); | |
| scoreDisplay.textContent = state.score; | |
| followersDisplay.textContent = formatNumber(state.followers); | |
| // Clear all notifications | |
| notificationBadges.forEach(badge => { | |
| badge.classList.add('hidden'); | |
| badge.textContent = '0'; | |
| }); | |
| // Start follower countdown | |
| clearInterval(state.followerInterval); | |
| state.followerInterval = setInterval(updateFollowers, 1000); | |
| // Start notification spawner | |
| clearInterval(state.notificationInterval); | |
| state.notificationInterval = setInterval(spawnNotifications, 50); // Spawn every 50ms (20 per second) | |
| // Hide modals | |
| responseModal.classList.remove('active'); | |
| actionModal.classList.remove('active'); | |
| snapchatModal.classList.remove('active'); | |
| settingsModal.classList.remove('active'); | |
| gameOverModal.classList.remove('active'); | |
| // Start music if not already playing | |
| if (!state.musicPlaying) { | |
| bgMusic.volume = 0.3; | |
| bgMusic.play().catch(e => console.log("Autoplay prevented")); | |
| state.musicPlaying = true; | |
| } | |
| } | |
| // Update followers count | |
| function updateFollowers() { | |
| if (!state.gameActive) return; | |
| // Lose followers over time | |
| state.followers = Math.max(0, state.followers - 100000); // 100k per second | |
| // Update display | |
| followersDisplay.textContent = formatNumber(state.followers); | |
| if (state.followers <= 0) { | |
| endGame(); | |
| } | |
| } | |
| // Spawn random notifications | |
| function spawnNotifications() { | |
| if (!state.gameActive) return; | |
| // Spawn multiple notifications per interval | |
| const notificationsToSpawn = 5; // Spawn 5 notifications per interval (100 per second) | |
| for (let i = 0; i < notificationsToSpawn; i++) { | |
| // Random app | |
| const randomAppIndex = Math.floor(Math.random() * apps.length); | |
| const appName = apps[randomAppIndex]; | |
| // Skip settings if not connected to wifi | |
| if (appName === 'settings' && !state.connectedToWifi) continue; | |
| // Find the app icon | |
| const appIcon = document.querySelector(`.app-icon[data-app="${appName}"]`); | |
| // Increment notification count | |
| state.appNotifications[appName]++; | |
| // Show notification badge | |
| const badge = appIcon.querySelector('.notification-count'); | |
| badge.classList.remove('hidden'); | |
| badge.textContent = state.appNotifications[appName] > 99 ? '99+' : state.appNotifications[appName]; | |
| // Store current notification | |
| state.currentNotification = { | |
| app: appName, | |
| element: appIcon, | |
| count: state.appNotifications[appName] | |
| }; | |
| } | |
| // Update difficulty (spawn faster over time) | |
| state.difficulty = Math.min(5, Math.floor((10000000 - state.followers) / 2000000) + 1); | |
| } | |
| // Handle app click | |
| function handleAppClick(e) { | |
| playTapSound(); | |
| if (!state.gameActive) return; | |
| const appIcon = e.currentTarget; | |
| const appName = appIcon.dataset.app; | |
| // Check if this app has notifications | |
| if (state.appNotifications[appName] === 0) { | |
| // Penalty for wrong click | |
| state.score = Math.max(0, state.score - 5); | |
| scoreDisplay.textContent = state.score; | |
| showNotification(-5); | |
| return; | |
| } | |
| // Special handling for Snapchat | |
| if (appName === 'snapchat') { | |
| showSnapchatModal(); | |
| return; | |
| } | |
| // Special handling for Settings | |
| if (appName === 'settings') { | |
| showSettingsModal(); | |
| return; | |
| } | |
| // Decide if this is a response or action (50/50 chance) | |
| const isAction = Math.random() > 0.5; | |
| if (isAction && actions.length > 0) { | |
| showActionModal(appName); | |
| } else { | |
| showResponseModal(appName); | |
| } | |
| // Start timer for response | |
| state.startTime = Date.now(); | |
| // Hide notification badge (but keep count in state) | |
| const badge = appIcon.querySelector('.notification-count'); | |
| badge.classList.add('hidden'); | |
| } | |
| // Show response modal with app-specific UI | |
| function showResponseModal(appName) { | |
| // Set up response modal | |
| modalAppName.textContent = appName.charAt(0).toUpperCase() + appName.slice(1); | |
| // Clear previous content | |
| appPostContainer.innerHTML = ''; | |
| // Create app-specific post | |
| const postDiv = document.createElement('div'); | |
| postDiv.className = `${appName}-post`; | |
| // Random post and comment | |
| const randomPostIndex = Math.floor(Math.random() * posts[appName].length); | |
| const randomCommentIndex = Math.floor(Math.random() * comments.length); | |
| const randomUserIndex = Math.floor(Math.random() * usernames.length); | |
| const randomAvatarIndex = Math.floor(Math.random() * avatars.length); | |
| // Create post header with avatar | |
| const postHeader = document.createElement('div'); | |
| postHeader.className = 'post-header'; | |
| const avatarImg = document.createElement('img'); | |
| avatarImg.src = avatars[randomAvatarIndex]; | |
| avatarImg.className = 'avatar'; | |
| postHeader.appendChild(avatarImg); | |
| const userInfo = document.createElement('div'); | |
| const username = document.createElement('div'); | |
| username.className = 'font-bold'; | |
| username.textContent = 'kanyewest'; | |
| userInfo.appendChild(username); | |
| const postTime = document.createElement('div'); | |
| postTime.className = 'text-sm text-gray-500'; | |
| postTime.textContent = 'Just now'; | |
| userInfo.appendChild(postTime); | |
| postHeader.appendChild(userInfo); | |
| postDiv.appendChild(postHeader); | |
| // Add post content | |
| const postContent = document.createElement('p'); | |
| postContent.textContent = posts[appName][randomPostIndex]; | |
| postDiv.appendChild(postContent); | |
| // Add comment | |
| const commentDiv = document.createElement('div'); | |
| commentDiv.className = 'comment'; | |
| const commentUser = document.createElement('div'); | |
| commentUser.className = 'comment-user'; | |
| commentUser.textContent = usernames[randomUserIndex]; | |
| commentDiv.appendChild(commentUser); | |
| const commentText = document.createElement('p'); | |
| commentText.textContent = comments[randomCommentIndex]; | |
| commentDiv.appendChild(commentText); | |
| postDiv.appendChild(commentDiv); | |
| // Add to container | |
| appPostContainer.appendChild(postDiv); | |
| // Show modal | |
| responseModal.classList.add('active'); | |
| responseInput.value = ''; | |
| responseInput.focus(); | |
| } | |
| // Show action modal with app-specific UI | |
| function showActionModal(appName) { | |
| // Set up action modal | |
| actionAppName.textContent = appName.charAt(0).toUpperCase() + appName.slice(1); | |
| // Clear previous content | |
| actionPostContainer.innerHTML = ''; | |
| // Create app-specific post | |
| const postDiv = document.createElement('div'); | |
| postDiv.className = `${appName}-post`; | |
| // Random post and comment | |
| const randomPostIndex = Math.floor(Math.random() * posts[appName].length); | |
| const randomCommentIndex = Math.floor(Math.random() * comments.length); | |
| const randomUserIndex = Math.floor(Math.random() * usernames.length); | |
| const randomAvatarIndex = Math.floor(Math.random() * avatars.length); | |
| const randomActionIndex = Math.floor(Math.random() * actions.length); | |
| const action = actions[randomActionIndex]; | |
| // Create post header with avatar | |
| const postHeader = document.createElement('div'); | |
| postHeader.className = 'post-header'; | |
| const avatarImg = document.createElement('img'); | |
| avatarImg.src = avatars[randomAvatarIndex]; | |
| avatarImg.className = 'avatar'; | |
| postHeader.appendChild(avatarImg); | |
| const userInfo = document.createElement('div'); | |
| const username = document.createElement('div'); | |
| username.className = 'font-bold'; | |
| username.textContent = 'kanyewest'; | |
| userInfo.appendChild(username); | |
| const postTime = document.createElement('div'); | |
| postTime.className = 'text-sm text-gray-500'; | |
| postTime.textContent = 'Just now'; | |
| userInfo.appendChild(postTime); | |
| postHeader.appendChild(userInfo); | |
| postDiv.appendChild(postHeader); | |
| // Add post content | |
| const postContent = document.createElement('p'); | |
| postContent.textContent = posts[appName][randomPostIndex]; | |
| postDiv.appendChild(postContent); | |
| // Add comment | |
| const commentDiv = document.createElement('div'); | |
| commentDiv.className = 'comment'; | |
| const commentUser = document.createElement('div'); | |
| commentUser.className = 'comment-user'; | |
| commentUser.textContent = usernames[randomUserIndex]; | |
| commentDiv.appendChild(commentUser); | |
| const commentText = document.createElement('p'); | |
| commentText.textContent = comments[randomCommentIndex]; | |
| commentDiv.appendChild(commentText); | |
| postDiv.appendChild(commentDiv); | |
| // Add to container | |
| actionPostContainer.appendChild(postDiv); | |
| // Set up action | |
| actionIcon.className = `fas ${action.icon}`; | |
| actionDescription.textContent = `${action.text} ${usernames[randomUserIndex]}`; | |
| // Store action points (multiplied by notification count for this app) | |
| const basePoints = action.points; | |
| const notificationCount = state.appNotifications[appName]; | |
| const multiplier = 1 + (notificationCount * 0.1); // 10% bonus per notification | |
| const totalPoints = Math.floor(basePoints * multiplier); | |
| actionBtn.dataset.points = totalPoints; | |
| actionBtn.dataset.app = appName; | |
| // Show modal | |
| actionModal.classList.add('active'); | |
| } | |
| // Show Snapchat modal with random image | |
| function showSnapchatModal() { | |
| // Random snap content | |
| const randomImageIndex = Math.floor(Math.random() * snapImages.length); | |
| const randomUsernameIndex = Math.floor(Math.random() * snapUsernames.length); | |
| const randomAvatarIndex = Math.floor(Math.random() * avatars.length); | |
| snapAvatar.src = avatars[randomAvatarIndex]; | |
| snapUsername.textContent = snapUsernames[randomUsernameIndex]; | |
| snapImage.src = snapImages[randomImageIndex] + '&' + new Date().getTime(); // Cache busting | |
| // Show modal | |
| snapchatModal.classList.add('active'); | |
| // Clear notification count for snapchat | |
| state.appNotifications['snapchat'] = 0; | |
| const badge = document.querySelector('.app-icon[data-app="snapchat"] .notification-count'); | |
| badge.classList.add('hidden'); | |
| } | |
| // Show Settings modal | |
| function showSettingsModal() { | |
| // Show modal | |
| settingsModal.classList.add('active'); | |
| // Clear notification count for settings | |
| state.appNotifications['settings'] = 0; | |
| const badge = document.querySelector('.app-icon[data-app="settings"] .notification-count'); | |
| badge.classList.add('hidden'); | |
| } | |
| // Handle submit response | |
| function handleSubmit() { | |
| playTapSound(); | |
| const response = responseInput.value.trim(); | |
| if (response === '') { | |
| alert('Please type a response!'); | |
| return; | |
| } | |
| // Calculate time taken (in seconds) | |
| const timeTaken = (Date.now() - state.startTime) / 1000; | |
| // Base points based on time taken | |
| let points = Math.max(1, Math.floor(20 - timeTaken)); | |
| // Bonus for longer responses | |
| if (response.length > 20) { | |
| points += 5; | |
| } | |
| if (response.length > 40) { | |
| points += 5; | |
| } | |
| // Add emoji bonus | |
| if (response.includes('!') || response.includes('?')) { | |
| points += 2; | |
| } | |
| if (/\p{Emoji}/u.test(response)) { | |
| points += 3; | |
| } | |
| // Bonus based on notification count for this app | |
| const appName = modalAppName.textContent.toLowerCase(); | |
| const notificationCount = state.appNotifications[appName]; | |
| const multiplier = 1 + (notificationCount * 0.1); // 10% bonus per notification | |
| points = Math.floor(points * multiplier); | |
| // Gain random followers (10k-300k) | |
| const followersGained = Math.floor(Math.random() * 290000) + 10000; | |
| state.followers += followersGained; | |
| followersDisplay.textContent = formatNumber(state.followers); | |
| // Record response | |
| state.responses.push({ | |
| app: modalAppName.textContent, | |
| text: response, | |
| points: points, | |
| followersGained: followersGained | |
| }); | |
| // Update score | |
| state.score += points; | |
| scoreDisplay.textContent = state.score; | |
| // Clear notification count for this app | |
| state.appNotifications[appName] = 0; | |
| // Show points earned | |
| showNotification(points); | |
| // Hide modal | |
| responseModal.classList.remove('active'); | |
| } | |
| // Handle action completion | |
| function handleAction() { | |
| playTapSound(); | |
| const points = parseInt(actionBtn.dataset.points) || 10; | |
| const appName = actionBtn.dataset.app; | |
| // Gain random followers (10k-300k) | |
| const followersGained = Math.floor(Math.random() * 290000) + 10000; | |
| state.followers += followersGained; | |
| followersDisplay.textContent = formatNumber(state.followers); | |
| // Record action | |
| state.responses.push({ | |
| app: actionAppName.textContent, | |
| text: actionDescription.textContent, | |
| points: points, | |
| followersGained: followersGained | |
| }); | |
| // Update score | |
| state.score += points; | |
| scoreDisplay.textContent = state.score; | |
| // Clear notification count for this app | |
| state.appNotifications[appName] = 0; | |
| // Show points earned | |
| showNotification(points); | |
| // Hide modal | |
| actionModal.classList.remove('active'); | |
| } | |
| // Handle Snapchat like | |
| function handleSnapLike() { | |
| playTapSound(); | |
| const points = 15; // Fixed points for liking a snap | |
| // Gain random followers (10k-300k) | |
| const followersGained = Math.floor(Math.random() * 290000) + 10000; | |
| state.followers += followersGained; | |
| followersDisplay.textContent = formatNumber(state.followers); | |
| // Record action | |
| state.responses.push({ | |
| app: "Snapchat", | |
| text: "Liked snap from " + snapUsername.textContent, | |
| points: points, | |
| followersGained: followersGained | |
| }); | |
| // Update score | |
| state.score += points; | |
| scoreDisplay.textContent = state.score; | |
| // Show points earned | |
| showNotification(points); | |
| // Hide modal | |
| snapchatModal.classList.remove('active'); | |
| } | |
| // Handle Snapchat skip | |
| function handleSnapSkip() { | |
| playTapSound(); | |
| const points = 5; // Fewer points for skipping | |
| // Gain random followers (10k-300k) | |
| const followersGained = Math.floor(Math.random() * 290000) + 10000; | |
| state.followers += followersGained; | |
| followersDisplay.textContent = formatNumber(state.followers); | |
| // Record action | |
| state.responses.push({ | |
| app: "Snapchat", | |
| text: "Skipped snap from " + snapUsername.textContent, | |
| points: points, | |
| followersGained: followersGained | |
| }); | |
| // Update score | |
| state.score += points; | |
| scoreDisplay.textContent = state.score; | |
| // Show points earned | |
| showNotification(points); | |
| // Hide modal | |
| snapchatModal.classList.remove('active'); | |
| } | |
| // Handle WiFi connection | |
| function handleWifiConnect(e) { | |
| playTapSound(); | |
| const wifiName = e.currentTarget.dataset.wifi; | |
| if (wifiName.includes('lock')) { | |
| alert('This network requires a password'); | |
| return; | |
| } | |
| state.connectedToWifi = true; | |
| // Gain random followers (10k-300k) | |
| const followersGained = Math.floor(Math.random() * 290000) + 10000; | |
| state.followers += followersGained; | |
| followersDisplay.textContent = formatNumber(state.followers); | |
| // Record action | |
| state.responses.push({ | |
| app: "Settings", | |
| text: "Connected to " + wifiName, | |
| points: 10, | |
| followersGained: followersGained | |
| }); | |
| // Update score | |
| state.score += 10; | |
| scoreDisplay.textContent = state.score; | |
| // Show points earned | |
| showNotification(10); | |
| // Hide modal | |
| settingsModal.classList.remove('active'); | |
| } | |
| // Show points notification | |
| function showNotification(points) { | |
| pointsEarned.textContent = points; | |
| notification.classList.add('show'); | |
| setTimeout(() => { | |
| notification.classList.remove('show'); | |
| }, 2000); | |
| } | |
| // End game | |
| function endGame() { | |
| state.gameActive = false; | |
| clearInterval(state.followerInterval); | |
| clearInterval(state.notificationInterval); | |
| // Calculate followers lost | |
| const followersLostCount = 10000000 - state.followers; | |
| // Show all responses | |
| responsesList.innerHTML = ''; | |
| state.responses.forEach(response => { | |
| const responseEl = document.createElement('div'); | |
| responseEl.className = 'response-item'; | |
| responseEl.innerHTML = ` | |
| <span class="response-app">${response.app}:</span> | |
| <span class="response-text">${response.text}</span> | |
| <span class="text-green-600 float-right">+${response.points}</span> | |
| ${response.followersGained ? `<span class="text-blue-600 float-right mr-2">+${formatNumber(response.followersGained)}</span>` : ''} | |
| `; | |
| responsesList.appendChild(responseEl); | |
| }); | |
| // Show game over modal | |
| finalScore.textContent = state.score; | |
| followersLost.textContent = formatNumber(followersLostCount); | |
| gameOverModal.classList.add('active'); | |
| } | |
| // Play tap sound | |
| function playTapSound() { | |
| tapSound.currentTime = 0; | |
| tapSound.play(); | |
| } | |
| // Play key sound | |
| function playKeySound() { | |
| keySound.currentTime = 0; | |
| keySound.play(); | |
| } | |
| // Event listeners | |
| appIcons.forEach(icon => { | |
| icon.addEventListener('click', handleAppClick); | |
| }); | |
| submitBtn.addEventListener('click', handleSubmit); | |
| actionBtn.addEventListener('click', handleAction); | |
| snapLikeBtn.addEventListener('click', handleSnapLike); | |
| snapDislikeBtn.addEventListener('click', handleSnapSkip); | |
| backBtn.addEventListener('click', () => { | |
| playTapSound(); | |
| responseModal.classList.remove('active'); | |
| }); | |
| actionBackBtn.addEventListener('click', () => { | |
| playTapSound(); | |
| actionModal.classList.remove('active'); | |
| }); | |
| snapBackBtn.addEventListener('click', () => { | |
| playTapSound(); | |
| snapchatModal.classList.remove('active'); | |
| }); | |
| settingsBackBtn.addEventListener('click', () => { | |
| playTapSound(); | |
| settingsModal.classList.remove('active'); | |
| }); | |
| restartBtn.addEventListener('click', () => { | |
| playTapSound(); | |
| initGame(); | |
| }); | |
| wifiItems.forEach(item => { | |
| item.addEventListener('click', handleWifiConnect); | |
| }); | |
| // Keyboard shortcut for submit (Cmd+Enter or Ctrl+Enter) | |
| responseInput.addEventListener('keydown', (e) => { | |
| if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { | |
| handleSubmit(); | |
| } | |
| }); | |
| // Key sound when typing | |
| responseInput.addEventListener('keypress', () => { | |
| playKeySound(); | |
| }); | |
| // Update progress bar | |
| setInterval(() => { | |
| const progress = (state.score / 500) * 100; // Adjusted for higher scores | |
| progressBar.style.width = `${Math.min(100, progress)}%`; | |
| }, 100); | |
| // Start game | |
| initGame(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=shuun5/magic-button" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |