Build SportsClubOS venue website
This commit is contained in:
mike
+272
@@ -0,0 +1,272 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="A new multi-sport destination for badminton, pickleball and tennis at Old Klang Road, Kuala Lumpur. Opening October 2027." />
|
||||
<title>SportsClubOS | Old Klang Road Court Sports</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="top" class="top-sentinel" aria-hidden="true"></div>
|
||||
<div class="scroll-progress" aria-hidden="true"></div>
|
||||
<div class="announcement">Opening October 2027 <span></span> Old Klang Road, Kuala Lumpur</div>
|
||||
<header class="site-header">
|
||||
<a class="brand" href="#top" aria-label="SportsClubOS home">SportsClub<span>OS</span></a>
|
||||
<button class="menu-toggle" type="button" aria-label="Open menu" aria-expanded="false"><i></i><i></i></button>
|
||||
<nav class="nav" aria-label="Main navigation">
|
||||
<a href="#venue">Venue</a>
|
||||
<a href="#courts">Courts</a>
|
||||
<a href="#plans">Spaces</a>
|
||||
<a href="#academy">Academy</a>
|
||||
<a href="#community">Community</a>
|
||||
<a href="#contact">Contact</a>
|
||||
<button class="language language-toggle language-mobile" type="button" aria-label="切换为中文">中文</button>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<button class="language language-toggle" type="button" aria-label="切换为中文">中文</button>
|
||||
<a class="button button-small" href="#contact">Register interest</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">Kuala Lumpur's new court-sports destination</p>
|
||||
<h1>Your court.<br><em>Your community.</em></h1>
|
||||
<p class="hero-lede">A purpose-built home for badminton, pickleball and tennis - created for players, families, juniors and teams.</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button" href="#contact">Register interest <b>→</b></a>
|
||||
<a class="button button-outline" href="#academy">Explore academy</a>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-6 7-12a7 7 0 1 0-14 0c0 6 7 12 7 12Zm0-9a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"/></svg>Old Klang Road, Kuala Lumpur</span>
|
||||
<span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 3v3M19 3v3M4 9h16M5 5h14a2 2 0 0 1 2 2v13H3V7a2 2 0 0 1 2-2Z"/></svg>Grand opening <strong>October 2027</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<img src="public/assets/venue-hero.png" alt="Proposed multi-sport venue exterior at Old Klang Road" />
|
||||
<div class="hero-stamp">Three sports<br><strong>One home</strong></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="court-counts" aria-label="Court capacity">
|
||||
<div class="court-count"><span class="sport-mark badminton">◒</span><strong>14</strong><p>Indoor<br>badminton courts</p></div>
|
||||
<div class="court-count"><span class="sport-mark pickleball">◇</span><strong>5</strong><p>Indoor<br>pickleball courts</p></div>
|
||||
<div class="court-count"><span class="sport-mark tennis">◯</span><strong>4</strong><p>Indoor<br>tennis courts</p></div>
|
||||
<p class="count-note">Professional spaces.<br>Designed for everyone.</p>
|
||||
</section>
|
||||
|
||||
<section class="section intro" id="venue">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">The venue</p>
|
||||
<h2>Built around how<br>people <em>really play.</em></h2>
|
||||
</div>
|
||||
<div class="intro-copy reveal">
|
||||
<p class="lead">A modern indoor sports centre planned for one of Kuala Lumpur's most established and connected neighbourhoods.</p>
|
||||
<p>From casual evening games to focused academy training, every floor brings courts, support spaces and community amenities together in one accessible destination.</p>
|
||||
</div>
|
||||
<div class="venue-gallery reveal">
|
||||
<button class="gallery-main gallery-item" type="button" data-image="public/assets/venue-entrance.png" aria-label="View venue entrance image">
|
||||
<img src="public/assets/venue-entrance.png" alt="Proposed venue entrance" /><span>Entrance perspective</span>
|
||||
</button>
|
||||
<button class="gallery-item" type="button" data-image="public/assets/venue-front.png" aria-label="View venue front elevation image">
|
||||
<img src="public/assets/venue-front.png" alt="Proposed front elevation" /><span>Front elevation</span>
|
||||
</button>
|
||||
<button class="gallery-item" type="button" data-image="public/assets/venue-street-b.png" aria-label="View street context image">
|
||||
<img src="public/assets/venue-street-b.png" alt="Proposed venue in Old Klang Road street context" /><span>Street context</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="interior-intro reveal" id="inside">
|
||||
<div><p class="eyebrow">Inside the venue</p><h3>Step inside the <em>game.</em></h3></div>
|
||||
<p>Explore the indoor court environments referenced in the proposal - spaces planned for everyday play, coaching and competition.</p>
|
||||
</div>
|
||||
<div class="interior-gallery reveal">
|
||||
<button class="gallery-item interior-item" type="button" data-image="public/assets/badminton-court.png" aria-label="View indoor badminton court image">
|
||||
<img src="public/assets/badminton-court.png" alt="Indoor badminton courts shown in the proposal" /><span>Indoor badminton courts</span>
|
||||
</button>
|
||||
<button class="gallery-item interior-item" type="button" data-image="public/assets/pickleball-blue.png" aria-label="View pickleball court image">
|
||||
<img src="public/assets/pickleball-blue.png" alt="Pickleball court shown in the proposal" /><span>Pickleball courts</span>
|
||||
</button>
|
||||
<button class="gallery-item interior-item" type="button" data-image="public/assets/tennis-indoor.png" aria-label="View indoor tennis court image">
|
||||
<img src="public/assets/tennis-indoor.png" alt="Indoor tennis courts shown in the proposal" /><span>Indoor tennis courts</span>
|
||||
</button>
|
||||
<button class="gallery-item interior-item" type="button" data-image="public/assets/pickleball-court.png" aria-label="View multi-court interior image">
|
||||
<img src="public/assets/pickleball-court.png" alt="Green indoor multi-court space shown in the proposal" /><span>Indoor multi-court space</span>
|
||||
</button>
|
||||
<button class="gallery-item interior-item" type="button" data-image="public/assets/tennis-court.png" aria-label="View outdoor tennis court image">
|
||||
<img src="public/assets/tennis-court.png" alt="Outdoor tennis courts shown in the proposal" /><span>Outdoor tennis courts</span>
|
||||
</button>
|
||||
<button class="gallery-item interior-item" type="button" data-image="public/assets/pro-shop.png" aria-label="View badminton pro shop image">
|
||||
<img src="public/assets/pro-shop.png" alt="Badminton equipment shop shown in the proposal" /><span>Badminton pro shop</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section courts" id="courts">
|
||||
<div class="section-heading centered reveal">
|
||||
<p class="eyebrow">Three ways to move</p>
|
||||
<h2>Choose your <em>court.</em></h2>
|
||||
<p>Dedicated indoor spaces planned for year-round play, training and competition.</p>
|
||||
</div>
|
||||
<div class="sport-grid">
|
||||
<article class="sport-card reveal">
|
||||
<div class="sport-image"><img src="public/assets/badminton-court.png" alt="Indoor badminton courts from the proposal" /><span>14 courts</span></div>
|
||||
<div class="sport-content"><small>01 / Badminton</small><h3>Fast. Focused.<br>Made for Malaysia.</h3><p>Fourteen indoor courts form the heart of the venue, supporting everyday bookings, academy programmes and tournament play.</p><a href="#contact">Register for court updates →</a></div>
|
||||
</article>
|
||||
<article class="sport-card reveal">
|
||||
<div class="sport-image"><img src="public/assets/pickleball-blue.png" alt="Pickleball court from the proposal" /><span>5 courts</span></div>
|
||||
<div class="sport-content"><small>02 / Pickleball</small><h3>Social by nature.<br>Serious when you are.</h3><p>Five indoor pickleball courts - convertible for badminton - give new players and regular groups room to play their way.</p><a href="#contact">Join the community →</a></div>
|
||||
</article>
|
||||
<article class="sport-card reveal">
|
||||
<div class="sport-image"><img src="public/assets/tennis-indoor.png" alt="Indoor tennis courts from the proposal" /><span>4 courts</span></div>
|
||||
<div class="sport-content"><small>03 / Tennis</small><h3>More court time.<br>Whatever the weather.</h3><p>Four indoor tennis courts provide a dependable setting for lessons, friendly matches and performance sessions.</p><a href="#contact">Ask about tennis →</a></div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="amenities">
|
||||
<div class="amenities-image reveal"><img src="public/assets/pro-shop.png" alt="Badminton equipment shop shown in the proposal" /></div>
|
||||
<div class="amenities-content reveal">
|
||||
<p class="eyebrow eyebrow-light">More than a court</p>
|
||||
<h2>Everything your game needs, <em>under one roof.</em></h2>
|
||||
<div class="amenity-list">
|
||||
<span>Reception & waiting area</span><span>Badminton pro shop</span><span>Changing rooms</span><span>Fitness gym</span><span>Meeting room</span><span>Lounge & food bar</span><span>Court separation nets</span><span>Fire-safety access</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section plans" id="plans">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Space planning</p>
|
||||
<h2>A destination built<br><em>across every level.</em></h2>
|
||||
</div>
|
||||
<div class="plan-layout">
|
||||
<div class="plan-tabs" role="tablist" aria-label="Venue levels">
|
||||
<button class="plan-tab active" type="button" data-plan="public/assets/plan-ground.png" data-copy="Arrival, reception, waiting area, pro shop, changing rooms, badminton courts and tennis courts." role="tab" aria-selected="true"><strong>Ground</strong><span>Arrival & first courts</span></button>
|
||||
<button class="plan-tab" type="button" data-plan="public/assets/plan-level-1.png" data-copy="Badminton and pickleball courts supported by changing rooms, meeting room, fitness gym, lounge and food bar." role="tab" aria-selected="false"><strong>Level 1</strong><span>Play, train & recharge</span></button>
|
||||
<button class="plan-tab" type="button" data-plan="public/assets/plan-level-2.png" data-copy="Additional badminton, pickleball and tennis capacity with dedicated circulation and court separation." role="tab" aria-selected="false"><strong>Level 2</strong><span>Expanded court capacity</span></button>
|
||||
<button class="plan-tab" type="button" data-plan="public/assets/plan-roof.png" data-copy="The upper-level court plan completes the building's multi-sport programme and maximises playable space." role="tab" aria-selected="false"><strong>Upper level</strong><span>The full venue programme</span></button>
|
||||
</div>
|
||||
<div class="plan-visual reveal"><img id="plan-image" src="public/assets/plan-ground.png" alt="Ground floor venue plan" /><p id="plan-copy">Arrival, reception, waiting area, pro shop, changing rooms, badminton courts and tennis courts.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="booking-flow" id="booking">
|
||||
<div class="booking-title reveal"><p class="eyebrow eyebrow-light">Simple court booking</p><h2>From “let's play”<br>to <em>court confirmed.</em></h2></div>
|
||||
<ol class="steps reveal">
|
||||
<li><b>01</b><span>Choose your sport</span></li><li><b>02</b><span>Select your area</span></li><li><b>03</b><span>Pick date & time</span></li><li><b>04</b><span>Confirm your court</span></li><li><b>05</b><span>Pay online</span></li>
|
||||
</ol>
|
||||
<p class="booking-note">The digital booking experience is planned to make court access easy, anytime and anywhere.</p>
|
||||
</section>
|
||||
|
||||
<section class="academy" id="academy">
|
||||
<div class="academy-copy reveal">
|
||||
<p class="eyebrow">JUN Badminton Academy</p>
|
||||
<h2>Skills for the court.<br><em>Character for life.</em></h2>
|
||||
<p>Tailored programmes for ages 4 to 50, from beginners taking their first steps to advanced players preparing for competition.</p>
|
||||
<div class="programmes"><span>Kids & adult group classes</span><span>Private one-to-one training</span><span>Singles & doubles programmes</span><span>Corporate & school training</span></div>
|
||||
<button class="button contact-modal-trigger" type="button">Enquire about training →</button>
|
||||
</div>
|
||||
<div class="coach-card reveal">
|
||||
<div class="coach-image"><img src="public/assets/coach-tan-hq.png" alt="Tan Wei Jun, Head Coach of JUN Badminton Academy" /></div>
|
||||
<div class="coach-info"><small>Founder & head coach</small><h3>Tan Wei Jun</h3><p>Former Kedah state player<br>BAM Level 1-certified coach</p></div>
|
||||
</div>
|
||||
<div class="academy-philosophy reveal">
|
||||
<span>Innovative drills</span><span>Fitness programmes</span><span>Mental conditioning</span><span>Local competitions</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section community" id="community">
|
||||
<div class="section-heading centered reveal"><p class="eyebrow">A venue with a pulse</p><h2>Play here. <em>Belong here.</em></h2><p>The proposal is built around more than bookings: it imagines an active, connected local sports community.</p></div>
|
||||
<div class="community-grid">
|
||||
<article class="reveal"><b>01</b><h3>Community events</h3><p>Regular activities that bring neighbours, families and players together.</p></article>
|
||||
<article class="reveal"><b>02</b><h3>Seasonal programmes</h3><p>Campaigns, clinics and formats that keep the calendar fresh year-round.</p></article>
|
||||
<article class="reveal"><b>03</b><h3>Leagues & competition</h3><p>Pathways to play casually, test your level and compete with confidence.</p></article>
|
||||
<article class="reveal"><b>04</b><h3>Business partnerships</h3><p>Space for corporate play, school programmes and local collaborations.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="location" id="location">
|
||||
<div class="location-image reveal"><img src="public/assets/venue-street-a.png" alt="Proposed venue in the Old Klang Road neighbourhood" /></div>
|
||||
<div class="location-copy reveal">
|
||||
<p class="eyebrow">Old Klang Road / 旧巴生路</p>
|
||||
<h2>Connected to the city.<br><em>Rooted in the neighbourhood.</em></h2>
|
||||
<p>One of Kuala Lumpur's oldest major corridors, Old Klang Road sits between the city and Petaling Jaya, surrounded by mature residential and commercial communities.</p>
|
||||
<div class="nearby"><span>Taman Desa</span><span>OUG</span><span>Kuchai Lama</span><span>Taman Sri Sentosa</span></div>
|
||||
<ul><li>Links to Federal Highway, NPE and LDP</li><li>A multicultural neighbourhood with a strong local food culture</li><li>Accessible to families, students, residents and corporate groups</li></ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section timeline">
|
||||
<div class="section-heading reveal"><p class="eyebrow">Road to opening</p><h2>Building towards<br><em>October 2027.</em></h2></div>
|
||||
<div class="timeline-track reveal">
|
||||
<article><b>01</b><time>Aug 2025 - Jul 2026</time><h3>Planning permission</h3><p>Four-month planning-permission phase within the wider project programme.</p></article>
|
||||
<article><b>02</b><time>Aug - Nov 2026</time><h3>Earthwork & building plans</h3><p>Approval work for earthworks and the building plan.</p></article>
|
||||
<article><b>03</b><time>Dec 2026 - May 2027</time><h3>Construction</h3><p>Six months planned for venue construction.</p></article>
|
||||
<article><b>04</b><time>Jun - Sep 2027</time><h3>Completion & handover</h3><p>CCC approval, completion and handover.</p></article>
|
||||
<article class="timeline-finish"><b>05</b><time>October 2027</time><h3>Grand opening</h3><p>The first serves, rallies and community games begin.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact" id="contact">
|
||||
<div class="contact-copy reveal"><p class="eyebrow eyebrow-light">Get on court early</p><h2>Be the first to play.<br><em>Be part of the community.</em></h2><p>Register for opening updates, academy news and early booking information.</p></div>
|
||||
<div class="contact-direct reveal">
|
||||
<p>Choose the channel that works best for you. Every contact detail can be copied individually.</p>
|
||||
<div><span>Training programmes</span><span>Court enquiries</span><span>Corporate & school sessions</span></div>
|
||||
<button class="button button-light contact-modal-trigger" type="button">View contact details →</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div><a class="brand brand-footer" href="#top">SportsClub<span>OS</span></a><p>A new home for court sports at Old Klang Road, Kuala Lumpur.</p></div>
|
||||
<div class="footer-contact">
|
||||
<h4>JUN Academy</h4>
|
||||
<a class="contact-row" href="tel:+60175407411">
|
||||
<span class="contact-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.6 10.8c1.8 3.5 3.2 4.9 6.7 6.7l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.5.7 3.9.7.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.8 21 3 13.2 3 3.5c0-.6.4-1 1-1h3.2c.6 0 1 .4 1 1 0 1.4.2 2.7.7 3.9.1.4 0 .8-.2 1.1l-2.1 2.3Z"/></svg></span>
|
||||
<span>017-540 7411</span>
|
||||
</a>
|
||||
<a class="contact-row" href="mailto:admissions.junba@gmail.com">
|
||||
<span class="contact-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 5h18v14H3V5Zm1.5 1.5L12 12l7.5-5.5M4.5 17.5l5.3-5M19.5 17.5l-5.3-5"/></svg></span>
|
||||
<span>admissions.junba@gmail.com</span>
|
||||
</a>
|
||||
<a class="contact-row" href="https://www.instagram.com/jun_badmintonacademy/" target="_blank" rel="noreferrer">
|
||||
<span class="contact-icon instagram-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" class="solid"/></svg></span>
|
||||
<span>@jun_badmintonacademy</span>
|
||||
</a>
|
||||
<div class="contact-row">
|
||||
<span class="contact-icon xhs-icon">小红书</span>
|
||||
<span>JUN 羽球教练</span>
|
||||
</div>
|
||||
<div class="contact-row">
|
||||
<span class="contact-icon facebook-icon">f</span>
|
||||
<span>JUN Badminton Academy</span>
|
||||
</div>
|
||||
<div class="contact-row contact-address">
|
||||
<span class="contact-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-6 7-12a7 7 0 1 0-14 0c0 6 7 12 7 12Z"/><circle cx="12" cy="9" r="2.5"/></svg></span>
|
||||
<span>Ground Floor, Jalan Perdana 1,<br>Taman Segar Perdana, 43200 Cheras, Selangor</span>
|
||||
</div>
|
||||
</div>
|
||||
<div><h4>Explore</h4><a href="#venue">Venue</a><a href="#courts">Courts</a><a href="#academy">Academy</a><a href="#location">Location</a></div>
|
||||
<p class="footer-note">Proposed venue information based on the current project proposal. Plans and opening schedule are subject to final approvals.</p>
|
||||
</footer>
|
||||
|
||||
<dialog class="contact-modal" id="contact-modal" aria-label="Contact JUN Academy">
|
||||
<button class="modal-close" type="button" aria-label="Close contact details">×</button>
|
||||
<p class="eyebrow">Contact JUN Academy</p>
|
||||
<p class="modal-intro">Copy any contact detail below, then reach out using the app you prefer.</p>
|
||||
<div class="modal-contact-list">
|
||||
<div class="modal-contact-row"><span class="modal-contact-icon">☎</span><div><small>Phone</small><strong class="contact-value">017-540 7411</strong></div><button class="copy-contact" type="button" data-copy="017-540 7411">Copy</button></div>
|
||||
<div class="modal-contact-row"><span class="modal-contact-icon">@</span><div><small>Email</small><strong class="contact-value">admissions.junba@gmail.com</strong></div><button class="copy-contact" type="button" data-copy="admissions.junba@gmail.com">Copy</button></div>
|
||||
<div class="modal-contact-row"><span class="modal-contact-icon instagram-icon">◎</span><div><small>Instagram</small><strong class="contact-value">@jun_badmintonacademy</strong></div><button class="copy-contact" type="button" data-copy="@jun_badmintonacademy">Copy</button></div>
|
||||
<div class="modal-contact-row"><span class="modal-contact-icon xhs-icon">小红书</span><div><small>Xiaohongshu</small><strong class="contact-value">JUN 羽球教练</strong></div><button class="copy-contact" type="button" data-copy="JUN 羽球教练">Copy</button></div>
|
||||
<div class="modal-contact-row"><span class="modal-contact-icon facebook-icon">f</span><div><small>Facebook</small><strong class="contact-value">JUN Badminton Academy</strong></div><button class="copy-contact" type="button" data-copy="JUN Badminton Academy">Copy</button></div>
|
||||
<div class="modal-contact-row address-row"><span class="modal-contact-icon">⌖</span><div><small>Address</small><strong class="contact-value">Ground Floor, Jalan Perdana 1,<br>Taman Segar Perdana, 43200 Cheras, Selangor</strong></div><button class="copy-contact" type="button" data-copy="Ground Floor, Jalan Perdana 1, Taman Segar Perdana, 43200 Cheras, Selangor">Copy</button></div>
|
||||
</div>
|
||||
<p class="copy-status" role="status"></p>
|
||||
</dialog>
|
||||
<dialog class="lightbox" id="lightbox"><button type="button" aria-label="Close image">×</button><img src="public/assets/venue-entrance.png" alt="Expanded venue view" /></dialog>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user