Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SteveGPT - Home</title> | |
| <!-- Import Pixel Fonts --> | |
| <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=VT323&display=swap" rel="stylesheet"> | |
| <style> | |
| /* --- Minecraft Color Palette --- */ | |
| :root { | |
| --mc-grass: #5D9136; | |
| --mc-dirt: #78492B; | |
| --mc-stone: #7d7d7d; | |
| --mc-sky-top: #3b85d9; | |
| --mc-sky-bottom: #94d2e3; | |
| --mc-btn-bg: #727272; | |
| --mc-btn-hover: #8b8b8b; | |
| --mc-btn-border-light: #aeaeae; | |
| --mc-btn-border-dark: #2b2b2b; | |
| --mc-text-shadow: 3px 3px 0 #000; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| body, | |
| html { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| font-family: 'VT323', monospace; | |
| } | |
| /* --- CSS Generated Minecraft Background --- */ | |
| .mc-background { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| background: linear-gradient(to bottom, var(--mc-sky-top) 0%, var(--mc-sky-bottom) 100%); | |
| overflow: hidden; | |
| } | |
| /* Sun */ | |
| .sun { | |
| position: absolute; | |
| top: 50px; | |
| right: 100px; | |
| width: 60px; | |
| height: 60px; | |
| background-color: #FFFFA0; | |
| box-shadow: 10px 10px 0px rgba(0,0,0,0.1); | |
| } | |
| /* Clouds */ | |
| .cloud { | |
| position: absolute; | |
| background: #fff; | |
| opacity: 0.8; | |
| } | |
| .cloud::after, .cloud::before { | |
| content: ''; | |
| position: absolute; | |
| background: inherit; | |
| } | |
| /* Simple CSS Clouds */ | |
| .c1 { width: 100px; height: 40px; top: 10%; left: 10%; animation: floatCloud 20s linear infinite; } | |
| .c2 { width: 140px; height: 50px; top: 20%; left: 60%; animation: floatCloud 25s linear infinite reverse; } | |
| .c3 { width: 80px; height: 30px; top: 15%; left: 80%; animation: floatCloud 18s linear infinite; } | |
| @keyframes floatCloud { | |
| 0% { transform: translateX(0); } | |
| 50% { transform: translateX(20px); } | |
| 100% { transform: translateX(0); } | |
| } | |
| /* Ground Terrain */ | |
| .terrain { | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| height: 30%; | |
| background-color: var(--mc-grass); | |
| border-top: 10px solid #4a7c2b; | |
| z-index: 2; | |
| box-shadow: 0 -10px 20px rgba(0,0,0,0.2); | |
| } | |
| /* Pixelated Grass Texture Pattern */ | |
| .terrain::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1)), | |
| linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1)); | |
| background-size: 40px 40px; | |
| background-position: 0 0, 20px 20px; | |
| opacity: 0.3; | |
| } | |
| /* Floating Blocks in background */ | |
| .float-block { | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| z-index: 1; | |
| opacity: 0.6; | |
| animation: bobbing 3s ease-in-out infinite; | |
| } | |
| /* Creating a box look with CSS */ | |
| .float-block div { | |
| width: 100%; | |
| height: 100%; | |
| border: 2px solid rgba(0,0,0,0.2); | |
| } | |
| .fb-1 { top: 20%; left: 20%; background: #8B0000; animation-delay: 0s; } /* Redstone */ | |
| .fb-2 { top: 60%; left: 80%; background: #4B0082; animation-delay: 1s; } /* Diamond */ | |
| .fb-3 { top: 40%; left: 70%; background: #FFD700; animation-delay: 2s; } /* Gold */ | |
| @keyframes bobbing { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(10deg); } | |
| } | |
| /* Dark overlay for better text readability */ | |
| .overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.1); /* Slight tint */ | |
| z-index: 5; | |
| pointer-events: none; | |
| } | |
| /* --- UI Overlay --- */ | |
| #ui-layer { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 100; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| align-items: center; | |
| pointer-events: none; | |
| } | |
| /* Header */ | |
| header { | |
| width: 100%; | |
| padding: 20px 40px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| pointer-events: auto; | |
| text-shadow: 2px 2px 0px #000; | |
| } | |
| .logo-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| /* CSS Pixel Art Icon for Logo */ | |
| .steve-icon { | |
| width: 50px; | |
| height: 50px; | |
| background: #00AAAA; /* Cyan armor color */ | |
| border: 4px solid #000; | |
| box-shadow: 4px 4px 0 rgba(0,0,0,0.5); | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .steve-icon::before { | |
| content: ''; | |
| background: #FFCCAA; /* Skin */ | |
| border-right: 4px solid #000; | |
| height: 100%; | |
| } | |
| .brand-text { | |
| font-family: 'Press Start 2P', cursive; | |
| color: #fff; | |
| font-size: 1.2rem; | |
| text-shadow: 4px 4px 0 #3f3f3f; | |
| letter-spacing: 2px; | |
| } | |
| /* AnyCoder Link */ | |
| .anycoder-link { | |
| font-family: 'VT323', monospace; | |
| color: #eee; | |
| text-decoration: none; | |
| font-size: 1.5rem; | |
| background: rgba(0,0,0,0.5); | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| border: 2px solid transparent; | |
| transition: all 0.2s; | |
| } | |
| .anycoder-link:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: #fff; | |
| color: #00ffea; | |
| transform: scale(1.05); | |
| } | |
| /* Main Content */ | |
| main { | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| pointer-events: auto; | |
| text-align: center; | |
| z-index: 10; | |
| } | |
| h1.hero-title { | |
| font-family: 'Press Start 2P', cursive; | |
| color: #fff; | |
| font-size: clamp(1.5rem, 4vw, 3rem); | |
| margin-bottom: 10px; | |
| text-shadow: 4px 4px 0px #3f3f3f; | |
| line-height: 1.4; | |
| animation: slideIn 1s ease-out; | |
| } | |
| .main-logo-container { | |
| position: relative; | |
| margin: 20px 0; | |
| width: 200px; | |
| height: 200px; | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| /* CSS Steve Head Logo */ | |
| .steve-head { | |
| width: 100%; | |
| height: 100%; | |
| background-color: #00AAAA; /* Chestplate */ | |
| border: 6px solid #222; | |
| position: relative; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.5); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| /* Face */ | |
| .face { | |
| width: 60%; | |
| height: 70%; | |
| background-color: #FFCCAA; /* Skin */ | |
| position: relative; | |
| border: 3px solid #3f2424; | |
| } | |
| /* Eyes */ | |
| .eye { | |
| width: 4px; | |
| height: 4px; | |
| background: #000; | |
| position: absolute; | |
| top: 30%; | |
| } | |
| .eye.left { left: 20%; } | |
| .eye.right { right: 20%; } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateY(-20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| p.subtitle { | |
| color: #fff; | |
| font-size: 1.5rem; | |
| margin-bottom: 40px; | |
| text-shadow: 2px 2px 0px #3f3f3f; | |
| background: rgba(0, 0, 0, 0.4); | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| border: 2px solid rgba(255, 255, 255, 0.1); | |
| max-width: 80%; | |
| } | |
| /* --- Minecraft Button --- */ | |
| .mc-button-container { | |
| position: relative; | |
| display: inline-block; | |
| margin-top: 20px; | |
| } | |
| .mc-button { | |
| display: block; | |
| background-color: var(--mc-btn-bg); | |
| color: #e0e0e0; | |
| font-family: 'Press Start 2P', cursive; | |
| font-size: 1rem; | |
| padding: 15px 30px; | |
| text-decoration: none; | |
| text-align: center; | |
| border: 4px solid #000; | |
| /* 3D Bevel Effect */ | |
| border-top-color: var(--mc-btn-border-light); | |
| border-left-color: var(--mc-btn-border-light); | |
| border-right-color: var(--mc-btn-border-dark); | |
| border-bottom-color: var(--mc-btn-border-dark); | |
| text-shadow: 2px 2px #3f3f3f; | |
| cursor: pointer; | |
| transition: transform 0.1s, background-color 0.1s, color 0.1s; | |
| position: relative; | |
| min-width: 220px; | |
| box-shadow: 0 6px 0 #2b2b2b; /* Deep shadow */ | |
| } | |
| .mc-button:hover { | |
| background-color: var(--mc-btn-hover); | |
| color: #ffffa0; | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 0 #2b2b2b; | |
| } | |
| .mc-button:active { | |
| border-top-color: var(--mc-btn-border-dark); | |
| border-left-color: var(--mc-btn-border-dark); | |
| border-right-color: var(--mc-btn-border-light); | |
| border-bottom-color: var(--mc-btn-border-light); | |
| background-color: var(--mc-btn-bg); | |
| transform: translateY(4px); /* Press down */ | |
| box-shadow: 0 2px 0 #2b2b2b; | |
| } | |
| /* Footer */ | |
| footer { | |
| padding: 15px; | |
| color: rgba(255, 255, 255, 0.8); | |
| font-size: 1rem; | |
| text-shadow: 1px 1px 0 #000; | |
| pointer-events: auto; | |
| z-index: 10; | |
| background: rgba(0,0,0,0.3); | |
| width: 100%; | |
| text-align: center; | |
| } | |
| /* --- Particles for Click Effect --- */ | |
| .particle { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| background-color: #e0e0e0; | |
| pointer-events: none; | |
| z-index: 999; | |
| } | |
| /* Responsive Tweaks */ | |
| @media (max-width: 600px) { | |
| header { | |
| padding: 15px; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .brand-text { | |
| font-size: 1rem; | |
| } | |
| h1.hero-title { | |
| font-size: 1.5rem; | |
| } | |
| .main-logo-container { | |
| width: 150px; | |
| height: 150px; | |
| } | |
| p.subtitle { | |
| font-size: 1.1rem; | |
| } | |
| .mc-button { | |
| font-size: 0.8rem; | |
| padding: 12px 20px; | |
| min-width: 180px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Dynamic Background Layer --> | |
| <div class="mc-background"> | |
| <div class="sun"></div> | |
| <div class="cloud c1"></div> | |
| <div class="cloud c2"></div> | |
| <div class="cloud c3"></div> | |
| <div class="float-block fb-1"><div></div></div> | |
| <div class="float-block fb-2"><div></div></div> | |
| <div class="float-block fb-3"><div></div></div> | |
| <div class="terrain"></div> | |
| </div> | |
| <!-- Dark overlay for better readability --> | |
| <div class="overlay"></div> | |
| <!-- UI Layer --> | |
| <div id="ui-layer"> | |
| <header> | |
| <div class="logo-container"> | |
| <div class="steve-icon"></div> | |
| <div class="brand-text">SteveGPT</div> | |
| </div> | |
| <!-- Added Built with anycoder link as requested --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a> | |
| </header> | |
| <main> | |
| <h1 class="hero-title">ENTER THE WORLD<br>OF BLOCKS</h1> | |
| <!-- CSS constructed logo instead of external image --> | |
| <div class="main-logo-container"> | |
| <div class="steve-head"> | |
| <div class="face"> | |
| <div class="eye left"></div> | |
| <div class="eye right"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="subtitle">Your personal AI assistant in the world of blocks.</p> | |
| <div class="mc-button-container"> | |
| <a href="https://stevegpt.world" class="mc-button" id="chatBtn">Start SteveGPT</a> | |
| </div> | |
| </main> | |
| <footer> | |
| © 2023 SteveGPT Project. Not affiliated with Mojang. | |
| </footer> | |
| </div> | |
| <script> | |
| // Simple click sound synthesis to avoid external file dependencies | |
| const playClickSound = () => { | |
| try { | |
| const AudioContext = window.AudioContext || window.webkitAudioContext; | |
| if (!AudioContext) return; | |
| const ctx = new AudioContext(); | |
| const osc = ctx.createOscillator(); | |
| const gain = ctx.createGain(); | |
| osc.type = 'square'; | |
| osc.frequency.setValueAtTime(400, ctx.currentTime); | |
| osc.frequency.exponentialRampToValueAtTime(100, ctx.currentTime + 0.1); | |
| gain.gain.setValueAtTime(0.1, ctx.currentTime); | |
| gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1); | |
| osc.connect(gain); | |
| gain.connect(ctx.destination); | |
| osc.start(); | |
| osc.stop(ctx.currentTime + 0.1); | |
| } catch (e) { | |
| console.error("Audio play failed", e); | |
| } | |
| }; | |
| // Button interaction | |
| const button = document.getElementById('chatBtn'); | |
| button.addEventListener('click', (e) => { | |
| playClickSound(); | |
| // Optional: Add particles or visual flair here if desired | |
| }); | |
| button.addEventListener('mouseenter', () => { | |
| // Subtle hover sound could go here | |
| }); | |
| // Particle system for click effect | |
| document.addEventListener('click', (e) => { | |
| // Only create particles if clicking on the button | |
| if (!e.target.classList.contains('mc-button')) return; | |
| for (let i = 0; i < 8; i++) { | |
| createParticle(e.clientX, e.clientY); | |
| } | |
| }); | |
| function createParticle(x, y) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| document.body.appendChild(particle); | |
| // Random color from MC palette | |
| const colors = ['#727272', '#8b8b8b', '#3f3f3f', '#ffffff']; | |
| particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| // Set initial position | |
| particle.style.left = x + 'px'; | |
| particle.style.top = y + 'px'; | |
| // Random velocity | |
| const velocityX = (Math.random() - 0.5) * 10; | |
| const velocityY = (Math.random() - 0.5) * 10; | |
| // Animation | |
| let life = 0; | |
| const speed = 2; // Lower is faster | |
| const animate = () => { | |
| life++; | |
| const currentLeft = parseFloat(particle.style.left); | |
| const currentTop = parseFloat(particle.style.top); | |
| particle.style.left = (currentLeft + velocityX) + 'px'; | |
| particle.style.top = (currentTop + velocityY) + 'px'; | |
| particle.style.opacity = 1 - (life / 20); | |
| if (life < 20) { | |
| requestAnimationFrame(animate); | |
| } else { | |
| particle.remove(); | |
| } | |
| }; | |
| requestAnimationFrame(animate); | |
| } | |
| </script> | |
| </body> | |
| </html> |