commit 8ba5c66bd9c8eb0c6b1b57fb9cf68cfaf0e2e48b
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 02:07:57 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..112c8a6
--- /dev/null
+++ b/body.html
@@ -0,0 +1,83 @@
+<header>
+ <nav>
+ <div class="logo">Ticket Tree</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#offerings">Offerings</a></li>
+ <li><a href="#ticketing">Ticketing</a></li>
+ <li><a href="#collectibles">Collectibles</a></li>
+ <li><a href="#media">Media</a></li>
+ <li><a href="#contact" class="cta-button">Contact Us</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Redefining Event Experiences</h1>
+ <p>Connect passionate fanbases through seamless ticketing, digital collectibles, and professional media services.</p>
+ <a href="#offerings" class="cta-button">Explore Offerings</a>
+ </div>
+ </section>
+
+ <section id="offerings" class="offerings">
+ <h2>Our Offerings</h2>
+ <div class="cards">
+ <article class="card">
+ <div class="card-icon">🎟️</div>
+ <h3>Ticketing</h3>
+ <p>Zero cost to host organizations. Simple 15% markup per ticket for fans.</p>
+ </article>
+ <article class="card">
+ <div class="card-icon">🎨</div>
+ <h3>Collectibles</h3>
+ <p>Digital mementos at no cost. Enhance fan loyalty and engagement.</p>
+ </article>
+ <article class="card">
+ <div class="card-icon">📸</div>
+ <h3>Media Services</h3>
+ <p>Professional content creation and marketing solutions.</p>
+ </article>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Get Started</h2>
+ <form id="contactForm">
+ <div class="form-group">
+ <label for="name">Name</label>
+ <input type="text" id="name" required>
+ </div>
+ <div class="form-group">
+ <label for="email">Email</label>
+ <input type="email" id="email" required>
+ </div>
+ <div class="form-group">
+ <label for="message">Message</label>
+ <textarea id="message" required></textarea>
+ </div>
+ <button type="submit" class="cta-button">Send Message</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Ticket Tree</h4>
+ <p>Redefining how fanbases connect and interact with events.</p>
+ </div>
+ <div class="footer-section">
+ <h4>Quick Links</h4>
+ <ul>
+ <li><a href="#offerings">Offerings</a></li>
+ <li><a href="#ticketing">Ticketing</a></li>
+ <li><a href="#collectibles">Collectibles</a></li>
+ <li><a href="#media">Media</a></li>
+ </ul>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..5039218
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://tickettree.scroll.pub
+metaTags
+editButton /edit.html
+title Ticket Tree - Redefining Event Experiences
+style.css
+body.html
+script.js
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..6d45d10
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# tickettree.scroll.pub
+Website generated by Claude from prompt: Ticket Tree is a cutting-edge platform redefining event experiences. By blending seamless ticketing, exclusive digital collectibles, and tailored media services, we help passionate fanbases connect and interact like never before. Designed for both hosts and fans, our solutions are cost-effective and innovation-driven. Our Offerings: Ticketing Zero cost to host organizations. Fans enjoy a simple 15% markup per ticket. Collectibles Digital mementos to enhance fan loyalty and engagement. No cost to fans or hosts—just pure value. Media Services Professional content creation and marketing. Inquire for pricing. Ticket Tree is your partner for immersive social experiences. Together, we’re redefining how fanbases connect and interact with events.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8fb950c
--- /dev/null
+++ b/script.js
@@ -0,0 +1,66 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ const spans = mobileMenu.querySelectorAll('span');
+ spans[0].style.transform = navLinks.classList.contains('active')
+ ? 'rotate(45deg) translate(8px, 8px)'
+ : 'none';
+ spans[1].style.opacity = navLinks.classList.contains('active')
+ ? '0'
+ : '1';
+ spans[2].style.transform = navLinks.classList.contains('active')
+ ? 'rotate(-45deg) translate(7px, -7px)'
+ : 'none';
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ if (navLinks.classList.contains('active')) {
+ navLinks.classList.remove('active');
+ }
+ });
+ });
+
+ // Form submission
+ const contactForm = document.getElementById('contactForm');
+ if (contactForm) {
+ contactForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ const formData = new FormData(contactForm);
+ // Add form submission logic here
+ alert('Thank you for your message! We will get back to you soon.');
+ contactForm.reset();
+ });
+ }
+
+ // Intersection Observer for animations
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ document.querySelectorAll('.card').forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ observer.observe(card);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f949e50
--- /dev/null
+++ b/style.css
@@ -0,0 +1,235 @@
+:root {
+ --primary: #2c3e50;
+ --secondary: #3498db;
+ --accent: #e74c3c;
+ --light: #ecf0f1;
+ --dark: #2c3e50;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--dark);
+ overflow-x: hidden;
+}
+
+/* Header & Navigation */
+header {
+ background: var(--primary);
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ color: var(--light);
+ font-size: 1.5rem;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ color: var(--light);
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--secondary);
+}
+
+.mobile-menu {
+ display: none;
+}
+
+/* Hero Section */
+.hero {
+ height: 100vh;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 2rem;
+}
+
+.hero-content {
+ max-width: 800px;
+ color: var(--light);
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ animation: fadeInUp 1s ease;
+}
+
+.hero p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ animation: fadeInUp 1s ease 0.2s;
+}
+
+/* Cards */
+.offerings {
+ padding: 5rem 2rem;
+ background: var(--light);
+}
+
+.cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 2rem auto;
+}
+
+.card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+}
+
+.card-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+/* Contact Form */
+.contact {
+ padding: 5rem 2rem;
+ background: var(--primary);
+ color: var(--light);
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+form {
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+input, textarea {
+ width: 100%;
+ padding: 0.8rem;
+ border: none;
+ border-radius: 5px;
+ margin-top: 0.5rem;
+}
+
+/* Buttons */
+.cta-button {
+ display: inline-block;
+ padding: 0.8rem 1.5rem;
+ background: var(--accent);
+ color: var(--light);
+ text-decoration: none;
+ border-radius: 5px;
+ transition: var(--transition);
+ border: none;
+ cursor: pointer;
+}
+
+.cta-button:hover {
+ background: #c0392b;
+ transform: translateY(-2px);
+}
+
+/* Footer */
+footer {
+ background: var(--dark);
+ color: var(--light);
+ padding: 3rem 2rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--light);
+ margin: 5px 0;
+ transition: var(--transition);
+ }
+
+ .nav-links {
+ position: fixed;
+ top: 70px;
+ left: 0;
+ right: 0;
+ background: var(--primary);
+ flex-direction: column;
+ padding: 2rem;
+ clip-path: circle(0% at top right);
+ transition: var(--transition);
+ }
+
+ .nav-links.active {
+ clip-path: circle(150% at top right);
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+}