add some gradients to the background, redo the TechSales AI element, use liquid glass design for the whole app - Follow Up Deployment
Browse files- index.html +20 -13
index.html
CHANGED
|
@@ -58,10 +58,11 @@
|
|
| 58 |
}
|
| 59 |
|
| 60 |
.message-glass {
|
| 61 |
-
background: rgba(15, 23, 42, 0.
|
| 62 |
-
backdrop-filter: blur(
|
| 63 |
-
-webkit-backdrop-filter: blur(
|
| 64 |
-
border: 1px solid rgba(255, 255, 255, 0.
|
|
|
|
| 65 |
}
|
| 66 |
|
| 67 |
.gallery-item {
|
|
@@ -83,20 +84,25 @@
|
|
| 83 |
}
|
| 84 |
</style>
|
| 85 |
</head>
|
| 86 |
-
<body class="bg-darker text-gray-200 min-h-screen flex flex-col">
|
| 87 |
<div class="container mx-auto px-4 py-8 flex-1 flex flex-col max-w-4xl">
|
| 88 |
-
<div class="glass-effect rounded-2xl p-6
|
| 89 |
-
<
|
| 90 |
-
<
|
|
|
|
|
|
|
|
|
|
| 91 |
</div>
|
| 92 |
|
| 93 |
-
<div id="chat-container" class="flex-1 glass-effect rounded-2xl p-4 overflow-y-auto mb-4" style="scroll-behavior: smooth;">
|
|
|
|
| 94 |
<div id="chat-messages" class="space-y-4">
|
| 95 |
<!-- Messages will appear here -->
|
| 96 |
</div>
|
| 97 |
</div>
|
| 98 |
|
| 99 |
-
<div class="glass-effect rounded-2xl p-4">
|
|
|
|
| 100 |
<div class="flex space-x-2">
|
| 101 |
<input
|
| 102 |
id="user-input"
|
|
@@ -118,7 +124,7 @@
|
|
| 118 |
|
| 119 |
<button
|
| 120 |
id="play-conversation"
|
| 121 |
-
class="fixed bottom-6 right-6 bg-gradient-to-r from-neonPink to-primary text-white w-14 h-14 rounded-full flex items-center justify-center shadow-neon-pink hover:shadow-neon-blue transition-all z-10"
|
| 122 |
title="Play conversation"
|
| 123 |
>
|
| 124 |
<i class="fas fa-play text-xl"></i>
|
|
@@ -217,6 +223,7 @@
|
|
| 217 |
|
| 218 |
// DOM elements
|
| 219 |
const chatMessages = document.getElementById('chat-messages');
|
|
|
|
| 220 |
const userInput = document.getElementById('user-input');
|
| 221 |
const sendBtn = document.getElementById('send-btn');
|
| 222 |
const playBtn = document.getElementById('play-conversation');
|
|
@@ -257,7 +264,7 @@
|
|
| 257 |
|
| 258 |
// Scroll to bottom with smooth behavior
|
| 259 |
setTimeout(() => {
|
| 260 |
-
|
| 261 |
top: chatMessages.scrollHeight,
|
| 262 |
behavior: 'smooth'
|
| 263 |
});
|
|
@@ -270,7 +277,7 @@
|
|
| 270 |
element.textContent = text;
|
| 271 |
// Scroll to bottom with smooth behavior
|
| 272 |
setTimeout(() => {
|
| 273 |
-
|
| 274 |
top: chatMessages.scrollHeight,
|
| 275 |
behavior: 'smooth'
|
| 276 |
});
|
|
|
|
| 58 |
}
|
| 59 |
|
| 60 |
.message-glass {
|
| 61 |
+
background: rgba(15, 23, 42, 0.4);
|
| 62 |
+
backdrop-filter: blur(12px);
|
| 63 |
+
-webkit-backdrop-filter: blur(12px);
|
| 64 |
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
| 65 |
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
| 66 |
}
|
| 67 |
|
| 68 |
.gallery-item {
|
|
|
|
| 84 |
}
|
| 85 |
</style>
|
| 86 |
</head>
|
| 87 |
+
<body class="bg-gradient-to-br from-darker via-[#0c1120] to-[#020617] text-gray-200 min-h-screen flex flex-col">
|
| 88 |
<div class="container mx-auto px-4 py-8 flex-1 flex flex-col max-w-4xl">
|
| 89 |
+
<div class="relative glass-effect rounded-2xl p-6 mb-6 overflow-hidden">
|
| 90 |
+
<div class="absolute inset-0 bg-gradient-to-r from-primary/10 via-neon/5 to-primary/10 opacity-60"></div>
|
| 91 |
+
<div class="relative z-10">
|
| 92 |
+
<h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-neon via-primary to-neon mb-2 tracking-tighter">TECH SALES AI</h1>
|
| 93 |
+
<p class="text-gray-300/80 font-light tracking-wider">YOUR PERSONAL TECHNICAL SALES ASSISTANT</p>
|
| 94 |
+
</div>
|
| 95 |
</div>
|
| 96 |
|
| 97 |
+
<div id="chat-container" class="flex-1 glass-effect rounded-2xl p-4 overflow-y-auto mb-4 relative" style="height: 60vh; scroll-behavior: smooth;">
|
| 98 |
+
<div class="absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent opacity-30 pointer-events-none"></div>
|
| 99 |
<div id="chat-messages" class="space-y-4">
|
| 100 |
<!-- Messages will appear here -->
|
| 101 |
</div>
|
| 102 |
</div>
|
| 103 |
|
| 104 |
+
<div class="glass-effect rounded-2xl p-4 relative overflow-hidden">
|
| 105 |
+
<div class="absolute inset-0 bg-gradient-to-r from-primary/10 to-neon/5 opacity-30"></div>
|
| 106 |
<div class="flex space-x-2">
|
| 107 |
<input
|
| 108 |
id="user-input"
|
|
|
|
| 124 |
|
| 125 |
<button
|
| 126 |
id="play-conversation"
|
| 127 |
+
class="fixed bottom-6 right-6 bg-gradient-to-r from-neonPink/90 to-primary/90 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-neon-pink hover:shadow-neon-blue transition-all z-10 backdrop-blur-sm border border-white/10 hover:scale-110"
|
| 128 |
title="Play conversation"
|
| 129 |
>
|
| 130 |
<i class="fas fa-play text-xl"></i>
|
|
|
|
| 223 |
|
| 224 |
// DOM elements
|
| 225 |
const chatMessages = document.getElementById('chat-messages');
|
| 226 |
+
const chatContainer = document.getElementById('chat-container');
|
| 227 |
const userInput = document.getElementById('user-input');
|
| 228 |
const sendBtn = document.getElementById('send-btn');
|
| 229 |
const playBtn = document.getElementById('play-conversation');
|
|
|
|
| 264 |
|
| 265 |
// Scroll to bottom with smooth behavior
|
| 266 |
setTimeout(() => {
|
| 267 |
+
chatContainer.scrollTo({
|
| 268 |
top: chatMessages.scrollHeight,
|
| 269 |
behavior: 'smooth'
|
| 270 |
});
|
|
|
|
| 277 |
element.textContent = text;
|
| 278 |
// Scroll to bottom with smooth behavior
|
| 279 |
setTimeout(() => {
|
| 280 |
+
chatContainer.scrollTo({
|
| 281 |
top: chatMessages.scrollHeight,
|
| 282 |
behavior: 'smooth'
|
| 283 |
});
|