Initial commit
This commit is contained in:
@@ -0,0 +1,2 @@
|
|||||||
|
# Auto detect text files and perform LF normalization
|
||||||
|
* text=auto
|
||||||
+564
@@ -0,0 +1,564 @@
|
|||||||
|
<!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>
|
||||||
@@ -0,0 +1,311 @@
|
|||||||
|
/* JavaScript Document
|
||||||
|
|
||||||
|
TemplateMo 601 Chain Summit
|
||||||
|
|
||||||
|
https://templatemo.com/tm-601-chain-summit
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Animate counter numbers
|
||||||
|
function animateCounters() {
|
||||||
|
const counters = document.querySelectorAll('.stat-number');
|
||||||
|
counters.forEach(counter => {
|
||||||
|
const target = parseInt(counter.getAttribute('data-target'));
|
||||||
|
const increment = target / 200;
|
||||||
|
let current = 0;
|
||||||
|
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
current += increment;
|
||||||
|
counter.textContent = Math.floor(current);
|
||||||
|
|
||||||
|
if (current >= target) {
|
||||||
|
counter.textContent = target;
|
||||||
|
clearInterval(timer);
|
||||||
|
}
|
||||||
|
}, 10);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Countdown timer
|
||||||
|
function updateCountdown() {
|
||||||
|
const eventDate = new Date('2026-11-14T09:00:00');
|
||||||
|
const now = new Date();
|
||||||
|
const diff = eventDate - now;
|
||||||
|
|
||||||
|
if (diff > 0) {
|
||||||
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||||
|
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||||
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
||||||
|
|
||||||
|
document.getElementById('days').textContent = days.toString().padStart(2, '0');
|
||||||
|
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
|
||||||
|
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
|
||||||
|
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create neural network animation
|
||||||
|
function createNeuralNetwork() {
|
||||||
|
const container = document.getElementById('neuralNetwork');
|
||||||
|
const nodes = 20;
|
||||||
|
|
||||||
|
for (let i = 0; i < nodes; i++) {
|
||||||
|
const node = document.createElement('div');
|
||||||
|
node.className = 'node';
|
||||||
|
node.style.left = Math.random() * 100 + '%';
|
||||||
|
node.style.top = Math.random() * 100 + '%';
|
||||||
|
node.style.animationDelay = Math.random() * 2 + 's';
|
||||||
|
container.appendChild(node);
|
||||||
|
|
||||||
|
// Create connections
|
||||||
|
if (i > 0 && Math.random() > 0.5) {
|
||||||
|
const connection = document.createElement('div');
|
||||||
|
connection.className = 'connection';
|
||||||
|
connection.style.left = Math.random() * 100 + '%';
|
||||||
|
connection.style.top = Math.random() * 100 + '%';
|
||||||
|
connection.style.width = Math.random() * 200 + 50 + 'px';
|
||||||
|
connection.style.animationDelay = Math.random() * 3 + 's';
|
||||||
|
container.appendChild(connection);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create floating particles
|
||||||
|
function createParticles() {
|
||||||
|
const container = document.getElementById('particles');
|
||||||
|
const particleCount = 50;
|
||||||
|
|
||||||
|
for (let i = 0; i < particleCount; i++) {
|
||||||
|
const particle = document.createElement('div');
|
||||||
|
particle.className = 'particle';
|
||||||
|
particle.style.left = Math.random() * 100 + '%';
|
||||||
|
particle.style.animationDelay = Math.random() * 6 + 's';
|
||||||
|
particle.style.animationDuration = (10 + Math.random() * 4) + 's';
|
||||||
|
container.appendChild(particle);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Schedule tab functionality
|
||||||
|
function showSchedule(day, event) {
|
||||||
|
// Hide all schedule content
|
||||||
|
document.querySelectorAll('.schedule-content').forEach(content => {
|
||||||
|
content.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove active class from all tabs
|
||||||
|
document.querySelectorAll('.tab-btn').forEach(tab => {
|
||||||
|
tab.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show selected day and activate tab
|
||||||
|
document.getElementById(day).classList.add('active');
|
||||||
|
event.target.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mobile menu toggle
|
||||||
|
function toggleMenu() {
|
||||||
|
const mobileMenu = document.querySelector('.mobile-menu');
|
||||||
|
const mobileNav = document.getElementById('mobileNav');
|
||||||
|
|
||||||
|
mobileMenu.classList.toggle('active');
|
||||||
|
mobileNav.classList.toggle('active');
|
||||||
|
|
||||||
|
// Prevent body scroll when menu is open
|
||||||
|
document.body.style.overflow = mobileNav.classList.contains('active') ? 'hidden' : 'auto';
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeMenu() {
|
||||||
|
const mobileMenu = document.querySelector('.mobile-menu');
|
||||||
|
const mobileNav = document.getElementById('mobileNav');
|
||||||
|
|
||||||
|
mobileMenu.classList.remove('active');
|
||||||
|
mobileNav.classList.remove('active');
|
||||||
|
document.body.style.overflow = 'auto';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Timeline item toggle
|
||||||
|
function toggleTimelineItem(item) {
|
||||||
|
item.classList.toggle('expanded');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth scrolling for navigation links
|
||||||
|
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'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update active menu items on scroll
|
||||||
|
function updateActiveMenuItem() {
|
||||||
|
const sections = document.querySelectorAll('section[id]');
|
||||||
|
const scrollPosition = window.scrollY + 100;
|
||||||
|
|
||||||
|
sections.forEach(section => {
|
||||||
|
const sectionTop = section.offsetTop;
|
||||||
|
const sectionHeight = section.offsetHeight;
|
||||||
|
const sectionId = section.getAttribute('id');
|
||||||
|
|
||||||
|
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
|
||||||
|
// Update desktop menu
|
||||||
|
document.querySelectorAll('.nav-links a').forEach(link => {
|
||||||
|
link.classList.remove('active');
|
||||||
|
if (link.getAttribute('href') === `#${sectionId}`) {
|
||||||
|
link.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update mobile menu
|
||||||
|
document.querySelectorAll('.mobile-nav a').forEach(link => {
|
||||||
|
link.classList.remove('active');
|
||||||
|
if (link.getAttribute('href') === `#${sectionId}`) {
|
||||||
|
link.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Header scroll effect
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const header = document.querySelector('header');
|
||||||
|
if (window.scrollY > 100) {
|
||||||
|
header.style.background = 'rgba(10, 10, 15, 0.95)';
|
||||||
|
header.style.borderBottom = '1px solid rgba(255, 255, 255, 0.1)';
|
||||||
|
} else {
|
||||||
|
header.style.background = 'rgba(10, 10, 15, 0.9)';
|
||||||
|
header.style.borderBottom = '1px solid rgba(255, 255, 255, 0.05)';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update active menu item
|
||||||
|
updateActiveMenuItem();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Intersection Observer for scroll animations
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -100px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('animated');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Initialize scroll animations
|
||||||
|
function initScrollAnimations() {
|
||||||
|
// Add animation classes to elements
|
||||||
|
document.querySelectorAll('.section h2').forEach(heading => {
|
||||||
|
heading.classList.add('animate-on-scroll');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.timeline-item').forEach((item, index) => {
|
||||||
|
item.style.setProperty('--stagger', index + 1);
|
||||||
|
item.classList.add('stagger-animation');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Observe all animation elements
|
||||||
|
document.querySelectorAll('.animate-on-scroll').forEach(el => {
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add hexagonal decorations dynamically
|
||||||
|
function addHexDecorations() {
|
||||||
|
const sections = document.querySelectorAll('.section');
|
||||||
|
sections.forEach((section, index) => {
|
||||||
|
if (index > 0) { // Skip hero section
|
||||||
|
const hexCount = 2 + Math.floor(Math.random() * 3);
|
||||||
|
for (let i = 0; i < hexCount; i++) {
|
||||||
|
const hex = document.createElement('div');
|
||||||
|
hex.className = 'hex-decoration';
|
||||||
|
hex.style.top = Math.random() * 80 + 10 + '%';
|
||||||
|
hex.style.left = Math.random() * 80 + 10 + '%';
|
||||||
|
hex.style.animationDelay = Math.random() * 6 + 's';
|
||||||
|
section.style.position = 'relative';
|
||||||
|
section.appendChild(hex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle contact form submission
|
||||||
|
function handleContactSubmit(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const name = document.getElementById('contactName').value;
|
||||||
|
const email = document.getElementById('contactEmail').value;
|
||||||
|
const subject = document.getElementById('contactSubject').value;
|
||||||
|
const message = document.getElementById('contactMessage').value;
|
||||||
|
|
||||||
|
// Simulate form submission (in a real scenario, this would send to a server)
|
||||||
|
if (name && email && subject && message) {
|
||||||
|
// Show success message
|
||||||
|
alert('Thank you for your message! We\'ll get back to you soon.');
|
||||||
|
|
||||||
|
// Clear the form
|
||||||
|
document.getElementById('contactName').value = '';
|
||||||
|
document.getElementById('contactEmail').value = '';
|
||||||
|
document.getElementById('contactSubject').value = '';
|
||||||
|
document.getElementById('contactMessage').value = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle email submission
|
||||||
|
function handleEmailSubmit(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const emailInput = document.getElementById('emailInput');
|
||||||
|
const formMessage = document.getElementById('formMessage');
|
||||||
|
const email = emailInput.value;
|
||||||
|
|
||||||
|
// Simulate form submission (in a real scenario, this would send to a server)
|
||||||
|
if (email) {
|
||||||
|
// Show success message
|
||||||
|
formMessage.textContent = 'Thank you for signing up! We\'ll keep you updated on Chain Summit.';
|
||||||
|
formMessage.className = 'form-message success';
|
||||||
|
formMessage.style.display = 'block';
|
||||||
|
|
||||||
|
// Clear the input
|
||||||
|
emailInput.value = '';
|
||||||
|
|
||||||
|
// Hide message after 5 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
formMessage.style.display = 'none';
|
||||||
|
}, 5000);
|
||||||
|
} else {
|
||||||
|
// Show error message
|
||||||
|
formMessage.textContent = 'Please enter a valid email address.';
|
||||||
|
formMessage.className = 'form-message error';
|
||||||
|
formMessage.style.display = 'block';
|
||||||
|
|
||||||
|
// Hide message after 3 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
formMessage.style.display = 'none';
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize everything when page loads
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
animateCounters();
|
||||||
|
createNeuralNetwork();
|
||||||
|
createParticles();
|
||||||
|
updateCountdown();
|
||||||
|
initScrollAnimations();
|
||||||
|
addHexDecorations();
|
||||||
|
|
||||||
|
// Update countdown every second
|
||||||
|
setInterval(updateCountdown, 1000);
|
||||||
|
});
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
|||||||
|
<!DOCTYPE html><html><head><!-- Timer page - powered by TimerMo.com --><meta http-equiv="refresh" content="0;url=https://www.timermo.com"><title>Timer</title></head><body></body></html>
|
||||||
Reference in New Issue
Block a user