Galeri UI Eduverse
Snapshot tampilan utama Eduverse pada desktop dan mobile.
Halaman ini menyimpan snapshot UI Eduverse dari route aplikasi yang sedang aktif. Screenshot diambil dari build production lokal agar gambaran visualnya merepresentasikan tampilan yang benar-benar dirender sistem.
Interface Desktop
Beranda
Beranda desktop memperkenalkan Eduverse melalui navigasi utama, headline platform, deskripsi singkat, dan visual globe interaktif. Layout dua kolom memberi ruang yang seimbang antara pesan utama dan identitas visual platform.
Katalog Learning Paths
Halaman katalog desktop mengelompokkan jalur belajar berdasarkan area, status ketersediaan, deskripsi course, dan tautan pembuka. Susunan horizontal membuat pengguna dapat membandingkan beberapa learning path dengan cepat.
Area Dokumentasi
Area dokumentasi desktop memakai sidebar untuk navigasi root dan konten utama untuk membaca halaman. Lebar baca, breadcrumb, deskripsi, action bar, dan daftar isi membantu pengguna berpindah dari overview ke dokumen teknis secara terarah.
Halaman Materi
Halaman materi desktop menempatkan breadcrumb, judul pertemuan, deskripsi, action bar, callout fokus, materi utama, diagram, dan navigasi halaman dalam satu alur baca. Tampilan ini ditujukan untuk pembacaan mendalam dan inspeksi materi yang panjang.
Interface Mobile
Beranda
Beranda mobile menyederhanakan komposisi layar agar headline dan navigasi tetap terbaca pada lebar sempit. Fokus visual tetap dipertahankan, tetapi elemen desktop yang membutuhkan ruang horizontal disusun ulang secara vertikal.
Halaman Materi
Halaman materi mobile memprioritaskan judul, deskripsi, action bar, callout, dan isi pembelajaran dalam satu kolom. Navigasi course tetap tersedia melalui kontrol yang dipadatkan di bagian bawah viewport sehingga aktivitas membaca dapat dilanjutkan tanpa kehilangan konteks course.
Interactive UI States
Course Menu Terbuka
State ini memperlihatkan Course Menu ketika dibuka dari navigasi utama. Pengguna dapat berpindah antara Beranda, Katalog, Docs, dan Knowledge tanpa meninggalkan pola navigasi global Eduverse.
TOC Terbuka pada Mobile
Pada mobile, daftar isi dan konteks halaman dibuka melalui kontrol Arah Pertemuan. Panel ini menampilkan posisi materi dalam alur pertemuan, bagian pembahasan, dan hubungan dengan materi setelahnya.
Dropdown Open AI
Dropdown Open AI menyediakan jalur cepat untuk membuka materi atau konteks yang sama melalui GitHub, Scira, ChatGPT, Claude, dan T3. State terbuka ini juga menunjukkan bahwa menu tetap berada di atas konten tanpa mengubah layout halaman.
Copy Markdown Berhasil
Setelah tombol Copy Markdown digunakan, ikon tombol berubah menjadi tanda centang sebagai konfirmasi visual bahwa Markdown materi telah disalin. State ini memberi umpan balik singkat tanpa menambah notifikasi yang menutupi isi dokumen.
