fix: restore correct uploader with chunked multipart upload support
This commit is contained in:
parent
837d848c2e
commit
97c4a4c779
1 changed files with 12 additions and 597 deletions
|
|
@ -35,600 +35,15 @@ body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellips
|
|||
/* ============================================================
|
||||
SPLASH SCREEN
|
||||
============================================================ */
|
||||
#splash{position:fixed;inset:0;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;z-index:9999}#splash.fade-out{animation:fadeOut .6s ease-out forwards}@keyframes fadeOut{to{opacity:0;pointer-events:none}}.splash-content{text-align:center}.splash-logo{width:120px;height:120px;margin:0 auto 2rem;position:relative}.splash-logo svg{width:100%;height:100%;filter:drop-shadow(0 0 24px var(--dragon-glow))}.splash-text{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem;letter-spacing:.02em}.splash-subtitle{font-size:.9rem;color:var(--text-secondary);font-weight:400}
|
||||
|
||||
/* ============================================================
|
||||
NAVIGATION
|
||||
============================================================ */
|
||||
nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height, 70px);background:linear-gradient(180deg,rgba(6,8,14,.95) 0%,rgba(6,8,14,0) 100%);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100;display:flex;align-items:center;padding:0 2rem}
|
||||
|
||||
nav{-webkit-backdrop-filter:blur(12px)}
|
||||
|
||||
.nav-container{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1400px;margin:0 auto}
|
||||
|
||||
.nav-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;font-weight:600;font-size:1.1rem;transition:opacity .2s}
|
||||
|
||||
.nav-logo:hover{opacity:.7}
|
||||
|
||||
.nav-logo svg{width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
|
||||
|
||||
.nav-links{display:flex;align-items:center;gap:2rem}
|
||||
|
||||
.nav-links a{color:var(--text-secondary);text-decoration:none;font-size:.95rem;font-weight:500;transition:color .2s}
|
||||
|
||||
.nav-links a:hover{color:var(--accent-bright)}
|
||||
|
||||
.nav-button{background:var(--accent);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;font-size:.9rem;transition:all .2s;text-decoration:none;display:inline-block}
|
||||
|
||||
.nav-button:hover{background:var(--accent-bright);transform:translateY(-2px);box-shadow:0 8px 16px rgba(43,92,255,.2)}
|
||||
|
||||
.mobile-menu-btn{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer}
|
||||
|
||||
@media (max-width:768px){.nav-links{display:none}.mobile-menu-btn{display:block}#mobile-menu{position:absolute;top:70px;left:0;right:0;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:1rem 2rem;display:none;flex-direction:column;gap:1rem}#mobile-menu.show{display:flex}#mobile-menu a{color:var(--text-secondary);text-decoration:none;padding:.5rem 0;transition:color .2s}#mobile-menu a:hover{color:var(--accent-bright)}}
|
||||
|
||||
/* ============================================================
|
||||
HERO SECTION
|
||||
============================================================ */
|
||||
.hero{margin-top:70px;padding:8rem 2rem;min-height:calc(100vh - 70px);display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
|
||||
|
||||
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,rgba(43,92,255,.1) 0%,transparent 70%);pointer-events:none}
|
||||
|
||||
.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto}
|
||||
|
||||
.hero-title{font-size:clamp(2.5rem, 8vw, 4rem);font-weight:800;line-height:1.2;margin-bottom:1.5rem;background:linear-gradient(135deg,var(--text-primary) 0%,var(--text-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
||||
|
||||
.hero-subtitle{font-size:1.3rem;color:var(--text-secondary);margin-bottom:2rem;line-height:1.6}
|
||||
|
||||
.hero-cta{display:inline-flex;gap:1rem;flex-wrap:wrap;justify-content:center}
|
||||
|
||||
.btn{padding:1rem 2rem;border-radius:10px;font-weight:600;border:none;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-block;font-size:1rem}
|
||||
|
||||
.btn-primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-bright) 100%);color:#fff;box-shadow:0 8px 16px rgba(43,92,255,.3)}
|
||||
|
||||
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(43,92,255,.4)}
|
||||
|
||||
.btn-secondary{background:transparent;border:2px solid var(--border-bright);color:var(--text-primary)}
|
||||
|
||||
.btn-secondary:hover{border-color:var(--accent-bright);color:var(--accent-bright);background:rgba(43,92,255,.05)}
|
||||
|
||||
@media (max-width:768px){.hero{padding:4rem 1.5rem;min-height:auto}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}}
|
||||
|
||||
/* ============================================================
|
||||
FEATURES SECTION
|
||||
============================================================ */
|
||||
.features{padding:6rem 2rem;background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
|
||||
.features-container{max-width:1400px;margin:0 auto}
|
||||
|
||||
.section-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem;text-align:center}
|
||||
|
||||
.section-subtitle{font-size:1.1rem;color:var(--text-secondary);text-align:center;margin-bottom:4rem;max-width:600px;margin-left:auto;margin-right:auto}
|
||||
|
||||
.features-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem}
|
||||
|
||||
.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2rem;transition:all .3s}
|
||||
|
||||
.feature-card:hover{background:var(--bg-card-hover);border-color:var(--border-bright);transform:translateY(-8px);box-shadow:0 12px 24px rgba(0,0,0,.2)}
|
||||
|
||||
.feature-icon{width:48px;height:48px;background:var(--accent-glow);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--accent);font-size:1.5rem}
|
||||
|
||||
.feature-title{font-size:1.3rem;font-weight:700;margin-bottom:.5rem}
|
||||
|
||||
.feature-desc{font-size:.95rem;color:var(--text-secondary);line-height:1.6}
|
||||
|
||||
@media (max-width:768px){.features{padding:4rem 1.5rem}.section-title{font-size:1.8rem}.features-grid{grid-template-columns:1fr}}
|
||||
|
||||
/* ============================================================
|
||||
STATS SECTION
|
||||
============================================================ */
|
||||
.stats{padding:4rem 2rem;background:var(--bg-primary);display:flex;justify-content:center;align-items:center}
|
||||
|
||||
.stats-container{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:3rem;text-align:center;width:100%}
|
||||
|
||||
.stat-item h3{font-size:clamp(2rem, 5vw, 3rem);font-weight:800;color:var(--accent);margin-bottom:.5rem}
|
||||
|
||||
.stat-item p{color:var(--text-secondary);font-size:1rem}
|
||||
|
||||
@media (max-width:768px){.stats{padding:3rem 1.5rem}.stats-container{grid-template-columns:1fr;gap:2rem}.stat-item h3{font-size:2rem}}
|
||||
|
||||
/* ============================================================
|
||||
GALLERY SECTION
|
||||
============================================================ */
|
||||
.gallery{padding:6rem 2rem;background:var(--bg-secondary);border-top:1px solid var(--border)}
|
||||
|
||||
.gallery-container{max-width:1400px;margin:0 auto}
|
||||
|
||||
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:2rem}
|
||||
|
||||
.gallery-item{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;position:relative}
|
||||
|
||||
.gallery-item:hover{border-color:var(--border-bright);transform:scale(1.05)}
|
||||
|
||||
.gallery-item-content{width:100%;height:100%;background:linear-gradient(135deg, var(--accent-glow) 0%, var(--dragon-glow) 100%);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--text-primary);font-size:1.1rem}
|
||||
|
||||
@media (max-width:768px){.gallery{padding:4rem 1.5rem}.gallery-grid{grid-template-columns:1fr 1fr}}
|
||||
|
||||
/* ============================================================
|
||||
TESTIMONIALS SECTION
|
||||
============================================================ */
|
||||
.testimonials{padding:6rem 2rem;background:var(--bg-primary);border-top:1px solid var(--border)}
|
||||
|
||||
.testimonials-container{max-width:1000px;margin:0 auto}
|
||||
|
||||
.testimonials-grid{display:grid;gap:2rem}
|
||||
|
||||
.testimonial-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2rem;position:relative}
|
||||
|
||||
.testimonial-card::before{content:'"';position:absolute;top:-10px;left:20px;font-size:4rem;color:var(--accent);opacity:.3;font-weight:800}
|
||||
|
||||
.testimonial-text{color:var(--text-secondary);font-style:italic;margin-bottom:1.5rem;line-height:1.8;position:relative;z-index:1}
|
||||
|
||||
.testimonial-author{font-weight:600;color:var(--text-primary);margin-bottom:.25rem}
|
||||
|
||||
.testimonial-role{font-size:.9rem;color:var(--text-secondary)}
|
||||
|
||||
@media (max-width:768px){.testimonials{padding:4rem 1.5rem}}
|
||||
|
||||
/* ============================================================
|
||||
PRICING SECTION
|
||||
============================================================ */
|
||||
.pricing{padding:6rem 2rem;background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
|
||||
.pricing-container{max-width:1400px;margin:0 auto}
|
||||
|
||||
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;margin-top:3rem}
|
||||
|
||||
.pricing-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2.5rem;transition:all .3s;display:flex;flex-direction:column}
|
||||
|
||||
.pricing-card.featured{border:2px solid var(--accent);transform:scale(1.05)}
|
||||
|
||||
.pricing-card:hover{border-color:var(--border-bright);background:var(--bg-card-hover)}
|
||||
|
||||
.pricing-name{font-size:1.5rem;font-weight:700;margin-bottom:1rem}
|
||||
|
||||
.pricing-price{font-size:3rem;font-weight:800;color:var(--accent);margin-bottom:.5rem}
|
||||
|
||||
.pricing-period{color:var(--text-secondary);margin-bottom:2rem}
|
||||
|
||||
.pricing-features{list-style:none;margin-bottom:2rem;flex:1}
|
||||
|
||||
.pricing-features li{padding:.5rem 0;color:var(--text-secondary);border-bottom:1px solid var(--border);font-size:.95rem}
|
||||
|
||||
.pricing-features li::before{content:'✓';color:var(--success);font-weight:800;margin-right:.5rem}
|
||||
|
||||
.pricing-button{background:var(--accent);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}
|
||||
|
||||
.pricing-button:hover{background:var(--accent-bright);transform:translateY(-2px)}
|
||||
|
||||
.pricing-card.featured .pricing-button{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-bright) 100%);box-shadow:0 8px 16px rgba(43,92,255,.3)}
|
||||
|
||||
@media (max-width:768px){.pricing{padding:4rem 1.5rem}.pricing-grid{grid-template-columns:1fr}.pricing-card.featured{transform:scale(1)}}
|
||||
|
||||
/* ============================================================
|
||||
CTA SECTION
|
||||
============================================================ */
|
||||
.cta{padding:4rem 2rem;background:linear-gradient(135deg,rgba(43,92,255,.1) 0%,rgba(224,92,26,.05) 100%);border-top:1px solid var(--border);text-align:center}
|
||||
|
||||
.cta-container{max-width:600px;margin:0 auto}
|
||||
|
||||
.cta-title{font-size:2rem;font-weight:800;margin-bottom:1rem}
|
||||
|
||||
.cta-text{color:var(--text-secondary);margin-bottom:2rem;line-height:1.6}
|
||||
|
||||
@media (max-width:768px){.cta{padding:3rem 1.5rem}.cta-title{font-size:1.5rem}}
|
||||
|
||||
/* ============================================================
|
||||
FOOTER
|
||||
============================================================ */
|
||||
footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:3rem 2rem;margin-top:2rem}
|
||||
|
||||
footer-container{max-width:1400px;margin:0 auto}
|
||||
|
||||
.footer-content{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:3rem;margin-bottom:3rem}
|
||||
|
||||
.footer-section h3{font-size:1.1rem;font-weight:700;margin-bottom:1rem}
|
||||
|
||||
.footer-section ul{list-style:none}
|
||||
|
||||
.footer-section a{color:var(--text-secondary);text-decoration:none;transition:color .2s;display:block;padding:.5rem 0}
|
||||
|
||||
.footer-section a:hover{color:var(--accent-bright)}
|
||||
|
||||
.footer-bottom{border-top:1px solid var(--border);padding-top:2rem;text-align:center;color:var(--text-secondary);font-size:.9rem}
|
||||
|
||||
@media (max-width:768px){footer{padding:2rem 1.5rem}.footer-content{gap:2rem}}
|
||||
|
||||
/* ============================================================
|
||||
UTILITY CLASSES
|
||||
============================================================ */
|
||||
.container{max-width:1400px;margin:0 auto;padding:0 2rem}
|
||||
|
||||
.flex{display:flex}
|
||||
|
||||
.flex-center{display:flex;align-items:center;justify-content:center}
|
||||
|
||||
.grid{display:grid}
|
||||
|
||||
.text-center{text-align:center}
|
||||
|
||||
.mt{margin-top:1rem}
|
||||
|
||||
.mb{margin-bottom:1rem}
|
||||
|
||||
.my{margin-top:1rem;margin-bottom:1rem}
|
||||
|
||||
.py{padding-top:1rem;padding-bottom:1rem}
|
||||
|
||||
.gap{gap:1rem}
|
||||
|
||||
/* ============================================================
|
||||
ANIMATIONS
|
||||
============================================================ */
|
||||
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
|
||||
|
||||
@keyframes slideInUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
|
||||
|
||||
@keyframes slideInDown{from{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}
|
||||
|
||||
.fade-in{animation:fadeIn .6s ease-out}
|
||||
|
||||
.slide-in-up{animation:slideInUp .6s ease-out}
|
||||
|
||||
.slide-in-down{animation:slideInDown .6s ease-out}
|
||||
|
||||
/* ============================================================
|
||||
SCROLLBAR STYLING
|
||||
============================================================ */
|
||||
::-webkit-scrollbar{width:10px}
|
||||
|
||||
::-webkit-scrollbar-track{background:var(--bg-primary)}
|
||||
|
||||
::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:5px}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="splash" class="splash-content">
|
||||
<div class="splash-logo">
|
||||
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M50 10L85 90H15L50 10Z" fill="currentColor" stroke="var(--dragon)" stroke-width="2"/>
|
||||
<circle cx="50" cy="50" r="20" fill="none" stroke="var(--dragon)" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="splash-text">Dragon Wind</div>
|
||||
<div class="splash-subtitle">Wild Dragon</div>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<div class="nav-container">
|
||||
<a href="#" class="nav-logo">
|
||||
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M50 10L85 90H15L50 10Z" fill="currentColor" stroke="var(--dragon)" stroke-width="2"/>
|
||||
</svg>
|
||||
<span>Dragon Wind</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#gallery">Gallery</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#contact">Contact</a>
|
||||
<a href="#" class="nav-button">Get Started</a>
|
||||
</div>
|
||||
<button class="mobile-menu-btn" id="mobile-toggle">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="mobile-menu"></div>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Unleash the Power of Dragon Wind</h1>
|
||||
<p class="hero-subtitle">Experience lightning-fast performance with our cutting-edge platform. Built for speed, designed for excellence.</p>
|
||||
<div class="hero-cta">
|
||||
<button class="btn btn-primary">Start Free Trial</button>
|
||||
<button class="btn btn-secondary">Learn More</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="features" class="features">
|
||||
<div class="features-container">
|
||||
<h2 class="section-title">Why Dragon Wind?</h2>
|
||||
<p class="section-subtitle">Discover the features that make us the choice of thousands of professionals worldwide</p>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">⚡</div>
|
||||
<h3 class="feature-title">Lightning Fast</h3>
|
||||
<p class="feature-desc">Experience unprecedented speed with our optimized infrastructure and cutting-edge technology.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔒</div>
|
||||
<h3 class="feature-title">Secure & Safe</h3>
|
||||
<p class="feature-desc">Bank-grade security with enterprise-level encryption and compliance certifications.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📈</div>
|
||||
<h3 class="feature-title">Scalable</h3>
|
||||
<p class="feature-desc">Grow your business without limits. Our platform scales with your needs.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎯</div>
|
||||
<h3 class="feature-title">Precise Control</h3>
|
||||
<p class="feature-desc">Fine-grained controls and customization options for advanced users.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌍</div>
|
||||
<h3 class="feature-title">Global Reach</h3>
|
||||
<p class="feature-desc">Deploy globally with our distributed network of data centers worldwide.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">💎</div>
|
||||
<h3 class="feature-title">Premium Support</h3>
|
||||
<p class="feature-desc">24/7 dedicated support from our expert team, always ready to help.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="stats">
|
||||
<div class="stats-container">
|
||||
<div class="stat-item">
|
||||
<h3>10M+</h3>
|
||||
<p>Active Users</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<h3>99.99%</h3>
|
||||
<p>Uptime SLA</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<h3>50+</h3>
|
||||
<p>Countries</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<h3>24/7</h3>
|
||||
<p>Support</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gallery" class="gallery">
|
||||
<div class="gallery-container">
|
||||
<h2 class="section-title">Showcase</h2>
|
||||
<p class="section-subtitle">See what our platform can do</p>
|
||||
<div class="gallery-grid">
|
||||
<div class="gallery-item">
|
||||
<div class="gallery-item-content">Dashboard</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<div class="gallery-item-content">Analytics</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<div class="gallery-item-content">Reports</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<div class="gallery-item-content">API Console</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<div class="gallery-item-content">Settings</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<div class="gallery-item-content">Integration</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="testimonials">
|
||||
<div class="testimonials-container">
|
||||
<h2 class="section-title">What Users Say</h2>
|
||||
<div class="testimonials-grid">
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-text">Dragon Wind has completely transformed how we manage our operations. The performance is incredible!</div>
|
||||
<div class="testimonial-author">Sarah Johnson</div>
|
||||
<div class="testimonial-role">CEO, TechCorp</div>
|
||||
</div>
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-text">Best investment we've made. The ROI was immediate and the team support is outstanding.</div>
|
||||
<div class="testimonial-author">Michael Chen</div>
|
||||
<div class="testimonial-role">Founder, DataSystems</div>
|
||||
</div>
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-text">Simple, elegant, powerful. This is what enterprise software should be.</div>
|
||||
<div class="testimonial-author">Elena Rodriguez</div>
|
||||
<div class="testimonial-role">Operations Director, GlobalTech</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pricing" class="pricing">
|
||||
<div class="pricing-container">
|
||||
<h2 class="section-title">Pricing Plans</h2>
|
||||
<p class="section-subtitle">Choose the perfect plan for your business</p>
|
||||
<div class="pricing-grid">
|
||||
<div class="pricing-card">
|
||||
<h3 class="pricing-name">Starter</h3>
|
||||
<div class="pricing-price">$29</div>
|
||||
<div class="pricing-period">per month</div>
|
||||
<ul class="pricing-features">
|
||||
<li>Up to 100 users</li>
|
||||
<li>5GB storage</li>
|
||||
<li>Basic analytics</li>
|
||||
<li>Email support</li>
|
||||
<li>API access</li>
|
||||
</ul>
|
||||
<button class="pricing-button">Get Started</button>
|
||||
</div>
|
||||
<div class="pricing-card featured">
|
||||
<h3 class="pricing-name">Professional</h3>
|
||||
<div class="pricing-price">$99</div>
|
||||
<div class="pricing-period">per month</div>
|
||||
<ul class="pricing-features">
|
||||
<li>Up to 500 users</li>
|
||||
<li>100GB storage</li>
|
||||
<li>Advanced analytics</li>
|
||||
<li>Priority support</li>
|
||||
<li>Full API access</li>
|
||||
<li>Custom integrations</li>
|
||||
</ul>
|
||||
<button class="pricing-button">Get Started</button>
|
||||
</div>
|
||||
<div class="pricing-card">
|
||||
<h3 class="pricing-name">Enterprise</h3>
|
||||
<div class="pricing-price">Custom</div>
|
||||
<div class="pricing-period">contact us</div>
|
||||
<ul class="pricing-features">
|
||||
<li>Unlimited users</li>
|
||||
<li>Unlimited storage</li>
|
||||
<li>Custom analytics</li>
|
||||
<li>24/7 phone support</li>
|
||||
<li>Dedicated account manager</li>
|
||||
<li>SLA guarantee</li>
|
||||
</ul>
|
||||
<button class="pricing-button">Contact Sales</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="cta">
|
||||
<div class="cta-container">
|
||||
<h2 class="cta-title">Ready to Get Started?</h2>
|
||||
<p class="cta-text">Join thousands of satisfied users and transform your business with Dragon Wind today.</p>
|
||||
<button class="btn btn-primary">Start Your Free Trial Now</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>Product</h3>
|
||||
<ul>
|
||||
<li><a href="#features">Features</a></li>
|
||||
<li><a href="#pricing">Pricing</a></li>
|
||||
<li><a href="#gallery">Gallery</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Company</h3>
|
||||
<ul>
|
||||
<li><a href="#">About Us</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Legal</h3>
|
||||
<ul>
|
||||
<li><a href="#">Privacy Policy</a></li>
|
||||
<li><a href="#">Terms of Service</a></li>
|
||||
<li><a href="#">Cookie Policy</a></li>
|
||||
<li><a href="#">Security</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Social</h3>
|
||||
<ul>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">LinkedIn</a></li>
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Discord</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 Dragon Wind. All rights reserved. Powered by Wild Dragon.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Fade out splash screen
|
||||
const splash = document.getElementById('splash');
|
||||
if(splash) {
|
||||
setTimeout(() => splash.classList.add('fade-out'), 1500);
|
||||
}
|
||||
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if(target) {
|
||||
target.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Mobile menu toggle
|
||||
const mobileToggle = document.getElementById('mobile-toggle');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
if(mobileToggle && mobileMenu) {
|
||||
mobileToggle.addEventListener('click', function() {
|
||||
mobileMenu.classList.toggle('show');
|
||||
});
|
||||
|
||||
// Populate mobile menu
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
if(navLinks) {
|
||||
mobileMenu.innerHTML = navLinks.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
// Intersection Observer for animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -100px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add('slide-in-up');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.feature-card, .gallery-item, .testimonial-card, .pricing-card').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Theme toggle (if theme switcher exists)
|
||||
const themeBtn = document.querySelector('[data-theme-toggle]');
|
||||
if(themeBtn) {
|
||||
themeBtn.addEventListener('click', function() {
|
||||
const html = document.documentElement;
|
||||
const currentTheme = html.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
html.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
});
|
||||
}
|
||||
|
||||
// Check for saved theme preference
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
|
||||
// Close mobile menu when a link is clicked
|
||||
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
||||
link.addEventListener('click', function() {
|
||||
mobileMenu.classList.remove('show');
|
||||
});
|
||||
});
|
||||
|
||||
// Hide mobile menu when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if(mobileMenu && mobileToggle && !mobileMenu.contains(e.target) && !mobileToggle.contains(e.target)) {
|
||||
mobileMenu.classList.remove('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
#splash{
|
||||
position:fixed;inset:0;z-index:9999;background:#03040a;
|
||||
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
#splash.fade-out{
|
||||
animation:splashFadeOut .7s cubic-bezier(.4,0,1,1) forwards;
|
||||
}
|
||||
@keyframes splashFadeOut{
|
||||
0%{opacity:1;transform:scale(1)}
|
||||
100%{opacity:0;transform:scale(1.05);pointer-events:none}
|
||||
}
|
||||
Loading…
Reference in a new issue