Last active
February 12, 2026 20:01
-
-
Save PandaWhoCodes/ff45f53b2291b5cbf897d92048d2d187 to your computer and use it in GitHub Desktop.
Chennai Explorer — 100+ Things to Do (Interactive Website)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chennai Explorer — 100+ Things to Do</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"><\/script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"><\/script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"><\/script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] }, | |
| } | |
| } | |
| } | |
| <\/script> | |
| <style> | |
| *{margin:0;padding:0;box-sizing:border-box} | |
| body{font-family:'Inter',system-ui,sans-serif;background:#fafafa;color:#1a1a2e;transition:background .3s,color .3s} | |
| html.dark body{background:#0a0b22;color:#e8e8f0} | |
| .hero-grad{background:linear-gradient(135deg,#ff5733 0%,#ff7f5c 25%,#ffab93 50%,#3b52fc 75%,#0f1137 100%);background-size:400% 400%;animation:gs 8s ease infinite} | |
| @keyframes gs{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} | |
| .card{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s} | |
| .card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,.12)} | |
| html.dark .card:hover{box-shadow:0 20px 40px rgba(0,0,0,.4)} | |
| .pill{transition:all .3s} | |
| .pill:hover{transform:scale(1.05)} | |
| .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px)} | |
| .modal-bg.open{display:flex} | |
| .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} | |
| ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px} | |
| html.dark ::-webkit-scrollbar-thumb{background:#333} | |
| </style> | |
| </head> | |
| <body> | |
| <nav id="nav" class="fixed top-0 w-full z-40 transition-all duration-300" style="background:transparent"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between"> | |
| <div class="flex items-center gap-2"><span class="text-2xl">🐾</span><span class="font-bold text-lg text-white ntx">Chennai Explorer</span></div> | |
| <div class="flex items-center gap-3"> | |
| <span id="cb" class="text-sm font-medium text-white/80 ntx hidden sm:block">104 activities</span> | |
| <button id="dt" class="w-10 h-10 rounded-full bg-white/20 backdrop-blur flex items-center justify-center text-lg hover:bg-white/30 transition-all">🌙</button> | |
| </div></div></nav> | |
| <section class="hero-grad min-h-[85vh] flex flex-col items-center justify-center text-center px-4 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-black/20"></div> | |
| <div class="relative z-10"> | |
| <p id="hs" class="text-white/70 text-sm sm:text-base uppercase tracking-[.3em] font-medium mb-4">The Ultimate Guide</p> | |
| <h1 id="ht" class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-black text-white leading-tight mb-6">Things to Do in<br><span style="color:#ffd0c0">Chennai</span></h1> | |
| <p id="hd" class="text-white/80 text-lg sm:text-xl max-w-2xl mx-auto mb-8">100+ curated activities with real prices, map links & reviews. No middleman.</p> | |
| <a href="#act" id="hc" class="inline-flex items-center gap-2 bg-white text-gray-900 font-semibold px-8 py-4 rounded-full hover:bg-orange-50 transition-all hover:scale-105 text-lg shadow-xl">Explore Activities ↓</a> | |
| </div> | |
| <div id="hst" class="relative z-10 mt-12 flex flex-wrap justify-center gap-6 sm:gap-10"> | |
| <div class="text-center"><div class="text-3xl sm:text-4xl font-black text-white">104</div><div class="text-white/60 text-sm">Activities</div></div> | |
| <div class="text-center"><div class="text-3xl sm:text-4xl font-black text-white">16</div><div class="text-white/60 text-sm">Categories</div></div> | |
| <div class="text-center"><div class="text-3xl sm:text-4xl font-black text-white">76</div><div class="text-white/60 text-sm">Map Links</div></div> | |
| <div class="text-center"><div class="text-3xl sm:text-4xl font-black text-white">₹0</div><div class="text-white/60 text-sm">Middleman Fee</div></div> | |
| </div></section> | |
| <section id="act" class="max-w-7xl mx-auto px-4 sm:px-6 pt-8 pb-4 sticky top-0 z-30 bg-[#fafafa] dark:bg-[#0a0b22] transition-colors"> | |
| <div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center mb-4"> | |
| <div class="relative flex-1 w-full"> | |
| <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg> | |
| <input id="src" type="text" placeholder="Search activities, areas, keywords..." class="w-full pl-12 pr-4 py-3.5 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-orange-500 text-base shadow-sm"> | |
| </div> | |
| <div id="rc" class="text-sm text-gray-500 dark:text-gray-400 font-medium whitespace-nowrap">Showing 104 activities</div> | |
| </div> | |
| <div id="pills" class="flex gap-2 overflow-x-auto pb-3 -mx-1 px-1"></div> | |
| </section> | |
| <section class="max-w-7xl mx-auto px-4 sm:px-6 pb-20"> | |
| <div id="grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5"></div> | |
| <div id="nr" class="hidden text-center py-20"><div class="text-6xl mb-4">🔍</div><p class="text-xl text-gray-500">No activities found</p></div> | |
| </section> | |
| <div id="modal" class="modal-bg" onclick="if(event.target===this)cm()"> | |
| <div id="mc" class="bg-white dark:bg-gray-900 rounded-3xl max-w-lg w-full max-h-[85vh] overflow-y-auto shadow-2xl p-6 sm:p-8 relative"> | |
| <button onclick="cm()" class="absolute top-4 right-4 w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 text-lg">×</button> | |
| <div id="mb"></div> | |
| </div></div> | |
| <footer class="bg-gray-950 text-white/60 py-12 px-4 text-center"> | |
| <p class="text-sm">Built with ❤️ by Claw 🐾 · Feb 2026</p> | |
| <p class="text-xs mt-2 text-white/30">Prices approximate. Confirm with venues directly.</p> | |
| </footer> | |
| <script> | |
| const A=[{"name": "Surfing \u2014 Covelong Point / Surf Turf", "category": "\ud83c\udfc4 Water Sports", "description": "Learn surfing at India's best urban surf spot", "location": "Kovalam/Covelong, ECR", "mapLink": "https://maps.google.com/?q=12.7862,80.2543", "price": "\u20b91,500-2,500/hr", "contact": "[Instagram @surfturf.in](https://www.instagram.com/surfturf.in/)", "review": "4.5/5 \u2014 \"Even beginners stand up on first session\"", "tags": []}, {"name": "Stand-Up Paddleboarding (SUP) \u2014 Bay of Life", "category": "\ud83c\udfc4 Water Sports", "description": "SUP & kayaking on calm waters", "location": "Kovalam Beach, ECR", "mapLink": "https://maps.google.com/?q=12.7956,80.2446", "price": "\u20b91,000-2,000/session", "contact": "[TripAdvisor](https://www.tripadvisor.in/Attraction_Review-g303891-d3680156-Reviews-Bay_of_Life_Surf_SUP.html)", "review": "", "tags": []}, {"name": "Kayaking", "category": "\ud83c\udfc4 Water Sports", "description": "Backwater kayaking", "location": "Muttukadu / Mudaliyar Kuppam", "mapLink": "https://maps.google.com/?q=12.8058,80.2420", "price": "\u20b9500-1,500", "contact": "", "review": "", "tags": []}, {"name": "Jet Skiing & Parasailing", "category": "\ud83c\udfc4 Water Sports", "description": "Speed thrills on the water", "location": "ECR operators", "mapLink": "https://maps.google.com/?q=12.8500,80.2450", "price": "Jet ski \u20b9800-1,500 | Parasailing \u20b91,000-2,000", "contact": "", "review": "", "tags": []}, {"name": "Catamaran Ride", "category": "\ud83c\udfc4 Water Sports", "description": "Traditional fishing catamaran experience on the sea", "location": "Covelong / Kovalam", "mapLink": "https://maps.google.com/?q=12.7862,80.2543", "price": "\u20b9500-1,500", "contact": "", "review": "", "tags": []}, {"name": "Sailing \u2014 Royal Madras Yacht Club", "category": "\ud83c\udfc4 Water Sports", "description": "Yacht rides on the Bay of Bengal (est. 1911)", "location": "Chennai Port", "mapLink": "https://maps.google.com/?q=13.0918,80.2957", "price": "Guest sessions from \u20b92,000", "contact": "", "review": "", "tags": []}, {"name": "Ocean Swimming \u2014 Wild Swim Club", "category": "\ud83c\udfc4 Water Sports", "description": "Guided open water swimming sessions in the sea", "location": "Various Chennai beaches", "mapLink": "", "price": "", "contact": "[Instagram @wild.swimclub](https://www.instagram.com/wild.swimclub/) | Coach: @sharathmukundan", "review": "", "tags": []}, {"name": "Muttukadu Boat House (TTDC)", "category": "\ud83c\udfc4 Water Sports", "description": "Speed boats, rowing, pedal boats on the backwaters", "location": "Muttukadu, ECR", "mapLink": "https://maps.google.com/?q=12.8058,80.2420", "price": "\u20b9200-500/ride", "contact": "", "review": "", "tags": []}, {"name": "Bouldering & Rock Climbing \u2014 FitRock Arena", "category": "\ud83c\udfaf Adventure", "description": "Chennai's first indoor climbing gym. Bouldering walls + climbing routes.", "location": "**Chetpet** & **Pallikaranai** [Map (Chetpet)](https://maps.google.com/?q=13.0766,80.2410) [Map (Pallikaranai)](https://maps.google.com/?q=12.9233,80.2082)", "mapLink": "", "price": "\u20b9500-800/session", "contact": "[Instagram @fitrockarena](https://www.instagram.com/fitrockarena/) | Sam: +91 9566895306", "review": "", "tags": []}, {"name": "Go-Karting \u2014 Smaaash", "category": "\ud83c\udfaf Adventure", "description": "Indoor go-kart racing + VR + bowling + arcade", "location": "Express Avenue Mall / Phoenix MarketCity", "mapLink": "https://maps.google.com/?q=13.0590,80.2630", "price": "\u20b9300-600/race", "contact": "", "review": "", "tags": []}, {"name": "Off-Road Motorsports \u2014 ORS (Offroad Sports)", "category": "\ud83c\udfaf Adventure", "description": "ATV rides, dirt biking on off-road tracks (90cc to 1000cc RZRs)", "location": "Pattipulam, ECR (2km from Dolphin City)", "mapLink": "https://maps.google.com/?q=12.6816,80.2146", "price": "\u20b9500-2,000", "contact": "[offroadecr.com](https://www.offroadecr.com/)", "review": "", "tags": []}, {"name": "Olympic Shooting \u2014 Ace Shooters Club", "category": "\ud83c\udfaf Adventure", "description": "Air pistol & rifle shooting range with professional instructors", "location": "Kilpauk & Anna Nagar West", "mapLink": "https://maps.google.com/?q=13.0822,80.2371", "price": "\u20b9850+ (20-40 shots)", "contact": "[aceshooters.club](https://aceshooters.club/)", "review": "", "tags": []}, {"name": "Archery", "category": "\ud83c\udfaf Adventure", "description": "Bullseye sessions with expert coaches", "location": "Anna Nagar West", "mapLink": "https://maps.google.com/?q=13.0850,80.2101", "price": "\u20b9500-800/session", "contact": "Book through Ace Shooters or search \"archery Chennai\" on Google Maps", "review": "", "tags": []}, {"name": "Paintball", "category": "\ud83c\udfaf Adventure", "description": "Outdoor team paintball battles", "location": "ECR / Chennai outskirts", "mapLink": "https://maps.google.com/?q=12.8500,80.2450", "price": "\u20b9500-1,000/session", "contact": "", "review": "", "tags": []}, {"name": "Laser Tag", "category": "\ud83c\udfaf Adventure", "description": "Indoor laser tag arena", "location": "Smaaash, Phoenix MarketCity, Velachery", "mapLink": "https://maps.google.com/?q=13.0590,80.2630", "price": "\u20b9300-500/game", "contact": "", "review": "", "tags": []}, {"name": "Escape Rooms \u2014 Mystery Rooms Chennai", "category": "\ud83c\udfaf Adventure", "description": "Multiple themed puzzle rooms", "location": "Nungambakkam", "mapLink": "https://maps.google.com/?q=13.0678,80.2472", "price": "\u20b9500-800/person", "contact": "[TripAdvisor](https://www.tripadvisor.com/Attraction_Review-g304556-d13547932-Reviews-Mystery_Rooms_Chennai.html)", "review": "4.5/5", "tags": []}, {"name": "VGP Wonder Ice Rink \u2014 Ice Skating", "category": "\ud83c\udfaf Adventure", "description": "One of the few ice rinks in South India", "location": "ECR, Injambakkam", "mapLink": "https://maps.google.com/?q=12.9127,80.2501", "price": "\u20b9500-700", "contact": "", "review": "", "tags": []}, {"name": "Airborne \u2014 Inflatable & Trampoline Park", "category": "\ud83c\udfaf Adventure", "description": "Trampolines, obstacle courses, foam pits, bouncy castles", "location": "Marina Mall, OMR + KNK Road, La Rue 18, Citi Centre", "mapLink": "https://maps.google.com/?q=12.8361,80.2295", "price": "\u20b9500-800", "contact": "[Facebook @Airbornechennai](https://www.facebook.com/Airbornechennai/)", "review": "", "tags": []}, {"name": "Let's Play Trampoline Park", "category": "\ud83c\udfaf Adventure", "description": "Dedicated trampoline zones", "location": "Chennai search \"trampoline park Chennai\" on Google Maps", "mapLink": "", "price": "\u20b9400-700", "contact": "", "review": "", "tags": []}, {"name": "Bowling", "category": "\ud83c\udfaf Adventure", "description": "Multiple lanes at entertainment zones", "location": "Smaaash / Express Avenue", "mapLink": "https://maps.google.com/?q=13.0590,80.2630", "price": "\u20b9250-400/game", "contact": "", "review": "", "tags": []}, {"name": "VR Gaming", "category": "\ud83c\udfaf Adventure", "description": "Virtual reality gaming experiences", "location": "Smaaash + multiple locations", "mapLink": "https://maps.google.com/?q=13.0590,80.2630", "price": "\u20b9300-600/session", "contact": "", "review": "", "tags": []}, {"name": "Indoor Remote Control Car Racing \u2014 RC Arena", "category": "\ud83c\udfaf Adventure", "description": "Chennai's first RC car racing arena!", "location": "Nungambakkam", "mapLink": "https://maps.google.com/?q=13.0610,80.2476", "price": "\u20b9300/30 min | \u20b9500/hr", "contact": "[Instagram @rc_arena_](https://www.instagram.com/rc_arena_/)", "review": "", "tags": []}, {"name": "Indoor Golf Simulator \u2014 Golfer's Edge Chennai", "category": "\ud83c\udfcc\ufe0f Sports & Fitness", "description": "Ultra-realistic HD virtual golf simulator + 170 sqft putting green", "location": "Alwarpet", "mapLink": "https://maps.google.com/?q=13.0384,80.2554", "price": "\u20b91,000-2,000/session", "contact": "[golfers-edge.com](https://www.golfers-edge.com/golfers-edge-chennai)", "review": "", "tags": []}, {"name": "Bungee Fitness \u2014 S Fusion Studio", "category": "\ud83c\udfcc\ufe0f Sports & Fitness", "description": "High-energy, low-impact workout using harness & bungee cords. Chennai's FIRST bungee fitness studio!", "location": "Ayanavaram", "mapLink": "https://maps.google.com/?q=13.0977,80.2389", "price": "", "contact": "[Instagram @sfusionstudio](https://www.instagram.com/sfusionstudio/) | +91 7845884470", "review": "", "tags": []}, {"name": "Aerial Yoga", "category": "\ud83c\udfcc\ufe0f Sports & Fitness", "description": "Yoga in silk hammocks \u2014 inversions, stretches, fun", "location": "S Fusion Studio, Ayanavaram (see above)", "mapLink": "", "price": "\u20b9500-1,000/session", "contact": "", "review": "", "tags": []}, {"name": "Brazilian Jiu-Jitsu", "category": "\ud83c\udfcc\ufe0f Sports & Fitness", "description": "Learn BJJ fundamentals", "location": "Multiple gyms across Chennai", "mapLink": "", "price": "\u20b9500-1,000/session", "contact": "", "review": "", "tags": []}, {"name": "Horse Riding", "category": "\ud83c\udfcc\ufe0f Sports & Fitness", "description": "Equestrian sessions with instructors", "location": "Sholinganallur, OMR", "mapLink": "https://maps.google.com/?q=12.8951,80.2279", "price": "\u20b9500-1,500/session", "contact": "[Instagram @chennaieqcentre](https://www.instagram.com/chennaieqcentre/)", "review": "", "tags": []}, {"name": "Cryotherapy \u2014 Cryo2", "category": "\ud83c\udfcc\ufe0f Sports & Fitness", "description": "Whole body cryotherapy chamber experience", "location": "Nungambakkam", "mapLink": "https://maps.google.com/?q=13.0587,80.2476", "price": "\u20b91,500-3,000/session", "contact": "[cryo2.in](https://cryo2.in/)", "review": "", "tags": []}, {"name": "Salsa, Bachata & Kizomba \u2014 Salsa Madras", "category": "\ud83d\udc83 Dance", "description": "Latin dance classes and private sessions", "location": "Teynampet", "mapLink": "https://maps.google.com/?q=13.0396,80.2540", "price": "\u20b9500-2,000/session", "contact": "[salsamadras.com](https://www.salsamadras.com/) | Instructor: Arun S Pauer", "review": "", "tags": []}, {"name": "Tufting Workshop \u2014 Make Your Own Rug", "category": "\ud83c\udfa8 Art & Workshops", "description": "Create custom tufted rugs with a tufting gun", "location": "Chetpet", "mapLink": "https://maps.google.com/?q=13.0766,80.2410", "price": "\u20b92,000-4,000/session", "contact": "Search \"tufting Chennai\" on Instagram \u2014 multiple studios (SceneBooking charges \u20b92,500+ as middleman)", "review": "", "tags": []}, {"name": "Pottery \u2014 Wheel & Hand-Building", "category": "\ud83c\udfa8 Art & Workshops", "description": "Pottery wheel throwing, hand-pressed pottery, ceramic painting", "location": "Multiple studios: Adyar , Chetpet, Anna Nagar", "mapLink": "https://maps.google.com/?q=13.0012,80.2565", "price": "\u20b9800-2,000/session", "contact": "Direct studios: Search \"pottery workshop Chennai\" on Instagram/Google Maps", "review": "", "tags": []}, {"name": "Resin Art Workshop", "category": "\ud83c\udfa8 Art & Workshops", "description": "Create resin art pieces \u2014 mirrors, seascapes, lotus ponds, coasters", "location": "Besant Nagar", "mapLink": "https://maps.google.com/?q=13.0003,80.2667", "price": "\u20b91,500-3,000/session", "contact": "", "review": "", "tags": []}, {"name": "Fluid Art / Neon Paint Party", "category": "\ud83c\udfa8 Art & Workshops", "description": "Pour painting technique \u2014 mesmerizing abstract art", "location": "Adyar , Anna Nagar, Besant Nagar", "mapLink": "https://maps.google.com/?q=13.0012,80.2565", "price": "\u20b91,000-2,000/session", "contact": "", "review": "", "tags": []}, {"name": "Texture Art / Knife Painting", "category": "\ud83c\udfa8 Art & Workshops", "description": "Create textured paintings using palette knives", "location": "Kilpauk & Tambaram", "mapLink": "https://maps.google.com/?q=13.0828,80.2417", "price": "\u20b91,000-2,000", "contact": "", "review": "", "tags": []}, {"name": "Sip & Paint Party", "category": "\ud83c\udfa8 Art & Workshops", "description": "Painting + drinks = fun group activity", "location": "Nungambakkam", "mapLink": "https://maps.google.com/?q=13.0569,80.2425", "price": "\u20b91,500-2,500", "contact": "", "review": "", "tags": []}, {"name": "Candle Making (incl. Dessert Candles)", "category": "\ud83c\udfa8 Art & Workshops", "description": "Craft your own candles including trendy dessert-themed ones", "location": "Anna Nagar (dessert candles) + OMR", "mapLink": "https://maps.google.com/?q=13.0850,80.2101", "price": "\u20b9800-1,500", "contact": "", "review": "", "tags": []}, {"name": "Terrarium Making", "category": "\ud83c\udfa8 Art & Workshops", "description": "Build your own miniature garden in glass", "location": "Chetpet area", "mapLink": "https://maps.google.com/?q=13.0714,80.2417", "price": "\u20b91,200-2,000", "contact": "", "review": "", "tags": []}, {"name": "Macram\u00e9 Workshop", "category": "\ud83c\udfa8 Art & Workshops", "description": "Knot-tying art \u2014 wall hangings, plant hangers", "location": "Chetpet", "mapLink": "https://maps.google.com/?q=13.0714,80.2417", "price": "\u20b91,600+", "contact": "", "review": "", "tags": []}, {"name": "Stained Glass Art Workshop", "category": "\ud83c\udfa8 Art & Workshops", "description": "Create mosaic/stained glass pieces", "location": "Nungambakkam area", "mapLink": "https://maps.google.com/?q=13.0569,80.2425", "price": "\u20b92,100+", "contact": "", "review": "", "tags": []}, {"name": "Calligraphy & Brush Lettering", "category": "\ud83c\udfa8 Art & Workshops", "description": "Modern calligraphy, brush pen lettering", "location": "Anna Nagar & Tambaram", "mapLink": "https://maps.google.com/?q=13.0850,80.2101", "price": "\u20b9800-1,500", "contact": "", "review": "", "tags": []}, {"name": "Engraving Workshop", "category": "\ud83c\udfa8 Art & Workshops", "description": "Learn metal/wood engraving techniques", "location": "Nungambakkam area", "mapLink": "https://maps.google.com/?q=13.0569,80.2425", "price": "\u20b91,000-2,000", "contact": "", "review": "", "tags": []}, {"name": "Lippan Art (Mud Mirror Art)", "category": "\ud83c\udfa8 Art & Workshops", "description": "Traditional Kutchi mirror art on clay", "location": "Thoraipakkam", "mapLink": "https://maps.google.com/?q=12.9416,80.2362", "price": "\u20b91,200-2,000", "contact": "", "review": "", "tags": []}, {"name": "Tie & Dye Workshop", "category": "\ud83c\udfa8 Art & Workshops", "description": "Create your own tie-dye t-shirts/fabrics", "location": "Various Chennai studios (rotating locations)", "mapLink": "", "price": "\u20b9800-1,500", "contact": "", "review": "", "tags": []}, {"name": "Screen Printing / Tote Bag Painting", "category": "\ud83c\udfa8 Art & Workshops", "description": "Print your own bags and t-shirts", "location": "Various Chennai studios (rotating locations)", "mapLink": "", "price": "\u20b9800-1,500", "contact": "", "review": "", "tags": []}, {"name": "Crochet & Knitting", "category": "\ud83c\udfa8 Art & Workshops", "description": "Beginner crochet, amigurumi, arm knitting", "location": "Various Chennai studios (rotating locations)", "mapLink": "", "price": "\u20b9800-1,500", "contact": "", "review": "", "tags": []}, {"name": "Punch Needle Embroidery", "category": "\ud83c\udfa8 Art & Workshops", "description": "Trendy embroidery technique", "location": "Alwarpet & Anna Nagar", "mapLink": "https://maps.google.com/?q=13.0335,80.2531", "price": "\u20b91,000-2,000", "contact": "", "review": "", "tags": []}, {"name": "Tapestry Weaving", "category": "\ud83c\udfa8 Art & Workshops", "description": "Loom weaving workshop", "location": "Kilpauk", "mapLink": "https://maps.google.com/?q=13.0828,80.2417", "price": "\u20b91,500-2,500", "contact": "", "review": "", "tags": []}, {"name": "String Art", "category": "\ud83c\udfa8 Art & Workshops", "description": "Nail & thread art on wood boards", "location": "Anna Nagar", "mapLink": "https://maps.google.com/?q=13.0850,80.2101", "price": "\u20b9800-1,500", "contact": "", "review": "", "tags": []}, {"name": "Decoupage Art", "category": "\ud83c\udfa8 Art & Workshops", "description": "Paper craft on surfaces \u2014 trays, boxes", "location": "Various Chennai studios (rotating locations)", "mapLink": "", "price": "\u20b91,000-1,800", "contact": "", "review": "", "tags": []}, {"name": "Doodle & Illustration Workshop", "category": "\ud83c\udfa8 Art & Workshops", "description": "Learn doodling & illustration techniques", "location": "Anna Nagar & Tambaram", "mapLink": "https://maps.google.com/?q=13.0850,80.2101", "price": "\u20b9800-1,500", "contact": "", "review": "", "tags": []}, {"name": "Glass Painting", "category": "\ud83c\udfa8 Art & Workshops", "description": "Paint on glass \u2014 decorative pieces", "location": "Various Chennai studios (rotating locations)", "mapLink": "", "price": "\u20b9800-1,500", "contact": "", "review": "", "tags": []}, {"name": "Mandala Art (Pen / Watercolor / Dot)", "category": "\ud83c\udfa8 Art & Workshops", "description": "Create intricate mandala designs", "location": "Various Chennai studios (rotating locations)", "mapLink": "", "price": "\u20b9800-1,500", "contact": "", "review": "", "tags": []}, {"name": "Watercolor Workshop", "category": "\ud83c\udfa8 Art & Workshops", "description": "Learn watercolor painting techniques", "location": "Chetpet", "mapLink": "https://maps.google.com/?q=13.0714,80.2417", "price": "\u20b91,000-2,000", "contact": "", "review": "", "tags": []}, {"name": "Mosaic Tile Art / Mirror Mosaic", "category": "\ud83c\udfa8 Art & Workshops", "description": "Create mosaic pieces from tiles", "location": "Various Chennai studios (rotating locations)", "mapLink": "", "price": "\u20b91,200-2,000", "contact": "", "review": "", "tags": []}, {"name": "Boho Art", "category": "\ud83c\udfa8 Art & Workshops", "description": "Bohemian style art pieces", "location": "Various Chennai studios (rotating locations)", "mapLink": "", "price": "\u20b91,000-1,800", "contact": "", "review": "", "tags": []}, {"name": "Stone Carving \u2014 Mahabalipuram", "category": "\ud83c\udfa8 Art & Workshops", "description": "Learn traditional stone carving at the sculptor's village", "location": "Mahabalipuram", "mapLink": "https://maps.google.com/?q=12.6172,80.1927", "price": "", "contact": "", "review": "", "tags": []}, {"name": "South Indian Cooking Class \u2014 Cook With SundariKrishna", "category": "\ud83c\udf73 Food Workshops", "description": "Authentic Chettinad/South Indian cooking in a local home", "location": "Adyar", "mapLink": "https://maps.google.com/?q=12.9990,80.2617", "price": "\u20b92,000-3,500", "contact": "[TripAdvisor](https://www.tripadvisor.com/Attraction_Review-g304556-d12213271-Reviews-Cook_With_SundariKrishna.html)", "review": "5.0/5", "tags": []}, {"name": "Pizza Making Workshop \u2014 Piyus Arya", "category": "\ud83c\udf73 Food Workshops", "description": "Hands-on pizza making class", "location": "Anna Nagar area", "mapLink": "https://maps.google.com/?q=13.0850,80.2101", "price": "\u20b91,000-2,000", "contact": "[Instagram @piyusarya](https://www.instagram.com/piyusarya/)", "review": "", "tags": []}, {"name": "Baking Date", "category": "\ud83c\udf73 Food Workshops", "description": "Couple/group baking experience \u2014 cupcakes, cakes", "location": "Anna Nagar", "mapLink": "https://maps.google.com/?q=13.0850,80.2101", "price": "\u20b91,500-3,000", "contact": "", "review": "", "tags": []}, {"name": "Cupcake Making Workshop", "category": "\ud83c\udf73 Food Workshops", "description": "Decorate and bake cupcakes", "location": "Injambakkam", "mapLink": "https://maps.google.com/?q=12.9198,80.2511", "price": "\u20b91,000-2,000", "contact": "", "review": "", "tags": []}, {"name": "Kombucha Making Workshop", "category": "\ud83c\udf73 Food Workshops", "description": "Learn to brew your own kombucha", "location": "Chetpet area", "mapLink": "", "price": "\u20b91,000-1,500", "contact": "", "review": "", "tags": []}, {"name": "Chocolate Making", "category": "\ud83c\udf73 Food Workshops", "description": "Craft artisan chocolates", "location": "Various Chennai studios (rotating locations)", "mapLink": "", "price": "\u20b91,200-2,000", "contact": "", "review": "", "tags": []}, {"name": "Bouquet Making", "category": "\ud83c\udf73 Food Workshops", "description": "Create flower bouquets/arrangements", "location": "Various Chennai studios (rotating locations)", "mapLink": "", "price": "\u20b91,500-2,500", "contact": "", "review": "", "tags": []}, {"name": "Sowcarpet Street Food Walking Tour", "category": "\ud83c\udf74 Food Tours", "description": "2-hr guided walk through Chennai's wildest food district", "location": "Sowcarpet", "mapLink": "https://maps.google.com/?q=13.0975,80.2808", "price": "\u20b91,200-1,800 (guided) | FREE self-guided", "contact": "[TripAdvisor](https://www.tripadvisor.com/AttractionProductReview-g304556-d25319074-Sowcarpet_Street_Food_Walking_Tour.html)", "review": "4.8/5", "tags": []}, {"name": "Gods of Mylapore Walking Tour", "category": "\ud83c\udf74 Food Tours", "description": "Heritage + food walk \u2014 temples, culture, filter coffee", "location": "Mylapore", "mapLink": "https://maps.google.com/?q=13.0339,80.2707", "price": "~\u20b91,500", "contact": "", "review": "**5.0/5 (265 reviews!)**", "tags": []}, {"name": "Firo (New 2025)", "category": "\ud83c\udf74 Food Tours", "description": "\"Chennai's best new restaurant of 2025\" \u2014 Ashwin Rajagopalan", "location": "Chennai (check Instagram for exact location)", "mapLink": "", "price": "", "contact": "[Instagram @firo.chennai](https://www.instagram.com/firo.chennai/)", "review": "", "tags": []}, {"name": "Chettinad Canteen", "category": "\ud83c\udf74 Food Tours", "description": "Rotating pre-set Chettinad fine dining menus", "location": "Teynampet", "mapLink": "https://maps.google.com/?q=13.0372,80.2526", "price": "", "contact": "", "review": "", "tags": []}, {"name": "Beachville Coffee (New Dec 2025)", "category": "\ud83c\udf74 Food Tours", "description": "Specialty brew bar", "location": "Alwarpet", "mapLink": "https://maps.google.com/?q=13.0292,80.2555", "price": "", "contact": "[Instagram @beachvillecoffee](https://www.instagram.com/beachvillecoffee/)", "review": "", "tags": []}, {"name": "Private Movie Screening \u2014 The Big Screen", "category": "\ud83c\udfac Entertainment", "description": "Private theatre for movie dates, celebrations, parties", "location": "Mogappair & Velachery", "mapLink": "https://maps.google.com/?q=13.0810,80.1653", "price": "\u20b92,499+", "contact": "[Instagram @thebig_.screen](https://www.instagram.com/thebig_.screen/) | \ud83d\udcf1 8939264777", "review": "", "tags": []}, {"name": "Private Cinema Bay", "category": "\ud83c\udfac Entertainment", "description": "Another private cinema option", "location": "Chennai (check BookMyShow for venues)", "mapLink": "", "price": "\u20b92,000-4,000", "contact": "", "review": "", "tags": []}, {"name": "Stand-Up Comedy Shows", "category": "\ud83c\udfac Entertainment", "description": "Regular shows across the city", "location": "Various venues", "mapLink": "", "price": "\u20b9300-1,500", "contact": "Book: [BookMyShow Chennai](https://in.bookmyshow.com/explore/events-chennai)", "review": "", "tags": []}, {"name": "Babylon Brewery \u2014 Cocktail Library Bar (New 2025)", "category": "\ud83c\udfac Entertainment", "description": "Conceptual cocktail library bar", "location": "", "mapLink": "", "price": "", "contact": "[Instagram @babylon.brewery](https://www.instagram.com/babylon.brewery/)", "review": "", "tags": []}, {"name": "Seven Rivers Brewing Co.", "category": "\ud83c\udfac Entertainment", "description": "Craft brewery with tours", "location": "", "mapLink": "", "price": "", "contact": "[Instagram @sevenriversindia](https://www.instagram.com/sevenriversindia/)", "review": "", "tags": []}, {"name": "Board Games Cafe \u2014 Untangle", "category": "\ud83c\udfac Entertainment", "description": "400+ board games. Pay by time. Blood on the Clocktower nights!", "location": "Thoraipakkam (+ other locations)", "mapLink": "https://maps.google.com/?q=12.9500,80.2362", "price": "\u20b9150-300/hr", "contact": "[Instagram @untangleindia](https://www.instagram.com/untangleindia/)", "review": "", "tags": []}, {"name": "Picnic Date Setup", "category": "\ud83d\udc91 Date Ideas", "description": "Curated picnic setup on the beach / gardens", "location": "Chetpet Eco Park & ECR beaches", "mapLink": "https://maps.google.com/?q=13.0766,80.2410", "price": "\u20b93,000-6,000", "contact": "", "review": "", "tags": []}, {"name": "Art Date \u2014 Couples Painting Session", "category": "\ud83d\udc91 Date Ideas", "description": "Paint together in a studio setting", "location": "Adyar , Nungambakkam, Anna Nagar, Besant Nagar", "mapLink": "https://maps.google.com/?q=13.0012,80.2565", "price": "\u20b92,000-4,000 per couple", "contact": "", "review": "", "tags": []}, {"name": "Private Dinner on the Beach", "category": "\ud83d\udc91 Date Ideas", "description": "Beach dining setups", "location": "ECR", "mapLink": "", "price": "", "contact": "Check: [Instagram @seathrudiner.ecr](https://www.instagram.com/seathrudiner.ecr/)", "review": "", "tags": []}, {"name": "Government Museum & National Art Gallery", "category": "\ud83c\udfdb\ufe0f Museums", "description": "6 buildings, 50 galleries. **Chola bronze gallery is world-class.**", "location": "Egmore", "mapLink": "https://maps.google.com/?q=13.0694,80.2570", "price": "\u20b950", "contact": "", "review": "", "tags": []}, {"name": "Fort St. George & Fort Museum", "category": "\ud83c\udfdb\ufe0f Museums", "description": "India's first English fortress (1644). Colonial-era artifacts.", "location": "George Town", "mapLink": "https://maps.google.com/?q=13.0798,80.2871", "price": "\u20b925", "contact": "", "review": "", "tags": []}, {"name": "AVM Heritage Museum \u2014 Vintage Cars + Cinema", "category": "\ud83c\udfdb\ufe0f Museums", "description": "Classic car collection at legendary AVM Studios", "location": "Vadapalani", "mapLink": "https://maps.google.com/?q=13.0462,80.2044", "price": "~\u20b9100", "contact": "", "review": "\"Must visit for vintage car enthusiasts\" (Reddit May 2025)", "tags": []}, {"name": "DakshinaChitra Heritage Museum", "category": "\ud83c\udfdb\ufe0f Museums", "description": "Open-air museum \u2014 traditional homes from 4 states", "location": "Muttukadu, ECR", "mapLink": "https://maps.google.com/?q=12.8234,80.2418", "price": "\u20b9200", "contact": "", "review": "", "tags": []}, {"name": "Cholamandal Artists' Village", "category": "\ud83c\udfdb\ufe0f Museums", "description": "India's largest self-supporting artists' village (est. 1966)", "location": "Injambakkam, ECR", "mapLink": "https://maps.google.com/?q=12.9236,80.2558", "price": "\u20b950", "contact": "", "review": "", "tags": []}, {"name": "VGP Marine Kingdom \u2014 Underwater Aquarium", "category": "\ud83c\udfdb\ufe0f Museums", "description": "India's largest walk-through aquarium. Tunnel with sharks & rays.", "location": "ECR, Injambakkam", "mapLink": "https://maps.google.com/?q=12.9121,80.2503", "price": "\u20b9500-900", "contact": "[vgpmarinekingdom.in](https://vgpmarinekingdom.in/)", "review": "", "tags": []}, {"name": "B.M. Birla Planetarium", "category": "\ud83c\udfdb\ufe0f Museums", "description": "Sky theatre + Periyar Science Centre (8 galleries)", "location": "Kotturpuram", "mapLink": "https://maps.google.com/?q=13.0119,80.2440", "price": "\u20b930-75", "contact": "", "review": "", "tags": []}, {"name": "Madras Art Weekend (Annual Dec/Jan)", "category": "\ud83c\udfdb\ufe0f Museums", "description": "City-wide art festival", "location": "", "mapLink": "", "price": "", "contact": "[Instagram @madrasartweekend](https://www.instagram.com/madrasartweekend/)", "review": "", "tags": []}, {"name": "Pulicat Lake \u2014 Flamingo Watching", "category": "\ud83e\udda9 Nature", "description": "Thousands of Greater Flamingos (Oct-Mar)", "location": "~60km north", "mapLink": "https://maps.google.com/?q=13.4167,80.3167", "price": "Boat \u20b9500-1,500 \u2014 **ask for boatman Yuvaraj** (highly reviewed)", "contact": "", "review": "", "tags": []}, {"name": "Vedanthangal Bird Sanctuary", "category": "\ud83e\udda9 Nature", "description": "India's oldest bird sanctuary. 20+ species. Active 2025-26 season confirmed.", "location": "~85km south", "mapLink": "https://maps.google.com/?q=12.5458,79.8487", "price": "\u20b925", "contact": "", "review": "", "tags": []}, {"name": "Madras Crocodile Bank", "category": "\ud83e\udda9 Nature", "description": "2,000+ crocodiles, alligators, gharials. Volunteer options.", "location": "Near Mahabalipuram, ECR", "mapLink": "https://maps.google.com/?q=12.7435,80.2385", "price": "\u20b950", "contact": "[madrascrocodilebank.org](https://madrascrocodilebank.org/)", "review": "", "tags": []}, {"name": "Guindy National Park + Snake Park", "category": "\ud83e\udda9 Nature", "description": "National park INSIDE the city. Blackbuck, deer, jackals. King cobras at Snake Park.", "location": "Guindy", "mapLink": "https://maps.google.com/?q=13.0037,80.2293", "price": "\u20b915 + \u20b930", "contact": "", "review": "", "tags": []}, {"name": "Chetpet Eco Park", "category": "\ud83e\udda9 Nature", "description": "Restored urban lake. Walking trails, butterflies, birds.", "location": "Chetpet", "mapLink": "https://maps.google.com/?q=13.0766,80.2410", "price": "Free", "contact": "", "review": "", "tags": []}, {"name": "Queensland Amusement Park", "category": "\ud83c\udfa2 Family Fun", "description": "Best rides among Chennai parks (Reddit Oct 2025)", "location": "Chennai-Bengaluru Highway, Chembarambakkam", "mapLink": "https://maps.google.com/?q=13.0300,80.0276", "price": "\u20b9450+", "contact": "[queenslandamusementpark.com](https://www.queenslandamusementpark.com/)", "review": "", "tags": []}, {"name": "MGM Dizzee World", "category": "\ud83c\udfa2 Family Fun", "description": "Classic amusement + water park", "location": "Muttukadu, ECR", "mapLink": "https://maps.google.com/?q=12.8268,80.2405", "price": "\u20b9600-900", "contact": "", "review": "", "tags": []}, {"name": "VGP Universal Kingdom", "category": "\ud83c\udfa2 Family Fun", "description": "Rides + Aquarium + Ice Rink combo", "location": "ECR, Injambakkam", "mapLink": "https://maps.google.com/?q=12.9142,80.2505", "price": "\u20b9800-1,500 combo", "contact": "", "review": "", "tags": []}, {"name": "Writers Cafe", "category": "\ud83d\udcda Chill", "description": "Book-themed cafe chain for reading & working", "location": "Gopalapuram + multiple locations", "mapLink": "https://maps.google.com/?q=13.0541,80.2575", "price": "", "contact": "", "review": "", "tags": []}, {"name": "Anna Centenary Library", "category": "\ud83d\udcda Chill", "description": "Asia's largest library. Stunning architecture.", "location": "Kotturpuram", "mapLink": "https://maps.google.com/?q=13.0171,80.2400", "price": "Free", "contact": "", "review": "", "tags": []}, {"name": "Mazaya Spa \u2014 Chennai's 1st Family Spa (New 2025)", "category": "\ud83e\uddd8 Wellness", "description": "Forest-themed wellness escape", "location": "Anna Nagar", "mapLink": "https://maps.google.com/?q=13.0880,80.2179", "price": "", "contact": "9080911750", "review": "", "tags": []}, {"name": "Cryotherapy \u2014 Cryo2", "category": "\ud83e\uddd8 Wellness", "description": "Whole body cryo chamber", "location": "Nungambakkam", "mapLink": "https://maps.google.com/?q=13.0587,80.2476", "price": "", "contact": "[cryo2.in](https://cryo2.in/)", "review": "", "tags": []}, {"name": "Heritage Bicycle Tour", "category": "\ud83d\udeb2 Heritage", "description": "Cycling through colonial-era Chennai at dawn", "location": "George Town", "mapLink": "https://maps.google.com/?q=13.0837,80.2863", "price": "\u20b91,500-2,500", "contact": "", "review": "", "tags": []}, {"name": "Vintage Car Shows \u2014 Heritage Rollers (Annual Jan/Feb)", "category": "\ud83d\udeb2 Heritage", "description": "80+ classic cars. AVM Museum also has permanent collection.", "location": "", "mapLink": "", "price": "", "contact": "", "review": "", "tags": []}, {"name": "Cordelia Cruise from Chennai", "category": "\ud83d\udeb2 Heritage", "description": "Luxury cruise to Sri Lanka, Lakshadweep", "location": "Chennai Port", "mapLink": "https://maps.google.com/?q=13.0927,80.2947", "price": "\u20b915,000+", "contact": "[cordeliacruises.com](https://www.cordeliacruises.com/)", "review": "", "tags": []}, {"name": "Mahabalipuram (60 km)", "category": "\ud83d\uddfa\ufe0f Day Trips", "description": "Shore Temple, Pancha Rathas + **rock climbing at the boulders**", "location": "", "mapLink": "", "price": "", "contact": "", "review": "", "tags": []}, {"name": "Pondicherry (150 km)", "category": "\ud83d\uddfa\ufe0f Day Trips", "description": "French Quarter, Auroville, cafes", "location": "", "mapLink": "", "price": "", "contact": "", "review": "", "tags": []}, {"name": "Kanchipuram (75 km)", "category": "\ud83d\uddfa\ufe0f Day Trips", "description": "Ancient temples, silk sarees", "location": "", "mapLink": "", "price": "", "contact": "", "review": "", "tags": []}, {"name": "Pichavaram Mangrove Forest (200 km)", "category": "\ud83d\uddfa\ufe0f Day Trips", "description": "World's 2nd largest mangrove. Kayak through tunnels.", "location": "", "mapLink": "", "price": "", "contact": "", "review": "", "tags": []}]; | |
| const CC={ | |
| '🏄 Water Sports':{bg:'bg-blue-50 dark:bg-blue-900/20',bd:'border-blue-200 dark:border-blue-800',pl:'bg-blue-500',ic:'🏄'}, | |
| '🎯 Adventure':{bg:'bg-red-50 dark:bg-red-900/20',bd:'border-red-200 dark:border-red-800',pl:'bg-red-500',ic:'🎯'}, | |
| '🏌️ Sports & Fitness':{bg:'bg-green-50 dark:bg-green-900/20',bd:'border-green-200 dark:border-green-800',pl:'bg-green-500',ic:'🏌️'}, | |
| '💃 Dance':{bg:'bg-pink-50 dark:bg-pink-900/20',bd:'border-pink-200 dark:border-pink-800',pl:'bg-pink-500',ic:'💃'}, | |
| '🎨 Art & Workshops':{bg:'bg-purple-50 dark:bg-purple-900/20',bd:'border-purple-200 dark:border-purple-800',pl:'bg-purple-500',ic:'🎨'}, | |
| '🍳 Food Workshops':{bg:'bg-amber-50 dark:bg-amber-900/20',bd:'border-amber-200 dark:border-amber-800',pl:'bg-amber-500',ic:'🍳'}, | |
| '🍴 Food Tours':{bg:'bg-orange-50 dark:bg-orange-900/20',bd:'border-orange-200 dark:border-orange-800',pl:'bg-orange-500',ic:'🍴'}, | |
| '🎬 Entertainment':{bg:'bg-indigo-50 dark:bg-indigo-900/20',bd:'border-indigo-200 dark:border-indigo-800',pl:'bg-indigo-500',ic:'🎬'}, | |
| '💑 Date Ideas':{bg:'bg-rose-50 dark:bg-rose-900/20',bd:'border-rose-200 dark:border-rose-800',pl:'bg-rose-500',ic:'💑'}, | |
| '🏛️ Museums':{bg:'bg-yellow-50 dark:bg-yellow-900/20',bd:'border-yellow-200 dark:border-yellow-800',pl:'bg-yellow-600',ic:'🏛️'}, | |
| '🦩 Nature':{bg:'bg-emerald-50 dark:bg-emerald-900/20',bd:'border-emerald-200 dark:border-emerald-800',pl:'bg-emerald-500',ic:'🦩'}, | |
| '🎢 Family Fun':{bg:'bg-cyan-50 dark:bg-cyan-900/20',bd:'border-cyan-200 dark:border-cyan-800',pl:'bg-cyan-500',ic:'🎢'}, | |
| '📚 Chill':{bg:'bg-slate-50 dark:bg-slate-800/30',bd:'border-slate-200 dark:border-slate-700',pl:'bg-slate-500',ic:'📚'}, | |
| '🧘 Wellness':{bg:'bg-teal-50 dark:bg-teal-900/20',bd:'border-teal-200 dark:border-teal-800',pl:'bg-teal-500',ic:'🧘'}, | |
| '🚲 Heritage':{bg:'bg-stone-50 dark:bg-stone-800/20',bd:'border-stone-200 dark:border-stone-700',pl:'bg-stone-500',ic:'🚲'}, | |
| '🗺️ Day Trips':{bg:'bg-sky-50 dark:bg-sky-900/20',bd:'border-sky-200 dark:border-sky-800',pl:'bg-sky-500',ic:'🗺️'} | |
| }; | |
| const DS={bg:'bg-gray-50 dark:bg-gray-800/20',bd:'border-gray-200 dark:border-gray-700',pl:'bg-gray-500',ic:'📌'}; | |
| let ac='all',sq=''; | |
| // Build pills | |
| const pe=document.getElementById('pills'); | |
| const allBtn=document.createElement('button'); | |
| allBtn.className='pill whitespace-nowrap px-4 py-2 rounded-full text-sm font-semibold bg-orange-500 text-white shadow-md'; | |
| allBtn.dataset.cat='all';allBtn.textContent='All';allBtn.onclick=()=>sc('all');pe.appendChild(allBtn); | |
| [...new Set(A.map(a=>a.category))].forEach(cat=>{ | |
| const b=document.createElement('button'); | |
| b.className='pill whitespace-nowrap px-4 py-2 rounded-full text-sm font-semibold bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300'; | |
| b.dataset.cat=cat;b.textContent=cat;b.onclick=()=>sc(cat);pe.appendChild(b); | |
| }); | |
| function sc(c){ac=c;document.querySelectorAll('.pill').forEach(p=>{ | |
| p.className=p.dataset.cat===c?'pill whitespace-nowrap px-4 py-2 rounded-full text-sm font-semibold bg-orange-500 text-white shadow-md':'pill whitespace-nowrap px-4 py-2 rounded-full text-sm font-semibold bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300'; | |
| });fr();} | |
| function sl(t){return t.replace(/\[([^\]]+)\]\([^)]+\)/g,'$1');} | |
| function fr(){ | |
| const g=document.getElementById('grid'),q=sq.toLowerCase(); | |
| const f=A.filter(a=>{ | |
| const cm=ac==='all'||a.category===ac; | |
| const sm=!q||a.name.toLowerCase().includes(q)||(a.description||'').toLowerCase().includes(q)||(a.location||'').toLowerCase().includes(q)||a.category.toLowerCase().includes(q); | |
| return cm&&sm; | |
| }); | |
| g.innerHTML=''; | |
| if(!f.length){document.getElementById('nr').classList.remove('hidden');return;} | |
| document.getElementById('nr').classList.add('hidden'); | |
| f.forEach((a,i)=>{const idx=A.indexOf(a);const s=CC[a.category]||DS;const loc=sl(a.location||''); | |
| const d=document.createElement('div'); | |
| d.className=`card rounded-2xl border ${s.bd} ${s.bg} p-5 cursor-pointer relative overflow-hidden`; | |
| d.onclick=()=>om(idx); | |
| const nm=a.name.replace(/\s*[—–-]\s*.+$/,''); | |
| const vn=a.name.match(/[—–-]\s*(.+)$/); | |
| d.innerHTML=` | |
| ${a.mapLink?'<div class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white dark:bg-gray-800 shadow flex items-center justify-center text-sm">📍</div>':''} | |
| <div class="text-3xl mb-3">${s.ic}</div> | |
| <h3 class="font-bold text-base text-gray-900 dark:text-white leading-snug mb-1 pr-8">${nm}</h3> | |
| ${vn?'<p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-2">'+vn[1]+'</p>':''} | |
| <p class="text-sm text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">${a.description||''}</p> | |
| <div class="flex items-center gap-2 flex-wrap"> | |
| ${a.price?'<span class="inline-block px-2.5 py-1 rounded-lg bg-white/80 dark:bg-gray-800/80 text-xs font-semibold text-gray-700 dark:text-gray-300 border border-gray-200/50 dark:border-gray-700">'+a.price.substring(0,30)+'</span>':''} | |
| ${loc?'<span class="text-xs text-gray-400 truncate">📍 '+loc.substring(0,30)+'</span>':''} | |
| </div> | |
| ${a.review?'<p class="text-xs text-amber-600 dark:text-amber-400 mt-2 line-clamp-1">⭐ '+a.review.substring(0,60)+'</p>':''} | |
| `;g.appendChild(d);}); | |
| gsap.fromTo(g.children,{opacity:0,y:30},{opacity:1,y:0,duration:.4,stagger:.03,ease:'power2.out'}); | |
| document.getElementById('rc').textContent=`Showing ${f.length} activit${f.length===1?'y':'ies'}`; | |
| document.getElementById('cb').textContent=`${f.length} activities`; | |
| } | |
| function om(i){const a=A[i],s=CC[a.category]||DS,loc=sl(a.location||''),con=sl(a.contact||''); | |
| document.getElementById('mb').innerHTML=` | |
| <div class="text-4xl mb-4">${s.ic}</div> | |
| <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">${a.name}</h2> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold ${s.pl} text-white mb-4">${a.category}</span> | |
| ${a.description?'<p class="text-gray-600 dark:text-gray-300 mb-4">'+a.description+'</p>':''} | |
| <div class="space-y-3 mb-6"> | |
| ${loc?'<div class="flex items-start gap-3"><span class="text-lg">📍</span><div><p class="text-sm font-medium text-gray-700 dark:text-gray-200">Location</p><p class="text-sm text-gray-500 dark:text-gray-400">'+loc+'</p></div></div>':''} | |
| ${a.price?'<div class="flex items-start gap-3"><span class="text-lg">💰</span><div><p class="text-sm font-medium text-gray-700 dark:text-gray-200">Price</p><p class="text-sm text-gray-500 dark:text-gray-400">'+a.price+'</p></div></div>':''} | |
| ${a.review?'<div class="flex items-start gap-3"><span class="text-lg">⭐</span><div><p class="text-sm font-medium text-gray-700 dark:text-gray-200">Review</p><p class="text-sm text-gray-500 dark:text-gray-400">'+a.review+'</p></div></div>':''} | |
| ${con?'<div class="flex items-start gap-3"><span class="text-lg">📞</span><div><p class="text-sm font-medium text-gray-700 dark:text-gray-200">Contact</p><p class="text-sm text-gray-500 dark:text-gray-400">'+con+'</p></div></div>':''} | |
| </div> | |
| ${a.mapLink?'<a href="'+a.mapLink+'" target="_blank" class="flex items-center justify-center gap-2 w-full py-3.5 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white font-semibold transition-all hover:scale-[1.02] shadow-lg">📍 Open in Google Maps</a>':''} | |
| `; | |
| document.getElementById('modal').classList.add('open'); | |
| gsap.fromTo('#mc',{opacity:0,scale:.9,y:20},{opacity:1,scale:1,y:0,duration:.35,ease:'back.out(1.7)'}); | |
| } | |
| function cm(){gsap.to('#mc',{opacity:0,scale:.9,y:20,duration:.2,ease:'power2.in',onComplete:()=>document.getElementById('modal').classList.remove('open')});} | |
| document.getElementById('src').addEventListener('input',e=>{sq=e.target.value;fr();}); | |
| document.getElementById('dt').addEventListener('click',()=>{ | |
| document.documentElement.classList.toggle('dark'); | |
| document.getElementById('dt').textContent=document.documentElement.classList.contains('dark')?'☀️':'🌙'; | |
| }); | |
| window.addEventListener('scroll',()=>{ | |
| const n=document.getElementById('nav'),dk=document.documentElement.classList.contains('dark'); | |
| if(window.scrollY>100){n.style.background=dk?'rgba(10,11,34,.95)':'rgba(255,255,255,.95)';n.style.backdropFilter='blur(10px)';n.style.boxShadow='0 1px 3px rgba(0,0,0,.1)'; | |
| document.querySelectorAll('.ntx').forEach(e=>e.style.color=dk?'#e8e8f0':'#1a1a2e'); | |
| }else{n.style.background='transparent';n.style.backdropFilter='none';n.style.boxShadow='none'; | |
| document.querySelectorAll('.ntx').forEach(e=>e.style.color='white');} | |
| }); | |
| document.addEventListener('keydown',e=>{if(e.key==='Escape')cm();}); | |
| gsap.registerPlugin(ScrollTrigger); | |
| gsap.from('#hs',{opacity:0,y:30,duration:.8,delay:.2}); | |
| gsap.from('#ht',{opacity:0,y:50,duration:1,delay:.4}); | |
| gsap.from('#hd',{opacity:0,y:30,duration:.8,delay:.7}); | |
| gsap.from('#hc',{opacity:0,scale:.8,duration:.6,delay:1,ease:'back.out(1.7)'}); | |
| gsap.from('#hst > div',{opacity:0,y:20,duration:.5,delay:1.2,stagger:.1}); | |
| fr(); | |
| <\/script> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment