suphicakir/templatemo_601_chain_summit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
suphicakir
2026-07-11 23:45:28 +03:00
commit 87b2d53f55
5 changed files with 2520 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitattributes
+2
View File
@@ -0,0 +1,2 @@
# Auto detect text files and perform LF normalization
* text=auto
index.html
+564
View File
@@ -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>
templatemo-chain-scripts.js
+311
View File
@@ -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);
});
templatemo-chain-summit.css
+1642
View File
File diff suppressed because it is too large Load Diff
timer.html
+1
View File
@@ -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>