Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Loki.AI - By Parth Sadaria</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=Encode+Sans:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Protest+Revolution&display=swap" rel="stylesheet"> | |
| <style> | |
| @font-face { | |
| font-family: "Playfair Display"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| * { | |
| font-family: "Playfair Display"; | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: black; | |
| color: white; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| text-align: center; | |
| font-family: 'Instrument Serif', serif; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .container { | |
| position: relative; | |
| z-index: 1; | |
| transition: all 0.3s ease; | |
| } | |
| h1 { | |
| font-size: clamp(4rem, 15vw, 9rem); | |
| font-weight: bold; | |
| letter-spacing: -3px; | |
| text-transform: uppercase; | |
| position: relative; | |
| transition: all 0.5s ease; | |
| color: rgba(255, 255, 255, 0.1); | |
| } | |
| p { | |
| font-size: clamp(1rem, 3vw, 2rem); | |
| color: rgba(255, 255, 255, 0.1); | |
| margin-top: -10px; | |
| letter-spacing: 1px; | |
| transition: all 0.5s ease; | |
| } | |
| .glow { | |
| position: fixed; | |
| width: 600px; | |
| height: 600px; | |
| background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%); | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| transform: translate(-50%, -50%); | |
| z-index: 0; | |
| } | |
| /* Hover effects */ | |
| body:hover .glow { | |
| opacity: 1; | |
| } | |
| body:hover h1, | |
| body:hover p, | |
| body:hover a { | |
| color: rgba(255, 255, 255, 1); | |
| text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); | |
| } | |
| body:hover .playground-text { | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .cursor { | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| position: fixed; | |
| pointer-events: none; | |
| transition: all 0.1s ease; | |
| z-index: 9999; | |
| transform: translate(-50%, -50%); | |
| } | |
| body:hover .cursor { | |
| border-color: white; | |
| box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); | |
| } | |
| .playground-text { | |
| font-size: 14px; | |
| font-weight: bold; | |
| display: inline-block; | |
| margin-right: 5px; | |
| transition: all 0.5s ease; | |
| } | |
| a { | |
| color: white; | |
| text-decoration: underline; | |
| transition: all 0.5s ease; | |
| } | |
| @media (max-width: 768px) { | |
| h1 { | |
| letter-spacing: -1px; | |
| } | |
| p { | |
| letter-spacing: 1px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="cursor"></div> | |
| <div class="glow"></div> | |
| <div class="container"> | |
| <h1>Loki.AI</h1> | |
| <p>By Parth Sadaria</p> | |
| <br> | |
| <p class="playground-text">Playground:</p> | |
| <a href="https://parthsadaria-lokiai.hf.space/playground" rel="noopener noreferrer">https://parthsadaria-lokiai.hf.space/playground</a> | |
| </div> | |
| <script> | |
| document.addEventListener('mousemove', (e) => { | |
| const cursor = document.querySelector('.cursor'); | |
| const glow = document.querySelector('.glow'); | |
| // Move cursor | |
| cursor.style.left = e.clientX + 'px'; | |
| cursor.style.top = e.clientY + 'px'; | |
| // Move glow effect | |
| glow.style.left = e.clientX + 'px'; | |
| glow.style.top = e.clientY + 'px'; | |
| }); | |
| document.addEventListener('mousedown', () => { | |
| const cursor = document.querySelector('.cursor'); | |
| cursor.style.transform = 'translate(-50%, -50%) scale(0.8)'; | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| const cursor = document.querySelector('.cursor'); | |
| cursor.style.transform = 'translate(-50%, -50%) scale(1)'; | |
| }); | |
| </script> | |
| </body> | |
| </html> |