86 lines
6.3 KiB
PHP
86 lines
6.3 KiB
PHP
<?php
|
|
$tasks = [
|
|
['id' => '01', 'title' => 'Tugas 01', 'subtitle' => 'Manajemen SPBU', 'desc' => 'CRUD titik SPBU dengan status ramai, jam operasional, buka/tutup, nomor HP, dan visualisasi Leaflet.', 'url' => '01/', 'badge' => 'SPBU'],
|
|
['id' => '02', 'title' => 'Tugas 02', 'subtitle' => 'SPBU + Polyline + Polygon', 'desc' => 'Pemetaan SPBU, garis jalan, dan area polygon dengan penyimpanan data MySQL.', 'url' => '02/', 'badge' => 'Layer'],
|
|
['id' => '03', 'title' => 'Tugas 03', 'subtitle' => 'Manajemen Jalan & Parsil Tanah', 'desc' => 'WebGIS untuk data jalan dan parsil tanah menggunakan Leaflet dan database geospasial sederhana.', 'url' => '03/', 'badge' => 'Jalan'],
|
|
['id' => '04', 'title' => 'Tugas 04', 'subtitle' => 'SPBU dengan Layer Groups & Layer Control', 'desc' => 'Pengelompokan layer, kontrol tampilan peta, serta manajemen titik SPBU berbasis PHP native.', 'url' => '04/', 'badge' => 'Control'],
|
|
['id' => '05', 'title' => 'Tugas 05', 'subtitle' => 'WebGIS Poverty Mapping', 'desc' => 'Aplikasi bantuan/zakat berbasis lokasi dengan role super admin, admin rumah ibadah, dan penerima.', 'url' => '05/', 'badge' => 'Poverty']
|
|
];
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>D1041231091 - Kumpulan Tugas WebGIS</title>
|
|
<style>
|
|
:root{
|
|
--bg1:#062f2f; --bg2:#071827; --card:#ffffff; --text:#0f172a;
|
|
--muted:#64748b; --green:#0f766e; --green2:#14b8a6; --line:#dbe7e6;
|
|
}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,#0f766e 0,#0d3d43 36%,#08111f 100%);color:#fff;min-height:100vh}
|
|
.wrap{max-width:1180px;margin:0 auto;padding:36px 20px 42px}
|
|
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:stretch;margin-bottom:24px}
|
|
.panel{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.10);box-shadow:0 18px 60px rgba(0,0,0,.22);backdrop-filter:blur(14px);border-radius:28px;padding:30px}
|
|
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(20,184,166,.18);border:1px solid rgba(94,234,212,.3);font-weight:700;font-size:13px;color:#ccfbf1;margin-bottom:16px}
|
|
h1{font-size:clamp(30px,5vw,58px);line-height:1.02;margin:0 0 16px;letter-spacing:-.04em}
|
|
.lead{font-size:18px;line-height:1.7;color:#d1fae5;margin:0;max-width:720px}
|
|
.identity{display:grid;gap:12px;height:100%}
|
|
.info{border-radius:20px;background:rgba(255,255,255,.92);color:var(--text);padding:20px;border:1px solid rgba(255,255,255,.5)}
|
|
.info strong{display:block;font-size:13px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em}
|
|
.info span{font-size:18px;font-weight:800}
|
|
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
|
|
.card{position:relative;display:flex;min-height:260px;flex-direction:column;justify-content:space-between;text-decoration:none;color:var(--text);background:linear-gradient(180deg,#fff,#f8fffe);border:1px solid var(--line);border-radius:24px;padding:22px;overflow:hidden;box-shadow:0 14px 34px rgba(2,12,27,.18);transition:.2s ease}
|
|
.card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(20,184,166,.18),transparent 36%);pointer-events:none}
|
|
.card:hover{transform:translateY(-6px);box-shadow:0 24px 42px rgba(2,12,27,.28)}
|
|
.top{position:relative;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
|
|
.num{width:48px;height:48px;border-radius:16px;background:#0f766e;color:#fff;display:grid;place-items:center;font-weight:900;font-size:20px}
|
|
.badge{font-size:12px;font-weight:800;color:#0f766e;background:#ccfbf1;border:1px solid #99f6e4;border-radius:999px;padding:6px 10px}
|
|
.card h2{position:relative;font-size:22px;line-height:1.1;margin:24px 0 8px;letter-spacing:-.02em}
|
|
.subtitle{position:relative;font-weight:800;color:#0f766e;margin:0 0 10px}
|
|
.desc{position:relative;color:var(--muted);line-height:1.55;margin:0;font-size:14px}
|
|
.open{position:relative;margin-top:22px;font-weight:900;color:#0f172a;display:flex;align-items:center;gap:8px}
|
|
.footer{margin-top:24px;text-align:center;color:#d1fae5;font-size:14px}
|
|
.login-note{margin-top:18px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:#ecfeff;font-size:14px}
|
|
@media(max-width:980px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}
|
|
@media(max-width:620px){.wrap{padding:22px 14px}.panel{padding:22px;border-radius:22px}.grid{grid-template-columns:1fr}.card{min-height:220px}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="wrap">
|
|
<section class="hero">
|
|
<div class="panel">
|
|
<div class="eyebrow">🗺️ Kumpulan Deploy WebGIS</div>
|
|
<h1>D1041231091<br>Requestha Amorine Montass</h1>
|
|
<p class="lead">Landing page untuk mengakses seluruh tugas WebGIS 01 sampai 05 dalam satu deployment Docker. Setiap kartu di bawah membuka aplikasi sesuai folder tugas.</p>
|
|
<div class="login-note">Akun awal Tugas 05: <b>superadmin</b> / <b>password</b></div>
|
|
</div>
|
|
<div class="identity">
|
|
<div class="info"><strong>Mahasiswa</strong><span>Requestha Amorine Montass</span></div>
|
|
<div class="info"><strong>NIM</strong><span>D1041231091</span></div>
|
|
<div class="info"><strong>Teknologi</strong><span>PHP Native, MySQL, Leaflet.js, Docker</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid">
|
|
<?php foreach ($tasks as $task): ?>
|
|
<a class="card" href="<?= htmlspecialchars($task['url']) ?>">
|
|
<div>
|
|
<div class="top">
|
|
<div class="num"><?= htmlspecialchars($task['id']) ?></div>
|
|
<div class="badge"><?= htmlspecialchars($task['badge']) ?></div>
|
|
</div>
|
|
<h2><?= htmlspecialchars($task['title']) ?></h2>
|
|
<p class="subtitle"><?= htmlspecialchars($task['subtitle']) ?></p>
|
|
<p class="desc"><?= htmlspecialchars($task['desc']) ?></p>
|
|
</div>
|
|
<div class="open">Buka aplikasi <span>→</span></div>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</section>
|
|
<div class="footer">Satu repository, satu Docker Compose, satu domain untuk semua tugas.</div>
|
|
</main>
|
|
</body>
|
|
</html>
|