menambahkan fitur edit data pengguna dan memperbarui landing page
This commit is contained in:
powji17
@@ -1,70 +1,298 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Landing Page - Tugas WebGIS</title>
|
||||
<title>WebGIS Portfolio — Muhammad Fauzi</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 40px;
|
||||
background-color: #f4f4f9;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
background: #f0f4f8;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.link-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.link-list li {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.link-list a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
background-color: #007bff;
|
||||
/* ===== HEADER ===== */
|
||||
header {
|
||||
background: #1B2A4A;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
padding: 48px 24px 40px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.link-list a:hover {
|
||||
background-color: #0056b3;
|
||||
header .eyebrow {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #7fa8d4;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 14px;
|
||||
color: #a8bdd4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
header p span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* ===== MAIN ===== */
|
||||
main {
|
||||
max-width: 960px;
|
||||
margin: 40px auto;
|
||||
padding: 0 24px 60px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #aab4c0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* ===== PROJECT GRID ===== */
|
||||
.projects {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.card-banner {
|
||||
height: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-banner.green { background: #2ecc71; }
|
||||
.card-banner.blue { background: #3498db; }
|
||||
.card-banner.navy { background: #1B2A4A; }
|
||||
|
||||
.card-body {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #aab4c0;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.badge-featured {
|
||||
background: #1B2A4A;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1B2A4A;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.techstack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
background: #f0f4f8;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.tag.php { background: #e8f0fe; color: #3557a7; }
|
||||
.tag.js { background: #fef9e7; color: #9a7d0a; }
|
||||
.tag.mysql { background: #e8f8f5; color: #1a7a5e; }
|
||||
.tag.leaflet { background: #fdf2f8; color: #7d3c98; }
|
||||
.tag.css { background: #fef0e7; color: #a04000; }
|
||||
|
||||
.card-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
align-self: flex-start;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-btn.navy { background: #1B2A4A; }
|
||||
.card-btn.navy:hover { background: #253d6e; }
|
||||
.card-btn.green { background: #27ae60; }
|
||||
.card-btn.green:hover { background: #1e8449; }
|
||||
.card-btn.blue { background: #2980b9; }
|
||||
.card-btn.blue:hover { background: #2471a3; }
|
||||
|
||||
/* ===== FOOTER ===== */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
font-size: 12px;
|
||||
color: #aab4c0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h2>Landing Page - Tugas WebGIS</h2>
|
||||
<p style="text-align: center;">Nama: Muhammad Fauzi | NIM: D1041231083</p>
|
||||
<header>
|
||||
<p class="eyebrow">Sistem Informasi Geografis</p>
|
||||
<h1>Tugas Besar</h1>
|
||||
<p>
|
||||
<span><i class="fa-solid fa-user"></i> Muhammad Fauzi</span>
|
||||
<span><i class="fa-solid fa-id-card"></i> D1041231083</span>
|
||||
<span><i class="fa-solid fa-university"></i> Informatika — UNTAN</span>
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<p class="section-label"><i class="fa-solid fa-folder-open"></i> Daftar Project</p>
|
||||
|
||||
<div class="projects">
|
||||
|
||||
<!-- ===== PERTEMUAN 01: Pemetaan SPBU ===== -->
|
||||
<a href="./Pertemuan01/" class="card">
|
||||
<div class="card-banner green"></div>
|
||||
<div class="card-body">
|
||||
<div class="card-eyebrow">
|
||||
<i class="fa-solid fa-calendar-days"></i> Pertemuan 1
|
||||
</div>
|
||||
<div class="card-title">Pemetaan Titik SPBU</div>
|
||||
<p class="card-desc">
|
||||
WebGIS dasar untuk menandai dan mengelola lokasi SPBU di peta menggunakan marker titik.
|
||||
Mendukung operasi tambah, edit, dan hapus data langsung melalui popup di peta.
|
||||
</p>
|
||||
<div class="techstack">
|
||||
<span class="tag leaflet"><i class="fa-solid fa-map"></i> Leaflet.js</span>
|
||||
<span class="tag php">PHP</span>
|
||||
<span class="tag mysql">MySQL</span>
|
||||
<span class="tag js">JavaScript</span>
|
||||
</div>
|
||||
<span class="card-btn green">
|
||||
<i class="fa-solid fa-arrow-right"></i> Buka Project
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- ===== PERTEMUAN 02: Pemetaan Jalan & Area ===== -->
|
||||
<a href="./Pertemuan02/" class="card">
|
||||
<div class="card-banner blue"></div>
|
||||
<div class="card-body">
|
||||
<div class="card-eyebrow">
|
||||
<i class="fa-solid fa-calendar-days"></i> Pertemuan 2
|
||||
</div>
|
||||
<div class="card-title">Pemetaan Jalan & Area</div>
|
||||
<p class="card-desc">
|
||||
WebGIS untuk menggambar dan menyimpan data jalan (polyline) serta area kavling (polygon)
|
||||
secara interaktif di atas peta. Data tersimpan ke database dan dapat diedit ulang posisinya.
|
||||
</p>
|
||||
<div class="techstack">
|
||||
<span class="tag leaflet"><i class="fa-solid fa-map"></i> Leaflet.js</span>
|
||||
<span class="tag php">PHP</span>
|
||||
<span class="tag mysql">MySQL</span>
|
||||
<span class="tag js">JavaScript</span>
|
||||
</div>
|
||||
<span class="card-btn blue">
|
||||
<i class="fa-solid fa-arrow-right"></i> Buka Project
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- ===== FINAL PROJECT: WebGIS Poverty Mapping ===== -->
|
||||
<a href="./WebGISPovertyMapping/" class="card">
|
||||
<div class="card-banner navy"></div>
|
||||
<div class="card-body">
|
||||
<div class="card-eyebrow">
|
||||
<i class="fa-solid fa-star"></i> Final Project
|
||||
</div>
|
||||
<div class="card-title">Pemetaan Kemiskinan</div>
|
||||
<p class="card-desc">
|
||||
WebGIS pemetaan rumah prasejahtera dan rumah ibadah dengan analisis spasial otomatis,
|
||||
sistem login multi-role, dan manajemen data lengkap.
|
||||
</p>
|
||||
<div class="techstack">
|
||||
<span class="tag leaflet"><i class="fa-solid fa-map"></i> Leaflet.js</span>
|
||||
<span class="tag php">PHP</span>
|
||||
<span class="tag mysql">MySQL</span>
|
||||
<span class="tag js">JavaScript</span>
|
||||
<span class="tag css">CSS</span>
|
||||
</div>
|
||||
<span class="card-btn navy">
|
||||
<i class="fa-solid fa-arrow-right"></i> Buka Project
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<ul class="link-list">
|
||||
<li><a href="./Pertemuan01/">Tugas Pertemuan 1</a></li>
|
||||
<li><a href="./Pertemuan02/">Tugas Pertemuan 2</a></li>
|
||||
<li><a href="./WebGISPovertyMapping/">Tugas Poverty Mapping</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
© 2026 Muhammad Fauzi
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user