Main functions

2025-10-26 14:44:10 +09:00
parent 6ff35e26f4
commit 291fc63a4c
901 changed files with 79783 additions and 201383 deletions
--- a/.history/public/css/sticky-price_20251026095622.css
+++ b/.history/public/css/sticky-price_20251026095622.css
@@ -0,0 +1,116 @@
+/* Dynamic Island Style Sticky Price Display - Full Width */
+#priceDisplay {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transform: translateX(0);
+    left: 1rem;
+    right: 1rem;
+    max-width: calc(64rem - 2rem); /* max-w-4xl minus padding */
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Enhanced visibility and Dynamic Island effects */
+#priceDisplay.scrolled {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
+    transform: scale(1.01);
+}
+
+/* Hover effects for Dynamic Island */
+#priceDisplay:hover {
+    transform: scale(1.02);
+    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.4);
+}
+
+/* Animation for price updates */
+#currentPrice {
+    transition: all 0.3s ease;
+}
+
+#currentPrice.updating {
+    transform: scale(1.1);
+    filter: brightness(1.2);
+}
+
+/* Enhanced pulse animation for live indicator */
+.animate-pulse-soft {
+    animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse-soft {
+    0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.7;
+        transform: scale(1.1);
+    }
+}
+
+/* Mobile responsiveness improvements */
+@media (max-width: 1024px) {
+    #priceDisplay {
+        position: relative !important;
+        bottom: auto !important;
+        left: auto !important;
+        right: auto !important;
+        transform: none !important;
+        margin: 1rem 0;
+        width: 100%;
+        max-width: none;
+    }
+    
+    #mobilePriceDisplay {
+        transform: none;
+    }
+    
+    #mobilePriceDisplay:hover {
+        transform: scale(1.02);
+    }
+}
+
+/* Dark mode enhancements for Dynamic Island */
+.dark #priceDisplay .bg-black\/80 {
+    background: rgba(17, 24, 39, 0.9);
+    -webkit-backdrop-filter: blur(24px);
+    backdrop-filter: blur(24px);
+}
+
+/* Dynamic Island entrance animation */
+#priceDisplay.visible {
+    animation: slideInBottom 0.5s ease-out;
+}
+
+@keyframes slideInBottom {
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Enhanced shadow for Dynamic Island aesthetic */
+#priceDisplay .shadow-2xl {
+    box-shadow: 
+        0 25px 50px -12px rgba(0, 0, 0, 0.4),
+        0 0 0 1px rgba(255, 255, 255, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.dark #priceDisplay .shadow-2xl {
+    box-shadow: 
+        0 25px 50px -12px rgba(0, 0, 0, 0.6),
+        0 0 0 1px rgba(255, 255, 255, 0.05),
+        inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+/* Mobile Dynamic Island styling */
+#mobilePriceDisplay .shadow-2xl {
+    box-shadow: 
+        0 20px 40px -12px rgba(0, 0, 0, 0.4),
+        0 0 0 1px rgba(255, 255, 255, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}