feat(app): add initial Berlayar Sinema event landing page
This commit introduces the complete initial version of the "Berlayar Sinema" event landing page application. It includes the core HTML structure, CSS for styling, and JavaScript for interactivity. Key features implemented: - Responsive layout with Hero, Sponsors, and Film Screening sections. - A registration form that submits data to a backend webhook. - An interactive chat assistant powered by a separate webhook. - Modals for successful registration and a promotional flyer popup. - All necessary static assets, including images, logos, and posters.
This commit is contained in:
Emmanuel Rizky
321
berlayar-sinema-app/index.html
Normal file
321
berlayar-sinema-app/index.html
Normal file
@@ -0,0 +1,321 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Berlayar Sinema: Registration</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section text-white py-20 md:py-32">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="title-font text-4xl md:text-6xl font-bold mb-6">BERLAYAR SINEMA</h1>
|
||||
<h2 class="text-2xl md:text-3xl font-semibold mb-8">SILATURASA DAN MENENUN KOMUNITAS FILM INDONESIA</h2>
|
||||
<p class="text-lg md:text-xl max-w-3xl mx-auto mb-10"></p>
|
||||
<a href="#registration-form" class="bg-yellow-500 hover:bg-yellow-600 text-purple-900 font-bold py-3 px-8 rounded-full text-lg transition-colors inline-block">
|
||||
Daftar Sekarang! <i class="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sponsors Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="title-font text-3xl font-bold text-center mb-12 text-purple-900">Didukung Oleh</h2>
|
||||
|
||||
<div class="sponsor-container">
|
||||
<div class="sponsor-track">
|
||||
<!-- Original set -->
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor1.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor2.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor3.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor4.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor5.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor1.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor2.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor6.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor7.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor1.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor2.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor3.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<!-- Duplicate set for seamless looping -->
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor4.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor5.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor6.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor7.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor1.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor2.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor3.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor4.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor5.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor6.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor7.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
<div class="sponsor-slide">
|
||||
<img src="assets/sponsor1.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Films Section -->
|
||||
<section class="py-16 bg-gray-100">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="title-font text-3xl font-bold text-center mb-12 text-purple-900">Special Screening</h2>
|
||||
|
||||
<div id="film-carousel-container" class="relative max-w-5xl mx-auto">
|
||||
<div id="film-carousel" class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth md:grid md:grid-cols-3 md:gap-8 md:overflow-x-visible">
|
||||
<!-- Film 1 -->
|
||||
<div class="film-card bg-white rounded-lg overflow-hidden shadow-lg w-4/5 flex-shrink-0 snap-center md:w-auto">
|
||||
<div class="aspect-[2/3] w-full overflow-hidden">
|
||||
<img src="assets/poster1.jpeg" alt="The Echoes of Tomorrow" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="title-font text-xl font-bold mb-3 text-purple-900">Mbok dan Bung</h3>
|
||||
<p class="text-gray-700 mb-2 font-semibold">Sutradara: Ninndi Raras</p>
|
||||
<p class="text-gray-700 mb-4">
|
||||
Sebuah film pendek yang mengisahkan tentang sosok Sarinah, pengasuh Soekarno semasa kecil.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Drama</span>
|
||||
<span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Biografi</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Film 2 -->
|
||||
<div class="film-card bg-white rounded-lg overflow-hidden shadow-lg w-4/5 flex-shrink-0 snap-center md:w-auto">
|
||||
<div class="aspect-[2/3] w-full overflow-hidden">
|
||||
<img src="assets/poster3.jpeg" alt="Whispers of the Old City" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="title-font text-xl font-bold mb-3 text-purple-900">Kitorang Basudara</h3>
|
||||
<p class="text-gray-700 mb-2 font-semibold">Sutradara: Ninndi Raras</p>
|
||||
<p class="text-gray-700 mb-4">
|
||||
Rony dan Berto, dua bersaudara Papua, merantau ke Yogyakarta, menghadapi diskriminasi rasial saat mencari kos, sementara Berto beradaptasi dengan pekerjaan kakaknya sebagai penagih utang.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Drama</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="film-card bg-white rounded-lg overflow-hidden shadow-lg w-4/5 flex-shrink-0 snap-center md:w-auto">
|
||||
<div class="aspect-[2/3] w-full overflow-hidden">
|
||||
<img src="assets/poster2.jpg" alt="Whispers of the Old City" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="title-font text-xl font-bold mb-3 text-purple-900">Laila</h3>
|
||||
<p class="text-gray-700 mb-2 font-semibold">Sutradara: Bayu Pradityo</p>
|
||||
<p class="text-gray-700 mb-4">
|
||||
Laila, disabilitas yang rentan, depresi setelah yatim piatu dan masuk panti. Ia bangkit mandiri, lalu menemukan kekuatan untuk menerima kepergian orangtuanya.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Dokumenter</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="prev-film" class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-white bg-opacity-50 rounded-full p-2 hidden"><</button>
|
||||
<button id="next-film" class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-white bg-opacity-50 rounded-full p-2 hidden">></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Registration Form Section -->
|
||||
<section id="registration-form" class="py-16 bg-purple-900 text-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="title-font text-3xl font-bold text-center mb-12">Daftar Sekarang!</h2>
|
||||
|
||||
<form id="eventRegistration" class="glass-card bg-white bg-opacity-20 backdrop-blur-md border border-white border-opacity-30 rounded-xl p-6 md:p-8 text-white shadow-xl">
|
||||
<div class="mb-6">
|
||||
<label for="fullName" class="block text-white font-semibold mb-2 text-sm uppercase tracking-wider">Nama Lengkap <span class="text-yellow-300">*</span></label>
|
||||
<input type="text" id="fullName" name="fullName" required
|
||||
class="form-input w-full px-4 py-3 bg-white border border-white rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300 text-purple-900 placeholder-gray-500 font-medium transition-all duration-200" placeholder="Contoh: Budi Santoso">
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="email" class="block text-white font-medium mb-2 text-sm uppercase tracking-wider">Email <span class="text-red-300">*</span></label>
|
||||
<input type="email" id="email" name="email" required
|
||||
class="form-input w-full px-4 py-3 bg-white border border-purple-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300 text-purple-900 placeholder-gray-500 font-medium transition-all duration-200" placeholder="Contoh: budi@gmail.com">
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="phone" class="block text-white font-medium mb-2 text-sm uppercase tracking-wider">Nomor Telepon/WhatsApp <span class="text-red-300">*</span></label>
|
||||
<div class="flex">
|
||||
<span class="inline-flex items-center px-3 rounded-l-lg border border-r-0 border-purple-300 bg-gray-200 text-gray-600">
|
||||
+62
|
||||
</span>
|
||||
<input type="tel" id="phone" name="phone" required
|
||||
class="form-input w-full px-4 py-3 bg-white border border-purple-300 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-purple-300 text-purple-900 placeholder-gray-500 font-medium transition-all duration-200" placeholder="81234567890">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="socialMedia" class="block text-white font-medium mb-2 text-sm uppercase tracking-wider">Akun Media Sosial<span class="text-red-300">*</span></label>
|
||||
<input type="text" id="socialMedia" name="socialMedia" required
|
||||
class="form-input w-full px-4 py-3 bg-white border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300 text-purple-900 placeholder-gray-500 font-medium transition-all duration-200" placeholder="Contoh: @budi_santoso">
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="origin" class="block text-white font-medium mb-2">Asal Komunitas/Institusi/Pekerjaan <span class="text-yellow-300">*</span></label>
|
||||
<input type="text" id="origin" name="origin" required
|
||||
class="form-input w-full px-4 py-3 bg-white bg-opacity-90 border border-purple-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300 text-white placeholder-purple-100 font-medium transition-all duration-200 hover:bg-opacity-100" placeholder="Contoh: Komunitas Film Kediri">
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="category" class="block text-white font-medium mb-2">Pilihan Kategori Peserta <span class="text-red-500">*</span></label>
|
||||
<select id="category" name="category" required
|
||||
class="form-input w-full px-4 py-3 bg-white text-purple-900 border border-white rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300">
|
||||
<option value="" disabled selected>Pilih kategori</option>
|
||||
<option value="Komunitas Film">Komunitas Film Kediri</option>
|
||||
<option value="Sineas Muda/Pelajar Broadcasting/Perfilman">Sineas Muda/Pelajar Broadcasting/Perfilman</option>
|
||||
<option value="Pegiat Seni Visual">Pegiat Seni Visual</option>
|
||||
<option value="Perwakilan Komunitas Lokal">Perwakilan Komunitas Lokal</option>
|
||||
<option value="Masyarakat Umum/Peminat Film & Industri Kreatif">Masyarakat Umum/Peminat Film & Industri Kreatif</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="discovery" class="block text-white font-medium mb-2">Bagaimana Anda mengetahui acara ini? <span class="text-red-500">*</span></label>
|
||||
<input type="text" id="discovery" name="discovery" required
|
||||
class="form-input w-full px-4 py-2 bg-white border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-purple-900 placeholder-gray-500" placeholder="Contoh: Instagram, teman, dll">
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="expectation" class="block text-white font-medium mb-2">Harapan apa yang Anda miliki dari kegiatan ini? <span class="text-red-500">*</span></label>
|
||||
<textarea id="expectation" name="expectation" rows="3" required
|
||||
class="form-input w-full px-4 py-2 bg-white border border-white rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300 text-purple-900 placeholder-gray-500 font-medium" placeholder="Contoh: Saya ingin belajar lebih banyak tentang produksi film"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<label for="discussionTopic" class="block text-white font-medium mb-2">Pertanyaan/topik khusus yang ingin didiskusikan terkait perfilman lokal? (opsional)</label>
|
||||
<textarea id="discussionTopic" name="discussionTopic" rows="3"
|
||||
class="form-input w-full px-4 py-2 bg-white border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-purple-900 placeholder-gray-500" placeholder="Contoh: Bagaimana cara memulai produksi film indie?"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-purple-900 font-bold py-4 px-6 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 uppercase tracking-wider">
|
||||
DAFTAR SEKARANG <i class="fas fa-paper-plane ml-2"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-white py-8">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<p class="text-gray-400 text-sm">
|
||||
© 2025 Kediri Technopark. Hak Cipta Dilindungi.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Success Modal -->
|
||||
<div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
|
||||
<div class="glass-card rounded-2xl p-8 max-w-md w-full mx-4 text-center text-white glass-card">
|
||||
<div class="text-green-500 text-6xl mb-4">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white-800 mb-4">Pendaftaran Berhasil!</h3>
|
||||
<p class="text-white-600 mb-6">
|
||||
Terima kasih telah mendaftar untuk Berlayar Sinema. Kami telah mengirimkan konfirmasi ke WhatsApp Anda.
|
||||
</p>
|
||||
<button id="closeModal" class="bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-purple-900 font-bold py-2 px-6 rounded-lg transition-colors">
|
||||
Tutup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Popup Modal -->
|
||||
<div id="imagePopup" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden z-50">
|
||||
<div class="relative bg-white p-4 rounded-lg shadow-lg max-w-lg mx-4 sm:mx-auto">
|
||||
<button id="closeImagePopup" class="absolute top-2 right-2 text-gray-700 hover:text-gray-900 text-2xl font-bold">×</button>
|
||||
<img src="assets/flyer1.jpeg" alt="Popup Image" class="w-full h-auto rounded-lg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Floating Chat Button -->
|
||||
<div class="fixed bottom-8 right-8 z-40">
|
||||
<button id="chatButton" class="bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-purple-900 w-16 h-16 rounded-full shadow-lg flex items-center justify-center transition-all duration-300 hover:scale-110">
|
||||
<i class="fas fa-comment-dots text-2xl"></i>
|
||||
</button>
|
||||
|
||||
<div id="chatWindow" class="hidden absolute bottom-20 right-0 w-80 bg-white rounded-lg shadow-xl overflow-hidden glass-card">
|
||||
<div class="bg-purple-900 text-white p-4 flex flex-col items-start">
|
||||
<h3 class="font-bold text-lg">Maya</h3>
|
||||
<p class="text-sm text-purple-200">Virtual Agent - Kediri Technopark</p>
|
||||
<button id="closeChat" class="absolute top-4 right-4 text-white hover:text-purple-200">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-4 h-64 overflow-y-auto bg-white">
|
||||
<div class="mb-4 text-left">
|
||||
<p class="chat-message-received">
|
||||
Hai! Aku Maya, asisten virtual Berlayar Sinema. Ada yang bisa kubantu? Aku bisa kasih info detail acara, sinopsis film, sampai info narasumber lho. Tanya aja ya!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 border-t border-purple-800 bg-purple-900">
|
||||
<div class="flex">
|
||||
<input type="text" placeholder="Ketik pesan..." class="flex-1 border border-purple-700 bg-white text-purple-900 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-500 placeholder-gray-500">
|
||||
<button class="bg-yellow-500 hover:bg-yellow-600 text-purple-900 px-4 py-2 rounded-r-lg">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user