| <!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"> |
| |
| <div id="sidebar" class="w-[240px] h-full bg-[#171617] flex flex-col border-r border-dark-700 transition-all duration-300 ease-in-out"> |
| <button id="sidebar-toggle" class="ml-2 w-6 h-6 bg-dark-700 rounded-full flex items-center justify-center border border-dark-600 shadow-lg hover:bg-dark-600 transition-colors"> |
| <i data-feather="menu" class="w-4 h-4 stroke-gray-400"></i> |
| </button> |
| |
| <div class="flex items-center p-4"> |
| <h1 class="text-xl serif text-[#EAE7E3] ml-2">Syntra</h1> |
| </div> |
| |
| <div class="mx-4 mb-6 mt-[70px]"> |
| <button class="flex items-center gap-2"> |
| <div class="w-[30px] h-[30px] rounded-full bg-[#FF6B3A] flex items-center justify-center"> |
| <i data-feather="plus" class="w-3.5 h-3.5 stroke-white stroke-[2.5px]"></i> |
| </div> |
| <span class="text-[13px] font-medium text-[#F5F5F5]">New chat</span> |
| </button> |
| </div> |
| |
| <nav class="px-4 space-y-3"> |
| <div class="border-t border-dark-700 my-2"></div> |
| <a href="#" class="nav-item flex items-center gap-3"> |
| <i data-feather="message-square" class="w-5 h-5 stroke-[#A8A8A8] stroke-[1.5px]"></i> |
| <span class="text-[14px] text-[#EDEDED]">Chats</span> |
| </a> |
| <a href="#" class="nav-item flex items-center gap-3"> |
| <i data-feather="folder" class="w-5 h-5 stroke-[#A8A8A8] stroke-[1.5px]"></i> |
| <span class="text-[14px] text-[#EDEDED]">Projects</span> |
| </a> |
| <a href="#" class="nav-item flex items-center gap-3"> |
| <i data-feather="hexagon" class="w-5 h-5 stroke-[#A8A8A8] stroke-[1.5px]"></i> |
| <span class="text-[14px] text-[#EDEDED]">Artifacts</span> |
| </a> |
| </nav> |
| |
| <div class="mt-6 px-4"> |
| <div class="border-t border-dark-700 my-3"></div> |
| <p class="text-[11px] uppercase text-[#8F8F8F] tracking-wider">Recents</p> |
| <div class="mt-3 space-y-3"> |
| <a href="#" class="chat-item block"> |
| <span class="text-[14px] text-[#DCDCDC]">Understanding electrolysis process</span> |
| </a> |
| <a href="#" class="chat-item block"> |
| <span class="text-[14px] text-[#DCDCDC]">Greeting</span> |
| </a> |
| <a href="#" class="chat-item block"> |
| <span class="text-[14px] text-[#DCDCDC]">Untitled</span> |
| </a> |
| </div> |
| </div> |
| |
| <div class="mt-auto p-4 flex items-center border-t border-dark-700"> |
| <div class="w-10 h-10 rounded-full bg-[#3A3A3A] flex items-center justify-center"> |
| <span class="text-white font-bold">T</span> |
| </div> |
| <div class="ml-3"> |
| <p class="text-[14px] text-white">Toy</p> |
| <p class="text-[12px] text-[#9A9A9A]">Free plan</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <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"> |
| <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="filter" 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="clock" class="w-full h-full stroke-current"></i> |
| </button> |
| </div> |
| <input |
| type="text" |
| placeholder="" |
| class="w-full bg-dark-700 px-4 pt-3 pb-10 rounded-xl focus:outline-none pr-12" |
| > |
| <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-accent-500 flex items-center justify-center hover:bg-accent-600"> |
| <i data-feather="arrow-up" class="w-4 h-4 stroke-white"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <p class="text-xs text-gray-500 mt-2 text-center">Upgrade to connect your tools to Claude</p> |
| </div> |
| </main> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| const sidebar = document.getElementById('sidebar'); |
| const sidebarToggle = document.getElementById('sidebar-toggle'); |
| const chevron = sidebarToggle.querySelector('i'); |
| sidebarToggle.addEventListener('click', () => { |
| sidebar.classList.toggle('w-[240px]'); |
| sidebar.classList.toggle('w-0'); |
| sidebar.classList.toggle('overflow-hidden'); |
| |
| |
| if (sidebar.classList.contains('w-0')) { |
| chevron.setAttribute('data-feather', 'align-left'); |
| } else { |
| chevron.setAttribute('data-feather', 'align-right'); |
| } |
| feather.replace(); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const star = document.querySelector('[data-feather="star"]'); |
| anime({ |
| targets: star, |
| rotate: [0, 360], |
| duration: 8000, |
| loop: true, |
| easing: 'linear' |
| }); |
| |
| |
| anime({ |
| targets: 'input', |
| boxShadow: ['0 0 0 0 rgba(255,87,34,0)', '0 0 0 6px rgba(255,87,34,0.1)'], |
| duration: 3000, |
| loop: true, |
| direction: 'alternate', |
| easing: 'easeInOutSine' |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
