GameHub - Your Gaming Dashboard

{"project":{"id":"5e82f670-9295-467a-8146-3140191ce581","user_id":"9bf1e3e3-cefb-4b27-a2b9-6e8209b8b48a","title":"GameHub Dashboard","code":"{\n \"files\": [\n {\n \"name\": \"index.html\",\n \"content\": \"\\n\\n\\n \\n \\n GameHub - Your Gaming Dashboard\\n \\n \\n\\n\\n

\\n

\\n \\n

\\n \\n \\n \\n

\\n

\\n\\n \\n

\\n \\n

\\n GameHub\\n

\\n\\n \\n

\\n

\\n \\n \\n \\n

\\n

\\n\\n \\n

\\n

Quick Launch

\\n

\\n\\n \\n

\\n

Featured Platforms

\\n

\\n\\n \\n

\\n

Quick Games

\\n

\\n\\n \\n \\n\\n \\n \\n

\\n

\\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n \\n \\n \\n \\n\\n\"\n },\n {\n \"name\": \"style.css\",\n \"content\": \"/* ========== RESET & BASE ========== */\\n* { margin: 0; padding: 0; box-sizing: border-box; }\\nhtml { scroll-behavior: smooth; }\\nbody, html { width: 100%; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }\\nbody { overflow-x: hidden; overflow-y: auto; transition: background 0.5s ease, color 0.5s ease; }\\n\\n/* ========== DARK MODE (DEFAULT) ========== */\\nbody.dark-mode {\\n background: #0a0a1a;\\n color: #e0e0f0;\\n}\\nbody.dark-mode #ui-layer { color: #e0e0f0; }\\nbody.dark-mode .section-title { color: #b0b0ff; }\\nbody.dark-mode #search-bar {\\n background: rgba(30, 30, 60, 0.9);\\n border: 1px solid rgba(100, 100, 255, 0.3);\\n box-shadow: 0 4px 30px rgba(100, 100, 255, 0.15), 0 0 60px rgba(100, 100, 255, 0.05);\\n}\\nbody.dark-mode #search-bar:focus-within {\\n border-color: rgba(100, 100, 255, 0.6);\\n box-shadow: 0 4px 40px rgba(100, 100, 255, 0.3), 0 0 80px rgba(100, 100, 255, 0.1);\\n}\\nbody.dark-mode #search-input { color: #e0e0f0; }\\nbody.dark-mode #search-input::placeholder { color: #666; }\\nbody.dark-mode .search-icon, body.dark-mode .mic-icon { color: #6666ff; }\\nbody.dark-mode .quick-link-card {\\n background: rgba(20, 20, 50, 0.8);\\n border: 1px solid rgba(100, 100, 255, 0.15);\\n}\\nbody.dark-mode .quick-link-card:hover {\\n border-color: rgba(100, 100, 255, 0.5);\\n box-shadow: 0 8px 40px rgba(100, 100, 255, 0.2);\\n}\\nbody.dark-mode .platform-card {\\n background: rgba(15, 15, 40, 0.9);\\n border: 1px solid rgba(100, 100, 255, 0.1);\\n}\\nbody.dark-mode .platform-card:hover {\\n border-color: rgba(100, 100, 255, 0.4);\\n box-shadow: 0 10px 50px rgba(100, 100, 255, 0.15);\\n}\\nbody.dark-mode .game-card {\\n background: rgba(20, 20, 50, 0.8);\\n border: 1px solid rgba(100, 100, 255, 0.15);\\n}\\nbody.dark-mode .game-card:hover {\\n border-color: rgba(100, 100, 255, 0.5);\\n box-shadow: 0 8px 40px rgba(100, 100, 255, 0.2);\\n}\\nbody.dark-mode .trending-card {\\n background: rgba(20, 20, 50, 0.8);\\n border: 1px solid rgba(100, 100, 255, 0.1);\\n}\\nbody.dark-mode .trending-card:hover {\\n border-color: rgba(100, 100, 255, 0.4);\\n}\\nbody.dark-mode .modal-content {\\n background: #12122a;\\n border: 1px solid rgba(100, 100, 255, 0.2);\\n color: #e0e0f0;\\n}\\nbody.dark-mode #top-bar { background: rgba(10, 10, 26, 0.8); }\\nbody.dark-mode #footer { color: #555; }\\n\\n/* ========== LIGHT MODE ========== */\\nbody.light-mode {\\n background: #f5f5ff;\\n color: #222;\\n}\\nbody.light-mode #ui-layer { color: #222; }\\nbody.light-mode .section-title { color: #4040cc; }\\nbody.light-mode #search-bar {\\n background: #fff;\\n border: 1px solid #ddd;\\n box-shadow: 0 4px 20px rgba(0,0,0,0.08);\\n}\\nbody.light-mode #search-bar:focus-within {\\n border-color: #4040cc;\\n box-shadow: 0 4px 30px rgba(64, 64, 204, 0.15);\\n}\\nbody.light-mode #search-input { color: #222; }\\nbody.light-mode #search-input::placeholder { color: #999; }\\nbody.light-mode .search-icon, body.light-mode .mic-icon { color: #4040cc; }\\nbody.light-mode .quick-link-card {\\n background: #fff;\\n border: 1px solid #e0e0e0;\\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\\n}\\nbody.light-mode .quick-link-card:hover {\\n border-color: #4040cc;\\n box-shadow: 0 6px 25px rgba(64,64,204,0.12);\\n}\\nbody.light-mode .platform-card {\\n background: #fff;\\n border: 1px solid #e0e0e0;\\n}\\nbody.light-mode .platform-card:hover {\\n border-color: #4040cc;\\n box-shadow: 0 8px 30px rgba(64,64,204,0.1);\\n}\\nbody.light-mode .game-card {\\n background: #fff;\\n border: 1px solid #e0e0e0;\\n}\\nbody.light-mode .game-card:hover {\\n border-color: #4040cc;\\n box-shadow: 0 6px 25px rgba(64,64,204,0.12);\\n}\\nbody.light-mode .trending-card {\\n background: #fff;\\n border: 1px solid #e0e0e0;\\n}\\nbody.light-mode .trending-card:hover { border-color: #4040cc; }\\nbody.light-mode .modal-content {\\n background: #fff;\\n border: 1px solid #ddd;\\n color: #222;\\n}\\nbody.light-mode #top-bar { background: rgba(245,245,255,0.9); }\\nbody.light-mode #footer { color: #999; }\\nbody.light-mode .platform-tag { background: rgba(64,64,204,0.1); color: #4040cc; }\\nbody.light-mode .modal-close { color: #666; }\\nbody.light-mode .modal-close:hover { color: #222; background: rgba(0,0,0,0.05); }\\n\\n/* ========== BACKGROUNDS ========== */\\nbody.bg-gradient1 { background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a1a2e 100%) !important; }\\nbody.bg-gradient2 { background: linear-gradient(135deg, #0a1628 0%, #0a2540 50%, #0a3a5c 100%) !important; }\\nbody.bg-gradient3 { background: linear-gradient(135deg, #1a0a0a 0%, #2e1a0a 50%, #3c2a0a 100%) !important; }\\nbody.bg-gradient4 { background: linear-gradient(135deg, #0a1a0a 0%, #0a2e1a 50%, #0a401a 100%) !important; }\\n\\n/* ========== CONTAINER ========== */\\n#gameContainer {\\n position: relative;\\n width: 100%;\\n min-height: 100vh;\\n}\\n#gameCanvas { display: none; }\\n#ui-layer {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n pointer-events: auto;\\n overflow-y: auto;\\n}\\n\\n/* ========== TOP BAR ========== */\\n#top-bar {\\n position: fixed;\\n top: 0;\\n left: 0;\\n right: 0;\\n z-index: 100;\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n padding: 12px 30px;\\n backdrop-filter: blur(20px);\\n border-bottom: 1px solid rgba(100,100,255,0.1);\\n}\\n#datetime-widget { text-align: left; }\\n#greeting {\\n font-size: 18px;\\n font-weight: 600;\\n margin-bottom: 2px;\\n}\\n#datetime {\\n font-size: 13px;\\n opacity: 0.6;\\n}\\n#top-right-controls {\\n display: flex;\\n align-items: center;\\n gap: 12px;\\n}\\n#weather-widget {\\n display: flex;\\n align-items: center;\\n gap: 6px;\\n font-size: 14px;\\n padding: 6px 14px;\\n border-radius: 20px;\\n background: rgba(100,100,255,0.08);\\n}\\n#weather-icon { font-size: 20px; }\\n#theme-toggle, #settings-btn {\\n width: 40px;\\n height: 40px;\\n border-radius: 50%;\\n border: 1px solid rgba(100,100,255,0.2);\\n background: rgba(100,100,255,0.08);\\n color: inherit;\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 16px;\\n transition: all 0.3s ease;\\n}\\n#theme-toggle:hover, #settings-btn:hover {\\n background: rgba(100,100,255,0.2);\\n border-color: rgba(100,100,255,0.5);\\n transform: rotate(30deg);\\n}\\n\\n/* ========== MAIN CONTENT ========== */\\n#main-content {\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 90px 20px 40px;\\n}\\n\\n/* ========== LOGO ========== */\\n#logo {\\n text-align: center;\\n margin: 30px 0 20px;\\n font-size: 64px;\\n font-weight: 800;\\n letter-spacing: -2px;\\n user-select: none;\\n}\\n.logo-game {\\n background: linear-gradient(135deg, #6666ff, #aa66ff);\\n -webkit-background-clip: text;\\n -webkit-text-fill-color: transparent;\\n background-clip: text;\\n}\\n.logo-hub {\\n background: linear-gradient(135deg, #ff6666, #ffaa66);\\n -webkit-background-clip: text;\\n -webkit-text-fill-color: transparent;\\n background-clip: text;\\n}\\n\\n/* ========== SEARCH BAR ========== */\\n#search-container {\\n display: flex;\\n justify-content: center;\\n margin: 25px 0 40px;\\n}\\n#search-bar {\\n display: flex;\\n align-items: center;\\n width: 100%;\\n max-width: 680px;\\n padding: 14px 22px;\\n border-radius: 50px;\\n transition: all 0.3s ease;\\n gap: 12px;\\n}\\n#search-input {\\n flex: 1;\\n background: none;\\n border: none;\\n outline: none;\\n font-size: 16px;\\n font-family: inherit;\\n}\\n.search-icon, .mic-icon {\\n font-size: 18px;\\n cursor: pointer;\\n transition: opacity 0.2s;\\n}\\n.mic-icon:hover { opacity: 0.7; }\\n\\n/* ========== SECTION TITLES ========== */\\n.section-title {\\n font-size: 22px;\\n font-weight: 700;\\n margin-bottom: 20px;\\n letter-spacing: 0.5px;\\n}\\n\\n/* ========== QUICK LAUNCH ========== */\\n#quick-launch { margin-bottom: 50px; }\\n#quick-launch-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\\n gap: 16px;\\n}\\n.quick-link-card {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n padding: 20px 10px;\\n border-radius: 16px;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n text-decoration: none;\\n color: inherit;\\n gap: 10px;\\n}\\n.quick-link-card:hover {\\n transform: translateY(-6px);\\n}\\n.quick-link-icon {\\n width: 52px;\\n height: 52px;\\n border-radius: 14px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 24px;\\n color: #fff;\\n transition: transform 0.3s ease;\\n}\\n.quick-link-card:hover .quick-link-icon {\\n transform: scale(1.15);\\n}\\n.quick-link-label {\\n font-size: 13px;\\n font-weight: 600;\\n text-align: center;\\n}\\n\\n/* ========== PLATFORMS ========== */\\n#featured-platforms { margin-bottom: 50px; }\\n#platforms-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\\n gap: 20px;\\n}\\n.platform-card {\\n padding: 24px;\\n border-radius: 20px;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n position: relative;\\n overflow: hidden;\\n}\\n.platform-card:hover {\\n transform: translateY(-4px);\\n}\\n.platform-card-header {\\n display: flex;\\n align-items: center;\\n gap: 14px;\\n margin-bottom: 14px;\\n}\\n.platform-icon-large {\\n width: 56px;\\n height: 56px;\\n border-radius: 16px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 26px;\\n color: #fff;\\n}\\n.platform-card-title {\\n font-size: 20px;\\n font-weight: 700;\\n}\\n.platform-card-subtitle {\\n font-size: 12px;\\n opacity: 0.6;\\n margin-top: 2px;\\n}\\n.platform-card-desc {\\n font-size: 14px;\\n line-height: 1.6;\\n opacity: 0.8;\\n margin-bottom: 16px;\\n display: -webkit-box;\\n -webkit-line-clamp: 3;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n}\\n.platform-tags {\\n display: flex;\\n flex-wrap: wrap;\\n gap: 6px;\\n margin-bottom: 16px;\\n}\\n.platform-tag {\\n padding: 4px 10px;\\n border-radius: 20px;\\n font-size: 11px;\\n font-weight: 600;\\n background: rgba(100,100,255,0.15);\\n color: #aaaaff;\\n}\\n.platform-card-actions {\\n display: flex;\\n gap: 8px;\\n flex-wrap: wrap;\\n}\\n.platform-btn {\\n padding: 8px 18px;\\n border-radius: 20px;\\n border: none;\\n font-size: 13px;\\n font-weight: 600;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n color: #fff;\\n}\\n.platform-btn:hover {\\n transform: scale(1.05);\\n filter: brightness(1.15);\\n}\\n.platform-btn-secondary {\\n background: rgba(100,100,255,0.15);\\n color: #aaaaff;\\n}\\n.platform-btn-secondary:hover {\\n background: rgba(100,100,255,0.25);\\n}\\n\\n/* ========== QUICK GAMES ========== */\\n#quick-games { margin-bottom: 50px; }\\n#games-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\\n gap: 16px;\\n}\\n.game-card {\\n padding: 24px;\\n border-radius: 18px;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n text-align: center;\\n}\\n.game-card:hover {\\n transform: translateY(-6px);\\n}\\n.game-card-icon {\\n font-size: 48px;\\n margin-bottom: 12px;\\n}\\n.game-card-title {\\n font-size: 18px;\\n font-weight: 700;\\n margin-bottom: 6px;\\n}\\n.game-card-desc {\\n font-size: 13px;\\n opacity: 0.6;\\n}\\n.play-btn {\\n margin-top: 14px;\\n padding: 8px 24px;\\n border-radius: 20px;\\n border: none;\\n background: linear-gradient(135deg, #6666ff, #aa66ff);\\n color: #fff;\\n font-size: 14px;\\n font-weight: 600;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n}\\n.play-btn:hover {\\n transform: scale(1.08);\\n box-shadow: 0 4px 20px rgba(100,100,255,0.3);\\n}\\n\\n/* ========== TRENDING ========== */\\n#trending-section { margin-bottom: 50px; }\\n#trending-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\\n gap: 16px;\\n}\\n.trending-card {\\n padding: 18px;\\n border-radius: 16px;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n display: flex;\\n gap: 14px;\\n align-items: center;\\n text-decoration: none;\\n color: inherit;\\n}\\n.trending-card:hover {\\n transform: translateY(-3px);\\n}\\n.trending-thumb {\\n width: 100px;\\n height: 60px;\\n border-radius: 10px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 28px;\\n flex-shrink: 0;\\n}\\n.trending-info { flex: 1; }\\n.trending-title {\\n font-size: 14px;\\n font-weight: 600;\\n margin-bottom: 4px;\\n line-height: 1.3;\\n}\\n.trending-meta {\\n font-size: 12px;\\n opacity: 0.5;\\n}\\n\\n/* ========== FOOTER ========== */\\n#footer {\\n text-align: center;\\n padding: 30px 0;\\n font-size: 13px;\\n}\\n\\n/* ========== MODALS ========== */\\n.modal-overlay {\\n position: fixed;\\n top: 0;\\n left: 0;\\n right: 0;\\n bottom: 0;\\n background: rgba(0,0,0,0.7);\\n backdrop-filter: blur(8px);\\n z-index: 1000;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 20px;\\n overflow-y: auto;\\n}\\n.modal-overlay.hidden { display: none; }\\n.modal-content {\\n width: 100%;\\n max-width: 700px;\\n max-height: 90vh;\\n overflow-y: auto;\\n border-radius: 24px;\\n padding: 30px;\\n position: relative;\\n animation: modalIn 0.3s ease;\\n}\\n@keyframes modalIn {\\n from { opacity: 0; transform: scale(0.92) translateY(20px); }\\n to { opacity: 1; transform: scale(1) translateY(0); }\\n}\\n.modal-header {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-bottom: 20px;\\n}\\n.modal-header h2 {\\n font-size: 24px;\\n font-weight: 700;\\n}\\n.modal-close {\\n width: 36px;\\n height: 36px;\\n border-radius: 50%;\\n border: none;\\n background: rgba(255,255,255,0.1);\\n color: #aaa;\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 18px;\\n transition: all 0.2s;\\n}\\n.modal-close:hover {\\n background: rgba(255,255,255,0.2);\\n color: #fff;\\n}\\n\\n/* Settings Modal */\\n.settings-body { display: flex; flex-direction: column; gap: 16px; }\\n.setting-row {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n padding: 12px 0;\\n border-bottom: 1px solid rgba(100,100,255,0.1);\\n font-size: 15px;\\n}\\n.setting-row select {\\n padding: 8px 14px;\\n border-radius: 10px;\\n border: 1px solid rgba(100,100,255,0.2);\\n background: rgba(100,100,255,0.08);\\n color: inherit;\\n font-size: 14px;\\n cursor: pointer;\\n outline: none;\\n}\\n.setting-row select:focus {\\n border-color: rgba(100,100,255,0.5);\\n}\\n\\n/* Platform Modal */\\n.platform-modal-content { max-width: 800px; }\\n.platform-detail-section { margin-bottom: 20px; }\\n.platform-detail-section h3 {\\n font-size: 18px;\\n font-weight: 700;\\n margin-bottom: 10px;\\n color: #8888ff;\\n}\\n.platform-detail-section p {\\n font-size: 15px;\\n line-height: 1.75;\\n opacity: 0.85;\\n}\\n.platform-detail-features {\\n display: flex;\\n flex-wrap: wrap;\\n gap: 8px;\\n margin-top: 12px;\\n}\\n.platform-detail-features span {\\n padding: 6px 14px;\\n border-radius: 20px;\\n font-size: 12px;\\n font-weight: 600;\\n background: rgba(100,100,255,0.12);\\n color: #aaaaff;\\n}\\n.platform-detail-actions {\\n display: flex;\\n gap: 10px;\\n flex-wrap: wrap;\\n margin-top: 20px;\\n}\\n\\n/* Game Modal */\\n.game-modal-content {\\n max-width: 550px;\\n padding: 24px;\\n}\\n#game-modal-body {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n}\\n\\n/* ========== TIC TAC TOE ========== */\\n.ttt-board {\\n display: grid;\\n grid-template-columns: repeat(3, 1fr);\\n gap: 8px;\\n margin: 16px 0;\\n}\\n.ttt-cell {\\n width: 90px;\\n height: 90px;\\n border-radius: 14px;\\n border: 2px solid rgba(100,100,255,0.2);\\n background: rgba(100,100,255,0.05);\\n font-size: 36px;\\n font-weight: 800;\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: all 0.2s;\\n color: inherit;\\n}\\n.ttt-cell:hover {\\n background: rgba(100,100,255,0.12);\\n border-color: rgba(100,100,255,0.4);\\n}\\n.ttt-cell.x-cell { color: #6666ff; }\\n.ttt-cell.o-cell { color: #ff6666; }\\n.ttt-status {\\n font-size: 18px;\\n font-weight: 600;\\n margin-bottom: 10px;\\n min-height: 28px;\\n}\\n.ttt-reset {\\n padding: 10px 28px;\\n border-radius: 20px;\\n border: none;\\n background: linear-gradient(135deg, #6666ff, #aa66ff);\\n color: #fff;\\n font-size: 14px;\\n font-weight: 600;\\n cursor: pointer;\\n transition: all 0.3s;\\n margin-top: 10px;\\n}\\n.ttt-reset:hover {\\n transform: scale(1.05);\\n box-shadow: 0 4px 20px rgba(100,100,255,0.3);\\n}\\n\\n/* ========== SNAKE GAME ========== */\\n.snake-container { text-align: center; }\\n.snake-canvas {\\n border-radius: 14px;\\n border: 2px solid rgba(100,100,255,0.2);\\n margin: 10px 0;\\n display: block;\\n}\\n.snake-score {\\n font-size: 18px;\\n font-weight: 600;\\n margin-bottom: 8px;\\n}\\n.snake-instructions {\\n font-size: 13px;\\n opacity: 0.6;\\n margin-bottom: 8px;\\n}\\n.snake-btn {\\n padding: 10px 28px;\\n border-radius: 20px;\\n border: none;\\n background: linear-gradient(135deg, #66ff66, #66ffaa);\\n color: #111;\\n font-size: 14px;\\n font-weight: 600;\\n cursor: pointer;\\n transition: all 0.3s;\\n margin: 4px;\\n}\\n.snake-btn:hover {\\n transform: scale(1.05);\\n box-shadow: 0 4px 20px rgba(100,255,100,0.3);\\n}\\n\\n/* ========== 2048 GAME ========== */\\n.game2048-container { text-align: center; }\\n.game2048-score {\\n font-size: 18px;\\n font-weight: 600;\\n margin-bottom: 10px;\\n}\\n.game2048-board {\\n display: grid;\\n grid-template-columns: repeat(4, 1fr);\\n gap: 8px;\\n margin: 10px auto;\\n max-width: 340px;\\n padding: 8px;\\n border-radius: 14px;\\n background: rgba(100,100,255,0.05);\\n}\\n.game2048-tile {\\n width: 75px;\\n height: 75px;\\n border-radius: 12px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 22px;\\n font-weight: 800;\\n transition: all 0.15s;\\n background: rgba(100,100,255,0.08);\\n color: inherit;\\n}\\n.game2048-instructions {\\n font-size: 13px;\\n opacity: 0.6;\\n margin: 8px 0;\\n}\\n.game2048-btn {\\n padding: 10px 28px;\\n border-radius: 20px;\\n border: none;\\n background: linear-gradient(135deg, #ffaa66, #ff6666);\\n color: #fff;\\n font-size: 14px;\\n font-weight: 600;\\n cursor: pointer;\\n transition: all 0.3s;\\n margin-top: 8px;\\n}\\n.game2048-btn:hover {\\n transform: scale(1.05);\\n box-shadow: 0 4px 20px rgba(255,100,100,0.3);\\n}\\n\\n/* ========== RESPONSIVE ========== */\\n@media (max-width: 768px) {\\n #logo { font-size: 42px; }\\n #search-bar { padding: 12px 18px; }\\n #quick-launch-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }\\n #platforms-grid { grid-template-columns: 1fr; }\\n #games-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }\\n #trending-grid { grid-template-columns: 1fr; }\\n #top-bar { padding: 10px 15px; flex-wrap: wrap; gap: 8px; }\\n .ttt-cell { width: 70px; height: 70px; font-size: 28px; }\\n .game2048-tile { width: 60px; height: 60px; font-size: 18px; }\\n .modal-content { padding: 20px; }\\n}\\n@media (max-width: 480px) {\\n #logo { font-size: 32px; }\\n #greeting { font-size: 14px; }\\n .quick-link-icon { width: 42px; height: 42px; font-size: 20px; }\\n .ttt-cell { width: 60px; height: 60px; font-size: 24px; }\\n .game2048-tile { width: 50px; height: 50px; font-size: 15px; }\\n}\\n\\n/* ========== SCROLLBAR ========== */\\n::-webkit-scrollbar { width: 8px; }\\n::-webkit-scrollbar-track { background: transparent; }\\n::-webkit-scrollbar-thumb { background: rgba(100,100,255,0.2); border-radius: 4px; }\\n::-webkit-scrollbar-thumb:hover { background: rgba(100,100,255,0.4); }\\n\\n/* ========== MOBILE DIRECTION BUTTONS ========== */\\n.snake-mobile-controls {\\n display: none;\\n flex-direction: column;\\n align-items: center;\\n gap: 4px;\\n margin-top: 8px;\\n}\\n.snake-mobile-row {\\n display: flex;\\n gap: 4px;\\n}\\n.snake-dir-btn {\\n width: 52px;\\n height: 52px;\\n border-radius: 12px;\\n border: 1px solid rgba(100,100,255,0.3);\\n background: rgba(100,100,255,0.1);\\n color: inherit;\\n font-size: 22px;\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: all 0.2s;\\n}\\n.snake-dir-btn:hover, .snake-dir-btn:active {\\n background: rgba(100,100,255,0.25);\\n}\\n@media (max-width: 768px) {\\n .snake-mobile-controls { display: flex; }\\n}\\n\\n.game2048-mobile-controls {\\n display: none;\\n flex-direction: column;\\n align-items: center;\\n gap: 4px;\\n margin-top: 8px;\\n}\\n.game2048-mobile-row {\\n display: flex;\\n gap: 4px;\\n}\\n.game2048-dir-btn {\\n width: 52px;\\n height: 52px;\\n border-radius: 12px;\\n border: 1px solid rgba(100,100,255,0.3);\\n background: rgba(100,100,255,0.1);\\n color: inherit;\\n font-size: 22px;\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: all 0.2s;\\n}\\n.game2048-dir-btn:hover, .game2048-dir-btn:active {\\n background: rgba(100,100,255,0.25);\\n}\\n@media (max-width: 768px) {\\n .game2048-mobile-controls { display: flex; }\\n}\"\n },\n {\n \"name\": \"GameObject.js\",\n \"content\": \"// Base class for all game objects (required by architecture)\\nclass GameObject {\\n constructor(x, y, width, height) {\\n this.name = this.constructor.name;\\n this.x = x || 0;\\n this.y = y || 0;\\n this.width = width || 0;\\n this.height = height || 0;\\n }\\n\\n update(dt) { }\\n draw(ctx) { }\\n\\n getBounds() {\\n return { x: this.x, y: this.y, width: this.width, height: this.height };\\n }\\n}\"\n },\n {\n \"name\": \"TicTacToe.js\",\n \"content\": \"// TicTacToe mini-game class\\nclass TicTacToe extends GameObject {\\n constructor() {\\n super(0, 0, 300, 300);\\n this.name = 'TicTacToe';\\n this.board = Array(9).fill('');\\n this.currentPlayer = 'X';\\n this.winner = null;\\n this.gameOver = false;\\n }\\n\\n reset() {\\n this.board = Array(9).fill('');\\n this.currentPlayer = 'X';\\n this.winner = null;\\n this.gameOver = false;\\n }\\n\\n makeMove(index) {\\n if (this.board[index] !== '' || this.gameOver) return false;\\n this.board[index] = this.currentPlayer;\\n this.checkWinner();\\n if (!this.gameOver) {\\n this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X';\\n // AI move\\n if (this.currentPlayer === 'O' && !this.gameOver) {\\n this.aiMove();\\n }\\n }\\n return true;\\n }\\n\\n aiMove() {\\n const empty = [];\\n this.board.forEach((cell, i) => { if (cell === '') empty.push(i); });\\n if (empty.length === 0) return;\\n // Simple AI: try to win, then block, then random\\n let move = this.findWinningMove('O');\\n if (move === -1) move = this.findWinningMove('X');\\n if (move === -1) {\\n // Prefer center, then corners, then edges\\n const preferred = [4, 0, 2, 6, 8, 1, 3, 5, 7];\\n for (const p of preferred) {\\n if (this.board[p] === '') { move = p; break; }\\n }\\n }\\n if (move !== -1) {\\n this.board[move] = 'O';\\n this.checkWinner();\\n if (!this.gameOver) this.currentPlayer = 'X';\\n }\\n }\\n\\n findWinningMove(player) {\\n const lines = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];\\n for (const [a, b, c] of lines) {\\n const cells = [this.board[a], this.board[b], this.board[c]];\\n if (cells.filter(v => v === player).length === 2 && cells.includes('')) {\\n return [a, b, c][cells.indexOf('')];\\n }\\n }\\n return -1;\\n }\\n\\n checkWinner() {\\n const lines = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];\\n for (const [a, b, c] of lines) {\\n if (this.board[a] && this.board[a] === this.board[b] && this.board[a] === this.board[c]) {\\n this.winner = this.board[a];\\n this.gameOver = true;\\n return;\\n }\\n }\\n if (!this.board.includes('')) {\\n this.gameOver = true;\\n this.winner = null;\\n }\\n }\\n\\n getStatusText() {\\n if (this.gameOver) {\\n return this.winner ? (this.winner === 'X' ? '🎉 You win!' : '🤖 AI wins!') : \\\"🤝 It's a draw!\\\";\\n }\\n return this.currentPlayer === 'X' ? 'Your turn (X)' : 'AI thinking...';\\n }\\n\\n // Render the game into a container element\\n render(container) {\\n container.innerHTML = '';\\n const status = document.createElement('div');\\n status.className = 'ttt-status';\\n status.textContent = this.getStatusText();\\n container.appendChild(status);\\n\\n const board = document.createElement('div');\\n board.className = 'ttt-board';\\n this.board.forEach((cell, i) => {\\n const cellEl = document.createElement('div');\\n cellEl.className = 'ttt-cell' + (cell === 'X' ? ' x-cell' : cell === 'O' ? ' o-cell' : '');\\n cellEl.textContent = cell;\\n cellEl.addEventListener('click', () => {\\n if (this.makeMove(i)) this.render(container);\\n });\\n board.appendChild(cellEl);\\n });\\n container.appendChild(board);\\n\\n const resetBtn = document.createElement('button');\\n resetBtn.className = 'ttt-reset';\\n resetBtn.textContent = 'New Game';\\n resetBtn.addEventListener('click', () => {\\n this.reset();\\n this.render(container);\\n });\\n container.appendChild(resetBtn);\\n }\\n}\"\n },\n {\n \"name\": \"SnakeGame.js\",\n \"content\": \"// Snake mini-game class\\nclass SnakeGame extends GameObject {\\n constructor() {\\n super(0, 0, 400, 400);\\n this.name = 'SnakeGame';\\n this.gridSize = 20;\\n this.tileCount = 20;\\n this.canvasSize = this.gridSize * this.tileCount;\\n this.snake = [{ x: 10, y: 10 }];\\n this.food = { x: 15, y: 15 };\\n this.dx = 0;\\n this.dy = 0;\\n this.score = 0;\\n this.gameOver = false;\\n this.started = false;\\n this.intervalId = null;\\n this.canvas = null;\\n this.ctx = null;\\n this.boundKeyHandler = null;\\n }\\n\\n reset() {\\n this.snake = [{ x: 10, y: 10 }];\\n this.food = { x: 15, y: 15 };\\n this.dx = 0;\\n this.dy = 0;\\n this.score = 0;\\n this.gameOver = false;\\n this.started = false;\\n if (this.intervalId) { clearInterval(this.intervalId); this.intervalId = null; }\\n }\\n\\n placeFood() {\\n let newFood;\\n do {\\n newFood = {\\n x: Math.floor(Math.random() * this.tileCount),\\n y: Math.floor(Math.random() * this.tileCount)\\n };\\n } while (this.snake.some(s => s.x === newFood.x && s.y === newFood.y));\\n this.food = newFood;\\n }\\n\\n tick() {\\n if (this.gameOver || !this.started) return;\\n const head = { x: this.snake[0].x + this.dx, y: this.snake[0].y + this.dy };\\n\\n // Wall collision\\n if (head.x < 0 || head.x >= this.tileCount || head.y < 0 || head.y >= this.tileCount) {\\n this.gameOver = true;\\n this.drawCanvas();\\n return;\\n }\\n // Self collision\\n if (this.snake.some(s => s.x === head.x && s.y === head.y)) {\\n this.gameOver = true;\\n this.drawCanvas();\\n return;\\n }\\n\\n this.snake.unshift(head);\\n if (head.x === this.food.x && head.y === this.food.y) {\\n this.score++;\\n this.placeFood();\\n } else {\\n this.snake.pop();\\n }\\n this.drawCanvas();\\n }\\n\\n drawCanvas() {\\n if (!this.ctx) return;\\n const ctx = this.ctx;\\n const gs = this.gridSize;\\n // Background\\n ctx.fillStyle = 'rgba(10, 10, 30, 0.95)';\\n ctx.fillRect(0, 0, this.canvasSize, this.canvasSize);\\n\\n // Grid lines (subtle)\\n ctx.strokeStyle = 'rgba(100, 100, 255, 0.04)';\\n ctx.lineWidth = 1;\\n for (let i = 0; i <= this.tileCount; i++) {\\n ctx.beginPath();\\n ctx.moveTo(i * gs, 0);\\n ctx.lineTo(i * gs, this.canvasSize);\\n ctx.stroke();\\n ctx.beginPath();\\n ctx.moveTo(0, i * gs);\\n ctx.lineTo(this.canvasSize, i * gs);\\n ctx.stroke();\\n }\\n\\n // Food\\n ctx.fillStyle = '#ff4444';\\n ctx.shadowColor = '#ff4444';\\n ctx.shadowBlur = 15;\\n ctx.beginPath();\\n ctx.arc(this.food.x * gs + gs / 2, this.food.y * gs + gs / 2, gs / 2.5, 0, Math.PI * 2);\\n ctx.fill();\\n ctx.shadowBlur = 0;\\n\\n // Snake\\n this.snake.forEach((seg, i) => {\\n const brightness = 1 - (i / this.snake.length) * 0.5;\\n ctx.fillStyle = `rgba(100, 255, 100, ${brightness})`;\\n if (i === 0) {\\n ctx.shadowColor = '#66ff66';\\n ctx.shadowBlur = 10;\\n }\\n ctx.beginPath();\\n ctx.roundRect(seg.x * gs + 1, seg.y * gs + 1, gs - 2, gs - 2, 4);\\n ctx.fill();\\n ctx.shadowBlur = 0;\\n });\\n\\n // Score\\n ctx.fillStyle = '#fff';\\n ctx.font = '14px sans-serif';\\n ctx.textAlign = 'left';\\n ctx.fillText('Score: ' + this.score, 8, 18);\\n\\n if (this.gameOver) {\\n ctx.fillStyle = 'rgba(0,0,0,0.6)';\\n ctx.fillRect(0, 0, this.canvasSize, this.canvasSize);\\n ctx.fillStyle = '#ff6666';\\n ctx.font = 'bold 32px sans-serif';\\n ctx.textAlign = 'center';\\n ctx.fillText('Game Over!', this.canvasSize / 2, this.canvasSize / 2 - 10);\\n ctx.fillStyle = '#fff';\\n ctx.font = '16px sans-serif';\\n ctx.fillText('Score: ' + this.score, this.canvasSize / 2, this.canvasSize / 2 + 20);\\n }\\n\\n if (!this.started && !this.gameOver) {\\n ctx.fillStyle = 'rgba(0,0,0,0.4)';\\n ctx.fillRect(0, 0, this.canvasSize, this.canvasSize);\\n ctx.fillStyle = '#aaaaff';\\n ctx.font = 'bold 20px sans-serif';\\n ctx.textAlign = 'center';\\n ctx.fillText('Press Arrow Key or Tap to Start', this.canvasSize / 2, this.canvasSize / 2);\\n }\\n\\n // Update external score display\\n if (this.scoreEl) this.scoreEl.textContent = 'Score: ' + this.score;\\n }\\n\\n changeDirection(dir) {\\n if (this.gameOver) return;\\n if (!this.started) {\\n this.started = true;\\n this.intervalId = setInterval(() => this.tick(), 120);\\n }\\n switch (dir) {\\n case 'up': if (this.dy !== 1) { this.dx = 0; this.dy = -1; } break;\\n case 'down': if (this.dy !== -1) { this.dx = 0; this.dy = 1; } break;\\n case 'left': if (this.dx !== 1) { this.dx = -1; this.dy = 0; } break;\\n case 'right': if (this.dx !== -1) { this.dx = 1; this.dy = 0; } break;\\n }\\n }\\n\\n render(container) {\\n container.innerHTML = '';\\n const wrapper = document.createElement('div');\\n wrapper.className = 'snake-container';\\n\\n const scoreEl = document.createElement('div');\\n scoreEl.className = 'snake-score';\\n scoreEl.textContent = 'Score: 0';\\n this.scoreEl = scoreEl;\\n wrapper.appendChild(scoreEl);\\n\\n const canvas = document.createElement('canvas');\\n canvas.className = 'snake-canvas';\\n canvas.width = this.canvasSize;\\n canvas.height = this.canvasSize;\\n canvas.style.maxWidth = '100%';\\n this.canvas = canvas;\\n this.ctx = canvas.getContext('2d');\\n wrapper.appendChild(canvas);\\n\\n const instructions = document.createElement('div');\\n instructions.className = 'snake-instructions';\\n instructions.textContent = 'Use arrow keys or buttons to move';\\n wrapper.appendChild(instructions);\\n\\n // Mobile controls\\n const mobileControls = document.createElement('div');\\n mobileControls.className = 'snake-mobile-controls';\\n const topRow = document.createElement('div');\\n topRow.className = 'snake-mobile-row';\\n const upBtn = document.createElement('button');\\n upBtn.className = 'snake-dir-btn';\\n upBtn.innerHTML = '↑';\\n upBtn.addEventListener('click', () => this.changeDirection('up'));\\n topRow.appendChild(upBtn);\\n mobileControls.appendChild(topRow);\\n\\n const midRow = document.createElement('div');\\n midRow.className = 'snake-mobile-row';\\n const leftBtn = document.createElement('button');\\n leftBtn.className = 'snake-dir-btn';\\n leftBtn.innerHTML = '←';\\n leftBtn.addEventListener('click', () => this.changeDirection('left'));\\n const downBtn = document.createElement('button');\\n downBtn.className = 'snake-dir-btn';\\n downBtn.innerHTML = '↓';\\n downBtn.addEventListener('click', () => this.changeDirection('down'));\\n const rightBtn = document.createElement('button');\\n rightBtn.className = 'snake-dir-btn';\\n rightBtn.innerHTML = '→';\\n rightBtn.addEventListener('click', () => this.changeDirection('right'));\\n midRow.appendChild(leftBtn);\\n midRow.appendChild(downBtn);\\n midRow.appendChild(rightBtn);\\n mobileControls.appendChild(midRow);\\n wrapper.appendChild(mobileControls);\\n\\n const resetBtn = document.createElement('button');\\n resetBtn.className = 'snake-btn';\\n resetBtn.textContent = 'Restart';\\n resetBtn.addEventListener('click', () => {\\n this.reset();\\n this.drawCanvas();\\n });\\n wrapper.appendChild(resetBtn);\\n\\n container.appendChild(wrapper);\\n\\n // Keyboard handler\\n if (this.boundKeyHandler) document.removeEventListener('keydown', this.boundKeyHandler);\\n this.boundKeyHandler = (e) => {\\n if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.key)) {\\n e.preventDefault();\\n const dir = e.key.replace('Arrow', '').toLowerCase();\\n this.changeDirection(dir);\\n }\\n };\\n document.addEventListener('keydown', this.boundKeyHandler);\\n\\n this.drawCanvas();\\n }\\n\\n destroy() {\\n if (this.intervalId) { clearInterval(this.intervalId); this.intervalId = null; }\\n if (this.boundKeyHandler) {\\n document.removeEventListener('keydown', this.boundKeyHandler);\\n this.boundKeyHandler = null;\\n }\\n }\\n}\"\n },\n {\n \"name\": \"Game2048.js\",\n \"content\": \"// 2048 mini-game class\\nclass Game2048 extends GameObject {\\n constructor() {\\n super(0, 0, 340, 340);\\n this.name = 'Game2048';\\n this.size = 4;\\n this.grid = [];\\n this.score = 0;\\n this.gameOver = false;\\n this.won = false;\\n this.boundKeyHandler = null;\\n this.initGrid();\\n }\\n\\n initGrid() {\\n this.grid = Array.from({ length: this.size }, () => Array(this.size).fill(0));\\n this.score = 0;\\n this.gameOver = false;\\n this.won = false;\\n this.addRandomTile();\\n this.addRandomTile();\\n }\\n\\n reset() {\\n this.initGrid();\\n }\\n\\n addRandomTile() {\\n const empty = [];\\n for (let r = 0; r < this.size; r++) {\\n for (let c = 0; c < this.size; c++) {\\n if (this.grid[r][c] === 0) empty.push({ r, c });\\n }\\n }\\n if (empty.length === 0) return;\\n const { r, c } = empty[Math.floor(Math.random() * empty.length)];\\n this.grid[r][c] = Math.random() < 0.9 ? 2 : 4;\\n }\\n\\n slide(row) {\\n let arr = row.filter(v => v !== 0);\\n for (let i = 0; i < arr.length - 1; i++) {\\n if (arr[i] === arr[i + 1]) {\\n arr[i] *= 2;\\n this.score += arr[i];\\n if (arr[i] === 2048) this.won = true;\\n arr[i + 1] = 0;\\n }\\n }\\n arr = arr.filter(v => v !== 0);\\n while (arr.length < this.size) arr.push(0);\\n return arr;\\n }\\n\\n move(direction) {\\n if (this.gameOver) return;\\n const prev = JSON.stringify(this.grid);\\n\\n if (direction === 'left') {\\n for (let r = 0; r < this.size; r++) this.grid[r] = this.slide(this.grid[r]);\\n } else if (direction === 'right') {\\n for (let r = 0; r < this.size; r++) this.grid[r] = this.slide(this.grid[r].reverse()).reverse();\\n } else if (direction === 'up') {\\n for (let c = 0; c < this.size; c++) {\\n let col = this.grid.map(row => row[c]);\\n col = this.slide(col);\\n for (let r = 0; r < this.size; r++) this.grid[r][c] = col[r];\\n }\\n } else if (direction === 'down') {\\n for (let c = 0; c < this.size; c++) {\\n let col = this.grid.map(row => row[c]).reverse();\\n col = this.slide(col).reverse();\\n for (let r = 0; r < this.size; r++) this.grid[r][c] = col[r];\\n }\\n }\\n\\n if (JSON.stringify(this.grid) !== prev) {\\n this.addRandomTile();\\n this.checkGameOver();\\n }\\n }\\n\\n checkGameOver() {\\n for (let r = 0; r < this.size; r++) {\\n for (let c = 0; c < this.size; c++) {\\n if (this.grid[r][c] === 0) return;\\n if (c < this.size - 1 && this.grid[r][c] === this.grid[r][c + 1]) return;\\n if (r < this.size - 1 && this.grid[r][c] === this.grid[r + 1][c]) return;\\n }\\n }\\n this.gameOver = true;\\n }\\n\\n getTileColor(value) {\\n const colors = {\\n 0: 'rgba(100,100,255,0.05)',\\n 2: '#1a1a4e',\\n 4: '#1a2a5e',\\n 8: '#2a3a7e',\\n 16: '#3a4a9e',\\n 32: '#4a5abe',\\n 64: '#5a6ade',\\n 128: '#6a7aff',\\n 256: '#7a6aff',\\n 512: '#8a5aff',\\n 1024: '#9a4aff',\\n 2048: '#ffaa00'\\n };\\n return colors[value] || '#aa3aff';\\n }\\n\\n getTileTextColor(value) {\\n return value <= 4 ? 'rgba(200,200,255,0.6)' : '#fff';\\n }\\n\\n render(container) {\\n container.innerHTML = '';\\n const wrapper = document.createElement('div');\\n wrapper.className = 'game2048-container';\\n\\n const scoreEl = document.createElement('div');\\n scoreEl.className = 'game2048-score';\\n scoreEl.textContent = 'Score: ' + this.score;\\n wrapper.appendChild(scoreEl);\\n\\n if (this.won) {\\n const winMsg = document.createElement('div');\\n winMsg.style.cssText = 'color:#ffaa00;font-size:20px;font-weight:700;margin-bottom:8px;';\\n winMsg.textContent = '🎉 You reached 2048!';\\n wrapper.appendChild(winMsg);\\n }\\n if (this.gameOver) {\\n const overMsg = document.createElement('div');\\n overMsg.style.cssText = 'color:#ff6666;font-size:18px;font-weight:700;margin-bottom:8px;';\\n overMsg.textContent = 'Game Over!';\\n wrapper.appendChild(overMsg);\\n }\\n\\n const board = document.createElement('div');\\n board.className = 'game2048-board';\\n for (let r = 0; r < this.size; r++) {\\n for (let c = 0; c < this.size; c++) {\\n const tile = document.createElement('div');\\n tile.className = 'game2048-tile';\\n const val = this.grid[r][c];\\n tile.textContent = val || '';\\n tile.style.background = this.getTileColor(val);\\n tile.style.color = this.getTileTextColor(val);\\n if (val >= 128) {\\n tile.style.boxShadow = `0 0 15px ${this.getTileColor(val)}80`;\\n }\\n board.appendChild(tile);\\n }\\n }\\n wrapper.appendChild(board);\\n\\n const instructions = document.createElement('div');\\n instructions.className = 'game2048-instructions';\\n instructions.textContent = 'Use arrow keys or buttons to slide tiles';\\n wrapper.appendChild(instructions);\\n\\n // Mobile controls\\n const mobileControls = document.createElement('div');\\n mobileControls.className = 'game2048-mobile-controls';\\n const topRow = document.createElement('div');\\n topRow.className = 'game2048-mobile-row';\\n const upBtn = document.createElement('button');\\n upBtn.className = 'game2048-dir-btn';\\n upBtn.innerHTML = '↑';\\n upBtn.addEventListener('click', () => { this.move('up'); this.render(container); });\\n topRow.appendChild(upBtn);\\n mobileControls.appendChild(topRow);\\n\\n const midRow = document.createElement('div');\\n midRow.className = 'game2048-mobile-row';\\n const leftBtn = document.createElement('button');\\n leftBtn.className = 'game2048-dir-btn';\\n leftBtn.innerHTML = '←';\\n leftBtn.addEventListener('click', () => { this.move('left'); this.render(container); });\\n const downBtn = document.createElement('button');\\n downBtn.className = 'game2048-dir-btn';\\n downBtn.innerHTML = '↓';\\n downBtn.addEventListener('click', () => { this.move('down'); this.render(container); });\\n const rightBtn = document.createElement('button');\\n rightBtn.className = 'game2048-dir-btn';\\n rightBtn.innerHTML = '→';\\n rightBtn.addEventListener('click', () => { this.move('right'); this.render(container); });\\n midRow.appendChild(leftBtn);\\n midRow.appendChild(downBtn);\\n midRow.appendChild(rightBtn);\\n mobileControls.appendChild(midRow);\\n wrapper.appendChild(mobileControls);\\n\\n const resetBtn = document.createElement('button');\\n resetBtn.className = 'game2048-btn';\\n resetBtn.textContent = 'New Game';\\n resetBtn.addEventListener('click', () => {\\n this.reset();\\n this.render(container);\\n });\\n wrapper.appendChild(resetBtn);\\n\\n container.appendChild(wrapper);\\n\\n // Keyboard handler\\n if (this.boundKeyHandler) document.removeEventListener('keydown', this.boundKeyHandler);\\n this.boundKeyHandler = (e) => {\\n const dirMap = { ArrowUp: 'up', ArrowDown: 'down', ArrowLeft: 'left', ArrowRight: 'right' };\\n if (dirMap[e.key]) {\\n e.preventDefault();\\n this.move(dirMap[e.key]);\\n this.render(container);\\n }\\n };\\n document.addEventListener('keydown', this.boundKeyHandler);\\n }\\n\\n destroy() {\\n if (this.boundKeyHandler) {\\n document.removeEventListener('keydown', this.boundKeyHandler);\\n this.boundKeyHandler = null;\\n }\\n }\\n}\"\n },\n {\n \"name\": \"Game.js\",\n \"content\": \"// Main Game Controller — Dashboard Application\\nclass Game {\\n constructor(canvas) {\\n this.canvas = canvas;\\n this.ctx = canvas.getContext('2d');\\n this.entities = [];\\n this.scrollX = 0;\\n this.scrollY = 0;\\n this.lastTime = 0;\\n this.currentTheme = 'dark';\\n this.currentBg = 'default';\\n this.activeSnakeGame = null;\\n this.activeGame2048 = null;\\n this.activeTicTacToe = null;\\n }\\n\\n // ========== PLATFORM DATA ==========\\n getPlatformData() {\\n return [\\n {\\n id: 'fortnite',\\n name: 'Fortnite',\\n subtitle: 'Battle Royale • Epic Games',\\n icon: '🎯',\\n color: '#4040cc',\\n tags: ['Battle Royale', 'Building', 'Multiplayer', 'Cross-Platform', 'Live Events'],\\n shortDesc: 'Drop from the Battle Bus into a world of fast-paced combat, building, and survival. Every match is chaos, creativity, and competition.',\\n fullDesc: `Fortnite feels like getting dropped straight into chaos and having to figure everything out in seconds. You start on the Battle Bus, looking down at the map, picking where to land while knowing dozens of other players are doing the exact same thing. The second you hit the ground, it's a scramble—breaking into buildings, grabbing weapons, and listening closely for footsteps because someone could be right behind you.\\\\n\\\\nFights aren't just about aiming—they're fast, messy, and intense. One second you're shooting, the next you're building walls, ramps, and towers to protect yourself or gain height. Good players make it feel like a blur, instantly creating structures while attacking at the same time.\\\\n\\\\nAs the match goes on, the storm closes in, forcing everyone closer together. That's when it gets really tense. Fewer players, smaller space, and every move matters. When you make it to the final circle, your heart's actually racing because one mistake and you're out.\\\\n\\\\nOutside of matches, Fortnite is always changing. New seasons bring different maps, crazy weapons, and live events that feel more like concerts or story moments than just game updates. Plus, all the skins and emotes let you show off your style, whether you're being serious or just messing around.`,\\n features: ['Battle Royale 100-player matches', 'Dynamic building mechanics', 'Seasonal updates & live events', 'Creative mode sandbox', 'Thousands of skins & emotes', 'Cross-platform play'],\\n buttons: [\\n { label: 'Play Now', url: 'https://www.epicgames.com/fortnite', primary: true },\\n { label: 'Latest News', url: 'https://www.epicgames.com/fortnite/news', primary: false },\\n { label: 'Watch Gameplay', url: 'https://www.youtube.com/results?search_query=fortnite+gameplay', primary: false }\\n ]\\n },\\n {\\n id: 'minecraft',\\n name: 'Minecraft',\\n subtitle: 'Sandbox • Mojang Studios',\\n icon: '⛏️',\\n color: '#4a8c3f',\\n tags: ['Sandbox', 'Survival', 'Creative', 'Multiplayer', 'Mods'],\\n shortDesc: 'Spawn into an infinite world with nothing. Punch trees, craft tools, survive the night, and build anything you can imagine.',\\n fullDesc: `Minecraft starts off simple, almost quiet, but quickly becomes something much bigger. You spawn into a wide, open world with nothing but your surroundings. There's no clear direction, no instructions—just you and whatever you decide to do.\\\\n\\\\nThe first few minutes are about survival. You punch trees to collect wood, craft your first tools, and start figuring out how to stay alive. As the sun slowly sets, there's a real sense of urgency. You know that once it gets dark, the world becomes dangerous.\\\\n\\\\nNighttime completely changes the mood. Zombies wander, skeletons shoot arrows from a distance, and creepers can sneak up silently and explode, destroying everything you've built. You're constantly listening, watching, and reacting.\\\\n\\\\nBut once you survive those early nights, the game opens up in a huge way. You can go deep underground into caves, mining for rare materials like iron, gold, and diamonds. Every discovery feels earned because you had to explore and take risks to find it.\\\\n\\\\nAt the same time, Minecraft is one of the most creative games ever. You can build anything you imagine—houses, castles, entire cities, or even working machines. Redstone lets you create complex systems like doors, traps, elevators, or even mini computers inside the game.\\\\n\\\\nThere are also different ways to play. Survival mode keeps the challenge real, while Creative mode removes limits and lets you focus only on building. Multiplayer servers bring in other players, where you can join communities, play minigames, or collaborate on massive projects.`,\\n features: ['Infinite procedural worlds', 'Survival & Creative modes', 'Redstone engineering', 'Thousands of mods', 'Multiplayer servers', 'Cross-platform play'],\\n buttons: [\\n { label: 'Play', url: 'https://www.minecraft.net', primary: true },\\n { label: 'Mods', url: 'https://www.curseforge.com/minecraft', primary: false },\\n { label: 'Servers', url: 'https://www.minecraft.net/en-us/realms', primary: false }\\n ]\\n },\\n {\\n id: 'gta',\\n name: 'GTA',\\n subtitle: 'Open World • Rockstar Games',\\n icon: '🚗',\\n color: '#cc8800',\\n tags: ['Open World', 'Action', 'Online', 'Heists', 'Roleplay', 'Nightclubs'],\\n shortDesc: 'Step into a living, breathing city where anything can happen. Steal cars, run businesses, pull off heists, and own the nightlife.',\\n fullDesc: `GTA feels less like a game and more like stepping into a full, living city where everything is happening at once whether you're involved or not. The moment you spawn in, you're surrounded by moving cars, people walking on sidewalks, distant sirens, and random events that make the world feel alive.\\\\n\\\\nYou can choose how you want to play every time. One moment you might be casually driving through the city, listening to the in-game radio, and the next you're flying down the highway at top speed after stealing a car, with police lights flashing behind you. The freedom is what makes it different—you're not forced into one path.\\\\n\\\\nGTA Online takes everything and multiplies it. Now you're in the same world with real players, and anything can happen. Heists require planning, teamwork, and timing. One mistake can ruin everything, but pulling it off feels like a huge win.\\\\n\\\\nOwning a nightclub doesn't just feel like having a building—it feels like running your own piece of the city's nightlife. Loud music is blasting, lights are flashing in different colors, and NPCs are dancing like it's a real party. You're the owner, managing everything from the DJ lineup to the warehouse operations running quietly in the background.\\\\n\\\\nCustomization is everywhere. You can modify cars down to small details, buy properties, change outfits, and create your own style. Some players take it even further with roleplay servers, where they act out real-life roles like police officers, criminals, or regular citizens, turning the game into something that feels almost real.`,\\n features: ['Massive open world', 'GTA Online multiplayer', 'Heists & missions', 'Nightclub management', 'Vehicle customization', 'Roleplay servers'],\\n buttons: [\\n { label: 'Launch Game', url: 'https://www.rockstargames.com/gta-v', primary: true },\\n { label: 'Online Mode', url: 'https://www.rockstargames.com/GTAOnline', primary: false },\\n { label: 'Rockstar Site', url: 'https://www.rockstargames.com', primary: false }\\n ]\\n },\\n {\\n id: 'youtube',\\n name: 'YouTube',\\n subtitle: 'Video Platform • Google',\\n icon: '▶️',\\n color: '#cc0000',\\n tags: ['Videos', 'Streaming', 'Shorts', 'Gaming', 'Music', 'Creator'],\\n shortDesc: 'An endless stream of content where you can find anything within seconds. One video turns into ten without even realizing it.',\\n fullDesc: `YouTube feels like an endless world of content that's always ready to pull you in. The moment you open it, there's something waiting—videos recommended just for you, based on what you've watched before.\\\\n\\\\nYou might start with a simple idea, like watching a gaming video, but it doesn't stop there. One video leads to another, then another, until suddenly you've gone through a whole chain of content without even noticing how much time passed.\\\\n\\\\nThe platform is built around discovery. The recommendation system constantly suggests new videos, creators, and topics, making it easy to find things you didn't even know you wanted to watch. The \\\"Trending\\\" section shows what's popular right now, while subscriptions keep you connected to your favorite creators.\\\\n\\\\nShorts add a fast, addictive side to YouTube. You can scroll through quick videos instantly, each one grabbing your attention for just a few seconds before moving to the next.\\\\n\\\\nYouTube isn't just for watching—it's also for creating. Anyone can upload videos, edit content, start a channel, and build an audience. There's live streaming too, where creators interact with viewers in real time through chat.\\\\n\\\\nThere's a strong sense of connection. You can like videos, leave comments, share content, and feel part of a community around certain creators or topics.`,\\n features: ['Billions of videos', 'YouTube Shorts', 'Live streaming', 'Subscriptions & notifications', 'Creator monetization', 'Personalized recommendations'],\\n buttons: [\\n { label: 'Open YouTube', url: 'https://www.youtube.com', primary: true },\\n { label: 'Trending', url: 'https://www.youtube.com/feed/trending', primary: false },\\n { label: 'Gaming', url: 'https://www.youtube.com/gaming', primary: false }\\n ]\\n },\\n {\\n id: 'twitch',\\n name: 'Twitch',\\n subtitle: 'Live Streaming • Amazon',\\n icon: '📺',\\n color: '#9146ff',\\n tags: ['Live Streaming', 'Gaming', 'Chat', 'Community', 'Esports'],\\n shortDesc: 'Join live streams where thousands watch at the same time. Real-time chat, interactive moments, and a living community.',\\n fullDesc: `Twitch feels like the place where gaming happens live. When you join a stream, you're not just watching—you're part of it. The chat is flying by, thousands of people reacting at the same time, and the streamer is playing, talking, and interacting with everyone in real time.\\\\n\\\\nThere's an energy to it that's different from watching recorded videos. When something amazing happens in a game, you see the reaction immediately—the streamer, the chat, everyone at once. Those moments create a shared experience that you can't get anywhere else.\\\\n\\\\nFollowing streamers means you build connections. You get to know their style, their humor, their community. It feels like hanging out with someone who shares your interests, and the chat makes it social.\\\\n\\\\nTwitch isn't just about the big streamers either. There are categories for every game, every hobby, and every interest. You can find someone playing your favorite game at any time of day.\\\\n\\\\nSubscriptions and donations let you support the creators you love, and many streamers create unique emotes, alerts, and interactive elements that make their streams feel personal and special.`,\\n features: ['Live streaming platform', 'Real-time chat interaction', 'Thousands of categories', 'Subscriptions & Bits', 'Clips & highlights', 'Esports events'],\\n buttons: [\\n { label: 'Open Twitch', url: 'https://www.twitch.tv', primary: true },\\n { label: 'Browse Games', url: 'https://www.twitch.tv/directory', primary: false },\\n { label: 'Esports', url: 'https://www.twitch.tv/directory/esports', primary: false }\\n ]\\n },\\n {\\n id: 'discord',\\n name: 'Discord',\\n subtitle: 'Communication • Discord Inc.',\\n icon: '💬',\\n color: '#5865F2',\\n tags: ['Voice Chat', 'Servers', 'Communities', 'Gaming', 'Bots', 'Streaming'],\\n shortDesc: 'The digital hangout where all your gaming communities come together. Voice chat, servers, and real connections.',\\n fullDesc: `Discord feels like the behind-the-scenes space where everything comes together. It's where you go to actually talk, plan, and hang out with people instead of just playing or watching.\\\\n\\\\nWhen you join Discord, you enter servers, which are like different communities. Each server can be completely different—some are just for a small group of friends, while others are massive communities with thousands of people.\\\\n\\\\nInside each server, everything is organized into channels. Some are for general chatting, others for specific topics like games, announcements, or memes. It keeps everything structured so conversations don't get messy.\\\\n\\\\nVoice chat is where Discord really stands out. You can jump into a call instantly and talk to friends while playing games. It feels natural, like you're all in the same room, reacting to things in real time.\\\\n\\\\nThere's also a lot of customization. Servers can have roles, which give people different permissions or identities. Moderators keep things organized, and bots add extra features like music, games, or automated responses.\\\\n\\\\nFor gamers, Discord becomes essential. You can coordinate strategies, share screens, stream gameplay, or just chill and talk. It turns gaming from something solo into something social.`,\\n features: ['Voice & video chat', 'Organized server channels', 'Custom roles & permissions', 'Bot integrations', 'Screen sharing & streaming', 'Community building tools'],\\n buttons: [\\n { label: 'Open Discord', url: 'https://discord.com/app', primary: true },\\n { label: 'Download', url: 'https://discord.com/download', primary: false },\\n { label: 'Discover Servers', url: 'https://discord.com/servers', primary: false }\\n ]\\n }\\n ];\\n }\\n\\n // ========== QUICK LINKS DATA ==========\\n getQuickLinks() {\\n return [\\n { name: 'YouTube', icon: 'fab fa-youtube', color: '#FF0000', url: 'https://youtube.com' },\\n { name: 'Twitch', icon: 'fab fa-twitch', color: '#9146ff', url: 'https://twitch.tv' },\\n { name: 'Discord', icon: 'fab fa-discord', color: '#5865F2', url: 'https://discord.com' },\\n { name: 'Gmail', icon: 'fas fa-envelope', color: '#EA4335', url: 'https://mail.google.com' },\\n { name: 'Maps', icon: 'fas fa-map-marked-alt', color: '#34A853', url: 'https://maps.google.com' },\\n { name: 'Spotify', icon: 'fab fa-spotify', color: '#1DB954', url: 'https://open.spotify.com' },\\n { name: 'Netflix', icon: 'fas fa-film', color: '#E50914', url: 'https://netflix.com' },\\n { name: 'Fortnite', icon: 'fas fa-crosshairs', color: '#4040cc', url: 'https://www.epicgames.com/fortnite' },\\n { name: 'Minecraft', icon: 'fas fa-cube', color: '#4a8c3f', url: 'https://www.minecraft.net' }\\n ];\\n }\\n\\n // ========== TRENDING DATA ==========\\n getTrendingData() {\\n return [\\n { title: 'Top 10 Fortnite Moments This Season', meta: '2.1M views • 3 days ago', thumb: '🎯', color: '#4040cc', url: 'https://www.youtube.com/results?search_query=fortnite+best+moments' },\\n { title: 'Minecraft Mega Build Timelapse', meta: '890K views • 1 week ago', thumb: '⛏️', color: '#4a8c3f', url: 'https://www.youtube.com/results?search_query=minecraft+timelapse+build' },\\n { title: 'GTA 6 Trailer Breakdown & Analysis', meta: '5.4M views • 2 days ago', thumb: '🚗', color: '#cc8800', url: 'https://www.youtube.com/results?search_query=gta+6+trailer' },\\n { title: 'Best Gaming Setup Tour 2024', meta: '1.3M views • 5 days ago', thumb: '🖥️', color: '#6666ff', url: 'https://www.youtube.com/results?search_query=gaming+setup+tour+2024' },\\n { title: 'Twitch Streamer Reacts to Insane Plays', meta: '670K views • 1 day ago', thumb: '📺', color: '#9146ff', url: 'https://www.youtube.com/results?search_query=twitch+best+reactions' },\\n { title: 'Discord Tips & Tricks You Didn\\\\'t Know', meta: '430K views • 4 days ago', thumb: '💬', color: '#5865F2', url: 'https://www.youtube.com/results?search_query=discord+tips+tricks' }\\n ];\\n }\\n\\n // ========== GAMES DATA ==========\\n getGamesData() {\\n return [\\n { id: 'tictactoe', name: 'Tic Tac Toe', icon: '❌⭕', desc: 'Classic X vs O — beat the AI!' },\\n { id: 'snake', name: 'Snake', icon: '🐍', desc: 'Eat, grow, and don\\\\'t crash!' },\\n { id: '2048', name: '2048', icon: '🔢', desc: 'Slide tiles and reach 2048!' }\\n ];\\n }\\n\\n // ========== INITIALIZATION ==========\\n start() {\\n this.setupDatetime();\\n this.setupWeather();\\n this.setupSearch();\\n this.buildQuickLinks();\\n this.buildPlatforms();\\n this.buildGames();\\n this.buildTrending();\\n this.setupSettings();\\n this.setupThemeToggle();\\n this.setupModals();\\n }\\n\\n // ========== DATETIME & GREETING ==========\\n setupDatetime() {\\n const updateTime = () => {\\n const now = new Date();\\n const hours = now.getHours();\\n let greeting = 'Good evening';\\n if (hours < 12) greeting = 'Good morning';\\n else if (hours < 17) greeting = 'Good afternoon';\\n\\n const greetingEmoji = hours < 12 ? '☀️' : hours < 17 ? '🌤️' : hours < 21 ? '🌆' : '🌙';\\n\\n const greetingEl = document.getElementById('greeting');\\n if (greetingEl) greetingEl.textContent = `${greetingEmoji} ${greeting}!`;\\n\\n const dateEl = document.getElementById('datetime');\\n if (dateEl) {\\n const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };\\n const timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });\\n dateEl.textContent = `${now.toLocaleDateString(undefined, options)} • ${timeStr}`;\\n }\\n };\\n updateTime();\\n setInterval(updateTime, 1000);\\n }\\n\\n // ========== WEATHER ==========\\n setupWeather() {\\n const weatherEl = document.getElementById('weather-text');\\n const weatherIcon = document.getElementById('weather-icon');\\n\\n // Try geolocation for weather\\n if (navigator.geolocation) {\\n navigator.geolocation.getCurrentPosition(\\n (pos) => {\\n const { latitude, longitude } = pos.coords;\\n fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true`)\\n .then(r => r.json())\\n .then(data => {\\n if (data.current_weather) {\\n const temp = Math.round(data.current_weather.temperature);\\n const code = data.current_weather.weathercode;\\n const icon = this.getWeatherEmoji(code);\\n const desc = this.getWeatherDesc(code);\\n if (weatherIcon) weatherIcon.textContent = icon;\\n if (weatherEl) weatherEl.textContent = `${temp}°C • ${desc}`;\\n }\\n })\\n .catch(() => {\\n if (weatherEl) weatherEl.textContent = 'Weather unavailable';\\n });\\n },\\n () => {\\n if (weatherEl) weatherEl.textContent = 'Location denied';\\n if (weatherIcon) weatherIcon.textContent = '🌍';\\n }\\n );\\n } else {\\n if (weatherEl) weatherEl.textContent = 'Weather unavailable';\\n }\\n }\\n\\n getWeatherEmoji(code) {\\n if (code === 0) return '☀️';\\n if (code <= 3) return '⛅';\\n if (code <= 48) return '🌫️';\\n if (code <= 67) return '🌧️';\\n if (code <= 77) return '🌨️';\\n if (code <= 82) return '🌧️';\\n if (code <= 86) return '❄️';\\n if (code <= 99) return '⛈️';\\n return '🌤️';\\n }\\n\\n getWeatherDesc(code) {\\n if (code === 0) return 'Clear sky';\\n if (code <= 3) return 'Partly cloudy';\\n if (code <= 48) return 'Foggy';\\n if (code <= 55) return 'Drizzle';\\n if (code <= 67) return 'Rain';\\n if (code <= 77) return 'Snow';\\n if (code <= 82) return 'Rain showers';\\n if (code <= 86) return 'Snow showers';\\n if (code <= 99) return 'Thunderstorm';\\n return 'Mixed';\\n }\\n\\n // ========== SEARCH ==========\\n setupSearch() {\\n const input = document.getElementById('search-input');\\n if (input) {\\n input.addEventListener('keydown', (e) => {\\n if (e.key === 'Enter' && input.value.trim()) {\\n window.open(`https://www.google.com/search?q=${encodeURIComponent(input.value.trim())}`, '_blank');\\n }\\n });\\n }\\n }\\n\\n // ========== QUICK LINKS ==========\\n buildQuickLinks() {\\n const grid = document.getElementById('quick-launch-grid');\\n if (!grid) return;\\n grid.innerHTML = '';\\n this.getQuickLinks().forEach(link => {\\n const card = document.createElement('a');\\n card.className = 'quick-link-card';\\n card.href = link.url;\\n card.target = '_blank';\\n card.rel = 'noopener noreferrer';\\n card.innerHTML = `\\n

\\n \\n

\\n ${link.name}\\n `;\\n grid.appendChild(card);\\n });\\n }\\n\\n // ========== PLATFORMS ==========\\n buildPlatforms() {\\n const grid = document.getElementById('platforms-grid');\\n if (!grid) return;\\n grid.innerHTML = '';\\n this.getPlatformData().forEach(platform => {\\n const card = document.createElement('div');\\n card.className = 'platform-card';\\n card.innerHTML = `\\n

\\n

${platform.icon}

\\n

${platform.name}

\\n

${platform.subtitle}

\\n

${platform.shortDesc}

\\n

\\n ${platform.tags.map(t => `${t}`).join('')}\\n

\\n

\\n ${platform.buttons.map(b =>\\n b.primary\\n ? `${b.label}`\\n : ``\\n ).join('')}\\n \\n

\\n `;\\n // Open external links for secondary buttons\\n card.querySelectorAll('.platform-btn-secondary[data-url]').forEach(btn => {\\n btn.addEventListener('click', (e) => {\\n e.stopPropagation();\\n window.open(btn.dataset.url, '_blank');\\n });\\n });\\n // Detail button opens modal\\n const detailBtn = card.querySelector('.detail-btn');\\n if (detailBtn) {\\n detailBtn.addEventListener('click', (e) => {\\n e.stopPropagation();\\n this.showPlatformModal(platform);\\n });\\n }\\n grid.appendChild(card);\\n });\\n }\\n\\n // ========== GAMES ==========\\n buildGames() {\\n const grid = document.getElementById('games-grid');\\n if (!grid) return;\\n grid.innerHTML = '';\\n this.getGamesData().forEach(gameData => {\\n const card = document.createElement('div');\\n card.className = 'game-card';\\n card.innerHTML = `\\n

${gameData.icon}

\\n

${gameData.name}

\\n

${gameData.desc}

\\n \\n `;\\n card.querySelector('.play-btn').addEventListener('click', () => {\\n this.openGame(gameData.id, gameData.name);\\n });\\n grid.appendChild(card);\\n });\\n }\\n\\n // ========== TRENDING ==========\\n buildTrending() {\\n const grid = document.getElementById('trending-grid');\\n if (!grid) return;\\n grid.innerHTML = '';\\n this.getTrendingData().forEach(item => {\\n const card = document.createElement('a');\\n card.className = 'trending-card';\\n card.href = item.url;\\n card.target = '_blank';\\n card.rel = 'noopener noreferrer';\\n card.innerHTML = `\\n \\n \\n `;\\n grid.appendChild(card);\\n });\\n }\\n\\n // ========== SETTINGS ==========\\n setupSettings() {\\n const settingsBtn = document.getElementById('settings-btn');\\n const settingsModal = document.getElementById('settings-modal');\\n const settingsClose = document.getElementById('settings-close');\\n const themeSelect = document.getElementById('theme-select');\\n const bgSelect = document.getElementById('bg-select');\\n\\n if (settingsBtn) {\\n settingsBtn.addEventListener('click', () => {\\n settingsModal.classList.remove('hidden');\\n });\\n }\\n if (settingsClose) {\\n settingsClose.addEventListener('click', () => {\\n settingsModal.classList.add('hidden');\\n });\\n }\\n if (settingsModal) {\\n settingsModal.addEventListener('click', (e) => {\\n if (e.target === settingsModal) settingsModal.classList.add('hidden');\\n });\\n }\\n\\n if (themeSelect) {\\n themeSelect.value = this.currentTheme;\\n themeSelect.addEventListener('change', () => {\\n this.setTheme(themeSelect.value);\\n });\\n }\\n if (bgSelect) {\\n bgSelect.value = this.currentBg;\\n bgSelect.addEventListener('change', () => {\\n this.setBackground(bgSelect.value);\\n });\\n }\\n }\\n\\n // ========== THEME ==========\\n setupThemeToggle() {\\n const btn = document.getElementById('theme-toggle');\\n if (btn) {\\n btn.addEventListener('click', () => {\\n const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';\\n this.setTheme(newTheme);\\n const themeSelect = document.getElementById('theme-select');\\n if (themeSelect) themeSelect.value = newTheme;\\n });\\n }\\n }\\n\\n setTheme(theme) {\\n this.currentTheme = theme;\\n document.body.classList.remove('dark-mode', 'light-mode');\\n document.body.classList.add(theme + '-mode');\\n const btn = document.getElementById('theme-toggle');\\n if (btn) {\\n btn.innerHTML = theme === 'dark' ? '' : '';\\n }\\n }\\n\\n setBackground(bg) {\\n this.currentBg = bg;\\n document.body.classList.remove('bg-gradient1', 'bg-gradient2', 'bg-gradient3', 'bg-gradient4');\\n if (bg !== 'default') {\\n document.body.classList.add('bg-' + bg);\\n }\\n }\\n\\n // ========== MODALS ==========\\n setupModals() {\\n // Platform modal close\\n const platformClose = document.getElementById('platform-close');\\n const platformModal = document.getElementById('platform-modal');\\n if (platformClose) {\\n platformClose.addEventListener('click', () => platformModal.classList.add('hidden'));\\n }\\n if (platformModal) {\\n platformModal.addEventListener('click', (e) => {\\n if (e.target === platformModal) platformModal.classList.add('hidden');\\n });\\n }\\n\\n // Game modal close\\n const gameClose = document.getElementById('game-close');\\n const gameModal = document.getElementById('game-modal');\\n if (gameClose) {\\n gameClose.addEventListener('click', () => this.closeGameModal());\\n }\\n if (gameModal) {\\n gameModal.addEventListener('click', (e) => {\\n if (e.target === gameModal) this.closeGameModal();\\n });\\n }\\n }\\n\\n showPlatformModal(platform) {\\n const modal = document.getElementById('platform-modal');\\n const title = document.getElementById('platform-modal-title');\\n const body = document.getElementById('platform-modal-body');\\n if (!modal || !title || !body) return;\\n\\n title.textContent = `${platform.icon} ${platform.name}`;\\n body.innerHTML = `\\n

\\n

The Experience

\\n

${platform.fullDesc.replace(/\\\\n/g, '

')}

\\n

Key Features

\\n

\\n ${platform.features.map(f => `${f}`).join('')}\\n

\\n

\\n ${platform.buttons.map(b =>\\n `${b.label}`\\n ).join('')}\\n

\\n `;\\n modal.classList.remove('hidden');\\n }\\n\\n // ========== GAME MODALS ==========\\n openGame(gameId, gameName) {\\n const modal = document.getElementById('game-modal');\\n const title = document.getElementById('game-modal-title');\\n const body = document.getElementById('game-modal-body');\\n if (!modal || !title || !body) return;\\n\\n // Clean up previous games\\n this.cleanupActiveGames();\\n\\n title.textContent = gameName;\\n body.innerHTML = '';\\n\\n if (gameId === 'tictactoe') {\\n this.activeTicTacToe = new TicTacToe();\\n this.entities.push(this.activeTicTacToe);\\n this.activeTicTacToe.render(body);\\n } else if (gameId === 'snake') {\\n this.activeSnakeGame = new SnakeGame();\\n this.entities.push(this.activeSnakeGame);\\n this.activeSnakeGame.render(body);\\n } else if (gameId === '2048') {\\n this.activeGame2048 = new Game2048();\\n this.entities.push(this.activeGame2048);\\n this.activeGame2048.render(body);\\n }\\n\\n modal.classList.remove('hidden');\\n }\\n\\n closeGameModal() {\\n const modal = document.getElementById('game-modal');\\n if (modal) modal.classList.add('hidden');\\n this.cleanupActiveGames();\\n }\\n\\n cleanupActiveGames() {\\n if (this.activeSnakeGame) {\\n this.activeSnakeGame.destroy();\\n const idx = this.entities.indexOf(this.activeSnakeGame);\\n if (idx !== -1) this.entities.splice(idx, 1);\\n this.activeSnakeGame = null;\\n }\\n if (this.activeGame2048) {\\n this.activeGame2048.destroy();\\n const idx = this.entities.indexOf(this.activeGame2048);\\n if (idx !== -1) this.entities.splice(idx, 1);\\n this.activeGame2048 = null;\\n }\\n if (this.activeTicTacToe) {\\n const idx = this.entities.indexOf(this.activeTicTacToe);\\n if (idx !== -1) this.entities.splice(idx, 1);\\n this.activeTicTacToe = null;\\n }\\n }\\n\\n // ========== SELECTION SUPPORT ==========\\n screenToWorld(canvasX, canvasY) {\\n return { x: canvasX + this.scrollX, y: canvasY + this.scrollY };\\n }\\n\\n worldToScreen(worldX, worldY) {\\n return { x: worldX - this.scrollX, y: worldY - this.scrollY };\\n }\\n\\n getObjectAt(canvasX, canvasY) {\\n const world = this.screenToWorld(canvasX, canvasY);\\n for (const entity of this.entities) {\\n const b = entity.getBounds();\\n if (world.x >= b.x && world.x <= b.x + b.width &&\\n world.y >= b.y && world.y <= b.y + b.height) {\\n return entity;\\n }\\n }\\n return null;\\n }\\n\\n update(dt) {\\n for (const entity of this.entities) entity.update(dt);\\n }\\n\\n draw() {\\n // Canvas is hidden; all rendering is DOM-based\\n }\\n}\"\n }\n ]\n}","thumbnail_url":null,"description":null,"created_at":"2026-04-03T02:56:21.524317+00:00","updated_at":"2026-04-03T14:09:31.423+00:00","is_public":true,"review_status":"approved","publish_date":"2026-04-03T03:10:46.828+00:00","views_count":8,"likes_count":0,"source_project_id":null,"source_project_author":null,"featured":false,"featured_at":null,"selected_model":null,"public_code":"{\n \"files\": [\n {\n \"name\": \"index.html\",\n \"content\": \"\\n\\n\\n \\n \\n GameHub - Your Gaming Dashboard\\n \\n \\n\\n\\n

\\n

\\n \\n

\\n \\n \\n \\n

\\n

\\n\\n \\n

\\n \\n

\\n GameHub\\n

\\n\\n \\n

\\n

\\n \\n \\n \\n

\\n

\\n\\n \\n

\\n

Quick Launch

\\n

\\n\\n \\n

\\n

Featured Platforms

\\n

\\n\\n \\n

\\n

Quick Games

\\n

\\n\\n \\n \\n\\n \\n \\n

\\n

\\n \\n

\\n

${platform.icon}

\\n

${platform.name}

\\n

${platform.subtitle}

\\n

${platform.shortDesc}

\\n

\\n ${platform.tags.map(t => `${t}`).join('')}\\n

\\n

\\n ${platform.buttons.map(b =>\\n b.primary\\n ? `${b.label}`\\n : ``\\n ).join('')}\\n \\n

${gameData.icon}

\\n

${gameData.name}

\\n

${gameData.desc}

\\n

The Experience

\\n

${platform.fullDesc.replace(/\\\\n/g, '

')}

\\n

Key Features

\\n

\\n ${platform.features.map(f => `${f}`).join('')}\\n

\\n

\\n ${platform.buttons.map(b =>\\n `${b.label}`\\n ).join('')}\\n

\\n `;\\n modal.classList.remove('hidden');\\n }\\n\\n // ========== GAME MODALS ==========\\n openGame(gameId, gameName) {\\n const modal = document.getElementById('game-modal');\\n const title = document.getElementById('game-modal-title');\\n const body = document.getElementById('game-modal-body');\\n if (!modal || !title || !body) return;\\n\\n // Clean up previous games\\n this.cleanupActiveGames();\\n\\n title.textContent = gameName;\\n body.innerHTML = '';\\n\\n if (gameId === 'tictactoe') {\\n this.activeTicTacToe = new TicTacToe();\\n this.entities.push(this.activeTicTacToe);\\n this.activeTicTacToe.render(body);\\n } else if (gameId === 'snake') {\\n this.activeSnakeGame = new SnakeGame();\\n this.entities.push(this.activeSnakeGame);\\n this.activeSnakeGame.render(body);\\n } else if (gameId === '2048') {\\n this.activeGame2048 = new Game2048();\\n this.entities.push(this.activeGame2048);\\n this.activeGame2048.render(body);\\n }\\n\\n modal.classList.remove('hidden');\\n }\\n\\n closeGameModal() {\\n const modal = document.getElementById('game-modal');\\n if (modal) modal.classList.add('hidden');\\n this.cleanupActiveGames();\\n }\\n\\n cleanupActiveGames() {\\n if (this.activeSnakeGame) {\\n this.activeSnakeGame.destroy();\\n const idx = this.entities.indexOf(this.activeSnakeGame);\\n if (idx !== -1) this.entities.splice(idx, 1);\\n this.activeSnakeGame = null;\\n }\\n if (this.activeGame2048) {\\n this.activeGame2048.destroy();\\n const idx = this.entities.indexOf(this.activeGame2048);\\n if (idx !== -1) this.entities.splice(idx, 1);\\n this.activeGame2048 = null;\\n }\\n if (this.activeTicTacToe) {\\n const idx = this.entities.indexOf(this.activeTicTacToe);\\n if (idx !== -1) this.entities.splice(idx, 1);\\n this.activeTicTacToe = null;\\n }\\n }\\n\\n // ========== SELECTION SUPPORT ==========\\n screenToWorld(canvasX, canvasY) {\\n return { x: canvasX + this.scrollX, y: canvasY + this.scrollY };\\n }\\n\\n worldToScreen(worldX, worldY) {\\n return { x: worldX - this.scrollX, y: worldY - this.scrollY };\\n }\\n\\n getObjectAt(canvasX, canvasY) {\\n const world = this.screenToWorld(canvasX, canvasY);\\n for (const entity of this.entities) {\\n const b = entity.getBounds();\\n if (world.x >= b.x && world.x <= b.x + b.width &&\\n world.y >= b.y && world.y <= b.y + b.height) {\\n return entity;\\n }\\n }\\n return null;\\n }\\n\\n update(dt) {\\n for (const entity of this.entities) entity.update(dt);\\n }\\n\\n draw() {\\n // Canvas is hidden; all rendering is DOM-based\\n }\\n}\"\n }\n ]\n}","current_message_id":null,"public_message_id":"fe175785-1149-49a9-a462-b51face87d77","is_multiplayer":true,"is_3d":false,"max_players":null,"allow_remix":true,"remix_count":1,"has_custom_thumbnail":false,"is_carousel":false,"carousel_order":null,"tags":[],"is_template":false,"template_order":null,"has_save_data":false,"has_leaderboard":false,"leaderboard_plausibility_max":null},"messages":[],"totalMessageCount":0,"isOwner":false,"isNewProject":false,"user":null,"author":{"id":"9bf1e3e3-cefb-4b27-a2b9-6e8209b8b48a","username":"user-9bf1e3e3cefb","profile_picture_url":null,"avatar_url":null,"bio":"","follower_count":0,"tier":"free"},"reviewStatus":null,"memberRole":null,"canEdit":false,"pendingInvite":null}

Quick Launch

Featured Platforms

Quick Games

Trending & Entertainment

Settings

The Experience

Key Features

Quick Launch

Featured Platforms

Quick Games

Trending & Entertainment

Settings

The Experience

Key Features

GameHub Dashboard

About this project

Play next