mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-01-11 20:10:25 +00:00
page update
This commit is contained in:
tapframe
parent
2fd2839e18
commit
a63168e06d
1 changed files with 129 additions and 34 deletions
163
index.html
163
index.html
|
|
@ -21,9 +21,13 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -37,6 +41,8 @@
|
|||
line-height: 1.6;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -129,8 +135,8 @@
|
|||
}
|
||||
|
||||
.hero-logo {
|
||||
width: clamp(6rem, 15vw, 10rem);
|
||||
height: clamp(6rem, 15vw, 10rem);
|
||||
width: clamp(7rem, 18vw, 12rem);
|
||||
height: clamp(7rem, 18vw, 12rem);
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
|
||||
}
|
||||
|
|
@ -294,13 +300,69 @@
|
|||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.scroll-down {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
animation: fadeInUp 1s ease-out 1.5s both;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.scroll-down:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.scroll-down-arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
.scroll-down-arrow svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.scroll-down-text {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
padding: 4rem 0 8rem 0;
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.features::before {
|
||||
|
|
@ -529,9 +591,13 @@
|
|||
|
||||
/* Screenshots Section */
|
||||
.screenshots {
|
||||
padding: 8rem 0;
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.screenshots h2 {
|
||||
|
|
@ -701,6 +767,7 @@
|
|||
text-align: center;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.credits {
|
||||
|
|
@ -840,7 +907,7 @@
|
|||
|
||||
.hero {
|
||||
padding: 2rem 0;
|
||||
min-height: 90vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
|
|
@ -849,8 +916,8 @@
|
|||
}
|
||||
|
||||
.hero-logo {
|
||||
width: clamp(4rem, 12vw, 6rem);
|
||||
height: clamp(4rem, 12vw, 6rem);
|
||||
width: clamp(5rem, 15vw, 8rem);
|
||||
height: clamp(5rem, 15vw, 8rem);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
|
|
@ -862,6 +929,10 @@
|
|||
font-size: 1.1rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.scroll-down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.download-buttons {
|
||||
flex-direction: column;
|
||||
|
|
@ -877,12 +948,17 @@
|
|||
|
||||
.features,
|
||||
.screenshots {
|
||||
padding: 5rem 0;
|
||||
padding: 3rem 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.features h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.features h2,
|
||||
.screenshots h2 {
|
||||
font-size: 2rem;
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
|
|
@ -963,10 +1039,19 @@
|
|||
Download for iOS
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a href="#features" class="scroll-down">
|
||||
<div class="scroll-down-arrow">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 13L12 18L17 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="scroll-down-text">Explore</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features">
|
||||
<section class="features" id="features">
|
||||
<div class="container">
|
||||
<h2>POWERFUL FEATURES</h2>
|
||||
<div class="features-grid">
|
||||
|
|
@ -978,8 +1063,8 @@
|
|||
<path d="M3 12L12 17L21 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Smart Discovery</h3>
|
||||
<p>Personalized recommendations, advanced search, and calendar integration for tracking your favorite shows and movies.</p>
|
||||
<h3>Stremio Addon Support</h3>
|
||||
<p>Full compatibility with Stremio addons, allowing you to access your favorite streaming sources and content providers seamlessly.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card" data-aos="fade-up" data-aos-delay="200">
|
||||
|
|
@ -989,53 +1074,51 @@
|
|||
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Premium Playback</h3>
|
||||
<p>Dual video player support with trailer integration, auto-play functionality, and seamless progress tracking across devices.</p>
|
||||
<h3>Streaming Scrapers</h3>
|
||||
<p>Advanced movie and TV show streaming scrapers that automatically find and aggregate content from multiple sources for seamless viewing.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 13A5 5 0 0 0 7.54 7.54L4.93 4.93A10 10 0 1 0 19.07 19.07L16.46 16.46A5 5 0 0 0 13 10L10 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21 21L15 15L9 9L3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 2L13.09 8.26L22 9L17 14L18.18 23L12 19.77L5.82 23L7 14L2 9L10.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Universal Integration</h3>
|
||||
<p>Full Trakt.tv sync, Stremio addon compatibility, TMDB integration, and MDBList support for the ultimate experience.</p>
|
||||
<h3>Advanced Rating System</h3>
|
||||
<p>Comprehensive rating screens with IMDB, TMDB, Rotten Tomatoes, and Metacritic scores for informed viewing decisions.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Beautiful Interface</h3>
|
||||
<p>Modern Material Design with dynamic theming, dominant color extraction, and smooth animations throughout.</p>
|
||||
<h3>Deep Customization</h3>
|
||||
<p>Extensive customization options including themes, player settings, notification preferences, and personalized content discovery.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card" data-aos="fade-up" data-aos-delay="500">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 8A6 6 0 0 0 6 8C6 7 9 9 12 9S18 7 18 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 8V12A6 6 0 1 1 6 12V8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 20V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Smart Notifications</h3>
|
||||
<p>Push notifications for new episodes, background sync, and comprehensive settings for complete customization.</p>
|
||||
<h3>Watch Progress Tracking</h3>
|
||||
<p>Seamless progress synchronization across devices with Trakt.tv integration and local watch history management.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card" data-aos="fade-up" data-aos-delay="600">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21 16V8A2 2 0 0 0 19 6H5A2 2 0 0 0 3 8V16A2 2 0 0 0 5 18H19A2 2 0 0 0 21 16Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<polygon points="7 10 12 15 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Optimized Performance</h3>
|
||||
<p>Advanced caching system, offline functionality, and optimized rendering for lightning-fast performance.</p>
|
||||
<h3>Multi-Platform Support</h3>
|
||||
<p>Available on iOS and Android platforms with consistent experience and cross-device synchronization</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1069,6 +1152,18 @@
|
|||
<img src="src/assets/ratingscreen.jpg" alt="Ratings" loading="lazy">
|
||||
<h4>Ratings</h4>
|
||||
</div>
|
||||
<div class="screenshot">
|
||||
<img src="src/assets/seasonandepisode.jpg" alt="Episodes & Seasons" loading="lazy">
|
||||
<h4>Episodes & Seasons</h4>
|
||||
</div>
|
||||
<div class="screenshot">
|
||||
<img src="src/assets/search.jpg" alt="Search & Details" loading="lazy">
|
||||
<h4>Search & Details</h4>
|
||||
</div>
|
||||
<div class="screenshot">
|
||||
<img src="src/assets/metadascreen.jpg" alt="Content Details" loading="lazy">
|
||||
<h4>Content Details</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1098,7 +1193,7 @@
|
|||
<p>Built with ❤️ using React Native & Expo</p>
|
||||
<div class="footer-links">
|
||||
<a href="https://github.com/tapframe/NuvioStreaming" class="github-link">
|
||||
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" class="github-logo">
|
||||
<img src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" alt="GitHub" class="github-logo">
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue