Update index.html

index.html

@@ -153,44 +153,44 @@
         /* Switch Camera Button Styles */
         .switch-camera-button-container {
             position: absolute;
-            bottom: calc(100% + 0.75rem); /* 12px above the cam button */
+            bottom: calc(100% + 0.65rem); /* Adjusted spacing, was 0.75rem */
             left: 50%;
-            /* transform: translateX(-50%); Will be handled by inner button for animation orgin */
             z-index: 5;
             opacity: 0;
-            transform: translateY(15px) scale(0.7); /* Start from below and scaled down */
+            transform: translateY(15px) scale(0.7) translateX(-50%); /* Ensure centered above */
             pointer-events: none;
             transition: opacity 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+            transform-origin: center bottom; /* Animation origin */
         }
         .switch-camera-button-container.visible {
             opacity: 1;
-            transform: translateY(0) scale(1);
+            transform: translateY(0) scale(1) translateX(-50%);
             pointer-events: auto;
         }
         .switch-camera-button-content {
-            width: 52px;
-            height: 52px;
+            width: 48px; /* Reduced from 52px */
+            height: 48px; /* Reduced from 52px */
             background-color: var(--background);
             border: 1px solid var(--border);
             border-radius: 9999px;
             display: flex;
             align-items: center;
             justify-content: center;
-            box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 3px 5px rgba(0,0,0,0.1);
+            box-shadow: 0 5px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08); /* Slightly softer shadow */
             cursor: pointer;
             transform-origin: center; /* For hover animation */
             transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
         }
         .switch-camera-button-content:hover {
-            transform: scale(1.15) rotate(-5deg); /* Slight scale and rotate on hover */
-            box-shadow: 0 8px 18px rgba(0,0,0,0.2), 0 4px 7px rgba(0,0,0,0.15);
+            transform: scale(1.12) rotate(-6deg); /* Adjusted hover */
+            box-shadow: 0 7px 15px rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.12);
         }
         .switch-camera-button-content:active {
-            transform: scale(1.05) rotate(0deg); /* Press down effect */
+            transform: scale(1.03) rotate(0deg); /* Press down effect */
         }
         .switch-camera-button-content svg {
-            width: 26px;
-            height: 26px;
+            width: 22px; /* Reduced from 26px, for 48px button */
+            height: 22px; /* Reduced from 26px */
             stroke: var(--foreground);
             transition: transform 0.3s ease-in-out;
         }
@@ -264,17 +264,18 @@
                 <!-- Footer Controls - Order Changed -->
                 <div id="footer-controls" class="footer-controls layout-default">
                     <!-- Cam Button Wrapper (Now on the Left) -->
-                    <div id="cam-button-wrapper" class="relative flex justify-center"> <!-- Added flex justify-center for switch button alignment -->
+                    <div id="cam-button-wrapper" class="relative flex justify-center">
                         <div id="cam-button" class="control-button cam-button-color">
                             <!-- Cam icon will be injected here by JS -->
                         </div>
                         <div id="switch-camera-button-container" class="switch-camera-button-container">
                             <button id="switch-camera-button" aria-label="Switch Camera" class="switch-camera-button-content">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <path d="M21.5 2v6h-6"></path>
-                                    <path d="M2.5 22V16h6"></path>
-                                    <path d="M22 11.5A10 10 0 0 0 3.5 12.5"></path>
-                                    <path d="M2 12.5a10 10 0 0 0 18.5-1"></path>
+                                <!-- New Switch Camera Icon -->
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5"/>
+                                    <path d="M13 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5"/>
+                                    <path d="m17 12-3-3 3-3"/>
+                                    <path d="m7 12 3 3-3 3"/>
                                 </svg>
                             </button>
                         </div>