powji17
298 lines
9.1 KiB
PHP
298 lines
9.1 KiB
PHP
<!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 Besar SIG</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: 'Segoe UI', Arial, sans-serif;
|
|
background: #f0f4f8;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ===== HEADER ===== */
|
|
header {
|
|
background: #1B2A4A;
|
|
color: white;
|
|
padding: 48px 24px 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
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>
|
|
|
|
<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>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
© 2026 Muhammad Fauzi
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |