Files
templatemo_601_chain_summit/index.html
T
2026-07-11 23:45:28 +03:00

564 lines
30 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chain Summit - AI & Blockchain Conference</title>
<link rel="stylesheet" href="templatemo-chain-summit.css">
<!--
TemplateMo 601 Chain Summit
https://templatemo.com/tm-601-chain-summit
-->
</head>
<body>
<!-- Background Animation -->
<div class="bg-animation">
<div class="neural-network" id="neuralNetwork"></div>
<div class="particles" id="particles"></div>
</div>
<!-- Header -->
<header>
<nav>
<a href="#home" class="logo">
<svg class="logo-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Hexagon background -->
<polygon points="50,5 85,25 85,65 50,85 15,65 15,25"
fill="none"
stroke="url(#gradientStroke)"
stroke-width="2"/>
<!-- Neural network nodes -->
<circle cx="50" cy="30" r="4" fill="#00ffff"/>
<circle cx="35" cy="45" r="4" fill="#ff00ff"/>
<circle cx="65" cy="45" r="4" fill="#ff00ff"/>
<circle cx="35" cy="65" r="4" fill="#00ffff"/>
<circle cx="65" cy="65" r="4" fill="#00ffff"/>
<circle cx="50" cy="55" r="5" fill="#7c3aed"/>
<!-- Connection lines -->
<line x1="50" y1="30" x2="35" y2="45" stroke="#00ffff" stroke-width="1" opacity="0.5"/>
<line x1="50" y1="30" x2="65" y2="45" stroke="#00ffff" stroke-width="1" opacity="0.5"/>
<line x1="35" y1="45" x2="50" y2="55" stroke="#ff00ff" stroke-width="1" opacity="0.5"/>
<line x1="65" y1="45" x2="50" y2="55" stroke="#ff00ff" stroke-width="1" opacity="0.5"/>
<line x1="50" y1="55" x2="35" y2="65" stroke="#7c3aed" stroke-width="1" opacity="0.5"/>
<line x1="50" y1="55" x2="65" y2="65" stroke="#7c3aed" stroke-width="1" opacity="0.5"/>
<!-- Gradient definitions -->
<defs>
<linearGradient id="gradientStroke" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00ffff;stop-opacity:1" />
<stop offset="50%" style="stop-color:#ff00ff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
<span class="logo-text">Chain Summit</span>
</a>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#speakers">Speakers</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#sponsors">Sponsors</a></li>
<li><a href="#register">Register</a></li>
</ul>
<div class="mobile-menu" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
</nav>
<!-- Mobile Navigation Menu -->
<div class="mobile-nav" id="mobileNav">
<a href="#about" onclick="closeMenu()">About</a>
<a href="#speakers" onclick="closeMenu()">Speakers</a>
<a href="#schedule" onclick="closeMenu()">Schedule</a>
<a href="#sponsors" onclick="closeMenu()">Sponsors</a>
<a href="#register" onclick="closeMenu()">Register</a>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h1>Chain Summit</h1>
<p>Where Artificial Intelligence Meets Blockchain Innovation</p>
<div class="hero-stats">
<div class="stat">
<span class="stat-number" data-target="500">0</span>
<span class="stat-label">Attendees</span>
</div>
<div class="stat">
<span class="stat-number" data-target="50">0</span>
<span class="stat-label">Speakers</span>
</div>
<div class="stat">
<span class="stat-number" data-target="3">0</span>
<span class="stat-label">Days</span>
</div>
<div class="stat">
<span class="stat-number" data-target="25">0</span>
<span class="stat-label">Sponsors</span>
</div>
</div>
<div class="countdown" id="countdown">
<div class="countdown-item">
<span class="countdown-number" id="days">00</span>
<span class="countdown-label">Days</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="hours">00</span>
<span class="countdown-label">Hours</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="minutes">00</span>
<span class="countdown-label">Minutes</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="seconds">00</span>
<span class="countdown-label">Seconds</span>
</div>
</div>
<div class="cta-buttons">
<a href="#about" class="btn btn-primary">Learn More</a>
<a href="#schedule" class="btn btn-secondary">View Schedule</a>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="section">
<h2 class="animate-on-scroll">About Chain Summit</h2>
<div class="about-content">
<div class="about-text animate-on-scroll slide-left">
<p>Join the world's leading experts in AI and blockchain technology for three days of cutting-edge presentations, hands-on workshops, and networking opportunities that will shape the future of technology.</p>
<p>Discover the latest breakthroughs in neural networks, machine learning, decentralized systems, and smart contracts. Connect with innovators who are transforming industries and creating tomorrow's solutions.</p>
<p>From ambitious startups to Fortune 500 companies, Chain Summit brings together the brightest minds to explore the revolutionary intersection of artificial intelligence and blockchain technology.</p>
<p>Take control of your time with <a href="https://timermo.com" rel="nofollow" target="_blank">TimerMo</a> today. Bring your designs to life with <a href="https://www.vectorsticker.com" rel="nofollow" target="_blank">VectorSticker</a> resources.</p>
</div>
<div class="about-visual animate-on-scroll slide-right">
<div class="blockchain-visual">
<div class="block">AI</div>
<div class="block">ML</div>
<div class="block">DL</div>
<div class="block">BC</div>
<div class="block">SC</div>
<div class="block">DA</div>
<div class="block">IoT</div>
<div class="block">5G</div>
<div class="block">QC</div>
</div>
</div>
</div>
<div class="about-stats animate-on-scroll scale-up">
<div class="about-stat">
<span class="about-stat-number">50+</span>
<span class="about-stat-label">Industry Leaders</span>
</div>
<div class="about-stat">
<span class="about-stat-number">500+</span>
<span class="about-stat-label">Attendees Expected</span>
</div>
<div class="about-stat">
<span class="about-stat-number">25+</span>
<span class="about-stat-label">Tech Companies</span>
</div>
<div class="about-stat">
<span class="about-stat-number">3</span>
<span class="about-stat-label">Days of Innovation</span>
</div>
</div>
<!-- Hexagonal decorations -->
<div class="hex-decoration" style="top: 10%; left: 5%;"></div>
<div class="hex-decoration" style="top: 70%; right: 10%; animation-delay: 2s;"></div>
<div class="hex-decoration" style="top: 40%; right: 5%; animation-delay: 4s;"></div>
</section>
<!-- Speakers Section -->
<section id="speakers" class="section">
<h2 class="animate-on-scroll">Featured Speakers</h2>
<div class="speakers-grid">
<div class="speaker-card animate-on-scroll scale-up stagger-animation" style="--stagger: 1;">
<div class="speaker-avatar">DR</div>
<h3 class="speaker-name">Dr. Sarah Chen</h3>
<div class="speaker-title">Chief AI Officer, TechCorp</div>
<p class="speaker-bio">Leading researcher in deep learning and neural networks. Author of 40+ AI research papers.</p>
</div>
<div class="speaker-card animate-on-scroll scale-up stagger-animation" style="--stagger: 2;">
<div class="speaker-avatar">MJ</div>
<h3 class="speaker-name">Marcus Johnson</h3>
<div class="speaker-title">Blockchain Architect, CryptoLabs</div>
<p class="speaker-bio">Pioneer in decentralized systems and smart contract development for Fortune 500 companies.</p>
</div>
<div class="speaker-card animate-on-scroll scale-up stagger-animation" style="--stagger: 3;">
<div class="speaker-avatar">LP</div>
<h3 class="speaker-name">Dr. Lisa Park</h3>
<div class="speaker-title">ML Research Director, DataMind</div>
<p class="speaker-bio">Expert in machine learning algorithms and AI ethics. Former lead scientist at major tech companies.</p>
</div>
<div class="speaker-card animate-on-scroll scale-up stagger-animation" style="--stagger: 4;">
<div class="speaker-avatar">AR</div>
<h3 class="speaker-name">Alex Rodriguez</h3>
<div class="speaker-title">Founder, Neural Networks Inc</div>
<p class="speaker-bio">Entrepreneur in AI-powered blockchain applications and scalable ML infrastructure.</p>
</div>
<div class="speaker-card animate-on-scroll scale-up stagger-animation" style="--stagger: 5;">
<div class="speaker-avatar">JW</div>
<h3 class="speaker-name">Jennifer Wu</h3>
<div class="speaker-title">VP of Innovation, QuantumTech</div>
<p class="speaker-bio">Specializes in quantum computing applications for AI and cryptography solutions.</p>
</div>
</div>
</section>
<!-- Schedule Section -->
<section id="schedule" class="section">
<h2 class="animate-on-scroll">Conference Schedule</h2>
<div class="schedule-tabs">
<button class="tab-btn active" onclick="showSchedule('day1', event)">Day 1</button>
<button class="tab-btn" onclick="showSchedule('day2', event)">Day 2</button>
<button class="tab-btn" onclick="showSchedule('day3', event)">Day 3</button>
</div>
<div id="day1" class="schedule-content active">
<div class="timeline">
<div class="timeline-item animate-on-scroll" onclick="toggleTimelineItem(this)">
<div class="timeline-header">
<div class="timeline-time">09:00-09:30</div>
<div class="timeline-info">
<div class="timeline-title">Registration & Welcome</div>
<div class="timeline-speaker">Conference Team</div>
</div>
<div class="timeline-collapse-icon"></div>
</div>
<div class="timeline-details">
<div class="timeline-desc">Network with attendees and grab your conference materials.</div>
</div>
</div>
<div class="timeline-item animate-on-scroll" onclick="toggleTimelineItem(this)">
<div class="timeline-header">
<div class="timeline-time">09:30-10:30</div>
<div class="timeline-info">
<div class="timeline-title">Opening Keynote: The Future of AI</div>
<div class="timeline-speaker">Dr. Sarah Chen</div>
</div>
<div class="timeline-collapse-icon"></div>
</div>
<div class="timeline-details">
<div class="timeline-desc">Exploring the next decade of AI and its impact on society.</div>
</div>
</div>
<div class="timeline-item animate-on-scroll" onclick="toggleTimelineItem(this)">
<div class="timeline-header">
<div class="timeline-time">10:45-11:30</div>
<div class="timeline-info">
<div class="timeline-title">Blockchain Fundamentals</div>
<div class="timeline-speaker">Marcus Johnson</div>
</div>
<div class="timeline-collapse-icon"></div>
</div>
<div class="timeline-details">
<div class="timeline-desc">Core principles of distributed ledger technology and real-world implementations.</div>
</div>
</div>
<div class="timeline-item animate-on-scroll" onclick="toggleTimelineItem(this)">
<div class="timeline-header">
<div class="timeline-time">14:00-14:45</div>
<div class="timeline-info">
<div class="timeline-title">Panel: AI Ethics</div>
<div class="timeline-speaker">Expert Panel</div>
</div>
<div class="timeline-collapse-icon"></div>
</div>
<div class="timeline-details">
<div class="timeline-desc">Responsible AI development and governance frameworks.</div>
</div>
</div>
</div>
</div>
<div id="day2" class="schedule-content">
<div class="timeline">
<div class="timeline-item animate-on-scroll" onclick="toggleTimelineItem(this)">
<div class="timeline-header">
<div class="timeline-time">09:00-09:45</div>
<div class="timeline-info">
<div class="timeline-title">Deep Learning Architectures</div>
<div class="timeline-speaker">Alex Rodriguez</div>
</div>
<div class="timeline-collapse-icon"></div>
</div>
<div class="timeline-details">
<div class="timeline-desc">Advanced neural network designs and optimization techniques.</div>
</div>
</div>
<div class="timeline-item animate-on-scroll" onclick="toggleTimelineItem(this)">
<div class="timeline-header">
<div class="timeline-time">10:00-10:45</div>
<div class="timeline-info">
<div class="timeline-title">Smart Contracts & DeFi</div>
<div class="timeline-speaker">Marcus Johnson</div>
</div>
<div class="timeline-collapse-icon"></div>
</div>
<div class="timeline-details">
<div class="timeline-desc">Building decentralized financial applications and automated market makers.</div>
</div>
</div>
<div class="timeline-item animate-on-scroll" onclick="toggleTimelineItem(this)">
<div class="timeline-header">
<div class="timeline-time">14:00-17:00</div>
<div class="timeline-info">
<div class="timeline-title">Hands-on Workshops</div>
<div class="timeline-speaker">Various Experts</div>
</div>
<div class="timeline-collapse-icon"></div>
</div>
<div class="timeline-details">
<div class="timeline-desc">Build your own AI-powered blockchain application with industry experts.</div>
</div>
</div>
</div>
</div>
<div id="day3" class="schedule-content">
<div class="timeline">
<div class="timeline-item animate-on-scroll" onclick="toggleTimelineItem(this)">
<div class="timeline-header">
<div class="timeline-time">09:00-09:45</div>
<div class="timeline-info">
<div class="timeline-title">Enterprise AI Implementation</div>
<div class="timeline-speaker">Dr. Lisa Park</div>
</div>
<div class="timeline-collapse-icon"></div>
</div>
<div class="timeline-details">
<div class="timeline-desc">Strategies for scaling AI in large organizations.</div>
</div>
</div>
<div class="timeline-item animate-on-scroll" onclick="toggleTimelineItem(this)">
<div class="timeline-header">
<div class="timeline-time">10:00-10:45</div>
<div class="timeline-info">
<div class="timeline-title">Startup Pitch Session</div>
<div class="timeline-speaker">Selected Startups</div>
</div>
<div class="timeline-collapse-icon"></div>
</div>
<div class="timeline-details">
<div class="timeline-desc">Innovative AI and blockchain startups present their solutions.</div>
</div>
</div>
<div class="timeline-item animate-on-scroll" onclick="toggleTimelineItem(this)">
<div class="timeline-header">
<div class="timeline-time">14:00-15:00</div>
<div class="timeline-info">
<div class="timeline-title">Closing Ceremony</div>
<div class="timeline-speaker">Conference Team</div>
</div>
<div class="timeline-collapse-icon"></div>
</div>
<div class="timeline-details">
<div class="timeline-desc">Awards ceremony and networking finale.</div>
</div>
</div>
</div>
</div>
</section>
<!-- Sponsors Section -->
<section id="sponsors" class="section">
<h2 class="animate-on-scroll">Our Sponsors</h2>
<div class="sponsors-section animate-on-scroll">
<div class="sponsor-tiers">
<!-- Platinum Sponsors -->
<div class="sponsor-tier">
<h3 class="tier-title platinum">Platinum Partners</h3>
<div class="sponsors-grid platinum">
<div class="sponsor-card platinum animate-on-scroll scale-up stagger-animation" style="--stagger: 1;">
<div class="sponsor-logo">TC</div>
<h4 class="sponsor-name">TechCorp Global</h4>
<p class="sponsor-description">Leading AI infrastructure and enterprise solutions</p>
</div>
</div>
</div>
<!-- Gold Sponsors -->
<div class="sponsor-tier">
<h3 class="tier-title gold">Gold Partners</h3>
<div class="sponsors-grid gold">
<div class="sponsor-card gold animate-on-scroll scale-up stagger-animation" style="--stagger: 2;">
<div class="sponsor-logo">CL</div>
<h4 class="sponsor-name">CryptoLabs</h4>
<p class="sponsor-description">Blockchain development and DeFi solutions</p>
</div>
<div class="sponsor-card gold animate-on-scroll scale-up stagger-animation" style="--stagger: 3;">
<div class="sponsor-logo">DM</div>
<h4 class="sponsor-name">DataMind</h4>
<p class="sponsor-description">Machine learning and data analytics platform</p>
</div>
</div>
</div>
<!-- Silver Sponsors -->
<div class="sponsor-tier">
<h3 class="tier-title silver">Silver Partners</h3>
<div class="sponsors-grid silver">
<div class="sponsor-card silver animate-on-scroll scale-up stagger-animation" style="--stagger: 4;">
<div class="sponsor-logo">FC</div>
<h4 class="sponsor-name">FutureCorp</h4>
<p class="sponsor-description">Digital transformation services</p>
</div>
<div class="sponsor-card silver animate-on-scroll scale-up stagger-animation" style="--stagger: 5;">
<div class="sponsor-logo">AI</div>
<h4 class="sponsor-name">AI Ventures</h4>
<p class="sponsor-description">Investment and startup incubation</p>
</div>
<div class="sponsor-card silver animate-on-scroll scale-up stagger-animation" style="--stagger: 6;">
<div class="sponsor-logo">BC</div>
<h4 class="sponsor-name">BlockChain Pro</h4>
<p class="sponsor-description">Blockchain consulting and development</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Register Section -->
<section id="register" class="section">
<div class="register-section animate-on-scroll">
<div class="register-content">
<h2 class="register-title">Stay Updated</h2>
<p class="register-subtitle">Be the first to know about conference updates and early bird tickets</p>
<form class="email-form" onsubmit="handleEmailSubmit(event)">
<input
type="email"
class="email-input"
placeholder="Enter your email address"
required
id="emailInput"
>
<button type="submit" class="submit-btn">Sign Up</button>
</form>
<div id="formMessage" class="form-message"></div>
</div>
</div>
<!-- Contact Information -->
<div class="contact-info-section animate-on-scroll">
<div class="contact-container">
<!-- Contact Form Column -->
<div class="contact-form-column">
<h3 class="contact-form-title">Send Us a Message</h3>
<form class="contact-form" onsubmit="handleContactSubmit(event)">
<div class="form-field">
<label for="contactName">Name</label>
<input type="text" id="contactName" required placeholder="Your name">
</div>
<div class="form-field">
<label for="contactEmail">Email</label>
<input type="email" id="contactEmail" required placeholder="your@email.com">
</div>
<div class="form-field">
<label for="contactSubject">Subject</label>
<input type="text" id="contactSubject" required placeholder="How can we help?">
</div>
<div class="form-field">
<label for="contactMessage">Message</label>
<textarea id="contactMessage" required placeholder="Your message..."></textarea>
</div>
<button type="submit" class="contact-submit-btn">Send Message</button>
</form>
</div>
<!-- Contact Info Column -->
<div class="contact-info-column">
<h3 class="contact-info-title">Get In Touch</h3>
<div class="contact-info-grid">
<div class="contact-item">
<div class="contact-icon">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</svg>
</div>
<div class="contact-details">
<span class="contact-label">Venue</span>
<span class="contact-value">Bangkok Convention Center<br>999 Rama IV Road<br>Bangkok, Thailand</span>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
</div>
<div class="contact-details">
<span class="contact-label">Email</span>
<span class="contact-value"><a href="mailto:info@chainsummit.com">info@chainsummit.com</a></span>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
</svg>
</div>
<div class="contact-details">
<span class="contact-label">Phone</span>
<span class="contact-value">+66 2 123 4567</span>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
</div>
<div class="contact-details">
<span class="contact-label">Event Date</span>
<span class="contact-value">December 15-17, 2025<br>9:00 AM - 6:00 PM Daily</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-content">
<h2>Chain Summit</h2>
<p>November 14-16, 2026 • Bangkok Convention Center</p>
<!-- set the event date in the JavaScript file / line number 32 -->
<div class="social-links">
<a href="https://x.com/minthu" class="social-link" rel="nofollow noopener" target="_blank">T</a>
<a href="#" class="social-link">L</a>
<a href="#" class="social-link">F</a>
<a href="#" class="social-link">I</a>
</div>
<p>
© 2026 Chain Summit Conference. All rights reserved.
| Designed by <a href="https://templatemo.com" rel="nofollow noopener" target="_blank">TemplateMo</a>
</p>
</div>
</footer>
<script src="templatemo-chain-scripts.js"></script>
</body>
</html>