diff --git a/index.html b/index.html index e8ad550..7d18d10 100644 --- a/index.html +++ b/index.html @@ -751,6 +751,166 @@ opacity: 0.9; } + /* iOS Installation Modal */ + .ios-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.9); + backdrop-filter: blur(20px); + z-index: 2000; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + + .ios-modal.active { + opacity: 1; + visibility: visible; + } + + .ios-modal-content { + background: rgba(20, 20, 20, 0.95); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 24px; + padding: 2.5rem; + max-width: 500px; + width: 90%; + backdrop-filter: blur(30px); + transform: scale(0.8) translateY(50px); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + } + + .ios-modal.active .ios-modal-content { + transform: scale(1) translateY(0); + } + + .ios-modal-header { + text-align: center; + margin-bottom: 2rem; + } + + .ios-modal-title { + color: white; + font-size: 1.8rem; + font-weight: 600; + margin-bottom: 0.5rem; + letter-spacing: -0.02em; + } + + .ios-modal-subtitle { + color: rgba(255, 255, 255, 0.7); + font-size: 1rem; + font-weight: 400; + } + + .ios-install-options { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .ios-install-option { + display: flex; + align-items: center; + gap: 1rem; + padding: 1.25rem; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + color: white; + text-decoration: none; + transition: all 0.3s ease; + cursor: pointer; + } + + .ios-install-option:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); + } + + .ios-option-icon { + width: 48px; + height: 48px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .ios-option-icon img { + width: 32px; + height: 32px; + border-radius: 8px; + } + + .ios-option-content { + flex: 1; + } + + .ios-option-title { + font-size: 1.1rem; + font-weight: 600; + margin-bottom: 0.25rem; + color: white; + } + + .ios-option-description { + font-size: 0.9rem; + color: rgba(255, 255, 255, 0.6); + line-height: 1.4; + } + + .ios-modal-close { + position: absolute; + top: 1rem; + right: 1rem; + background: rgba(255, 255, 255, 0.1); + border: none; + border-radius: 50%; + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + color: white; + cursor: pointer; + transition: all 0.3s ease; + font-size: 1.2rem; + } + + .ios-modal-close:hover { + background: rgba(255, 255, 255, 0.2); + transform: scale(1.1); + } + + .copy-feedback { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, 0.8); + color: white; + padding: 1rem 2rem; + border-radius: 12px; + font-size: 0.9rem; + z-index: 3000; + opacity: 0; + transition: opacity 0.3s ease; + } + + .copy-feedback.show { + opacity: 1; + } + .screenshot h4 { font-size: 1rem; font-weight: 500; @@ -1035,8 +1195,8 @@ Download for Android - - Download for iOS + + Install for iOS @@ -1051,6 +1211,63 @@ + +
+
+ +
+

Install Nuvio on iOS

+

Choose your preferred installation method

+
+ +
+
+ + +
+ URL copied to clipboard! +
+

POWERFUL FEATURES

@@ -1164,10 +1381,7 @@ Search & Details

Search & Details

-
- Content Details -

Content Details

-
+
@@ -1279,5 +1493,94 @@ }); }); - - \ No newline at end of file + + + \ No newline at end of file