diff --git a/index.html b/index.html index 1a07e96..5bb9362 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,12 @@ + + + + + + Hidden Gems @@ -808,6 +814,227 @@ } .logout-btn:active { background: rgba(255,255,255,0.1); } + /* Save As / Add to Home Screen dialog */ + .saveas-overlay { + position: fixed; + inset: 0; + background: rgba(14,14,12,0.62); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + z-index: 300; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + opacity: 0; + pointer-events: none; + transition: opacity 0.25s; + } + .saveas-overlay.open { opacity: 1; pointer-events: all; } + + .saveas-modal { + background: var(--ivory); + border-radius: 26px; + width: 100%; + max-width: 340px; + box-shadow: 0 28px 90px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.4) inset; + transform: scale(0.91) translateY(16px); + transition: transform 0.32s cubic-bezier(0.34,1.36,0.64,1), opacity 0.24s; + overflow: hidden; + opacity: 0; + } + .saveas-overlay.open .saveas-modal { + transform: scale(1) translateY(0); + opacity: 1; + } + + /* Dark hero header */ + .saveas-header-art { + background: var(--ink); + padding: 30px 24px 22px; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + overflow: hidden; + } + .saveas-header-art::before { + content: ''; + position: absolute; + inset: 0; + background-image: + radial-gradient(ellipse at 25% 30%, rgba(201,100,66,0.22) 0%, transparent 55%), + radial-gradient(ellipse at 80% 75%, rgba(201,100,66,0.13) 0%, transparent 45%); + } + .saveas-header-art::after { + content: ''; + position: absolute; + inset: 0; + background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + } + + .saveas-icon-wrap { + position: relative; + z-index: 1; + width: 84px; + height: 84px; + margin-bottom: 13px; + filter: drop-shadow(0 8px 24px rgba(201,100,66,0.55)); + } + .saveas-art-title { + position: relative; + z-index: 1; + font-family: var(--serif); + font-size: 20px; + color: white; + letter-spacing: 0.01em; + text-align: center; + } + .saveas-art-sub { + position: relative; + z-index: 1; + font-size: 12px; + color: rgba(255,255,255,0.52); + margin-top: 3px; + font-weight: 300; + font-style: italic; + font-family: var(--serif); + text-align: center; + } + + /* Platform tabs */ + .saveas-tabs { + display: flex; + gap: 6px; + padding: 16px 18px 0; + } + .saveas-tab { + flex: 1; + padding: 8px 10px; + border-radius: 10px; + border: 1.5px solid var(--border-warm); + background: var(--cream); + font-size: 12px; + font-family: var(--sans); + font-weight: 600; + color: var(--muted); + cursor: pointer; + transition: all 0.15s; + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + -webkit-tap-highlight-color: transparent; + } + .saveas-tab.active { + background: var(--terracotta); + border-color: var(--terracotta-dark); + color: white; + box-shadow: 0 2px 8px rgba(201,100,66,0.3); + } + .saveas-tab:active:not(.active) { background: var(--warm-sand); } + + /* Steps */ + .saveas-steps { + padding: 14px 18px 6px; + display: flex; + flex-direction: column; + gap: 10px; + } + .saveas-step { + display: flex; + align-items: flex-start; + gap: 12px; + } + .saveas-step-num { + width: 26px; + height: 26px; + border-radius: 50%; + background: var(--terracotta); + color: white; + font-size: 11px; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + margin-top: 1px; + box-shadow: 0 2px 6px rgba(201,100,66,0.3); + } + .saveas-step-body {} + .saveas-step-title { + font-size: 13px; + font-weight: 600; + color: var(--ink); + margin-bottom: 1px; + display: flex; + align-items: center; + gap: 5px; + } + .saveas-step-desc { + font-size: 12px; + color: var(--muted); + line-height: 1.55; + } + .saveas-step-badge { + display: inline-flex; + align-items: center; + gap: 3px; + background: var(--warm-sand); + border: 1px solid var(--border-warm); + border-radius: 6px; + padding: 2px 7px; + font-size: 11px; + font-weight: 600; + color: var(--ink); + vertical-align: middle; + } + + /* Android install button */ + .saveas-install-btn { + margin: 6px 18px 2px; + width: calc(100% - 36px); + padding: 13px; + background: var(--terracotta); + color: var(--ivory); + border: none; + border-radius: var(--radius-sm); + font-size: 14px; + font-family: var(--sans); + font-weight: 500; + cursor: pointer; + transition: opacity 0.15s, transform 0.12s; + box-shadow: 0 0 0 1px var(--terracotta-dark), 0 4px 12px rgba(201,100,66,0.3); + letter-spacing: 0.01em; + display: flex; + align-items: center; + justify-content: center; + gap: 7px; + } + .saveas-install-btn:active { transform: scale(0.98); opacity: 0.88; } + .saveas-install-btn.hidden { display: none; } + + /* Footer action */ + .saveas-footer { + padding: 12px 18px 22px; + display: flex; + justify-content: center; + } + .saveas-done { + width: 100%; + padding: 13px; + border: 1.5px solid var(--border-warm); + border-radius: var(--radius-sm); + background: none; + font-size: 14px; + font-family: var(--sans); + font-weight: 500; + color: var(--muted); + cursor: pointer; + transition: background 0.15s; + } + .saveas-done:active { background: var(--warm-sand); } + /* Pick bar */ .pick-bar { background: var(--card); @@ -912,6 +1139,19 @@

Hidden Gems

+
@@ -1021,6 +1261,127 @@

Hidden Gems

+ +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
Add to Home Screen
+
Install Hidden Gems as an app
+
+ + +
+ + +
+ + +
+
+
1
+
+
+ Tap the Share button + + + Share + +
+
Find the share icon in Safari's toolbar (bottom center on iPhone).
+
+
+
+
2
+
+
+ Tap ＋ Add to Home Screen +
+
Scroll down the share sheet and tap this option.
+
+
+
+
3
+
+
Tap Add
+
Hidden Gems will appear on your home screen like a native app.
+
+
+
+ + + + + + + +
+ +
+
+
+