Spaces:

basheer1414
/

aiui

Running

App Files Files Community

basheer1414 commited on 28 days ago

Commit

33adc07

verified ·

1 Parent(s): e71285d

I'll make that settings all right down below right side of the main window not the canvas and the glass tile inside the settings color change to gradient only grading no solid color only say gradient color and add a small button to oh for color palettes gradient pellets so when I click that I need a pop up a small window to choose modern color gradient pellets five dark gradient 5 a light gradient - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +44 -18

index.html CHANGED Viewed

@@ -558,11 +558,11 @@
     </style>
 </head>
 <body id="appBody" class="min-h-screen flex items-center justify-center p-4 transition-colors duration-300 bg-slate-100 dark:bg-gray-900">
-    <!-- Glass-morph settings button (bottom-right) -->
-    <button id="glassSettingsBtn"
-            title="Glass settings"
-            class="fixed bottom-3 right-3 z-50 w-5 h-5 text-cyan-400 hover:text-cyan-300 transition-transform hover:scale-125">
-        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm-8.5-2c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm17 0c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2z"/></svg>
     </button>
     <!-- Dark / Light Mode Toggle -->
@@ -697,18 +697,13 @@
         </div>
     </div>
-    <!-- Glass-morph Settings Mini Modal -->
-    <div id="glassSettingsModal"
-         class="fixed bottom-12 right-3 z-50 hidden bg-gray-900/90 backdrop-blur-md border border-cyan-400/30 rounded-lg p-2 w-48 text-xs text-white shadow-lg">
-        <h4 class="text-cyan-300 mb-1">Glass Style</h4>
-        <label class="block mb-1"><input type="color" id="glassColor" value="#eb8efdd9" class="w-4 h-4 rounded border-none"> Color</label>
-        <label class="block mb-1">Blur <input type="range" id="glassBlur" min="0" max="30" value="15" class="w-full h-1 bg-gray-700 rounded appearance-none"></label>
-        <label class="block mb-1">Border <input type="range" id="glassBorder" min="0" max="1" step="0.05" value="0.34" class="w-full h-1 bg-gray-700 rounded appearance-none"></label>
-        <label class="block mb-1">Shadow <input type="range" id="glassShadow" min="0" max="1" step="0.05" value="0.5" class="w-full h-1 bg-gray-700 rounded appearance-none"></label>
     </div>
     <!-- Animated Background Particles -->
@@ -794,7 +789,38 @@
         const glassBorder = document.getElementById('glassBorder');
         const glassShadow = document.getElementById('glassShadow');
-        glassBtn.addEventListener('click', () => glassMod.classList.toggle('hidden'));
         function updateGlass() {
             const color = glassColor.value;

     </style>
 </head>
 <body id="appBody" class="min-h-screen flex items-center justify-center p-4 transition-colors duration-300 bg-slate-100 dark:bg-gray-900">
+    <!-- tiny palette button inside chat-input row -->
+    <button id="paletteBtn"
+            title="Choose gradient"
+            class="bg-cyan-500 text-white text-xs px-1.5 py-0.5 rounded absolute bottom-4 right-16 z-10">
+        🎨
     </button>
     <!-- Dark / Light Mode Toggle -->
         </div>
     </div>
+    <!-- Gradient-Palette Pop-up -->
+    <div id="palettePopup"
+         class="hidden absolute bg-gray-900/90 backdrop-blur-md border border-cyan-400/30 rounded-lg p-2 z-20 text-xs w-48">
+        <h4 class="text-cyan-300 mb-1">Glass Gradients</h4>
+        <div id="glassGradients" class="grid grid-cols-2 gap-1">
+            <!-- filled by JS -->
+        </div>
     </div>
     <!-- Animated Background Particles -->
         const glassBorder = document.getElementById('glassBorder');
         const glassShadow = document.getElementById('glassShadow');
+        const paletteBtn  = document.getElementById('paletteBtn');
+        const palettePopup = document.getElementById('palettePopup');
+        const glassGradients = document.getElementById('glassGradients');
+        paletteBtn.addEventListener('click', () => palettePopup.classList.toggle('hidden'));
+        // build 10 gradient swatches
+        const lightGlass = [
+            'linear-gradient(135deg,#ffeaa7,#fab1a0)',
+            'linear-gradient(135deg,#a29bfe,#6c5ce7)',
+            'linear-gradient(135deg,#74b9ff,#0984e3)',
+            'linear-gradient(135deg,#fd79a8,#e84393)',
+            'linear-gradient(135deg,#55efc4,#00b894)'
+        ];
+        const darkGlass = [
+            'linear-gradient(135deg,#2d3436,#636e72)',
+            'linear-gradient(135deg,#192a56,#273c75)',
+            'linear-gradient(135deg,#192a56,#40739e)',
+            'linear-gradient(135deg,#2f3640,#353b48)',
+            'linear-gradient(135deg,#273c75,#192a56)'
+        ];
+        [...lightGlass, ...darkGlass].forEach(grad => {
+            const sw = document.createElement('button');
+            sw.className = 'w-full h-6 rounded border border-cyan-400/30 hover:scale-110 transition-transform';
+            sw.style.background = grad;
+            sw.addEventListener('click', () => {
+                chatContainer.style.background = grad;
+                palettePopup.classList.add('hidden');
+            });
+            glassGradients.appendChild(sw);
+        });
         function updateGlass() {
             const color = glassColor.value;