File size: 6,354 Bytes
9e0bd10 a07420d 9e0bd10 a07420d 9e0bd10 a07420d 9e0bd10 45a69fa 9e0bd10 e6c117d 9e0bd10 af63db7 4b2acad beead17 523356e 9e0bd10 523356e 4b2acad 9e0bd10 523356e 4b2acad 9e0bd10 4de6608 78f4a8d 4b2acad 97da5e7 4b2acad 4b2456c 78f4a8d 9e0bd10 af63db7 4b2456c 4b2acad 9e0bd10 4b2acad 9e0bd10 e6c117d 9e0bd10 18e9fa2 9e0bd10 18e9fa2 9e0bd10 af63db7 9e0bd10 18e9fa2 9e0bd10 af63db7 18e9fa2 af63db7 18e9fa2 af63db7 18e9fa2 af63db7 9e0bd10 e693db8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | <!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 Content -->
<main class="flex-1 flex flex-col items-center justify-center p-6 transition-all duration-300 ease-in-out">
<!-- Plan Banner -->
<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>
<!-- Greeting -->
<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>
<!-- Input Box -->
<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();
// Simple animation for the greeting star
document.addEventListener('DOMContentLoaded', function() {
const star = document.querySelector('[data-feather="star"]');
// Enhanced star animation
anime({
targets: star,
rotate: [0, 720],
scale: [1, 1.5, 1],
opacity: [0.8, 1, 0.8],
duration: 8000,
loop: true,
easing: 'easeInOutSine'
});
// Glowing aura effect for input box
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'
});
// Add subtle glow to submit button
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>
|