diff --git a/FOLDER/Permintaan Layanan/page/permintaan_layanan.html b/FOLDER/Permintaan Layanan/page/permintaan_layanan.html index a8072d3..851e825 100644 --- a/FOLDER/Permintaan Layanan/page/permintaan_layanan.html +++ b/FOLDER/Permintaan Layanan/page/permintaan_layanan.html @@ -19,7 +19,7 @@ } .container { - max-width: 1000px; + max-width: 1200px; margin: 0 auto; background: white; padding: 20px; @@ -27,18 +27,69 @@ box-shadow: 0 0 10px rgba(0,0,0,0.1); } - .form-header { - text-align: center; + .wizard-steps { + display: flex; + justify-content: space-between; margin-bottom: 30px; + padding: 20px; + background: #f8f9fa; + border-radius: 8px; + } + + .step { + text-align: center; + flex: 1; + position: relative; + } + + .step.active { + color: #2196F3; + font-weight: bold; + } + + .step:not(:last-child):after { + content: ''; + position: absolute; + top: 50%; + right: 0; + width: 100%; + height: 2px; + background: #ddd; + z-index: 1; + } + + .step-number { + width: 30px; + height: 30px; + background: #fff; + border: 2px solid #ddd; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 10px; + position: relative; + z-index: 2; + } + + .step.active .step-number { + background: #2196F3; + border-color: #2196F3; + color: white; } .form-section { + display: none; margin-bottom: 30px; padding: 20px; border: 1px solid #ddd; border-radius: 4px; } + .form-section.active { + display: block; + } + .form-group { margin-bottom: 15px; } @@ -61,22 +112,48 @@ font-size: 16px; } + .template-selection { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 15px; + margin-bottom: 20px; + } + + .template-card { + border: 1px solid #ddd; + border-radius: 4px; + padding: 15px; + cursor: pointer; + transition: all 0.3s ease; + } + + .template-card:hover { + border-color: #2196F3; + background: #f8f9fa; + } + + .template-card.selected { + border-color: #2196F3; + background: #e3f2fd; + } + .parameter-list { - margin-top: 20px; + max-height: 400px; + overflow-y: auto; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; } .parameter-item { display: flex; align-items: center; padding: 10px; - border: 1px solid #ddd; - margin-bottom: 10px; - border-radius: 4px; + border-bottom: 1px solid #eee; } - .parameter-item label { - margin: 0; - margin-left: 10px; + .parameter-item:last-child { + border-bottom: none; } .price-summary { @@ -86,41 +163,76 @@ margin-top: 20px; } + .navigation-buttons { + display: flex; + justify-content: space-between; + margin-top: 20px; + padding: 20px; + background: #f8f9fa; + border-radius: 4px; + } + .btn { - background-color: #4CAF50; - color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; + transition: all 0.3s ease; } - .btn:hover { - background-color: #45a049; + .btn-primary { + background: #2196F3; + color: white; } .btn-secondary { - background-color: #6c757d; + background: #6c757d; + color: white; } - .actions { - display: flex; - justify-content: space-between; - margin-top: 20px; + .btn:hover { + opacity: 0.9; + } + + .alert { + padding: 15px; + margin-bottom: 20px; + border-radius: 4px; + } + + .alert-info { + background: #e3f2fd; + border: 1px solid #2196F3; + color: #0d47a1; }
Silakan lengkapi informasi di bawah ini
+