510 lines
18 KiB
HTML
510 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
name="description"
|
|
content="
|
|
RoadReport merupakan aplikasi yang digunakan untuk melaporkan dan
|
|
memantau proses perbaikan jalan rusak. Cukup ketuk layar ponsel Anda,
|
|
beri tahu kami tentang masalah jalan, dan kami akan segera mengatasinya.
|
|
Bergabunglah dalam perjalanan kami untuk membuat jalan lebih baik dengan
|
|
RoadReport!
|
|
"
|
|
/>
|
|
<meta
|
|
name="keywords"
|
|
content="
|
|
roadreport, road report, road, report, jalan, rusak, jalan rusak, aplikasi, mobile, android, ios, web, website, dashboard, monitoring, pemantauan, pemantauan jalan, pemantauan jalan rusak, pemantauan jalan rusak berbasis web, pemantauan jalan rusak berbasis mobile, pemantauan jalan rusak berbasis android, pemantauan jalan rusak berbasis ios, pemantauan jalan rusak berbasis website, pemantauan jalan rusak berbasis dashboard, pemantauan jalan rusak berbasis monitoring, pemantauan jalan rusak berbasis pemantauan, pemantauan jalan rusak berbasis pemantauan jalan, pemantauan jalan rusak berbasis pemantauan jalan rusak, pemantauan jalan rusak berbasis pemantauan jalan rusak berbasis web, pemantauan jalan rusak berbasis pemantauan jalan rusak berbasis mobile, pemantauan jalan rusak berbasis pemantauan jalan rusak berbasis android, pemantauan jalan rusak berbasis pemantauan jalan rusak berbasis ios, pemantauan jalan rusak berbasis pemantauan jalan rusak berbasis website, pemantauan jalan rusak berbasis pemantauan jalan rusak berbasis dashboard, pemantauan jalan rusak berbasis pemantauan jalan rusak berbasis monitoring
|
|
"
|
|
/>
|
|
<title>RoadReport</title>
|
|
<link rel="icon" href="assets/images/favicon.png" />
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin=""
|
|
/>
|
|
<link rel="stylesheet" href="/assets/css/styles.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<a href="#" class="navbar-brand">
|
|
<img
|
|
src="assets/images/logo.webp"
|
|
alt="RoadReport"
|
|
width="112"
|
|
height="38"
|
|
/>
|
|
</a>
|
|
<button class="button navbar-toggle" type="button">menu</button>
|
|
<nav class="navbar-menu">
|
|
<ul class="navbar-menu-list">
|
|
<li>
|
|
<a href="#">Beranda</a>
|
|
</li>
|
|
<li>
|
|
<a href="#feature">Fitur Unggulan</a>
|
|
</li>
|
|
<li>
|
|
<a href="#app">Mobile Apps</a>
|
|
</li>
|
|
</ul>
|
|
<div class="navbar-menu-action">
|
|
<!-- <a href="#" class="button">Login</a> -->
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<aside>
|
|
<button type="button">X</button>
|
|
<nav>
|
|
<a href="#">Beranda</a>
|
|
<a href="#feature">Fitur Unggulan</a>
|
|
<a href="#app">Mobile Apps</a>
|
|
</nav>
|
|
</aside>
|
|
<main>
|
|
<section id="hero" class="section hero">
|
|
<div class="container">
|
|
<div class="hero-text">
|
|
<h1 class="title hero-title">
|
|
Jalan Rusak? Laporkan secara <span>real-time</span> dengan
|
|
RoadReport!
|
|
</h1>
|
|
<p class="hero-desc">
|
|
RoadReport merupakan aplikasi yang digunakan untuk melaporkan dan
|
|
memantau proses perbaikan jalan rusak. Cukup ketuk layar ponsel
|
|
Anda, beri tahu kami tentang masalah jalan, dan kami akan segera
|
|
mengatasinya. Bergabunglah dalam perjalanan kami untuk membuat
|
|
jalan lebih baik dengan RoadReport!
|
|
</p>
|
|
<a href="#" class="button hero-cta">
|
|
<img
|
|
src="assets/images/gplay.webp"
|
|
width="32"
|
|
height="32"
|
|
alt="Google Play"
|
|
/>
|
|
Download Sekarang
|
|
</a>
|
|
</div>
|
|
<div class="hero-illustration">
|
|
<img src="assets/images/hero.webp" alt="Road Report" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="feature" class="section">
|
|
<div class="container">
|
|
<h1 class="feature-title">Fitur Unggulan</h1>
|
|
<h2 class="title feature-subtitle">Pantau Proses Jalan</h2>
|
|
<p class="feature-desc">
|
|
Fitur Pemantauan Proses Jalan memungkinkan Anda untuk melihat
|
|
perkembangan perbaikan jalan secara real-time.
|
|
</p>
|
|
<div class="feature-map">
|
|
<ul class="feature-map-legend">
|
|
<li>Dalam Proses</li>
|
|
<li>Tindak Lanjut</li>
|
|
<li>Perbaikan</li>
|
|
</ul>
|
|
<div id="map" class="feature-map-canvas"></div>
|
|
</div>
|
|
|
|
<ul class="feature-list">
|
|
<li>
|
|
<img
|
|
src="assets/images/machine_learning.webp"
|
|
width="120"
|
|
height="120"
|
|
alt="Machine Learning"
|
|
/>
|
|
<h6>Machine Learning</h6>
|
|
<p>
|
|
Teknologi Machine Learning untuk mengidentifikasi prioritas
|
|
perbaikan jalan.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<img
|
|
src="assets/images/pemantauan.webp"
|
|
width="120"
|
|
height="120"
|
|
alt="Pemantauan"
|
|
/>
|
|
<h6>Pemantauan</h6>
|
|
<p>
|
|
Fitur pemantauan memungkinkan pengguna untuk melihat kondisi
|
|
jalan dengan pembaruan real-time.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<img
|
|
src="assets/images/peta.webp"
|
|
width="120"
|
|
height="120"
|
|
alt="Peta Interaktif"
|
|
/>
|
|
<h6>Peta Interaktif</h6>
|
|
<p>
|
|
Peta interaktif membantu pengguna untuk mendapatkan informasi
|
|
kondisi jalan yang up-to-date.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<img
|
|
src="assets/images/pelaporan.webp"
|
|
width="120"
|
|
height="120"
|
|
alt="Pelaporan"
|
|
/>
|
|
<h6>Pelaporan</h6>
|
|
<p>
|
|
Melaporkan kerusakan jalan dengan mudah melalui fitur pelaporan
|
|
lengkap.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<img
|
|
src="assets/images/jadwal.webp"
|
|
width="120"
|
|
height="120"
|
|
alt="Jadwal Perbaikan"
|
|
/>
|
|
<h6>Jadwal Perbaikan</h6>
|
|
<p>
|
|
Jadwal perbaikan jalan membantu pengguna untuk mengetahui kapan
|
|
perbaikan jalan akan dilakukan.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<img
|
|
src="assets/images/keputusan.webp"
|
|
width="120"
|
|
height="120"
|
|
alt="Keputusan Terinformasi"
|
|
/>
|
|
<h6>Jadwal Perbaikan</h6>
|
|
<p>
|
|
RoadReport memberikan data dan rekomendasi terkini untuk
|
|
mendukung keputusan terinformasi dalam perbaikan jalan.
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="app" class="section">
|
|
<div class="container">
|
|
<h1 class="title app-title">Mobile Apps</h1>
|
|
<div class="app-content">
|
|
<div class="app-illustration">
|
|
<img src="assets/images/mobile_app.webp" alt="Mobile Apps" />
|
|
</div>
|
|
<ul class="app-features">
|
|
<li>
|
|
<img
|
|
src="assets/images/mobile_app_dashboard.webp"
|
|
width="72"
|
|
height="72"
|
|
alt="Dashboard"
|
|
/>
|
|
<div>
|
|
<h6>Dashboard</h6>
|
|
<p>
|
|
Dashboard merupakan fitur roadreport untuk menampilkan
|
|
kebutuhan umum bagi user seperti current map, faq, dan
|
|
foto-foto draft yang ada pada user tersebut.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<img
|
|
src="assets/images/mobile_app_laporan.webp"
|
|
width="72"
|
|
height="72"
|
|
alt="Laporan"
|
|
/>
|
|
<div>
|
|
<h6>Laporan</h6>
|
|
<p>
|
|
Laporan merupakan fitur utama dari roadreport yang dapat
|
|
melaporkan kondisi jalan kepada pihak yang berwenang untuk
|
|
memperbaiki jalan.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<img
|
|
src="assets/images/mobile_app_riwayat.webp"
|
|
width="72"
|
|
height="72"
|
|
alt="Riwayat"
|
|
/>
|
|
<div>
|
|
<h6>Riwayat</h6>
|
|
<p>
|
|
Riwayat merupakan fitur dari aplikasi roadreport agar
|
|
pengguna dapat memantau proses atau status dari laporan yang
|
|
telah dikirimkan kepada pihak berwenang.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- <section id="dashboard" class="section">
|
|
<div class="container">
|
|
<h1 class="title dashboard-title">Dashboard Monitoring</h1>
|
|
<div class="dashboard-silder">
|
|
<div id="slide-1" class="dashboard-item">
|
|
<div class="dashboard-item-text">
|
|
<img
|
|
src="assets/images/monitoring_dashboard_icon.webp"
|
|
width="56"
|
|
height="56"
|
|
alt=""
|
|
/>
|
|
<h6>Dashboard</h6>
|
|
<p>
|
|
Pada halaman dashboard, admin mendapatkan informasi dasar dari
|
|
laporan-laporan yang masuk seperti jumlah laporan dan map
|
|
interaktif untuk memantau jalan yang rusak.
|
|
</p>
|
|
</div>
|
|
<img
|
|
src="assets/images/monitoring_dashboard.webp"
|
|
width="100%"
|
|
height="100%"
|
|
alt="Dashboard Monitoring"
|
|
/>
|
|
</div>
|
|
<div id="slide-2" class="dashboard-item">
|
|
<div class="dashboard-item-text">
|
|
<img
|
|
src="assets/images/monitoring_laporan_icon.webp"
|
|
width="56"
|
|
height="56"
|
|
alt=""
|
|
/>
|
|
<h6>Daftar Laporan</h6>
|
|
<p>
|
|
Pada halaman list laporan, admin dapat memproses laporan yang
|
|
dikirimkan oleh user dari aplikasi mobile. Pada fitur ini juga
|
|
dapat berkolaborasi dengan pihak pengelola jalan untuk
|
|
memproses laporan.
|
|
</p>
|
|
</div>
|
|
<img
|
|
src="assets/images/monitoring_laporan.webp"
|
|
width="100%"
|
|
height="100%"
|
|
alt="Daftar Laporan"
|
|
/>
|
|
</div>
|
|
<div id="slide-3" class="dashboard-item">
|
|
<div class="dashboard-item-text">
|
|
<img
|
|
src="assets/images/monitoring_detail_icon.webp"
|
|
width="56"
|
|
height="56"
|
|
alt=""
|
|
/>
|
|
<h6>Detail Laporan</h6>
|
|
<p>
|
|
Pada halaman detail laporan, admin dapat melihat proses dari
|
|
laporan yang dikirimkan seingga dapat memantau status terkini
|
|
dari leporan yang dikrimkan.
|
|
</p>
|
|
</div>
|
|
<img
|
|
src="assets/images/monitoring_detail.webp"
|
|
width="100%"
|
|
height="100%"
|
|
alt="Detail Laporan"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-nav">
|
|
<button data-slide="slide-1"></button>
|
|
<button data-slide="slide-2"></button>
|
|
<button data-slide="slide-3"></button>
|
|
</div>
|
|
</div>
|
|
</section> -->
|
|
|
|
<section id="cta" class="section">
|
|
<div class="container">
|
|
<div class="cta-content">
|
|
<div class="cta-text">
|
|
<h1 class="title">
|
|
Ada jalan rusak? laporkan di <strong>RoadReport!</strong>
|
|
</h1>
|
|
<p>
|
|
Jangan biarkan jalan rusak mengganggu perjalanan Anda. Laporkan
|
|
dengan cepat melalui RoadReport, aplikasi andalan untuk
|
|
melaporkan kondisi jalan!
|
|
</p>
|
|
<a href="#">
|
|
<img src="assets/images/gplay.webp" alt="Google Play" />
|
|
Download Sekarang
|
|
</a>
|
|
</div>
|
|
<div class="cta-illustration">
|
|
<img
|
|
src="assets/images/nicolas-j-leclercq.webp"
|
|
width="100%"
|
|
height="100%"
|
|
alt=""
|
|
/>
|
|
<p>
|
|
Photo by
|
|
<a
|
|
href="https://unsplash.com/@nicolasjleclercq?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
|
|
>Nicolas J Leclercq</a
|
|
>
|
|
on
|
|
<a
|
|
href="https://unsplash.com/photos/construction-worker-on-street-WJg2bynUWOk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
|
|
>Unsplash</a
|
|
>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer class="section">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-about">
|
|
<a href="#">
|
|
<img
|
|
src="assets/images/logo.webp"
|
|
width="112"
|
|
height="38"
|
|
alt="Road Report"
|
|
/>
|
|
</a>
|
|
<p>
|
|
Aplikasi untuk melaporkan dan memantau proses perbaikan jalan
|
|
rusak.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<a href="https://facebook.com/" target="_blank">
|
|
<img
|
|
src="assets/images/facebook_icon.webp"
|
|
width="32"
|
|
height="32"
|
|
alt="Facebook"
|
|
/>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://instagram.com/" target="_blank">
|
|
<img
|
|
src="assets/images/instagram_icon.webp"
|
|
width="32"
|
|
height="32"
|
|
alt="Instagram"
|
|
/>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://x.com/" target="_blank">
|
|
<img
|
|
src="assets/images/twitter_icon.webp"
|
|
width="32"
|
|
height="32"
|
|
alt="Twitter"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-collab">
|
|
<h6>Collaborations</h6>
|
|
<ul>
|
|
<li>
|
|
<a
|
|
href="https://profileimage.studio/"
|
|
target="_blank"
|
|
title="Profiel Image Studio"
|
|
>
|
|
<img
|
|
src="assets/images/pis_logo.webp"
|
|
width="32"
|
|
height="48"
|
|
alt="PIS"
|
|
/>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://www.polinema.ac.id/"
|
|
target="_blank"
|
|
title="Polinema"
|
|
>
|
|
<img
|
|
src="assets/images/polinema_logo.webp"
|
|
width="48"
|
|
height="48"
|
|
alt="Polinema"
|
|
/>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://kedaireka.id/"
|
|
target="_blank"
|
|
title="kedaireka"
|
|
>
|
|
<img
|
|
src="assets/images/kedaireka_logo.webp"
|
|
width="180"
|
|
height="40"
|
|
alt="kedaireka"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-contact">
|
|
<h6>Meet Us</h6>
|
|
<p>contact@profileimage.studio</p>
|
|
<p>Perum. Bumi Tunggulwulung Indah G/8 Lowokwaru Malang 65143</p>
|
|
</div>
|
|
</div>
|
|
<p class="footer-copy">
|
|
© 2023 All rights reserved - Profile Image Studio
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<button class="button scroll-to-top">up</button>
|
|
|
|
<script
|
|
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""
|
|
></script>
|
|
<script type="text/javascript" src="assets/js/script.js"></script>
|
|
</body>
|
|
</html>
|