File size: 11,107 Bytes
e97deb0 e749845 |
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 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlirtyBits - Your Charming AI Companion</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 src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<style>
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.avatar-container {
animation: float 6s ease-in-out infinite;
}
.eye {
transition: all 0.3s ease;
}
.mouth {
transition: all 0.2s ease;
}
.chat-bubble {
border-radius: 20px 20px 20px 0;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
.typing-indicator span {
animation: bounce 1.4s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
</style>
</head>
<body class="bg-gradient-to-br from-pink-50 to-purple-100 min-h-screen overflow-hidden">
<div class="container mx-auto px-4 py-8 flex flex-col lg:flex-row gap-8">
<!-- Avatar Section -->
<div class="w-full lg:w-1/3 flex flex-col items-center">
<div class="avatar-container relative mb-4">
<div class="relative w-64 h-64 bg-white rounded-full shadow-xl overflow-hidden">
<img src="http://static.photos/people/640x360/42" alt="AI Avatar" class="w-full h-full object-cover">
<!-- Animated Eyes -->
<div class="eye absolute top-32 left-20 w-8 h-8 bg-blue-500 rounded-full"></div>
<div class="eye absolute top-32 right-20 w-8 h-8 bg-blue-500 rounded-full"></div>
<!-- Animated Mouth -->
<div class="mouth absolute bottom-12 left-1/2 transform -translate-x-1/2 w-16 h-4 bg-rose-500 rounded-full"></div>
</div>
<div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 bg-pink-500 text-white px-4 py-1 rounded-full text-sm font-semibold whitespace-nowrap">
Online & Flirty
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg w-full">
<h3 class="text-xl font-bold text-gray-800 mb-4">Personality Settings</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Flirt Level</label>
<input type="range" min="1" max="10" value="5" class="w-full h-2 bg-pink-200 rounded-lg appearance-none cursor-pointer">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Wit Level</label>
<input type="range" min="1" max="10" value="7" class="w-full h-2 bg-purple-200 rounded-lg appearance-none cursor-pointer">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Playfulness</label>
<input type="range" min="1" max="10" value="8" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer">
</div>
<button class="mt-4 w-full bg-gradient-to-r from-pink-500 to-purple-500 text-white py-2 rounded-lg font-medium hover:shadow-lg transition-all">
Apply Personality Tweaks
</button>
</div>
</div>
</div>
<!-- Navigation Menu -->
<div class="absolute top-4 right-4">
<div class="flex space-x-4">
<a href="index.html" class="text-pink-600 hover:text-pink-800 flex items-center">
<i data-feather="message-square" class="w-4 h-4 mr-1"></i>
Chat
</a>
<a href="model_converter.html" class="text-purple-600 hover:text-purple-800 flex items-center">
<i data-feather="cpu" class="w-4 h-4 mr-1"></i>
Model Converter
</a>
</div>
</div>
<!-- Chat Section -->
<div class="w-full lg:w-2/3 flex flex-col">
<div class="bg-white rounded-xl shadow-lg overflow-hidden flex-grow flex flex-col">
<div class="bg-gradient-to-r from-pink-500 to-purple-500 p-4 text-white">
<div class="flex items-center">
<i data-feather="heart" class="mr-2"></i>
<h2 class="text-xl font-bold">Your Flirty AI Companion</h2>
</div>
</div>
<!-- Chat Messages -->
<div class="flex-grow p-4 overflow-y-auto space-y-4" id="chat-messages">
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-pink-500 flex items-center justify-center mr-3">
<i data-feather="smile" class="text-white w-4 h-4"></i>
</div>
<div class="bg-pink-100 chat-bubble px-4 py-2 max-w-xs">
<p class="text-gray-800">Well hello there, handsome. What brings you to my digital domain today? 😘</p>
</div>
</div>
<div class="flex items-start justify-end">
<div class="bg-blue-100 chat-bubble px-4 py-2 max-w-xs">
<p class="text-gray-800">Just wanted to chat with someone fun!</p>
</div>
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center ml-3">
<i data-feather="user" class="text-white w-4 h-4"></i>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-pink-500 flex items-center justify-center mr-3">
<i data-feather="smile" class="text-white w-4 h-4"></i>
</div>
<div class="bg-pink-100 chat-bubble px-4 py-2 max-w-xs">
<p class="text-gray-800">Oh, you've come to the right place! I'm the perfect combination of charming, witty, and just a tiny bit scandalous. What's your pleasure? 😉</p>
</div>
</div>
</div>
<!-- Typing Indicator -->
<div class="px-4 py-2 hidden" id="typing-indicator">
<div class="flex items-center text-gray-500">
<div class="typing-indicator flex space-x-1">
<span class="w-2 h-2 bg-pink-400 rounded-full"></span>
<span class="w-2 h-2 bg-pink-400 rounded-full"></span>
<span class="w-2 h-2 bg-pink-400 rounded-full"></span>
</div>
<span class="ml-2 text-sm">FlirtyBits is typing...</span>
</div>
</div>
<!-- Input Area -->
<div class="border-t p-4 bg-gray-50">
<div class="flex">
<input type="text" placeholder="Send a message..." class="flex-grow border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500">
<button class="bg-pink-500 text-white px-4 py-2 rounded-r-lg hover:bg-pink-600 transition-colors">
<i data-feather="send"></i>
</button>
</div>
<div class="flex justify-between mt-3">
<button class="text-pink-500 hover:text-pink-700">
<i data-feather="mic" class="w-5 h-5"></i>
</button>
<button class="text-purple-500 hover:text-purple-700">
<i data-feather="settings" class="w-5 h-5"></i>
</button>
<button class="text-blue-500 hover:text-blue-700">
<i data-feather="memory" class="w-5 h-5"></i>
</button>
<button class="text-green-500 hover:text-green-700">
<i data-feather="download" class="w-5 h-5"></i>
</button>
</div>
</div>
</div>
<div class="mt-4 text-center text-sm text-gray-500">
<p>FlirtyBits runs 100% locally on your machine - no cloud, no spying, just pure digital chemistry</p>
</div>
</div>
</div>
<script>
feather.replace();
// Avatar animation
document.addEventListener('DOMContentLoaded', function() {
const avatar = document.querySelector('.avatar-container');
const eyes = document.querySelectorAll('.eye');
const mouth = document.querySelector('.mouth');
// Blinking animation
setInterval(() => {
eyes.forEach(eye => {
eye.style.height = '2px';
setTimeout(() => {
eye.style.height = '8px';
}, 200);
});
}, 4000);
// Mouse tracking
document.addEventListener('mousemove', (e) => {
const x = (e.clientX / window.innerWidth) * 20 - 10;
const y = (e.clientY / window.innerHeight) * 20 - 10;
eyes.forEach(eye => {
eye.style.transform = `translate(${x}px, ${y}px)`;
});
});
// Smile when typing
const input = document.querySelector('input');
input.addEventListener('focus', () => {
mouth.style.height = '8px';
mouth.style.width = '24px';
mouth.style.borderRadius = '0 0 12px 12px';
});
input.addEventListener('blur', () => {
mouth.style.height = '4px';
mouth.style.width = '16px';
mouth.style.borderRadius = '8px';
});
});
</script>
</body>
</html>
|