Trading Markets - Real-Time Financial Market Tracking <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; line-height: 1.6; color: #ffffff; background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%); overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header */ header { padding: 20px 0; position: fixed; top: 0; width: 100%; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(20px); z-index: 1000; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } nav { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5em; font-weight: 700; color: #00ff88; } .nav-links { display: flex; gap: 30px; align-items: center; } .nav-links a { color: #ffffff; text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .nav-links a:hover { color: #00ff88; } /* Hero Section */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; background: radial-gradient(circle at center, rgba(0, 255, 136, 0.1) 0%, transparent 70%); } .hero-content { max-width: 800px; z-index: 2; } .hero h1 { font-size: 3.5em; font-weight: 800; margin-bottom: 20px; background: linear-gradient(135deg, #00ff88 0%, #ffffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 1.3em; color: #cccccc; margin-bottom: 40px; line-height: 1.8; } .app-preview { margin: 60px 0; position: relative; } .app-mockup { width: 300px; height: 400px; background: linear-gradient(145deg, #1a1a1a, #000000); border-radius: 30px; margin: 0 auto; padding: 20px; box-shadow: 0 20px 40px rgba(0, 255, 136, 0.2); border: 2px solid rgba(0, 255, 136, 0.3); } .market-status-demo { background: #000000; border-radius: 20px; padding: 15px; height: 100%; border: 1px solid #333; } .time-display { text-align: center; color: #00ff88; font-size: 1.2em; font-weight: bold; font-family: monospace; margin-bottom: 20px; } .market-row { display: flex; justify-content: space-between; align-items: center; padding: 10px; margin: 8px 0; background: rgba(0, 255, 136, 0.1); border-radius: 8px; } .market-info { display: flex; align-items: center; gap: 8px; } .market-status { text-align: right; } .status-open { color: #00ff88; font-weight: bold; } .status-closed { color: #ff4444; font-weight: bold; } .countdown { font-size: 0.8em; color: #999; font-family: monospace; } /* Features Section */ .features { padding: 100px 0; background: rgba(255, 255, 255, 0.02); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 60px; } .feature-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border-radius: 20px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1); } .feature-icon { font-size: 3em; margin-bottom: 20px; display: block; } .feature-card h3 { font-size: 1.5em; margin-bottom: 15px; color: #00ff88; } .feature-card p { color: #cccccc; line-height: 1.7; } /* Platforms Section */ .platforms { padding: 100px 0; text-align: center; } .platforms h2 { font-size: 2.5em; margin-bottom: 20px; color: #ffffff; } .platforms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 60px; } .platform-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border-radius: 15px; padding: 30px 20px; border: 1px solid rgba(255, 255, 255, 0.1); } .platform-icon { font-size: 3em; margin-bottom: 15px; } .platform-card h3 { font-size: 1.3em; margin-bottom: 10px; color: #ffffff; } /* CTA Section */ .cta { padding: 100px 0; text-align: center; background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, transparent 100%); } .app-store-buttons { display: flex; justify-content: center; gap: 20px; margin-top: 40px; flex-wrap: wrap; } .app-store-btn { display: inline-block; background: #ffffff; color: #000000; padding: 15px 30px; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: 2px solid transparent; } .app-store-btn:hover { background: transparent; color: #ffffff; border-color: #ffffff; } .app-store-btn.mac { background: #007AFF; color: #ffffff; } .app-store-btn.mac:hover { background: transparent; border-color: #007AFF; color: #007AFF; } /* Footer */ footer { padding: 60px 0 30px; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-content { color: #999; } /* Responsive */ @media (max-width: 768px) { .hero h1 { font-size: 2.5em; } .hero p { font-size: 1.1em; } .nav-links { display: none; } .app-mockup { width: 250px; height: 350px; } .features-grid { grid-template-columns: 1fr; } } /* Animations */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .pulse { animation: pulse 2s infinite; } .section-title { font-size: 2.5em; text-align: center; margin-bottom: 20px; color: #ffffff; } .section-subtitle { text-align: center; color: #cccccc; font-size: 1.2em; margin-bottom: 40px; } </style> </head> <body> <header> <nav class="container"> <div class="logo">Trading Markets</div> <div class="nav-links"> <a href="#features">Features</a> <a href="#platforms">Platforms</a> <a href="#download">Download</a> </div> </nav> </header> <section class="hero"> <div class="container"> <div class="hero-content"> <h1>Track Financial Markets<br>in Real Time</h1> <p>The ultimate app to monitor global financial market status. NYSE, LSE, JPX - all your markets in one elegant and intuitive interface.</p> <div class="app-preview"> <div class="app-mockup"> <div class="market-status-demo"> <div class="time-display pulse">15:42:18</div> <div class="market-row"> <div class="market-info"> <span>🇺🇸</span> <strong>NYSE</strong> </div> <div class="market-status"> <div class="status-open">OPEN</div> <div class="countdown">4h17m42s</div> </div> </div> <div class="market-row"> <div class="market-info"> <span>🇬🇧</span> <strong>LSE</strong> </div> <div class="market-status"> <div class="status-open">OPEN</div> <div class="countdown">1h17m42s</div> </div> </div> <div class="market-row"> <div class="market-info"> <span>🇯🇵</span> <strong>JPX</strong> </div> <div class="market-status"> <div class="status-closed">CLOSED</div> <div class="countdown">9h17m42s</div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="features" id="features"> <div class="container"> <h2 class="section-title">Advanced Features</h2> <p class="section-subtitle">Everything you need to stay informed about financial markets</p> <div class="features-grid"> <div class="feature-card"> <span class="feature-icon">⚡</span> <h3>Real-Time Updates</h3> <p>Live updates every second. Precise NYSE, LSE and JPX market status with countdown timers to market close.</p> </div> <div class="feature-card"> <span class="feature-icon">🌍</span> <h3>World Clocks</h3> <p>Visualize time in each trading zone with elegant and intuitive analog clocks for every major market.</p> </div> <div class="feature-card"> <span class="feature-icon">📊</span> <h3>Peak Volatility Alerts</h3> <p>Smart notifications during overlap periods between US and European markets for maximum trading opportunities.</p> </div> <div class="feature-card"> <span class="feature-icon">🗓️</span> <h3>Market Holidays</h3> <p>MarketStatus API integration for accurate holiday schedules and precise trading hours across all markets.</p> </div> <div class="feature-card"> <span class="feature-icon">⚙️</span> <h3>Customization</h3> <p>Adaptive interface with timezone preferences, display styles, and personalized alert settings for your workflow.</p> </div> <div class="feature-card"> <span class="feature-icon">🎨</span> <h3>Elegant Design</h3> <p>Optimized dark interface with smooth animations and premium user experience across all devices.</p> </div> </div> </div> </section> <section class="platforms" id="platforms"> <div class="container"> <h2 class="section-title">Available Everywhere</h2> <p class="section-subtitle">Access your markets on all your Apple devices</p> <div class="platforms-grid"> <div class="platform-card"> <div class="platform-icon">📱</div> <h3>iPhone</h3> <p>Optimized touch interface</p> </div> <div class="platform-card"> <div class="platform-icon">📟</div> <h3>iPad</h3> <p>Extended large screen experience</p> </div> <div class="platform-card"> <div class="platform-icon">⌚</div> <h3>Apple Watch</h3> <p>Quick access on your wrist</p> </div> <div class="platform-card"> <div class="platform-icon">💻</div> <h3>macOS</h3> <p>Always visible desktop widget</p> </div> </div> </div> </section> <section class="cta" id="download"> <div class="container"> <h2 class="section-title">Download Now</h2> <p class="section-subtitle">Join traders who trust Trading Markets</p> <div class="app-store-buttons"> <a href="#" class="app-store-btn"> 📱 Download on the App Store </a> <a href="#" class="app-store-btn mac"> 💻 Download for Mac </a> </div> <p style="margin-top: 30px; color: #999;"> Compatible with iOS 15.0+, iPadOS 15.0+, watchOS 8.0+, macOS 12.0+ </p> </div> </section> <footer> <div class="container"> <div class="footer-content"> <p>© 2025 Trading Markets. All rights reserved.</p> <p style="margin-top: 10px; font-size: 0.9em;"> Market data is provided for informational purposes only. </p> </div> </div> </footer> <script> // Real-time clock animation function updateTime() { const timeDisplay = document.querySelector('.time-display'); if (timeDisplay) { const now = new Date(); const timeString = now.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }); timeDisplay.textContent = timeString; } } // Update every second setInterval(updateTime, 1000); updateTime(); // Initial update // Smooth scroll navigation 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', block: 'start' }); } }); }); // Fade in animations on scroll const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -100px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe feature cards document.querySelectorAll('.feature-card, .platform-card').forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(30px)'; card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; observer.observe(card); }); </script> </body> </html>