Spaces:

ParthSadaria
/

lokiai

Running

App Files Files Community

ParthSadaria commited on Mar 26

Commit

7cc5089

verified ·

1 Parent(s): 58ebc79

Update index.html

Browse files

Files changed (1) hide show

index.html +346 -78

index.html CHANGED Viewed

@@ -3,165 +3,433 @@
 <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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Loki.AI - Access Premium AI Models Free</title>
+    <!-- Favicon (Optional but recommended) -->
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <!-- Google Fonts: DM Sans (Bold 700, Regular 400) -->
     <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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
     <style>
+        :root {
+            --bg-color: #050505; /* Slightly off-black for depth */
+            --text-color: #e0e0e0;
+            --text-color-muted: #777;
+            --accent-color: #00ffff; /* Cyan - adjust if needed */
+            --glow-color: rgba(0, 255, 255, 0.15); /* Glow color matching accent */
+            --hover-bg: rgba(0, 255, 255, 0.1);
+            --border-color: rgba(255, 255, 255, 0.1);
+            --font-main: 'DM Sans', sans-serif;
+            --transition-speed: 0.3s;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
+        html {
+            font-size: 16px; /* Base font size */
+        }
         body {
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            font-family: var(--font-main);
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             min-height: 100vh;
             text-align: center;
             position: relative;
+            overflow: hidden; /* Prevent scrollbars from animations */
+            cursor: none; /* Hide default cursor */
+            perspective: 1000px; /* For 3D effects if needed later */
+        }
+        /* Subtle Animated Background Gradient */
+        body::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at 30% 70%, rgba(0, 50, 50, 0.3), transparent 50%),
+                        radial-gradient(circle at 70% 30%, rgba(50, 0, 50, 0.2), transparent 50%);
+            opacity: 0;
+            animation: fadeInBg 3s ease-out forwards, pulseBg 15s infinite ease-in-out alternate;
+            z-index: 0;
+        }
+        @keyframes fadeInBg {
+            to { opacity: 1; }
         }
+        @keyframes pulseBg {
+            0% { transform: scale(1); opacity: 0.5; }
+            100% { transform: scale(1.1); opacity: 0.8; }
+        }
         .container {
             position: relative;
+            z-index: 2; /* Above background, below cursor */
+            padding: 2rem;
+            max-width: 900px; /* Limit width */
+            width: 90%;
+            animation: slideInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
+            opacity: 0;
+            transform: translateY(30px);
+        }
+        @keyframes slideInUp {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
         h1 {
+            font-size: clamp(3rem, 10vw, 6rem); /* Responsive font size */
+            font-weight: 700; /* Bold DM Sans */
+            letter-spacing: -0.05em; /* Tighter letter spacing */
+            margin-bottom: 0.2rem;
+            color: var(--text-color);
+            text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
+            transition: color var(--transition-speed) ease, text-shadow var(--transition-speed) ease;
+            position: relative; /* For potential pseudo-elements */
+        }
+        .subtitle {
+            font-size: clamp(0.9rem, 2.5vw, 1.2rem);
+            font-weight: 400; /* Regular DM Sans */
+            color: var(--text-color-muted);
+            margin-bottom: 2.5rem;
+            letter-spacing: 0.05em;
+            transition: color var(--transition-speed) ease;
+        }
+        .models-section {
+            margin-bottom: 3rem;
+            opacity: 0;
+            animation: fadeIn 1s ease 1s forwards;
+        }
+        .models-section h2 {
+            font-size: clamp(1rem, 3vw, 1.3rem);
+            font-weight: 700;
+            color: var(--accent-color);
+            margin-bottom: 1.5rem;
             text-transform: uppercase;
+            letter-spacing: 0.1em;
+            text-shadow: 0 0 10px var(--glow-color);
+        }
+        .models-grid {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 0.8rem; /* Space between model badges */
+        }
+        .model-badge {
+            display: inline-block;
+            background-color: rgba(255, 255, 255, 0.05);
+            color: var(--text-color-muted);
+            font-size: clamp(0.75rem, 2vw, 0.9rem);
+            font-weight: 400;
+            padding: 0.5em 1em;
+            border-radius: 15px; /* Pill shape */
+            border: 1px solid var(--border-color);
+            transition: all var(--transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            transform: scale(1); /* Base scale for transition */
+        }
+        .model-badge:hover {
+            background-color: var(--hover-bg);
+            color: var(--accent-color);
+            border-color: var(--accent-color);
+            transform: scale(1.05) translateY(-2px); /* Subtle lift */
+            box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
+        }
+        .playgrounds-section {
+            opacity: 0;
+            animation: fadeIn 1s ease 1.2s forwards;
+            display: flex;
+            flex-direction: column; /* Stack links vertically on mobile */
+            align-items: center;
+            gap: 1rem;
+        }
+        @media (min-width: 600px) {
+            .playgrounds-section {
+                flex-direction: row; /* Side-by-side on larger screens */
+                justify-content: center;
+                gap: 1.5rem;
+            }
+        }
+        .playground-link {
+            display: inline-block;
+            color: var(--text-color);
+            text-decoration: none;
+            font-size: clamp(0.9rem, 2.5vw, 1.1rem);
+            font-weight: 700; /* Bold links */
+            padding: 0.8em 1.8em;
+            border: 2px solid var(--border-color);
+            border-radius: 5px;
             position: relative;
+            overflow: hidden; /* For hover effect */
+            transition: all var(--transition-speed) ease;
+            z-index: 1;
         }
+        .playground-link::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: var(--accent-color);
+            transition: left var(--transition-speed) ease;
+            z-index: -1;
+        }
+        .playground-link:hover {
+            color: var(--bg-color); /* Text color changes to background */
+            border-color: var(--accent-color);
+            transform: translateY(-3px); /* Slight lift */
+            box-shadow: 0 5px 20px rgba(0, 255, 255, 0.3);
+        }
+        .playground-link:hover::before {
+            left: 0; /* Slide in the background */
+        }
+        .playground-link span { /* Add inner span for potential icon */
+            display: inline-block;
+            transition: transform 0.2s ease;
+        }
+        .playground-link:hover span {
+             transform: translateX(3px); /* Subtle text shift */
         }
+        /* --- Mouse Effects --- */
         .glow {
             position: fixed;
+            width: 800px; /* Larger glow */
+            height: 800px;
+            background: radial-gradient(circle at center, var(--glow-color) 0%, rgba(0, 0, 0, 0) 60%);
             pointer-events: none;
             opacity: 0;
+            transition: opacity 0.4s ease, transform 0.1s ease-out; /* Smooth opacity fade */
+            transform: translate(-50%, -50%) scale(0.8);
+            z-index: 1; /* Behind content, above bg */
+            filter: blur(10px); /* Soften the glow edges */
         }
         body:hover .glow {
             opacity: 1;
+            transform: translate(-50%, -50%) scale(1);
         }
         .cursor {
+            width: 25px;
+            height: 25px;
+            border: 2px solid var(--accent-color); /* Use accent color */
             border-radius: 50%;
             position: fixed;
             pointer-events: none;
+            transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+                        background-color 0.2s ease,
+                        border-color 0.2s ease,
+                        width 0.2s ease,
+                        height 0.2s ease;
+            z-index: 9999; /* Always on top */
             transform: translate(-50%, -50%);
+            mix-blend-mode: difference; /* Cool effect over elements */
+            background-color: transparent;
         }
         body:hover .cursor {
+             /* Handled by JS interactions */
         }
+        /* Cursor interaction states */
+        .cursor.hover-link {
+            transform: translate(-50%, -50%) scale(1.5);
+            background-color: var(--accent-color);
+            border-color: transparent;
+        }
+        .cursor.hover-text {
+            transform: translate(-50%, -50%) scale(0.7);
+             border-width: 4px;
+             border-color: rgba(255,255,255, 0.5);
         }
+        .cursor.clicking {
+            transform: translate(-50%, -50%) scale(0.6);
+            background-color: rgba(255,255,255,0.3);
         }
+        @keyframes fadeIn {
+            to { opacity: 1; }
+        }
+        /* Responsive adjustments */
         @media (max-width: 768px) {
             h1 {
+                letter-spacing: -0.03em;
+            }
+            .container {
+                padding: 1.5rem;
             }
+            .models-grid {
+                gap: 0.6rem;
             }
+             .playgrounds-section {
+                gap: 0.8rem;
+            }
+             .playground-link {
+                 padding: 0.7em 1.5em;
+             }
         }
     </style>
 </head>
 <body>
+    <!-- Mouse Effect Elements -->
     <div class="cursor"></div>
     <div class="glow"></div>
+    <!-- Main Content -->
     <div class="container">
         <h1>Loki.AI</h1>
+        <p class="subtitle">By Parth Sadaria</p>
+        <div class="models-section">
+            <h2>Free Access To Premium Models</h2>
+            <div class="models-grid">
+                <!-- List your models here -->
+                <span class="model-badge">GPT-4o</span>
+                <span class="model-badge">GPT-4o-mini</span>
+                <span class="model-badge">Anthropic o1</span>
+                <span class="model-badge">Anthropic o3-mini</span>
+                <span class="model-badge">GPT-4.5 (Hypothetical)</span>
+                <span class="model-badge">Claude 3.7 Sonnet</span>
+                <span class="model-badge">And More Top Models...</span>
+            </div>
+        </div>
+        <div class="playgrounds-section">
+            <a href="https://parthsadaria-lokiai.hf.space/playground" class="playground-link" target="_blank" rel="noopener noreferrer">
+                <span>AI Playground</span>
+            </a>
+            <a href="https://parthsadaria-lokiai.hf.space/image-playground" class="playground-link" target="_blank" rel="noopener noreferrer">
+                <span>Image Playground</span>
+            </a>
+        </div>
     </div>
     <script>
+        const cursor = document.querySelector('.cursor');
+        const glow = document.querySelector('.glow');
+        const hoverables = document.querySelectorAll('a, .model-badge');
+        const textElements = document.querySelectorAll('h1, p, h2'); // Add other text if needed
+        let mouseX = 0;
+        let mouseY = 0;
+        let cursorX = 0;
+        let cursorY = 0;
+        let glowX = 0;
+        let glowY = 0;
+        const speed = 0.1; // Adjust for smoother cursor following (lower = smoother)
+        const glowSpeed = 0.08; // Slightly different speed for glow
+        function animate() {
+            // Lerp (linear interpolation) for smooth following
+            cursorX += (mouseX - cursorX) * speed;
+            cursorY += (mouseY - cursorY) * speed;
+            glowX += (mouseX - glowX) * glowSpeed;
+            glowY += (mouseY - glowY) * glowSpeed;
+            cursor.style.transform = `translate(${cursorX - cursor.offsetWidth / 2}px, ${cursorY - cursor.offsetHeight / 2}px) ${cursor.dataset.scale || 'scale(1)'}`; // Apply stored scale
+            glow.style.transform = `translate(${glowX - glow.offsetWidth / 2}px, ${glowY - glow.offsetHeight / 2}px) scale(1)`; // Glow follows slightly slower
+            requestAnimationFrame(animate);
+        }
         document.addEventListener('mousemove', (e) => {
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+            // Move glow immediately for responsiveness on hover-in, smooth following otherwise
+            if (glow.style.opacity === '0') {
+                glow.style.left = mouseX + 'px';
+                glow.style.top = mouseY + 'px';
+            }
+        });
+        // Start the animation loop
+        animate();
+        // Hover effects for cursor
+        hoverables.forEach(el => {
+            el.addEventListener('mouseenter', () => {
+                cursor.classList.add('hover-link');
+                cursor.dataset.scale = 'scale(1.5)'; // Store scale for lerp
+            });
+            el.addEventListener('mouseleave', () => {
+                cursor.classList.remove('hover-link');
+                cursor.dataset.scale = 'scale(1)'; // Reset scale
+            });
         });
+        textElements.forEach(el => {
+             el.addEventListener('mouseenter', () => {
+                 if (!cursor.classList.contains('hover-link')) { // Don't override link hover
+                     cursor.classList.add('hover-text');
+                     cursor.dataset.scale = 'scale(0.7)';
+                 }
+             });
+             el.addEventListener('mouseleave', () => {
+                 cursor.classList.remove('hover-text');
+                  if (!cursor.classList.contains('hover-link')) {
+                      cursor.dataset.scale = 'scale(1)';
+                  }
+             });
+        });
+        // Click effect for cursor
         document.addEventListener('mousedown', () => {
+            cursor.classList.add('clicking');
+            cursor.dataset.scale = `scale(0.6) ${cursor.dataset.scale?.includes('1.5') ? 'scale(1.5)' : ''}`; // Combine scales if needed
         });
         document.addEventListener('mouseup', () => {
+            cursor.classList.remove('clicking');
+            // Reset scale based on current hover state
+            if (cursor.classList.contains('hover-link')) {
+                cursor.dataset.scale = 'scale(1.5)';
+            } else if (cursor.classList.contains('hover-text')) {
+                 cursor.dataset.scale = 'scale(0.7)';
+            } else {
+                 cursor.dataset.scale = 'scale(1)';
+            }
         });
     </script>
 </body>
 </html>