From e4a91420f9f374e063dc46c4415ebb61ead1162a Mon Sep 17 00:00:00 2001 From: Citra Pangestu Date: Tue, 5 May 2026 19:37:09 +0700 Subject: [PATCH] Update menu layanan dan form ulasan pelanggan --- Controllers/HomeController.cs | 6 + Views/FormReview.cshtml | 239 ++++++++++++++++++++++++++++ Views/Home/Index.cshtml | 22 +-- Views/Layanan/Layanan.cshtml | 8 +- Views/Shared/Section/_Header.cshtml | 174 +++++++++++--------- wwwroot/css/FormReview.css | 107 +++++++++++++ wwwroot/css/Header.css | 13 +- wwwroot/css/Video.css | 21 +-- wwwroot/json/Layanan/air.json | 2 +- wwwroot/json/Layanan/pcu.json | 4 +- wwwroot/json/Layanan/udara.json | 2 +- wwwroot/json/video.json | 10 +- 12 files changed, 482 insertions(+), 126 deletions(-) create mode 100644 Views/FormReview.cshtml create mode 100644 wwwroot/css/FormReview.css diff --git a/Controllers/HomeController.cs b/Controllers/HomeController.cs index 5a595ff..1b1c2c1 100644 --- a/Controllers/HomeController.cs +++ b/Controllers/HomeController.cs @@ -48,6 +48,12 @@ namespace WebApplication2.Controllers return View("~/Views/TentangKami.cshtml"); } + [HttpGet("/ulasan")] + public IActionResult Ulasan() + { + return View("~/Views/FormReview.cshtml"); + } + public IActionResult Privacy() { return View(); diff --git a/Views/FormReview.cshtml b/Views/FormReview.cshtml new file mode 100644 index 0000000..bff9652 --- /dev/null +++ b/Views/FormReview.cshtml @@ -0,0 +1,239 @@ +@{ + ViewData["Title"] = "Ulasan Pelanggan"; + + var questions = new[]{ + new { key = "persyaratan", label = "Bagaimana pendapat Saudara tentang kesesuaian persyaratan pelayanan dengan jenis pelayanannya?" }, + new { key = "prosedur", label = "Bagaimana pemahaman Saudara tentang kemudahan prosedur pelayanan di Laboratorium Lingkungan Hidup Daerah DKI Jakarta?" }, + new { key = "kerahasiaan", label = "Bagaimana pendapat Saudara mengenai jaminan kerahasiaan contoh uji (sampel) di LLHD?" }, + new { key = "kecepatan", label = "Bagaimana pendapat Saudara tentang kecepatan pelayanan di LLHD?" }, + new { key = "ketepatan_waktu", label = "Bagaimana pendapat Saudara tentang ketepatan waktu penyelesaian pengujian laboratorium terhadap jadwal waktu pelayanan yang telah ditetapkan?" }, + new { key = "biaya", label = "Bagaimana pendapat Saudara tentang kesesuaian biaya/tarif dalam pelayanan?" }, + new { key = "produk", label = "Bagaimana pendapat Saudara tentang kesesuaian produk pelayanan antara yang tercantum dalam standar pelayanan dengan hasil yang diberikan?" }, + new { key = "kompetensi", label = "Bagaimana pendapat Saudara tentang kompetensi/kemampuan petugas dalam pelayanan?" }, + new { key = "komunikasi", label = "Bagaimana pendapat Saudara mengenai kemampuan komunikasi petugas dalam memberikan informasi ke pelanggan?" }, + new { key = "sikap", label = "Bagaimana pendapat Saudara perilaku petugas dalam pelayanan terkait kesopanan dan keramahan?" }, + new { key = "penanganan_keluhan", label = "Bagaimana pendapat Saudara tentang respon/bantuan petugas dalam menangani keluhan/pengaduan?" }, + new { key = "fasilitas", label = "Bagaimana pendapat Saudara tentang kenyamanan fasilitas pelayanan di LLHD?" } + }; +} + +@section Style { + +} + +
+
+
+ +

Survei Kepuasan Pelanggan

+

Mohon isi form berikut untuk meningkatkan kualitas pelayanan kami

+ +
+ +
+ + + Wajib diisi +
+ +
+ + + Wajib diisi +
+ +
+ + + Wajib diisi +
+ +
+ + + + + + + Wajib diisi +
+ +
+ + @for (int i = 0; i < questions.Length; i++) + { +
+ + + +
+ Tidak Sesuai + +
+ @for (int j = 1; j <= 4; j++) + { + + } +
+ + Sangat Sesuai +
+ + Wajib diisi +
+ } + +
+ + + Wajib diisi +
+ +
+ + + Wajib diisi +
+ + + +
+ +
+ Ulasan berhasil dikirim. Terima kasih atas partisipasi Anda! +
+ +
+
+
+ + \ No newline at end of file diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml index 660b076..7f95c75 100644 --- a/Views/Home/Index.cshtml +++ b/Views/Home/Index.cshtml @@ -58,6 +58,9 @@

Senin - Jumat, 08:00 - 16:00

+ + WA DASALEWA (text only) → +
@@ -67,15 +70,16 @@
-
+
- + +
-

Layanan PCU Air

+

Pengambilan Contoh Uji (PCU) Air

@@ -99,13 +103,13 @@
-
+
- +

Layanan Pengujian Air

@@ -132,13 +136,13 @@
-
+
- +

Layanan Pengujian Udara

@@ -770,9 +774,9 @@
- + - Tambah Review + Tambah Ulasan
diff --git a/Views/Layanan/Layanan.cshtml b/Views/Layanan/Layanan.cshtml index e371611..62ad12c 100644 --- a/Views/Layanan/Layanan.cshtml +++ b/Views/Layanan/Layanan.cshtml @@ -23,9 +23,9 @@
-
PCU Air
+
Pengambilan Contoh Uji (PCU) Air
- +

Beberapa pengujian laboratorium yang dapat dilakukan pada pengujian air yaitu: @@ -50,7 +50,7 @@

Pengujian Air
- +

Beberapa pengujian laboratorium yang dapat dilakukan pada pengujian air yaitu: @@ -77,7 +77,7 @@

Pengujian Udara
- +

Beberapa pengujian laboratorium yang dapat dilakukan pada pengujian udara yaitu: diff --git a/Views/Shared/Section/_Header.cshtml b/Views/Shared/Section/_Header.cshtml index 530c06e..b93a6be 100644 --- a/Views/Shared/Section/_Header.cshtml +++ b/Views/Shared/Section/_Header.cshtml @@ -1,4 +1,10 @@ -

+ +@{ + var currentController = ViewContext.RouteData.Values["Controller"]?.ToString(); + var currentAction = ViewContext.RouteData.Values["Action"]?.ToString(); +} + +
\ No newline at end of file diff --git a/wwwroot/css/FormReview.css b/wwwroot/css/FormReview.css new file mode 100644 index 0000000..9f93efb --- /dev/null +++ b/wwwroot/css/FormReview.css @@ -0,0 +1,107 @@ +body { + background: #f0f2f5; +} +.survey-scale { + display: grid; + grid-template-columns: 130px 1fr 130px; + align-items: center; + gap: 10px; + margin-top: 10px; +} + +.scale-label { + font-size: 14px; + color: #555; +} + +.scale-options { + display: flex; + justify-content: space-between; + text-align: center; +} + +.scale-item { + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; +} + + .scale-item input { + display: none; + } + + .scale-item .number { + font-size: 14px; + margin-bottom: 5px; + } + + .scale-item .circle { + width: 22px; + height: 22px; + border-radius: 50%; + border: 2px solid #999; + transition: 0.2s; + } + + .scale-item input:checked + .circle { + border-color: #0d6efd; + background: radial-gradient(#0d6efd 40%, transparent 45%); + } + + .scale-item:hover .circle { + border-color: #0d6efd; + } + + +.form-card { + max-width: 800px; + border-radius: 16px; +} + +.question-card { + border-radius: 12px; + border: 1px solid #eee; + background: #fafafa; + transition: 0.2s; +} + + .question-card:hover { + background: #f5f9ff; + border-color: #dbeafe; + } + +@media (max-width: 576px) { + + .survey-scale { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 8px; + } + + .scale-label { + display: flex; + justify-content: space-between; + font-size: 13px; + } + + .scale-options { + display: flex; + justify-content: space-between; + gap: 6px; + } + + .scale-item { + flex: 1; + } + + .scale-item .circle { + width: 28px; + height: 28px; + } + + .scale-item .number { + font-size: 12px; + } +} \ No newline at end of file diff --git a/wwwroot/css/Header.css b/wwwroot/css/Header.css index 878f7ad..47ce711 100644 --- a/wwwroot/css/Header.css +++ b/wwwroot/css/Header.css @@ -1,3 +1,4 @@ + .nav-underline { position: relative; display: inline-block; @@ -7,14 +8,15 @@ content: ""; position: absolute; left: 0; - bottom: 0; + bottom: -5px; width: 0%; height: 2px; - background-color: #0d6efd; + background: #0d6efd; transition: width 0.3s ease; } - .nav-underline:hover::after { + .nav-underline:hover::after, + .nav-underline.active::after { width: 100%; } @@ -23,7 +25,7 @@ color: #374151; border: none; background: transparent; - transition: 0.2s; + transition: all 0.2s ease; } .search-btn:hover { @@ -57,9 +59,10 @@ padding: 14px 20px; font-size: 16px; border: 1px solid #e5e7eb; + transition: 0.2s; } .search-popup-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,0.15); - } \ No newline at end of file + } diff --git a/wwwroot/css/Video.css b/wwwroot/css/Video.css index 6b81b34..533289d 100644 --- a/wwwroot/css/Video.css +++ b/wwwroot/css/Video.css @@ -1,6 +1,4 @@ -/* ========================= - VIDEO CARD -========================= */ + .video-card { position: relative; cursor: pointer; @@ -25,10 +23,6 @@ transform: scale(1.05); } - -/* ========================= - OVERLAY (JUDUL) -========================= */ .video-overlay { position: absolute; inset: 0; @@ -52,10 +46,6 @@ margin: 0; } - -/* ========================= - PLAY BUTTON -========================= */ .play-btn { position: absolute; top: 50%; @@ -69,9 +59,6 @@ } -/* ========================= - MODAL VIDEO -========================= */ .video-modal { display: none; position: fixed; @@ -95,9 +82,6 @@ } -/* ========================= - CLOSE BUTTON -========================= */ .close-btn { position: absolute; top: -35px; @@ -108,9 +92,6 @@ } -/* ========================= - YOUTUBE EMBED (OPTIONAL) -========================= */ .youtube-wrapper { position: relative; width: 100%; diff --git a/wwwroot/json/Layanan/air.json b/wwwroot/json/Layanan/air.json index 435fbb7..495d44a 100644 --- a/wwwroot/json/Layanan/air.json +++ b/wwwroot/json/Layanan/air.json @@ -8,7 +8,7 @@ "Air Tanah, dan", "Air Perpipaan." ], - "gambar": "assets/image/foto/ilustrasi pengujian air.png", + "gambar": "assets/image/foto/2.jpeg", "table1": { "columns": [ "No", "Kode", "Output Hasil Uji", "Jenis Baku Mutu", "Tipe Pengujian", "Total Parameter", "Total Harga", "Aksi" ], diff --git a/wwwroot/json/Layanan/pcu.json b/wwwroot/json/Layanan/pcu.json index edde6a5..801f4c4 100644 --- a/wwwroot/json/Layanan/pcu.json +++ b/wwwroot/json/Layanan/pcu.json @@ -1,8 +1,8 @@ { - "judul": "PCU Air", + "judul": "Pengambilan Contoh Uji (PCU) Air", "deskripsi-singkat": "Kegiatan laboratorium untuk memperoleh sampel air secara representatif dari sumber tertentu, seperti air permukaan, air tanah, air limbah, maupun air minum sesuai dengan standar dan prosedur yang berlaku oleh personel yang kompeten. Berdasarkan Permen LH No. 23 Tahun 2020, pengambilan contoh uji wajib dilakukan oleh laboratorium lingkungan sebagai bagian integral dari proses pengujian yang menentukan validitas, akurasi, ketertelusuran, ketidakberpihakan, serta menjamin keabsahan hasil uji laboratorium. Pengambilan contoh uji air di LLHD merupakan salah satu layanan yang telah terakreditasi oleh KAN. Beberapa pengujian laboratorium yang dapat dilakukan pada PCU air yaitu:", "deskripsi": [ "Air Limbah","Air Tanah, maupun ","Air Minum."], - "gambar": "assets/image/foto/ilustrasi pengujian air.png", + "gambar": "assets/image/foto/1.jpeg", "table1": { "columns": [ "No", "Kode", "Output Hasil Uji", "Jenis Baku Mutu", "Tipe Pengujian", "Total Parameter", "Total Harga", "Aksi" ], diff --git a/wwwroot/json/Layanan/udara.json b/wwwroot/json/Layanan/udara.json index 3b14195..8ebd6a1 100644 --- a/wwwroot/json/Layanan/udara.json +++ b/wwwroot/json/Layanan/udara.json @@ -9,7 +9,7 @@ "Emisi Bergerak (kendaraan)", "SPKU (stasiun pemantau kualitas udara)" ], - "gambar": "assets/image/foto/ilustrasi pengujian udara.png", + "gambar": "assets/image/foto/3.jpeg", "table1": { "columns": [ "Kode", "Output", "Jenis", "Tipe", "Total Parameter", "Total Harga", "Aksi" ], diff --git a/wwwroot/json/video.json b/wwwroot/json/video.json index 98a8b7f..f4bea89 100644 --- a/wwwroot/json/video.json +++ b/wwwroot/json/video.json @@ -1,14 +1,14 @@ [ { "id": 1, - "youtube": "4hCwevKy3yU" - }, - { - "id": 2, "youtube": "PiZnr9hOOgs" }, + { + "id": 2, + "youtube": "_YnE4zWMEnM" + }, { "id": 3, - "youtube": "i1gc4GPZINY" + "youtube": "UR1ue36yhM4" } ] \ No newline at end of file