body.html
Changed around line 1
+
+
+
Ticket Tree
+
+
+
+
+ Media
+
+
+
+
+
+
+
+
Redefining Event Experiences
+
Connect passionate fanbases through seamless ticketing, digital collectibles, and professional media services.
+
+
+
+
+
Our Offerings
+
+
+
+
Ticketing
+
Zero cost to host organizations. Simple 15% markup per ticket for fans.
+
+
+
+
Collectibles
+
Digital mementos at no cost. Enhance fan loyalty and engagement.
+
+
+
+
Media Services
+
Professional content creation and marketing solutions.
+
+
+
+
+
+
Get Started
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ticket Tree
+
Redefining how fanbases connect and interact with events.
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://tickettree.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Ticket Tree - Redefining Event Experiences
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # 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.
script.js
Changed around line 1
+ 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);
+ });
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }