207 lines
6.6 KiB
HTML
207 lines
6.6 KiB
HTML
<!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 SIG - Kris Natalis</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f6f8fc;
|
|
--card: #ffffff;
|
|
--text: #172033;
|
|
--muted: #667085;
|
|
--line: #e5e7eb;
|
|
--primary: #2563eb;
|
|
--primary-dark: #1d4ed8;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background: radial-gradient(circle at top left, #dbeafe 0, transparent 32%), var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.wrapper {
|
|
width: min(1100px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding: 42px 0;
|
|
}
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 1.4fr .8fr;
|
|
gap: 24px;
|
|
align-items: stretch;
|
|
margin-bottom: 24px;
|
|
}
|
|
.panel, .card {
|
|
background: rgba(255,255,255,.92);
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
box-shadow: 0 12px 32px rgba(15,23,42,.08);
|
|
}
|
|
.panel { padding: 32px; }
|
|
.badge {
|
|
display: inline-flex;
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
background: #eff6ff;
|
|
color: #1d4ed8;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
}
|
|
h1 {
|
|
margin: 0;
|
|
font-size: clamp(30px, 5vw, 52px);
|
|
letter-spacing: -1.4px;
|
|
line-height: 1.04;
|
|
}
|
|
.subtitle {
|
|
margin: 16px 0 0;
|
|
font-size: 16px;
|
|
color: var(--muted);
|
|
line-height: 1.7;
|
|
max-width: 720px;
|
|
}
|
|
.info {
|
|
padding: 26px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
.info-row {
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.info-row:last-child { border-bottom: 0; }
|
|
.label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
margin-bottom: 4px;
|
|
}
|
|
.value { font-weight: 700; }
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
}
|
|
.card {
|
|
padding: 22px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 260px;
|
|
}
|
|
.number {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 14px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: #eff6ff;
|
|
color: var(--primary);
|
|
font-weight: 800;
|
|
margin-bottom: 16px;
|
|
}
|
|
.card h2 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
.card p {
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
font-size: 14px;
|
|
flex: 1;
|
|
}
|
|
.button {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
background: var(--primary);
|
|
color: white;
|
|
padding: 11px 14px;
|
|
border-radius: 12px;
|
|
font-weight: 700;
|
|
transition: .2s;
|
|
}
|
|
.button:hover { background: var(--primary-dark); transform: translateY(-1px); }
|
|
footer {
|
|
margin-top: 22px;
|
|
color: var(--muted);
|
|
text-align: center;
|
|
font-size: 13px;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.hero { grid-template-columns: 1fr; }
|
|
.grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.wrapper { width: min(100% - 22px, 1100px); padding: 22px 0; }
|
|
.panel, .info, .card { border-radius: 16px; }
|
|
.panel { padding: 24px; }
|
|
.grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="wrapper">
|
|
<section class="hero">
|
|
<div class="panel">
|
|
<span class="badge">Mata Kuliah Sistem Informasi Geografis</span>
|
|
<h1>Landing Page Tugas WebGIS</h1>
|
|
<p class="subtitle">
|
|
Halaman ini berisi kumpulan tugas WebGIS yang digabung dalam satu aplikasi,
|
|
sehingga cukup dideploy satu kali di Coolify dan setiap tugas dapat dibuka melalui subfolder.
|
|
</p>
|
|
</div>
|
|
<aside class="info panel">
|
|
<div class="info-row">
|
|
<span class="label">Nama</span>
|
|
<span class="value">Kris Natalis</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="label">Project</span>
|
|
<span class="value">Tugas SIG WebGIS</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="label">Jumlah Tugas</span>
|
|
<span class="value">4 Project</span>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
<section class="grid">
|
|
<article class="card">
|
|
<div class="number">01</div>
|
|
<h2>WebGIS Pemetaan SPBU</h2>
|
|
<p>Menampilkan dan mengelola titik lokasi SPBU menggunakan marker Leaflet dan database.</p>
|
|
<a class="button" href="tugas01/">Buka Tugas 01</a>
|
|
</article>
|
|
<article class="card">
|
|
<div class="number">02</div>
|
|
<h2>Manajemen Jalan dan Tanah</h2>
|
|
<p>Mengelola data jalan berbentuk polyline dan data tanah berbentuk polygon.</p>
|
|
<a class="button" href="tugas02/">Buka Tugas 02</a>
|
|
</article>
|
|
<article class="card">
|
|
<div class="number">03</div>
|
|
<h2>Layer Groups & Control</h2>
|
|
<p>Menampilkan layer SPBU berdasarkan kategori buka 24 jam dan tidak 24 jam.</p>
|
|
<a class="button" href="tugas03/">Buka Tugas 03</a>
|
|
</article>
|
|
<article class="card">
|
|
<div class="number">04</div>
|
|
<h2>GeoJSON Kecamatan Pontianak</h2>
|
|
<p>Menampilkan batas kecamatan, nama kecamatan, dan jumlah populasi dari file GeoJSON.</p>
|
|
<a class="button" href="tugas04/">Buka Tugas 04</a>
|
|
</article>
|
|
</section>
|
|
|
|
<footer>
|
|
TUGAS SIG
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|