Upload files to "/"
This commit is contained in:
+206
@@ -0,0 +1,206 @@
|
||||
<!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>
|
||||
UAS SIG dideploy terpisah dan tidak dimasukkan ke landing page tugas.
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user