| <!DOCTYPE html> |
| <html lang="en" class="h-full"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Claude AI Interface</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| dark: { |
| 900: '#121212', |
| 800: '#171617', |
| 700: '#1E1E1E', |
| 600: '#3A3A3A', |
| }, |
| accent: { |
| 500: '#FF6B3A', |
| 600: '#E05A30', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| -webkit-font-smoothing: antialiased; |
| } |
| |
| .serif { |
| font-family: 'Libre Baskerville', serif; |
| } |
| |
| input::placeholder { |
| font-style: italic; |
| } |
| |
| .nav-item:hover .nav-icon { |
| stroke: #EAEAEA; |
| } |
| |
| .chat-item:hover { |
| background-color: #1E1E1E; |
| } |
| </style> |
| </head> |
| <body class="h-full bg-dark-900 text-gray-100 flex justify-center"> |
| |
| <main class="flex-1 flex flex-col items-center justify-center p-6 transition-all duration-300 ease-in-out"> |
| |
| <div class="text-xs mb-12 tracking-wider"> |
| <span class="text-gray-500">Free plan</span> |
| <span class="mx-2">·</span> |
| <a href="#" class="text-gray-100 underline hover:text-white">Upgrade</a> |
| </div> |
| |
| |
| <div class="text-center mb-12"> |
| <div class="flex items-center justify-center mb-2"> |
| <i data-feather="star" class="w-5 h-5 stroke-accent-500 fill-accent-500/20"></i> |
| </div> |
| <h2 class="text-4xl serif"> |
| <span class="text-gray-300">Hey there,</span> |
| <span class="text-white ml-1.5">Toy</span> |
| </h2> |
| </div> |
| |
| <div class="w-full max-w-2xl"> |
| <div class="bg-dark-700 rounded-xl p-1.5 shadow-lg shadow-accent-500/10 hover:shadow-accent-500/20 transition-all duration-300 backdrop-blur-sm"> |
| <div class="relative"> |
| <p class="text-sm text-gray-400 px-4 pt-3 pb-1">How can I help you today?</p> |
| <div class="absolute left-4 bottom-3 flex items-center space-x-3"> |
| <button class="w-5 h-5 text-gray-400 hover:text-gray-300"> |
| <i data-feather="plus" class="w-full h-full stroke-current"></i> |
| </button> |
| <button class="w-5 h-5 text-gray-400 hover:text-gray-300"> |
| <i data-feather="mic" class="w-full h-full stroke-current"></i> |
| </button> |
| <button class="w-5 h-5 text-gray-400 hover:text-gray-300"> |
| <i data-feather="image" class="w-full h-full stroke-current"></i> |
| </button> |
| </div> |
| <input |
| type="text" |
| placeholder="Message Claude..." |
| class="w-full bg-dark-700 px-4 pt-3 pb-10 rounded-xl focus:outline-none pr-12 focus:ring-2 focus:ring-accent-500/50" |
| > |
| <div class="absolute right-2 bottom-3 flex items-center space-x-2"> |
| <div class="flex items-center px-2.5 py-1 rounded-lg hover:bg-dark-600"> |
| <span class="text-sm text-gray-400">Sonnet 4.5</span> |
| <i data-feather="chevron-down" class="w-4 h-4 stroke-gray-400 ml-1"></i> |
| </div> |
| <button class="w-8 h-8 rounded-lg bg-gradient-to-br from-accent-500 to-accent-600 flex items-center justify-center hover:from-accent-600 hover:to-accent-500 transform hover:scale-105 transition-all duration-200 group"> |
| <i data-feather="arrow-up" class="w-4 h-4 stroke-white group-hover:rotate-45 transition-transform"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <script> |
| feather.replace(); |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const star = document.querySelector('[data-feather="star"]'); |
| |
| anime({ |
| targets: star, |
| rotate: [0, 720], |
| scale: [1, 1.5, 1], |
| opacity: [0.8, 1, 0.8], |
| duration: 8000, |
| loop: true, |
| easing: 'easeInOutSine' |
| }); |
| |
| |
| anime({ |
| targets: 'input', |
| boxShadow: [ |
| '0 0 0 0 rgba(255,107,58,0)', |
| '0 0 15px 5px rgba(255,107,58,0.3)', |
| '0 0 0 0 rgba(255,107,58,0)' |
| ], |
| duration: 3000, |
| loop: true, |
| easing: 'easeInOutSine' |
| }); |
| |
| |
| anime({ |
| targets: 'button[class*="from-accent-500"]', |
| boxShadow: [ |
| '0 0 0 0 rgba(255,107,58,0)', |
| '0 0 10px 4px rgba(255,107,58,0.4)', |
| '0 0 0 0 rgba(255,107,58,0)' |
| ], |
| duration: 2500, |
| loop: true, |
| easing: 'easeInOutSine', |
| delay: 1000 |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
