333 lines
22 KiB
HTML
333 lines
22 KiB
HTML
<!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/sponsor5.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/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/sponsor8.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor9.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor10.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor11.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor12.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor13.jpeg" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor14.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<!-- Duplicate set for seamless looping -->
|
|
<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/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/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/sponsor8.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor9.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor10.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor11.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor12.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor13.jpeg" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
<div class="sponsor-slide">
|
|
<img src="assets/sponsor14.png" alt="Sponsor" class="sponsor-logo max-h-16">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Films Section -->
|
|
<section class="pt-20 pb-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-200 text-purple-900">
|
|
<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="bg-white border border-purple-800 rounded-xl p-6 md:p-8 text-purple-900 shadow-purple">
|
|
<div class="mb-6">
|
|
<label for="fullName" class="block text-purple-800 font-semibold mb-2 text-sm uppercase tracking-wider">Nama Lengkap <span class="text-yellow-500">*</span></label>
|
|
<input type="text" id="fullName" name="fullName" required
|
|
class="form-input w-full px-4 py-3 bg-gray-100 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 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-purple-800 font-medium mb-2 text-sm uppercase tracking-wider">Email <span class="text-yellow-500">*</span></label>
|
|
<input type="email" id="email" name="email" required
|
|
class="form-input w-full px-4 py-3 bg-gray-100 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 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-purple-800 font-medium mb-2 text-sm uppercase tracking-wider">Nomor Telepon/WhatsApp <span class="text-yellow-500">*</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-gray-100 border border-purple-300 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-purple-500 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-purple-800 font-medium mb-2 text-sm uppercase tracking-wider">Akun Media Sosial<span class="text-yellow-500">*</span></label>
|
|
<input type="text" id="socialMedia" name="socialMedia" required
|
|
class="form-input w-full px-4 py-3 bg-gray-100 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 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-purple-800 font-medium mb-2">Asal Komunitas/Institusi/Pekerjaan <span class="text-yellow-500">*</span></label>
|
|
<input type="text" id="origin" name="origin" required
|
|
class="form-input w-full px-4 py-3 bg-gray-100 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-purple-900 placeholder-gray-500 font-medium transition-all duration-200" placeholder="Contoh: Komunitas Film Kediri">
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label for="category" class="block text-purple-800 font-medium mb-2">Pilihan Kategori Peserta <span class="text-yellow-500">*</span></label>
|
|
<select id="category" name="category" required
|
|
class="form-input w-full px-4 py-3 bg-gray-100 text-purple-900 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
<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-purple-800 font-medium mb-2">Bagaimana Anda mengetahui acara ini? <span class="text-yellow-500">*</span></label>
|
|
<input type="text" id="discovery" name="discovery" required
|
|
class="form-input w-full px-4 py-2 bg-gray-100 border border-purple-300 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-purple-800 font-medium mb-2">Harapan apa yang Anda miliki dari kegiatan ini? <span class="text-yellow-500">*</span></label>
|
|
<textarea id="expectation" name="expectation" rows="3" required
|
|
class="form-input w-full px-4 py-2 bg-gray-100 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 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-purple-800 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-gray-100 border border-purple-300 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 border border-purple-800">
|
|
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-sm 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.jpg" 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> |