Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ARC8X - AI Game Generation Engine</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --neon-cyan: #00f3ff; | |
| --neon-magenta: #ff00ff; | |
| --neon-yellow: #ffff00; | |
| --neon-green: #39ff14; | |
| --deep-black: #0a0a0f; | |
| --dark-purple: #1a0a2e; | |
| --grid-color: rgba(0, 243, 255, 0.1); | |
| } | |
| .dark { | |
| --neon-cyan: #00f3ff; | |
| --neon-magenta: #ff00ff; | |
| --neon-yellow: #ffff00; | |
| --neon-green: #39ff14; | |
| --deep-black: #0a0a0f; | |
| --dark-purple: #1a0a2e; | |
| --grid-color: rgba(0, 243, 255, 0.1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background: var(--deep-black); | |
| color: var(--neon-cyan); | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| /* Animated grid background */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(var(--grid-color) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| animation: gridScroll 20s linear infinite; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| @keyframes gridScroll { | |
| 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } | |
| 100% { transform: perspective(500px) rotateX(60deg) translateY(50px); } | |
| } | |
| .container { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| text-align: center; | |
| padding: 40px 20px; | |
| position: relative; | |
| } | |
| h1 { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: clamp(2rem, 8vw, 5rem); | |
| font-weight: 900; | |
| text-transform: uppercase; | |
| background: linear-gradient(45deg, var(--neon-cyan), var(--neon-magenta), var(--neon-yellow)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| letter-spacing: 0.1em; | |
| text-shadow: 0 0 30px rgba(0, 243, 255, 0.5); | |
| margin-bottom: 10px; | |
| animation: glowPulse 3s ease-in-out infinite; | |
| } | |
| @keyframes glowPulse { | |
| 0%, 100% { filter: drop-shadow(0 0 10px var(--neon-cyan)); } | |
| 50% { filter: drop-shadow(0 0 30px var(--neon-magenta)); } | |
| } | |
| .subtitle { | |
| font-family: 'Press Start 2P', cursive; | |
| font-size: clamp(0.5rem, 2vw, 0.8rem); | |
| color: var(--neon-green); | |
| text-shadow: 0 0 10px var(--neon-green); | |
| letter-spacing: 0.2em; | |
| } | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 30px; | |
| margin-top: 30px; | |
| } | |
| @media (min-width: 1024px) { | |
| .main-content { | |
| grid-template-columns: 350px 1fr; | |
| } | |
| } | |
| .game-selector { | |
| background: linear-gradient(135deg, rgba(26, 10, 46, 0.9), rgba(10, 10, 15, 0.9)); | |
| border: 2px solid var(--neon-cyan); | |
| border-radius: 15px; | |
| padding: 25px; | |
| box-shadow: 0 0 30px rgba(0, 243, 255, 0.3); | |
| } | |
| .section-title { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.5rem; | |
| color: var(--neon-yellow); | |
| margin-bottom: 20px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| text-shadow: 0 0 10px var(--neon-yellow); | |
| } | |
| .platform-filters { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .filter-btn { | |
| padding: 8px 14px; | |
| background: rgba(0, 243, 255, 0.05); | |
| border: 1px solid var(--neon-cyan); | |
| border-radius: 5px; | |
| color: var(--neon-cyan); | |
| font-family: 'Rajdhani', sans-serif; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .filter-btn:hover { | |
| background: rgba(0, 243, 255, 0.15); | |
| box-shadow: 0 0 10px rgba(0, 243, 255, 0.3); | |
| } | |
| .filter-btn.active { | |
| background: var(--neon-cyan); | |
| color: var(--deep-black); | |
| border-color: var(--neon-cyan); | |
| box-shadow: 0 0 15px var(--neon-cyan); | |
| } | |
| .game-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); | |
| gap: 15px; | |
| margin-bottom: 25px; | |
| max-height: 450px; | |
| overflow-y: auto; | |
| padding-right: 5px; | |
| } | |
| .game-grid::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .game-grid::-webkit-scrollbar-track { | |
| background: rgba(0, 243, 255, 0.1); | |
| border-radius: 4px; | |
| } | |
| .game-grid::-webkit-scrollbar-thumb { | |
| background: var(--neon-cyan); | |
| border-radius: 4px; | |
| } | |
| .game-grid::-webkit-scrollbar-thumb:hover { | |
| background: var(--neon-magenta); | |
| } | |
| .game-card { | |
| background: rgba(0, 243, 255, 0.05); | |
| border: 2px solid var(--neon-cyan); | |
| border-radius: 10px; | |
| padding: 15px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .platform-badge { | |
| position: absolute; | |
| top: 5px; | |
| right: 5px; | |
| padding: 2px 6px; | |
| background: rgba(57, 255, 20, 0.2); | |
| border: 1px solid var(--neon-green); | |
| border-radius: 3px; | |
| font-size: 0.5rem; | |
| font-family: 'Press Start 2P', cursive; | |
| color: var(--neon-green); | |
| text-transform: uppercase; | |
| } | |
| .game-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.3), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .game-card:hover::before { | |
| left: 100%; | |
| } | |
| .game-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 0 25px var(--neon-cyan); | |
| border-color: var(--neon-magenta); | |
| } | |
| .game-card.selected { | |
| background: rgba(255, 0, 255, 0.2); | |
| border-color: var(--neon-magenta); | |
| box-shadow: 0 0 20px var(--neon-magenta); | |
| } | |
| .game-icon { | |
| font-size: 2rem; | |
| margin-bottom: 8px; | |
| } | |
| .game-name { | |
| font-family: 'Press Start 2P', cursive; | |
| font-size: 0.6rem; | |
| color: var(--neon-cyan); | |
| line-height: 1.4; | |
| } | |
| .options-group { | |
| margin-bottom: 20px; | |
| } | |
| .option-label { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 0.9rem; | |
| color: var(--neon-green); | |
| margin-bottom: 10px; | |
| display: block; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .option-buttons { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .option-btn { | |
| flex: 1; | |
| min-width: 70px; | |
| padding: 10px; | |
| background: rgba(0, 243, 255, 0.1); | |
| border: 1px solid var(--neon-cyan); | |
| border-radius: 5px; | |
| color: var(--neon-cyan); | |
| font-family: 'Rajdhani', sans-serif; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| } | |
| .option-btn:hover { | |
| background: rgba(0, 243, 255, 0.2); | |
| box-shadow: 0 0 15px rgba(0, 243, 255, 0.4); | |
| } | |
| .option-btn.active { | |
| background: var(--neon-magenta); | |
| color: var(--deep-black); | |
| border-color: var(--neon-magenta); | |
| box-shadow: 0 0 20px var(--neon-magenta); | |
| } | |
| select { | |
| width: 100%; | |
| padding: 12px; | |
| background: rgba(0, 243, 255, 0.1); | |
| border: 1px solid var(--neon-cyan); | |
| border-radius: 5px; | |
| color: var(--neon-cyan); | |
| font-family: 'Rajdhani', sans-serif; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .generate-btn { | |
| width: 100%; | |
| padding: 18px; | |
| background: linear-gradient(135deg, var(--neon-magenta), var(--neon-cyan)); | |
| border: none; | |
| border-radius: 10px; | |
| color: var(--deep-black); | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 30px rgba(255, 0, 255, 0.5); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .generate-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s ease, height 0.6s ease; | |
| } | |
| .generate-btn:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .generate-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 50px var(--neon-magenta); | |
| } | |
| .generate-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: scale(1); | |
| } | |
| .game-display { | |
| background: linear-gradient(135deg, rgba(26, 10, 46, 0.9), rgba(10, 10, 15, 0.9)); | |
| border: 2px solid var(--neon-magenta); | |
| border-radius: 15px; | |
| padding: 25px; | |
| min-height: 600px; | |
| box-shadow: 0 0 30px rgba(255, 0, 255, 0.3); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .status-display { | |
| text-align: center; | |
| padding: 60px 20px; | |
| } | |
| .status-icon { | |
| font-size: 5rem; | |
| margin-bottom: 20px; | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .status-text { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.3rem; | |
| color: var(--neon-yellow); | |
| margin-bottom: 15px; | |
| } | |
| .status-subtext { | |
| color: var(--neon-cyan); | |
| font-size: 1rem; | |
| opacity: 0.8; | |
| } | |
| .loading-spinner { | |
| display: inline-block; | |
| width: 60px; | |
| height: 60px; | |
| border: 4px solid rgba(0, 243, 255, 0.2); | |
| border-top-color: var(--neon-cyan); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 20px auto; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .game-frame { | |
| flex: 1; | |
| border: 2px solid var(--neon-cyan); | |
| border-radius: 10px; | |
| background: #000; | |
| overflow: hidden; | |
| box-shadow: inset 0 0 30px rgba(0, 243, 255, 0.2); | |
| } | |
| .game-frame iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| display: block; | |
| } | |
| .error-display { | |
| background: rgba(255, 0, 0, 0.1); | |
| border: 2px solid #ff0000; | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin: 20px 0; | |
| color: #ff6666; | |
| } | |
| .error-title { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.2rem; | |
| margin-bottom: 10px; | |
| } | |
| .game-controls { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 15px; | |
| flex-wrap: wrap; | |
| } | |
| .control-btn { | |
| flex: 1; | |
| min-width: 120px; | |
| padding: 12px; | |
| background: rgba(0, 243, 255, 0.1); | |
| border: 1px solid var(--neon-cyan); | |
| border-radius: 8px; | |
| color: var(--neon-cyan); | |
| font-family: 'Rajdhani', sans-serif; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| } | |
| .control-btn:hover { | |
| background: rgba(0, 243, 255, 0.2); | |
| box-shadow: 0 0 15px rgba(0, 243, 255, 0.4); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .game-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .option-buttons { | |
| flex-direction: column; | |
| } | |
| .option-btn { | |
| min-width: 100%; | |
| } | |
| } | |
| /* Package Download Section */ | |
| .package-section { | |
| background: linear-gradient(135deg, rgba(26, 10, 46, 0.9), rgba(10, 10, 15, 0.9)); | |
| border: 2px solid var(--neon-yellow); | |
| border-radius: 15px; | |
| padding: 25px; | |
| margin-top: 30px; | |
| box-shadow: 0 0 30px rgba(255, 255, 0, 0.3); | |
| } | |
| .package-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .package-card { | |
| background: rgba(0, 243, 255, 0.05); | |
| border: 2px solid var(--neon-cyan); | |
| border-radius: 10px; | |
| padding: 20px; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .package-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 0 25px var(--neon-cyan); | |
| border-color: var(--neon-magenta); | |
| } | |
| .package-icon { | |
| font-size: 3rem; | |
| text-align: center; | |
| margin-bottom: 15px; | |
| } | |
| .package-title { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.3rem; | |
| color: var(--neon-yellow); | |
| text-align: center; | |
| margin-bottom: 10px; | |
| text-transform: uppercase; | |
| } | |
| .package-desc { | |
| color: var(--neon-cyan); | |
| text-align: center; | |
| font-size: 0.9rem; | |
| margin-bottom: 15px; | |
| line-height: 1.6; | |
| } | |
| .package-features { | |
| list-style: none; | |
| margin-bottom: 15px; | |
| font-size: 0.85rem; | |
| } | |
| .package-features li { | |
| padding: 5px 0; | |
| color: var(--neon-green); | |
| } | |
| .package-features li::before { | |
| content: '▸ '; | |
| color: var(--neon-magenta); | |
| } | |
| .download-pkg-btn { | |
| width: 100%; | |
| padding: 12px; | |
| background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan)); | |
| border: none; | |
| border-radius: 8px; | |
| color: var(--deep-black); | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .download-pkg-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 30px var(--neon-green); | |
| } | |
| /* AGENTS.md Viewer */ | |
| .agents-viewer { | |
| position: fixed; | |
| top: 0; | |
| right: -600px; | |
| width: 600px; | |
| height: 100vh; | |
| background: linear-gradient(135deg, rgba(26, 10, 46, 0.98), rgba(10, 10, 15, 0.98)); | |
| border-left: 2px solid var(--neon-cyan); | |
| box-shadow: -5px 0 30px rgba(0, 243, 255, 0.5); | |
| transition: right 0.4s ease; | |
| z-index: 10000; | |
| overflow-y: auto; | |
| padding: 30px; | |
| } | |
| .agents-viewer.open { | |
| right: 0; | |
| } | |
| .agents-viewer h2 { | |
| font-family: 'Orbitron', sans-serif; | |
| color: var(--neon-yellow); | |
| margin-bottom: 20px; | |
| font-size: 1.5rem; | |
| } | |
| .agents-viewer h3 { | |
| font-family: 'Orbitron', sans-serif; | |
| color: var(--neon-cyan); | |
| margin-top: 20px; | |
| margin-bottom: 10px; | |
| font-size: 1.1rem; | |
| } | |
| .agents-viewer p, .agents-viewer li { | |
| color: var(--neon-cyan); | |
| line-height: 1.8; | |
| font-size: 0.9rem; | |
| margin-bottom: 10px; | |
| } | |
| .agents-viewer code { | |
| background: rgba(0, 243, 255, 0.1); | |
| padding: 2px 6px; | |
| border-radius: 3px; | |
| color: var(--neon-green); | |
| font-family: monospace; | |
| } | |
| .agents-viewer pre { | |
| background: rgba(0, 0, 0, 0.5); | |
| border: 1px solid var(--neon-cyan); | |
| border-radius: 5px; | |
| padding: 15px; | |
| overflow-x: auto; | |
| margin: 15px 0; | |
| } | |
| .agents-viewer pre code { | |
| background: none; | |
| padding: 0; | |
| } | |
| .close-agents-btn { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| background: var(--neon-magenta); | |
| border: none; | |
| color: var(--deep-black); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .close-agents-btn:hover { | |
| transform: rotate(90deg); | |
| box-shadow: 0 0 20px var(--neon-magenta); | |
| } | |
| .view-agents-btn { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: linear-gradient(135deg, var(--neon-magenta), var(--neon-cyan)); | |
| border: 2px solid var(--neon-cyan); | |
| color: var(--deep-black); | |
| padding: 15px 25px; | |
| border-radius: 50px; | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| z-index: 9998; | |
| box-shadow: 0 0 30px rgba(255, 0, 255, 0.5); | |
| } | |
| .view-agents-btn:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 0 50px var(--neon-magenta); | |
| } | |
| /* Scan line effect */ | |
| @keyframes scanline { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(100vh); } | |
| } | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(to bottom, transparent, var(--neon-cyan), transparent); | |
| opacity: 0.3; | |
| animation: scanline 8s linear infinite; | |
| pointer-events: none; | |
| z-index: 9999; | |
| } | |
| @media (max-width: 768px) { | |
| .agents-viewer { | |
| width: 100%; | |
| right: -100%; | |
| } | |
| .package-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>ARC8X</h1> | |
| <div class="subtitle">AI Game Generation Engine</div> | |
| </header> | |
| <div class="main-content"> | |
| <div class="game-selector"> | |
| <div class="section-title">Select Game</div> | |
| <div class="platform-filters" id="platformFilters"> | |
| <button class="filter-btn active" data-platform="all">All</button> | |
| <button class="filter-btn" data-platform="arcade">Arcade</button> | |
| <button class="filter-btn" data-platform="nes">NES</button> | |
| <button class="filter-btn" data-platform="snes">SNES</button> | |
| <button class="filter-btn" data-platform="genesis">Genesis</button> | |
| <button class="filter-btn" data-platform="ps1">PS1</button> | |
| </div> | |
| <div class="game-grid" id="gameGrid"></div> | |
| <div class="options-group"> | |
| <label class="option-label">Dimension</label> | |
| <div class="option-buttons"> | |
| <button class="option-btn active" data-option="dimension" data-value="2d">2D Classic</button> | |
| <button class="option-btn" data-option="dimension" data-value="2d-modern">2D Modern</button> | |
| <button class="option-btn" data-option="dimension" data-value="3d">3D</button> | |
| </div> | |
| </div> | |
| <div class="options-group"> | |
| <label class="option-label">Art Style</label> | |
| <div class="option-buttons"> | |
| <button class="option-btn active" data-option="style" data-value="pixel">Pixel Art</button> | |
| <button class="option-btn" data-option="style" data-value="neon">Neon</button> | |
| <button class="option-btn" data-option="style" data-value="minimal">Minimal</button> | |
| </div> | |
| </div> | |
| <div class="options-group"> | |
| <label class="option-label">Difficulty</label> | |
| <select id="difficulty"> | |
| <option value="easy">Easy</option> | |
| <option value="normal" selected>Normal</option> | |
| <option value="hard">Hard</option> | |
| <option value="insane">Insane</option> | |
| </select> | |
| </div> | |
| <div class="options-group"> | |
| <label class="option-label">Controls</label> | |
| <div class="option-buttons"> | |
| <button class="option-btn active" data-option="controls" data-value="auto">Auto-Detect</button> | |
| <button class="option-btn" data-option="controls" data-value="keyboard">Keyboard</button> | |
| <button class="option-btn" data-option="controls" data-value="touch">Touch</button> | |
| </div> | |
| </div> | |
| <button class="generate-btn" id="generateBtn" disabled> | |
| <span style="position: relative; z-index: 1;">⚡ Generate Game ⚡</span> | |
| </button> | |
| </div> | |
| <div class="game-display"> | |
| <div class="status-display" id="statusDisplay"> | |
| <div class="status-icon">🎮</div> | |
| <div class="status-text">Ready to Build</div> | |
| <div class="status-subtext">Select a classic game to rebuild with modern technology</div> | |
| </div> | |
| <div id="gameContainer" style="display: none; flex: 1; display: flex; flex-direction: column;"> | |
| <div class="game-frame" style="flex: 1; min-height: 500px;"> | |
| <iframe id="gameFrame"></iframe> | |
| </div> | |
| <div class="game-controls"> | |
| <button class="control-btn" id="newGameBtn">🔄 New Game</button> | |
| <button class="control-btn" id="downloadBtn">💾 Download</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Package Download Section --> | |
| <div class="package-section"> | |
| <div class="section-title">📦 Download ARC8X Packages</div> | |
| <p style="color: var(--neon-cyan); text-align: center; margin-bottom: 20px;"> | |
| Get standalone versions with pre-configured AI backends. No setup required! | |
| </p> | |
| <div class="package-grid"> | |
| <div class="package-card"> | |
| <div class="package-icon">🔮</div> | |
| <div class="package-title">ARC8X + Gemini</div> | |
| <div class="package-desc">Powered by Google's Gemini 2.0 Flash - Fast, intelligent, multimodal game generation</div> | |
| <ul class="package-features"> | |
| <li>Google Gemini API integration</li> | |
| <li>Multimodal capabilities</li> | |
| <li>Free tier available</li> | |
| <li>API key configuration UI</li> | |
| <li>Real-time generation status</li> | |
| </ul> | |
| <button class="download-pkg-btn" onclick="downloadPackage('gemini')">⬇ Download ARC8X-Gemini</button> | |
| </div> | |
| <div class="package-card"> | |
| <div class="package-icon">🖥️</div> | |
| <div class="package-title">ARC8X + Local LLMs</div> | |
| <div class="package-desc">Auto-discovers Ollama, LMStudio, and LocalAI - 100% private, offline-capable</div> | |
| <ul class="package-features"> | |
| <li>Auto-discover local models</li> | |
| <li>Ollama integration (port 11434)</li> | |
| <li>LMStudio support (port 1234)</li> | |
| <li>LocalAI compatibility (port 8080)</li> | |
| <li>Zero API costs, fully private</li> | |
| </ul> | |
| <button class="download-pkg-btn" onclick="downloadPackage('local')">⬇ Download ARC8X-LocalLLMs</button> | |
| </div> | |
| <div class="package-card"> | |
| <div class="package-icon">⚡</div> | |
| <div class="package-title">ARC8X + Grok</div> | |
| <div class="package-desc">Powered by xAI's Grok - Advanced reasoning with personality and speed</div> | |
| <ul class="package-features"> | |
| <li>xAI Grok API integration</li> | |
| <li>Advanced reasoning abilities</li> | |
| <li>Fast response times</li> | |
| <li>API key configuration UI</li> | |
| <li>Unique creative outputs</li> | |
| </ul> | |
| <button class="download-pkg-btn" onclick="downloadPackage('grok')">⬇ Download ARC8X-Grok</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AGENTS.md Viewer --> | |
| <div class="agents-viewer" id="agentsViewer"> | |
| <button class="close-agents-btn" onclick="toggleAgentsViewer()">×</button> | |
| <div id="agentsContent"></div> | |
| </div> | |
| <!-- Floating Button to View AGENTS.md --> | |
| <button class="view-agents-btn" onclick="toggleAgentsViewer()">📋 Agent Docs</button> | |
| <script> | |
| // Optimized game database with lazy loading | |
| const GAME_DB = { | |
| arcade: [ | |
| { id: 'galaga', name: 'Galaga', icon: '🚀', description: 'Classic space shooter' }, | |
| { id: 'pacman', name: 'Pac-Man', icon: '👾', description: 'Maze navigation game' }, | |
| { id: 'space-invaders', name: 'Space Invaders', icon: '👽', description: 'Alien shooter' } | |
| ], | |
| nes: [ | |
| { id: 'super-mario', name: 'Super Mario', icon: '🍄', description: 'Platform adventure' }, | |
| { id: 'metroid', name: 'Metroid', icon: '🤖', description: 'Exploration game' } | |
| ], | |
| snes: [ | |
| { id: 'kirby', name: 'Kirby', icon: '🌸', description: 'Ability-copying hero' } | |
| ], | |
| genesis: [ | |
| { id: 'sonic', name: 'Sonic', icon: '💨', description: 'Speed platformer' } | |
| ], | |
| ps1: [ | |
| { id: 'crash-bandicoot', name: 'Crash Bandicoot', icon: '🦊', description: '3D platformer' } | |
| ] | |
| }; | |
| // Web Worker for game generation | |
| const gameWorker = new Worker('game-worker.js'); | |
| const games = [ | |
| // === ARCADE CLASSICS === | |
| { id: 'galaga', name: 'Galaga', icon: '🚀', platform: 'arcade', description: 'Classic space shooter with formation-flying enemies' }, | |
| { id: 'pacman', name: 'Pac-Man', icon: '👾', platform: 'arcade', description: 'Navigate mazes and eat pellets while avoiding ghosts' }, | |
| { id: 'space-invaders', name: 'Space Invaders', icon: '👽', platform: 'arcade', description: 'Defend Earth from descending alien invaders' }, | |
| { id: 'breakout', name: 'Breakout', icon: '🧱', platform: 'arcade', description: 'Break bricks with a ball and paddle' }, | |
| { id: 'asteroids', name: 'Asteroids', icon: '☄️', platform: 'arcade', description: 'Navigate space and destroy asteroids' }, | |
| { id: 'snake', name: 'Snake', icon: '🐍', platform: 'arcade', description: 'Guide the snake to eat food and grow' }, | |
| { id: 'tetris', name: 'Tetris', icon: '🟦', platform: 'arcade', description: 'Arrange falling blocks to clear lines' }, | |
| { id: 'frogger', name: 'Frogger', icon: '🐸', platform: 'arcade', description: 'Guide frogs across traffic and rivers' }, | |
| { id: 'donkey-kong', name: 'Donkey Kong', icon: '🦍', platform: 'arcade', description: 'Climb platforms to rescue the princess' }, | |
| { id: 'pong', name: 'Pong', icon: '🏓', platform: 'arcade', description: 'The classic table tennis arcade game' }, | |
| { id: 'missile-command', name: 'Missile Command', icon: '🎯', platform: 'arcade', description: 'Defend cities from incoming missiles' }, | |
| { id: 'centipede', name: 'Centipede', icon: '🐛', platform: 'arcade', description: 'Shoot the descending centipede and mushrooms' }, | |
| // === NES/SNES ERA === | |
| { id: 'super-mario', name: 'Super Mario', icon: '🍄', platform: 'nes', description: 'Platform through worlds, jump on enemies, rescue the princess' }, | |
| { id: 'contra', name: 'Contra', icon: '💥', platform: 'nes', description: 'Run and gun through alien invasion with spread gun' }, | |
| { id: 'metroid', name: 'Metroid', icon: '🤖', platform: 'nes', description: 'Explore alien world, gain abilities, find secrets' }, | |
| { id: 'mega-man', name: 'Mega Man', icon: '⚡', platform: 'nes', description: 'Action platformer with weapon-stealing boss battles' }, | |
| { id: 'castlevania', name: 'Castlevania', icon: '🧛', platform: 'nes', description: 'Whip vampires in gothic platforming action' }, | |
| { id: 'kirby', name: 'Kirby', icon: '🌸', platform: 'snes', description: 'Inhale enemies and copy their abilities' }, | |
| { id: 'f-zero', name: 'F-Zero', icon: '🏎️', platform: 'snes', description: 'High-speed futuristic racing with Mode 7' }, | |
| { id: 'star-fox', name: 'Star Fox', icon: '🦊', platform: 'snes', description: 'Rail shooter in space with 3D graphics' }, | |
| { id: 'zelda', name: 'Zelda', icon: '⚔️', platform: 'snes', description: 'Top-down adventure with dungeons and puzzles' }, | |
| // === SEGA ERA === | |
| { id: 'sonic', name: 'Sonic', icon: '💨', platform: 'genesis', description: 'Speed through loop-de-loops collecting rings' }, | |
| { id: 'streets-of-rage', name: 'Streets of Rage', icon: '👊', platform: 'genesis', description: 'Side-scrolling beat em up through city streets' }, | |
| { id: 'golden-axe', name: 'Golden Axe', icon: '🪓', platform: 'genesis', description: 'Hack and slash barbarian fantasy action' }, | |
| { id: 'shinobi', name: 'Shinobi', icon: '🥷', platform: 'genesis', description: 'Ninja platformer with shurikens and katana' }, | |
| { id: 'altered-beast', name: 'Altered Beast', icon: '🐺', platform: 'genesis', description: 'Transform into beasts to fight demons' }, | |
| { id: 'outrun', name: 'OutRun', icon: '🌴', platform: 'genesis', description: 'Arcade racing through scenic highways' }, | |
| { id: 'comix-zone', name: 'Comix Zone', icon: '📖', platform: 'genesis', description: 'Beat em up inside a living comic book' }, | |
| // === PS1 ERA === | |
| { id: 'crash-bandicoot', name: 'Crash Bandicoot', icon: '🦊', platform: 'ps1', description: '3D platformer with crate-smashing action' }, | |
| { id: 'spyro', name: 'Spyro', icon: '🐉', platform: 'ps1', description: 'Fly and flame breath through dragon worlds' }, | |
| { id: 'metal-gear', name: 'Metal Gear', icon: '📦', platform: 'ps1', description: 'Stealth action with tactical espionage' }, | |
| { id: 'resident-evil', name: 'Resident Evil', icon: '🧟', platform: 'ps1', description: 'Survival horror with fixed camera angles' }, | |
| { id: 'final-fantasy', name: 'Final Fantasy', icon: '🗡️', platform: 'ps1', description: 'Turn-based JRPG with epic story' }, | |
| { id: 'ridge-racer', name: 'Ridge Racer', icon: '🏁', platform: 'ps1', description: 'Drift racing with powersliding mechanics' }, | |
| { id: 'tomb-raider', name: 'Tomb Raider', icon: '🔫', platform: 'ps1', description: '3D exploration and puzzle platforming' }, | |
| { id: 'tony-hawk', name: 'Tony Hawk', icon: '🛹', platform: 'ps1', description: 'Skateboarding with tricks and combos' }, | |
| { id: 'silent-hill', name: 'Silent Hill', icon: '🌫️', platform: 'ps1', description: 'Psychological horror in foggy town' }, | |
| { id: 'parappa', name: 'PaRappa', icon: '🎤', platform: 'ps1', description: 'Rhythm game with rapping puppy' } | |
| ]; | |
| // Optimized state management | |
| const state = { | |
| selectedGame: null, | |
| currentPlatform: 'all', | |
| options: { | |
| dimension: '2d', | |
| style: 'pixel', | |
| difficulty: 'normal', | |
| controls: 'auto' | |
| }, | |
| cache: new Map(), | |
| lastRenderTime: 0 | |
| }; | |
| // Performance-optimized initialization | |
| function init() { | |
| requestIdleCallback(() => { | |
| setupEventListeners(); | |
| setupPoeHandlers(); | |
| renderGameGrid(); | |
| }, { timeout: 1000 }); | |
| // Preload critical assets | |
| const preload = document.createElement('link'); | |
| preload.rel = 'preload'; | |
| preload.href = 'game-worker.js'; | |
| preload.as = 'script'; | |
| document.head.appendChild(preload); | |
| } | |
| // Virtualized game grid rendering | |
| function renderGameGrid(platform = 'all') { | |
| const now = performance.now(); | |
| if (now - state.lastRenderTime < 100) return; | |
| state.lastRenderTime = now; | |
| const grid = document.getElementById('gameGrid'); | |
| const cacheKey = `grid-${platform}`; | |
| if (state.cache.has(cacheKey)) { | |
| grid.innerHTML = state.cache.get(cacheKey); | |
| } else { | |
| const games = platform === 'all' | |
| ? Object.values(GAME_DB).flat() | |
| : GAME_DB[platform] || []; | |
| const html = games.map(game => ` | |
| <div class="game-card" data-game="${game.id}" title="${game.description}"> | |
| <div class="platform-badge">${game.platform}</div> | |
| <div class="game-icon">${game.icon}</div> | |
| <div class="game-name">${game.name}</div> | |
| </div> | |
| `).join(''); | |
| state.cache.set(cacheKey, html); | |
| grid.innerHTML = html; | |
| } | |
| // Delegate click events | |
| grid.addEventListener('click', (e) => { | |
| const card = e.target.closest('.game-card'); | |
| if (card) selectGame(card.dataset.game); | |
| }); | |
| } | |
| function setupPlatformFilters() { | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const platform = btn.dataset.platform; | |
| currentPlatform = platform; | |
| // Update active state | |
| document.querySelectorAll('.filter-btn').forEach(b => { | |
| b.classList.remove('active'); | |
| }); | |
| btn.classList.add('active'); | |
| // Re-render grid | |
| renderGameGrid(platform); | |
| }); | |
| }); | |
| } | |
| function selectGame(gameId) { | |
| selectedGame = gameId; | |
| document.querySelectorAll('.game-card').forEach(card => { | |
| card.classList.toggle('selected', card.dataset.game === gameId); | |
| }); | |
| document.getElementById('generateBtn').disabled = false; | |
| } | |
| function setupOptionButtons() { | |
| document.querySelectorAll('.option-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const option = btn.dataset.option; | |
| const value = btn.dataset.value; | |
| options[option] = value; | |
| // Update active state | |
| document.querySelectorAll(`[data-option="${option}"]`).forEach(b => { | |
| b.classList.remove('active'); | |
| }); | |
| btn.classList.add('active'); | |
| }); | |
| }); | |
| document.getElementById('difficulty').addEventListener('change', (e) => { | |
| options.difficulty = e.target.value; | |
| }); | |
| } | |
| function setupEventListeners() { | |
| document.getElementById('generateBtn').addEventListener('click', generateGame); | |
| document.getElementById('newGameBtn').addEventListener('click', resetBuilder); | |
| document.getElementById('downloadBtn').addEventListener('click', downloadGame); | |
| } | |
| let currentGameCode = ''; | |
| let isGenerating = false; | |
| function setupPoeHandlers() { | |
| if (!window.Poe) { | |
| console.error('Poe API not available'); | |
| return; | |
| } | |
| window.Poe.registerHandler('game-generator', (result, context) => { | |
| const msg = result.responses[0]; | |
| if (msg.status === 'error') { | |
| showError('Generation failed: ' + (msg.statusText || 'Unknown error')); | |
| isGenerating = false; | |
| } else if (msg.status === 'incomplete') { | |
| updateGenerationStatus('Building your game...', msg.content.length); | |
| currentGameCode = msg.content; | |
| } else if (msg.status === 'complete') { | |
| currentGameCode = msg.content; | |
| displayGame(currentGameCode); | |
| isGenerating = false; | |
| } | |
| }); | |
| } | |
| async function generateGame() { | |
| if (!selectedGame || isGenerating) return; | |
| isGenerating = true; | |
| const game = games.find(g => g.id === selectedGame); | |
| document.getElementById('generateBtn').disabled = true; | |
| // Show loading state | |
| const statusDisplay = document.getElementById('statusDisplay'); | |
| statusDisplay.innerHTML = ` | |
| <div class="loading-spinner"></div> | |
| <div class="status-text">Generating ${game.name}...</div> | |
| <div class="status-subtext">Creating a ${options.dimension.toUpperCase()} ${options.style} version</div> | |
| `; | |
| statusDisplay.style.display = 'block'; | |
| document.getElementById('gameContainer').style.display = 'none'; | |
| // Build detailed prompt with platform-specific instructions | |
| const platformInstructions = { | |
| 'nes': 'Recreate the NES era feel with limited color palette (52 colors), 8-bit style sprites, scrolling limitations, and classic chiptune sounds.', | |
| 'snes': 'Capture the SNES era with enhanced 16-bit graphics, Mode 7 effects if applicable (for racing/3D games), richer colors, and improved sound quality.', | |
| 'genesis': 'Emulate Sega Genesis style with edgy attitude, fast-paced action, blast processing speed, and distinctive FM synthesis audio.', | |
| 'ps1': 'Recreate PS1 aesthetic with low-poly 3D graphics, vertex wobble/jitter, texture warping, fixed camera angles (for horror), and CD-quality audio.', | |
| 'arcade': 'Classic arcade cabinet feel with high score tracking, attract mode, coin-op style gameplay loops, and arcade-perfect controls.' | |
| }; | |
| const platformNote = platformInstructions[game.platform] || ''; | |
| const prompt = `@Claude-Sonnet-4.5 Create a complete, production-ready, fully playable ${game.name} game as a single HTML file. | |
| Game Requirements: | |
| - Original Platform: ${game.platform.toUpperCase()} | |
| - Platform Style: ${platformNote} | |
| - Render Style: ${options.dimension} with ${options.style} art style | |
| - Difficulty: ${options.difficulty} | |
| - Controls: ${options.controls === 'auto' ? 'Support both keyboard and touch controls' : options.controls + ' controls only'} | |
| - Must be a COMPLETE, self-contained HTML file with inline CSS and JavaScript | |
| - Include proper game mechanics, scoring, lives/health system, and game over screen | |
| - Add smooth animations and responsive controls | |
| - ${options.dimension === '3d' ? 'Use Three.js from CDN (https://cdn.jsdelivr.net/npm/three@0.150.0/build/three.min.js) for 3D rendering' : 'Use Canvas 2D API'} | |
| - ${options.style === 'neon' ? 'Use vibrant neon colors with glow effects' : ''} | |
| - ${options.style === 'pixel' ? 'Use crisp pixel art aesthetic with retro feel' : ''} | |
| - ${options.style === 'minimal' ? 'Use clean, minimalist design with simple shapes' : ''} | |
| - Include start screen, gameplay, pause function, and game over screen | |
| - Add sound effects using Web Audio API (match the platform aesthetic) | |
| - Make it mobile-responsive if touch controls are enabled | |
| - Implement the FULL classic gameplay mechanics of ${game.name} | |
| - ${game.description} | |
| Output ONLY the complete HTML code with NO explanations, markdown formatting, or code blocks. Start directly with <!DOCTYPE html>.`; | |
| try { | |
| await window.Poe.sendUserMessage(prompt, { | |
| handler: 'game-generator', | |
| stream: true, | |
| openChat: false | |
| }); | |
| } catch (err) { | |
| showError('Failed to start generation: ' + err.message); | |
| isGenerating = false; | |
| document.getElementById('generateBtn').disabled = false; | |
| } | |
| } | |
| function updateGenerationStatus(message, progress) { | |
| const statusDisplay = document.getElementById('statusDisplay'); | |
| const progressText = progress ? `(${Math.floor(progress / 100)} KB generated)` : ''; | |
| statusDisplay.innerHTML = ` | |
| <div class="loading-spinner"></div> | |
| <div class="status-text">${message}</div> | |
| <div class="status-subtext">${progressText}</div> | |
| `; | |
| } | |
| function displayGame(htmlCode) { | |
| // Extract just the HTML if it's wrapped in markdown | |
| let cleanCode = htmlCode.trim(); | |
| if (cleanCode.includes('```html')) { | |
| cleanCode = cleanCode.split('```html')[1].split('```')[0].trim(); | |
| } else if (cleanCode.includes('```')) { | |
| cleanCode = cleanCode.split('```')[1].split('```')[0].trim(); | |
| } | |
| // Display the game | |
| const gameFrame = document.getElementById('gameFrame'); | |
| const blob = new Blob([cleanCode], { type: 'text/html' }); | |
| const url = URL.createObjectURL(blob); | |
| gameFrame.src = url; | |
| document.getElementById('statusDisplay').style.display = 'none'; | |
| document.getElementById('gameContainer').style.display = 'flex'; | |
| document.getElementById('generateBtn').disabled = false; | |
| } | |
| function showError(message) { | |
| const statusDisplay = document.getElementById('statusDisplay'); | |
| statusDisplay.innerHTML = ` | |
| <div class="error-display"> | |
| <div class="error-title">⚠️ Error</div> | |
| <div>${message}</div> | |
| </div> | |
| <div class="status-text">Please try again</div> | |
| `; | |
| statusDisplay.style.display = 'block'; | |
| document.getElementById('gameContainer').style.display = 'none'; | |
| document.getElementById('generateBtn').disabled = false; | |
| } | |
| function resetBuilder() { | |
| document.getElementById('gameContainer').style.display = 'none'; | |
| document.getElementById('statusDisplay').style.display = 'block'; | |
| document.getElementById('statusDisplay').innerHTML = ` | |
| <div class="status-icon">🎮</div> | |
| <div class="status-text">Ready to Build</div> | |
| <div class="status-subtext">Select a classic game to rebuild with modern technology</div> | |
| `; | |
| document.getElementById('gameFrame').src = ''; | |
| currentGameCode = ''; | |
| } | |
| function downloadGame() { | |
| if (!currentGameCode) return; | |
| const game = games.find(g => g.id === selectedGame); | |
| const filename = `${selectedGame}-${options.dimension}-${Date.now()}.html`; | |
| const blob = new Blob([currentGameCode], { type: 'text/html' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = filename; | |
| a.click(); | |
| URL.revokeObjectURL(url); | |
| } | |
| // Performance optimization: Throttled scroll handler using requestAnimationFrame | |
| let scrollThrottled = false; | |
| function handleScroll() { | |
| if (scrollThrottled) return; | |
| scrollThrottled = true; | |
| window.requestAnimationFrame(() => { | |
| // Any scroll-based logic goes here | |
| // Example: sticky elements, parallax, scroll animations | |
| scrollThrottled = false; | |
| }); | |
| } | |
| // Only attach if we need scroll-based features | |
| // window.addEventListener('scroll', handleScroll, { passive: true }); | |
| // Dark mode detection | |
| if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | |
| document.documentElement.classList.add('dark'); | |
| } | |
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { | |
| if (event.matches) { | |
| document.documentElement.classList.add('dark'); | |
| } else { | |
| document.documentElement.classList.remove('dark'); | |
| } | |
| }); | |
| // AGENTS.md Content (embedded) | |
| const agentsMdContent = `# ARC8X - AI Agent Automation Documentation | |
| **Version:** 1.0.0 | **Engine:** AI Game Generation Engine | |
| --- | |
| ## 🎯 Core Principle | |
| ARC8X is designed for **zero-friction AI automation**. Any AI agent following these instructions should be able to successfully complete requested tasks with **minimal or zero redirection** from users. | |
| ## 📋 System Architecture | |
| - **Frontend:** Pure HTML5 + CSS3 + Vanilla JavaScript | |
| - **No Dependencies:** All code self-contained in single HTML file | |
| - **AI Backend:** Poe Embed API / Google Gemini / xAI Grok / Local LLMs | |
| - **Rendering:** Canvas 2D API / Three.js (CDN for 3D) | |
| ## 🤖 Quick Task Reference | |
| ### Add Game | |
| 1. Locate \`games\` array in \`<script>\` | |
| 2. Add: \`{ id: 'slug', name: 'Name', icon: '🎮', platform: 'platform', description: '...' }\` | |
| 3. Verify in UI | |
| ### Add Platform | |
| 1. Add button: \`<button class="filter-btn" data-platform="id">Name</button>\` | |
| 2. Add to \`platformInstructions\` object | |
| 3. Add 5+ games for platform | |
| ### Modify AI Backend | |
| - **Poe:** \`setupPoeHandlers()\`, \`generateGame()\` | |
| - **Gemini:** Add API key UI, implement fetch to Google API | |
| - **Local:** Add discovery for Ollama/LMStudio/LocalAI | |
| - **Grok:** Add API key UI, implement xAI API calls | |
| ### UI Enhancement | |
| - Use cyberpunk neon aesthetic (cyan/magenta/yellow on black) | |
| - Fonts: Orbitron, Press Start 2P, Rajdhani | |
| - Smooth animations (0.3s ease), glow effects | |
| - Mobile-first responsive | |
| ## 🔧 Critical Rules | |
| 1. ✅ **Single-file structure** - Everything in index.html | |
| 2. ✅ **No external deps** - Only CSP-allowed CDNs | |
| 3. ✅ **Error handling** - Try-catch all API calls | |
| 4. ✅ **User feedback** - Loading states, clear errors | |
| 5. ✅ **Test generation** - Verify games work | |
| 6. ✅ **Preserve aesthetic** - Cyberpunk neon theme | |
| ## 📚 Reference | |
| **Colors:** | |
| \`\`\`css | |
| --neon-cyan: #00f3ff | |
| --neon-magenta: #ff00ff | |
| --neon-yellow: #ffff00 | |
| --neon-green: #39ff14 | |
| --deep-black: #0a0a0f | |
| \`\`\` | |
| **Platforms:** arcade, nes, snes, genesis, ps1 | |
| **API Endpoints:** | |
| - Gemini: \`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent\` | |
| - Grok: \`https://api.x.ai/v1/chat/completions\` | |
| - Ollama: \`http://localhost:11434/api/generate\` | |
| - LMStudio: \`http://localhost:1234/v1/chat/completions\` | |
| ## ✅ QA Checklist | |
| - [ ] Functionality works | |
| - [ ] No console errors | |
| - [ ] Responsive (320px - 1920px+) | |
| - [ ] Matches aesthetic | |
| - [ ] 16px+ input fonts | |
| - [ ] Cross-browser tested | |
| --- | |
| **📖 Full Documentation:** See complete AGENTS.md file for detailed instructions on maintenance, package generation, troubleshooting, and advanced automation. | |
| *Last Updated: 2025-01-21 | Open Source* | |
| `; | |
| // Toggle AGENTS.md Viewer | |
| function toggleAgentsViewer() { | |
| const viewer = document.getElementById('agentsViewer'); | |
| const content = document.getElementById('agentsContent'); | |
| if (!viewer.classList.contains('open')) { | |
| // Render markdown-style content | |
| content.innerHTML = agentsMdContent | |
| .replace(/^# (.*$)/gm, '<h2>$1</h2>') | |
| .replace(/^## (.*$)/gm, '<h3>$1</h3>') | |
| .replace(/^### (.*$)/gm, '<h4 style="color: var(--neon-green); margin-top: 15px;">$1</h4>') | |
| .replace(/\*\*(.*?)\*\*/g, '<strong style="color: var(--neon-yellow);">$1</strong>') | |
| .replace(/\`\`\`css([^`]+)\`\`\`/g, '<pre><code>$1</code></pre>') | |
| .replace(/\`([^`]+)\`/g, '<code>$1</code>') | |
| .replace(/^- (.*$)/gm, '<li style="margin-left: 20px;">$1</li>') | |
| .replace(/^\d+\. (.*$)/gm, '<li style="margin-left: 20px; list-style: decimal;">$1</li>') | |
| .replace(/\n\n/g, '<br><br>'); | |
| viewer.classList.add('open'); | |
| } else { | |
| viewer.classList.remove('open'); | |
| } | |
| } | |
| // Package Download Function | |
| async function downloadPackage(type) { | |
| const packages = { | |
| 'gemini': { | |
| name: 'ARC8X-Gemini', | |
| description: 'Google Gemini API integration', | |
| apiType: 'gemini' | |
| }, | |
| 'local': { | |
| name: 'ARC8X-LocalLLMs', | |
| description: 'Ollama/LMStudio/LocalAI support', | |
| apiType: 'local' | |
| }, | |
| 'grok': { | |
| name: 'ARC8X-Grok', | |
| description: 'xAI Grok API integration', | |
| apiType: 'grok' | |
| } | |
| }; | |
| const pkg = packages[type]; | |
| if (!pkg) return; | |
| // Read the current HTML | |
| const currentHtml = document.documentElement.outerHTML; | |
| // Create modified version for package | |
| let packageHtml = currentHtml; | |
| // Add package-specific modifications based on type | |
| if (type === 'gemini') { | |
| packageHtml = packageHtml.replace( | |
| '</header>', | |
| `</header> | |
| <!-- GOOGLE GEMINI API CONFIGURATION --> | |
| <div style="background: rgba(255,255,0,0.1); border: 2px solid var(--neon-yellow); border-radius: 10px; padding: 20px; margin: 20px auto; max-width: 600px;"> | |
| <h3 style="color: var(--neon-yellow); margin-bottom: 15px; font-family: Orbitron;">⚙️ Gemini API Setup</h3> | |
| <p style="color: var(--neon-cyan); margin-bottom: 10px;">Get your free API key from <a href="https://aistudio.google.com/app/apikey" target="_blank" style="color: var(--neon-magenta);">Google AI Studio</a></p> | |
| <input type="password" id="geminiApiKey" placeholder="Enter your Gemini API key" style="width: 100%; padding: 12px; background: rgba(0,243,255,0.1); border: 1px solid var(--neon-cyan); border-radius: 5px; color: var(--neon-cyan); font-size: 16px; margin-bottom: 10px;"> | |
| <button onclick="saveGeminiKey()" style="width: 100%; padding: 12px; background: var(--neon-green); color: var(--deep-black); border: none; border-radius: 5px; font-weight: bold; cursor: pointer;">Save API Key</button> | |
| <p id="keyStatus" style="color: var(--neon-green); margin-top: 10px; text-align: center;"></p> | |
| </div>` | |
| ); | |
| // Add Gemini-specific JavaScript | |
| packageHtml = packageHtml.replace( | |
| '// Initialize app', | |
| `// Gemini API Functions | |
| function saveGeminiKey() { | |
| const key = document.getElementById('geminiApiKey').value.trim(); | |
| if (key) { | |
| localStorage.setItem('gemini_api_key', key); | |
| document.getElementById('keyStatus').textContent = '✓ API Key Saved!'; | |
| setTimeout(() => { document.getElementById('keyStatus').textContent = ''; }, 3000); | |
| } | |
| } | |
| async function generateWithGemini(prompt) { | |
| const apiKey = localStorage.getItem('gemini_api_key'); | |
| if (!apiKey) { | |
| throw new Error('Please configure your Gemini API key first'); | |
| } | |
| const response = await fetch('https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=' + apiKey, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| contents: [{ parts: [{ text: prompt }] }], | |
| generationConfig: { | |
| temperature: 0.7, | |
| maxOutputTokens: 8192 | |
| } | |
| }) | |
| }); | |
| if (!response.ok) { | |
| throw new Error('Gemini API error: ' + response.statusText); | |
| } | |
| const data = await response.json(); | |
| return data.candidates[0].content.parts[0].text; | |
| } | |
| // Initialize app` | |
| ); | |
| } | |
| // Create downloadable file | |
| const blob = new Blob([packageHtml], { type: 'text/html' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `${pkg.name}-v1.0.0.html`; | |
| a.click(); | |
| URL.revokeObjectURL(url); | |
| // Show success message | |
| const statusDisplay = document.getElementById('statusDisplay'); | |
| statusDisplay.innerHTML = ` | |
| <div class="status-icon">📦</div> | |
| <div class="status-text">Package Downloaded!</div> | |
| <div class="status-subtext">${pkg.name} - ${pkg.description}</div> | |
| <p style="color: var(--neon-cyan); margin-top: 20px;"> | |
| Open the downloaded HTML file in your browser to use ARC8X with ${pkg.description}. | |
| </p> | |
| `; | |
| statusDisplay.style.display = 'block'; | |
| document.getElementById('gameContainer').style.display = 'none'; | |
| // Scroll to top | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| // Initialize app | |
| init(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |