Blue Nirvana - Platform Streaming Movibes

Antarmuka web platform streaming film dan serial yang dibangun dengan HTML, CSS, dan JavaScript menampilkan desain mode gelap

htmlcssjavascriptstreamingfilmdesain-webmode-gelap

Bagikan proyek ini:

Tentang Proyek

Blue Nirvana - Platform Streaming Movibes

image

Antarmuka platform streaming film dan serial yang elegan, dibangun menggunakan HTML, CSS, dan JavaScript murni. Dibuat oleh mahasiswa Universitas Pancasila sebagai proyek mata kuliah Desain Web, menampilkan estetika mode gelap modern dan pengalaman pengguna yang intuitif.

📋 Ringkasan

Movibes adalah antarmuka platform streaming film dan serial yang menampilkan prinsip-prinsip desain web modern. Dibangun tanpa framework, proyek ini mendemonstrasikan kemahiran dalam teknologi web dasar sambil memberikan pengalaman streaming yang menarik secara visual dan ramah pengguna.

👥 Anggota Tim (Blue Nirvana)

  • Daffa Fathan (4522210082) - GitHub
  • Fathan Rachel (4522210071) - GitHub
  • Antonius Valentino (4522210109) - GitHub
  • Firja Rakha (4522210072) - GitHub
  • Tegar Gemilang (4522210095) - GitHub

✨ Fitur

Antarmuka Pengguna

  • Desain Modern: Antarmuka bersih dan minimalis dengan tema mode gelap.
  • Tata Letak Responsif: Beradaptasi dengan mulus di semua ukuran layar.
  • Animasi Halus: Transisi dan efek hover yang menarik.
  • Navigasi Intuitif: Menu dan penjelajahan kategori yang mudah digunakan.

Tampilan Konten

  • Grid Film: Tampilan film yang tersedia secara terorganisir.
  • Koleksi Serial: Bagian khusus untuk serial TV.
  • Banner Hero: Showcase konten unggulan.
  • Filter Kategori: Telusuri berdasarkan genre, popularitas, atau tanggal rilis.

Elemen Interaktif

  • Kartu Film: Informasi detail saat kursor diarahkan (hover).
  • Tombol Putar: Akses cepat ke konten.
  • Fungsi Pencarian: Menemukan film dan serial dengan mudah.
  • Menu Pengguna: Akses profil dan pengaturan.

Sorotan Desain

  • Tema Mode Gelap: Pengalaman menonton yang nyaman di mata.
  • Palet Warna Kustom: Identitas visual yang kohesif.
  • Tipografi: Font modern yang mudah dibaca.
  • Ikon: Ikonografi yang bersih dan konsisten.

🛠️ Teknologi yang Digunakan

  • HTML5: Markup semantik dan struktur.
  • CSS3: Styling tingkat lanjut dan animasi.
    • Tata letak Flexbox & Grid.
    • Variabel CSS (properti kustom).
    • Transisi dan transformasi.
    • Media queries untuk responsivitas.
  • JavaScript (Vanilla): Fungsionalitas interaktif.
    • Manipulasi DOM.
    • Penanganan event.
    • Pemuatan konten dinamis.
    • Logika pencarian dan filter.

📁 Struktur Proyek

blue-nirvana-team/
├── index.html              # Halaman beranda utama
├── src/
│   ├── css/
│   │   ├── style.css      # Lembar gaya utama
│   │   ├── responsive.css # Gaya seluler
│   │   └── components.css # Gaya komponen
│   └── js/
│       ├── main.js        # Fungsionalitas inti
│       ├── search.js      # Fitur pencarian
│       └── carousel.js    # Slider konten unggulan
├── img/                   # Poster film dan aset
│   ├── movies/
│   ├── series/
│   └── icons/
├── .vscode/               # Pengaturan VS Code
├── .editorconfig         # Konfigurasi format kode
├── .gitignore
└── README.md

🚀 Memulai

Prasyarat

  • Browser web modern (Chrome, Firefox, Safari, Edge).
  • (Opsional) Server pengembangan lokal.
  • (Opsional) VS Code dengan ekstensi Live Server.

Instalasi & Pengaturan

  1. Clone Repositori

    git clone <repository-url>
cd blue-nirvana-team

  2. Buka di Browser

    Opsi 1: Buka Langsung

    • Cukup klik dua kali index.html.
    • Akan terbuka di browser default.

    Opsi 2: Server Lokal (Disarankan)

    Menggunakan Python:

    # Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

    Menggunakan Node.js:

    npx http-server -p 8000

    Menggunakan VS Code Live Server:

    • Klik kanan pada index.html.
    • Pilih "Open with Live Server".

  3. Akses Platform

    http://localhost:8000

💻 Penggunaan

Menjelajahi Konten

  1. Halaman Beranda

    • Lihat film dan serial unggulan.
    • Telusuri tambahan terbaru.
    • Lihat konten populer.

  2. Kategori

    • Klik tag genre.
    • Filter berdasarkan tipe (Film/Serial).
    • Urutkan berdasarkan popularitas atau tanggal.

  3. Pencarian

    • Gunakan bilah pencarian.
    • Ketik nama film/serial.
    • Lihat hasil filter secara instan.

  4. Detail Film

    • Arahkan kursor ke kartu film.
    • Klik untuk informasi lebih lanjut.
    • Lihat peringkat, sinopsis, pemeran.

Navigasi

  • Home: Kembali ke halaman utama.
  • Movies: Menjelajahi koleksi film.
  • Series: Melihat acara TV yang tersedia.
  • My List: Favorit yang disimpan.
  • Profile: Preferensi pengguna.

🎨 Sistem Desain

Palet Warna

:root {
  /* Warna Utama */
  --primary-bg: #141414;
  --secondary-bg: #1e1e1e;
  --accent-color: #e50914;
  
  /* Warna Teks */
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-muted: #737373;
  
  /* Interaktif */
  --hover-bg: #2f2f2f;
  --button-primary: #e50914;
  --button-hover: #f40612;
}

Tipografi

/* Judul */
font-family: 'Poppins', 'Helvetica Neue', sans-serif;

/* Teks Tubuh */
font-family: 'Inter', 'Arial', sans-serif;

/* Ukuran */
h1: 2.5rem / 40px
h2: 2rem / 32px
h3: 1.5rem / 24px
body: 1rem / 16px

Grid Tata Letak

  • Desktop: Grid 6-kolom untuk kartu film.
  • Tablet: Grid 4-kolom.
  • Mobile: Grid 2-kolom.

🎯 Implementasi Fitur Utama

Tema Mode Gelap

Seluruh platform menggunakan skema warna gelap yang dirancang dengan cermat:

  • Mengurangi kelelahan mata selama menonton dalam waktu lama.
  • Estetika modern dan premium.
  • Konsisten di semua halaman.
  • Rasio kontras yang dioptimalkan untuk keterbacaan.

Desain Responsif

Breakpoints:

/* Mobile First */
@media (min-width: 640px)  { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1280px) { /* Large Desktop */ }

Efek Hover Kartu Film

.movie-card {
  transition: transform 0.3s ease;
}

.movie-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

Fungsionalitas Pencarian

function searchMovies(query) {
  const movies = document.querySelectorAll('.movie-card');
  movies.forEach(movie => {
    const title = movie.dataset.title.toLowerCase();
    movie.style.display = title.includes(query.toLowerCase()) 
      ? 'block' 
      : 'none';
  });
}

📱 Halaman

Halaman Beranda (index.html)

  • Banner hero dengan konten unggulan.
  • Bagian film trending.
  • Bagian serial populer.
  • Lanjutkan menonton (jika pengguna login).

Halaman Film

  • Pustaka film lengkap.
  • Filter genre.
  • Opsi pengurutan.
  • Tampilan grid.

Halaman Serial

  • Koleksi acara TV.
  • Informasi musim.
  • Jumlah episode.
  • Pilihan serial seru.

Halaman Profil (jika diimplementasikan)

  • Informasi pengguna.
  • Riwayat tontonan.
  • Daftar saya.
  • Preferensi.

🔧 Kustomisasi

Menambah Film Baru

  1. Tambahkan poster film ke img/movies/.
  2. Perbarui data film:
<div class="movie-card" data-title="Nama Film" data-genre="Action">
  <img src="img/movies/poster.jpg" alt="Nama Film">
  <div class="movie-info">
    <h3>Nama Film</h3>
    <p class="rating">★ 8.5</p>
  </div>
</div>

Mengubah Warna Tema

Edit variabel CSS di src/css/style.css:

:root {
  --primary-bg: #warna-anda;
  --accent-color: #aksen-anda;
}

🐛 Pemecahan Masalah

Gambar Tidak Muncul

  • Periksa jalur file (path) di HTML.
  • Verifikasi gambar ada di folder img/.
  • Periksa ekstensi file sesuai dengan kode.

Gaya (Style) Tidak Berubah

  • Bersihkan cache browser.
  • Periksa jalur file CSS.
  • Verifikasi sintaks CSS.

JavaScript Tidak Berjalan

  • Buka konsol browser (F12).
  • Periksa adanya kesalahan.
  • Pastikan skrip dimuat dalam urutan yang benar.

🚀 Peningkatan Masa Depan

Potensi perbaikan:

  • Integrasi backend (Node.js, PHP).
  • Sistem autentikasi pengguna.
  • Integrasi pemutar video.
  • Ulasan dan peringkat.
  • Fungsionalitas daftar tontonan (watchlist).
  • Algoritma rekomendasi.
  • Fitur sosial (berbagi, komentar).
  • Dukungan berbagai bahasa.
  • Progressive Web App (PWA).
  • Integrasi API (TMDB, OMDB).

🎓 Hasil Pembelajaran

Proyek ini mengajarkan tim kami:

Desain Web

  • Prinsip UI/UX modern.
  • Teori warna dan tipografi.
  • Pola desain responsif.
  • Implementasi mode gelap.
  • Hierarki visual.

Pengembangan Frontend

  • HTML5 Semantik.
  • Teknik CSS tingkat lanjut.
  • Vanilla JavaScript.
  • Manipulasi DOM.
  • Pemrograman berbasis event.

Kolaborasi Tim

  • Alur kerja Git.
  • Tinjauan kode (code reviews).
  • Distribusi tugas.
  • Konsistensi desain.
  • Perencanaan proyek.

📐 Prinsip Desain

  • Kesederhanaan: Antarmuka bersih tanpa gangguan.
  • Konsistensi: Bahasa desain yang seragam.
  • Daya Tarik Visual: Tema gelap yang menarik.
  • Kegunaan: Navigasi yang intuitif.
  • Performa: Waktu pemuatan yang cepat.

🎨 Inspirasi

Desain terinspirasi oleh:

  • Antarmuka Netflix.
  • Tata letak Disney+.
  • Estetika HBO Max.
  • Platform streaming modern lainnya.

🤝 Kontribusi

Ini adalah proyek mata kuliah akademik. Kontribusi tim meliputi:

  • Desain UI/UX.
  • Pengembangan frontend.
  • Kurasi konten.
  • Pengujian dan debugging.
  • Dokumentasi.

📄 Lisensi

Dibuat untuk tujuan pendidikan sebagai proyek mata kuliah Desain Web di Universitas Pancasila.

💭 Refleksi Tim

Movibes merepresentasikan upaya kolektif kami untuk membuat antarmuka platform streaming kelas profesional menggunakan teknologi web dasar. Desain mode gelap yang sederhana namun menarik ini menunjukkan pemahaman kami tentang prinsip desain web modern dan kemampuan kami untuk bekerja secara kolaboratif dalam sebuah proyek yang kohesif.

Dikembangkan oleh Tim Blue Nirvana 🎬✨
Antarmuka Platform Streaming Modern untuk Mata Kuliah Desain Web!