commit 74a6be147aaf48cda4a11d0c57124125b00e14c4 Author: GuavaPopper Date: Sat Jun 13 06:42:51 2026 +0700 feat: initialize WebGIS landing page with project index and documentation diff --git a/README.md b/README.md new file mode 100644 index 0000000..eec4ce4 --- /dev/null +++ b/README.md @@ -0,0 +1,69 @@ +# WebGIS Landing Page + +Landing page statis yang menjadi pintu masuk ke empat project tugas mata kuliah **Sistem Informasi Geografis — Kelas B**, Program Studi Informatika, Fakultas Teknik, Universitas Tanjungpura. + +Dibuat oleh **Raditya Indra Putranto** (NIM **D1041231009**). + +## Fitur + +- Hero dengan heading besar, badge mata kuliah, dan dua tombol aksi. +- Kartu "Index Project" bergaya panel gelap berisi daftar 4 project beserta status, dengan efek **3D tilt** yang mengikuti arah kursor saat di-hover. +- Chip identitas mahasiswa (logo, nama, NIM) yang melayang di sudut panel. +- Bagian "Daftar Project" berisi 4 kartu project dengan nomor, status badge, deskripsi, tag teknologi, dan tombol panah; klik kartu membuka project di tab baru. +- Bagian "Tentang" berisi identitas mahasiswa dan blok NIM. +- Animasi reveal saat scroll dengan fallback agar konten tetap tampil walau JavaScript nonaktif, serta dukungan `prefers-reduced-motion`. +- Desain clean responsive dengan palet warna mengikuti logo Untan: kuning `#ffc907`, merah `#e3252e`, dan navy gelap di atas latar cream. + +## Project Yang Ditautkan + +| No | Project | Teknologi | URL | +| --- | --- | --- | --- | +| 01 | WebGIS Pemetaan Kemiskinan | Laravel, MySQL, Leaflet, Docker | http://vwkgokg048o8gwok4sgko488.203.24.51.230.sslip.io | +| 02 | WebGIS Titik SPBU | Laravel, Leaflet, DaisyUI | http://zyzdz93mld60i80jeql3wwp9.203.24.51.230.sslip.io | +| 03 | WebGIS Jalan & Jalan Rusak | PHP, Leaflet Draw, Turf.js, EXIF.js | http://ucwkocckgsw8o48csgggssw4.203.24.51.230.sslip.io | +| 04 | Choropleth Kecamatan Pontianak | Leaflet, GeoJSON, Proj4js | http://ovzy869trq09d7ldwoa6yenq.203.24.51.230.sslip.io | + +## Teknologi + +- HTML, CSS, dan JavaScript murni dalam satu file `index.html` — tanpa framework dan tanpa proses build. +- Google Fonts: Schibsted Grotesk (heading dan teks) dan IBM Plex Mono (label, NIM, tombol). +- IntersectionObserver untuk animasi reveal dan CSS custom property untuk efek 3D tilt. + +## Struktur File + +```text +. +|-- index.html # landing page (markup, style, script jadi satu) +|-- logo-untan.png # logo Untan transparan +`-- README.md +``` + +## Cara Menjalankan + +Halaman ini statis, cukup disajikan lewat web server lokal. + +Jika menggunakan Laragon, letakkan folder project di direktori `www`, lalu buka: + +```text +http://localhost/WebGIS_LandingPage/ +``` + +Atau gunakan server lokal lain dari direktori project: + +```bash +python -m http.server 8000 +``` + +Kemudian buka `http://localhost:8000/`. + +## Kustomisasi + +- **Nama dan NIM**: cari komentar `` di `index.html` (ada di chip hero dan bagian Tentang). +- **Link project**: tiap project ditautkan di dua tempat — baris pada panel "Index Project" di hero dan kartu pada bagian "Daftar Project". Untuk menandai project belum siap, tambahkan class `soon` pada elemen `.row`/`.card`, ganti `href` ke `#` dengan `onclick="return false;"`, dan ubah teks status menjadi `Menyusul`. +- **Warna**: seluruh palet didefinisikan sebagai CSS variable di blok `:root` pada `index.html`. + +## Catatan + +- Logo `logo-untan.png` diambil dari [Wikipedia bahasa Indonesia](https://id.wikipedia.org/wiki/Berkas:Lambang_Universitas_Tanjungpura.png). +- Halaman membutuhkan koneksi internet hanya untuk memuat Google Fonts; tanpa internet halaman tetap berfungsi dengan font fallback. +- Efek 3D tilt otomatis nonaktif di perangkat sentuh dan saat pengguna mengaktifkan reduced motion. diff --git a/index.html b/index.html new file mode 100644 index 0000000..48a5f68 --- /dev/null +++ b/index.html @@ -0,0 +1,1011 @@ + + + + + + + Project WebGIS - D1041231009 · Informatika Untan + + + + + + + + + + + + + + + + +
+
+ SIG Untan · Informatika - Kelas B 2025/2026 +

Empat
Project
WebGIS.

+

+ Kumpulan project tugas mata kuliah Sistem Informasi Geografis - + pemetaan kemiskinan, titik SPBU, jalan rusak, hingga choropleth kependudukan + Kota Pontianak. Dibangun dengan Leaflet, Laravel, dan GeoJSON. +

+
+ Lihat Project + + + + + Informatika + Untan +
+
+ +
+
+
+ Index Project + Genap 2025/2026 +
+
+ + 01 + Pemetaan Kemiskinan + Live + + + 02 + Titik SPBU + Live + + + 03 + Jalan & Jalan Rusak + Live + + + 04 + Choropleth Pontianak + Live + +
+
+ Total Project04 + Jelajahi → +
+
+ +
+ Logo Untan +
+
D1041231009
+ +
Raditya Indra Putranto
+
+
+
+
+ + +
+
+

Daftar Project.

+ Klik kartu untuk membuka project +
+ +
+ + +
+ PROJECT — 01 + Live +
+

WebGIS Pemetaan Kemiskinan

+

Memetakan rumah ibadah, keluarga miskin, radius layanan, distribusi bantuan, transfer tanggungan, dan + statistik sebaran dengan multi-role pengguna.

+
+
+ LaravelMySQLLeafletDocker +
+ + + + + +
+ + + +
+ PROJECT — 02 + Live +
+

WebGIS Titik SPBU

+

Pengelolaan titik SPBU: input lokasi dari klik peta, drag marker, edit atribut, pencarian, statistik, + hingga mini map daftar data.

+
+
+ LaravelLeafletDaisyUIREST API +
+ + + + + +
+ + + +
+ PROJECT — 03 + Live +
+

WebGIS Jalan & Jalan Rusak

+

Gambar polyline jalan dan polygon parsil tanah langsung di peta, plus lapor titik kerusakan otomatis dari + metadata GPS EXIF pada foto.

+
+
+ PHPLeaflet DrawTurf.jsEXIF.js +
+ + + + + +
+ + + +
+ PROJECT — 04 + Live +
+

Choropleth Kecamatan Pontianak

+

Peta choropleth jumlah penduduk per kecamatan Kota Pontianak dengan konversi koordinat EPSG:32749 → + EPSG:4326 via Proj4js.

+
+
+ LeafletGeoJSONProj4js +
+ + + + + +
+ + +
+
+ + +
+
+ Logo Universitas Tanjungpura +
+ +

Raditya Indra Putranto

+

Mahasiswa Program Studi Informatika, Fakultas Teknik, Universitas Tanjungpura. + Seluruh project pada halaman ini merupakan tugas mata kuliah + Sistem Informasi Geografis - Kelas B. +

+
+
+
NIM
+
D1041231009
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/logo-untan.png b/logo-untan.png new file mode 100644 index 0000000..56da1b1 Binary files /dev/null and b/logo-untan.png differ