140 lines
8.4 KiB
HTML
140 lines
8.4 KiB
HTML
<h2>Full Form Mockup — New Purchase Request</h2>
|
||
<p class="subtitle">Showing the improved header section with all dropdowns and the urgency popup. Click "Urgency" to see the popup demo.</p>
|
||
|
||
<div class="mockup" style="max-width:900px;margin:0 auto;">
|
||
<div class="mockup-header">Purchase Request Form — Header Section</div>
|
||
<div class="mockup-body" style="background:#f8fafc;padding:20px;">
|
||
|
||
<!-- Form card -->
|
||
<div style="background:#fff;border-radius:10px;border:1px solid #e2e8f0;padding:20px;margin-bottom:16px;">
|
||
<div style="font-size:13px;font-weight:600;color:#374151;margin-bottom:14px;">Project / Department Details</div>
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
|
||
|
||
<!-- Date -->
|
||
<div>
|
||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Date <span style="color:#ef4444">*</span></div>
|
||
<div style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#374151;background:#fff;">2026-05-24</div>
|
||
</div>
|
||
|
||
<!-- Project Name — dropdown -->
|
||
<div>
|
||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Project / Site Name <span style="color:#ef4444">*</span></div>
|
||
<div style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#374151;background:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer;">
|
||
<span style="color:#9ca3af;">Select project…</span>
|
||
<span style="color:#9ca3af;font-size:10px;">▼</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Requested By -->
|
||
<div>
|
||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Requested By <span style="color:#ef4444">*</span></div>
|
||
<div style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#374151;background:#fff;">Ahmed Al-Mansoori</div>
|
||
</div>
|
||
|
||
<!-- Required Date / Urgency — popup trigger -->
|
||
<div style="position:relative;">
|
||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Required Date / Urgency</div>
|
||
<div id="urgency-trigger" onclick="toggleUrgencyPopup()" style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#9ca3af;background:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer;">
|
||
<span id="urgency-display">Select urgency…</span>
|
||
<span style="font-size:14px;">🎯</span>
|
||
</div>
|
||
|
||
<!-- Urgency popup -->
|
||
<div id="urgency-popup" style="display:none;position:absolute;top:100%;left:0;z-index:50;margin-top:4px;background:#fff;border-radius:12px;border:1.5px solid #e2e8f0;box-shadow:0 8px 24px rgba(0,0,0,0.12);padding:14px;width:280px;">
|
||
<div style="font-size:11px;font-weight:600;color:#94a3b8;margin-bottom:10px;text-transform:uppercase;letter-spacing:0.05em;">How soon is this needed?</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;" id="urgency-cards">
|
||
<div onclick="pickUrgency('Critical','🚨','#fee2e2','#dc2626')" style="border:1.5px solid #e2e8f0;border-radius:10px;padding:10px;text-align:center;cursor:pointer;transition:all 0.15s;" class="urg-card">
|
||
<div style="font-size:20px;margin-bottom:2px;">🚨</div>
|
||
<div style="font-size:11px;font-weight:700;color:#dc2626;">Critical</div>
|
||
<div style="font-size:10px;color:#94a3b8;">Today</div>
|
||
</div>
|
||
<div onclick="pickUrgency('Urgent','⚡','#ffedd5','#ea580c')" style="border:1.5px solid #e2e8f0;border-radius:10px;padding:10px;text-align:center;cursor:pointer;" class="urg-card">
|
||
<div style="font-size:20px;margin-bottom:2px;">⚡</div>
|
||
<div style="font-size:11px;font-weight:700;color:#ea580c;">Urgent</div>
|
||
<div style="font-size:10px;color:#94a3b8;">1–3 days</div>
|
||
</div>
|
||
<div onclick="pickUrgency('Normal','📋','#fef9c3','#ca8a04')" style="border:1.5px solid #e2e8f0;border-radius:10px;padding:10px;text-align:center;cursor:pointer;" class="urg-card">
|
||
<div style="font-size:20px;margin-bottom:2px;">📋</div>
|
||
<div style="font-size:11px;font-weight:700;color:#ca8a04;">Normal</div>
|
||
<div style="font-size:10px;color:#94a3b8;">This week</div>
|
||
</div>
|
||
<div onclick="showDatePicker()" style="border:1.5px solid #e2e8f0;border-radius:10px;padding:10px;text-align:center;cursor:pointer;" class="urg-card" id="planned-card">
|
||
<div style="font-size:20px;margin-bottom:2px;">🗓️</div>
|
||
<div style="font-size:11px;font-weight:700;color:#16a34a;">Planned</div>
|
||
<div style="font-size:10px;color:#94a3b8;">Pick date</div>
|
||
</div>
|
||
</div>
|
||
<!-- date picker section, hidden until Planned clicked -->
|
||
<div id="date-section" style="display:none;margin-top:10px;border-top:1px solid #f1f5f9;padding-top:10px;">
|
||
<div style="font-size:11px;color:#6b7280;margin-bottom:4px;">Specify the required date:</div>
|
||
<input type="date" id="planned-date" style="width:100%;border:1.5px solid #3b82f6;border-radius:6px;padding:6px 10px;font-size:12px;" onchange="confirmDate(this.value)">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Location / Site — dropdown -->
|
||
<div>
|
||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Location / Site</div>
|
||
<div style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#374151;background:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer;">
|
||
<span style="color:#9ca3af;">Select location…</span>
|
||
<span style="color:#9ca3af;font-size:10px;">▼</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Department -->
|
||
<div>
|
||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Department</div>
|
||
<div style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#9ca3af;background:#fff;">e.g. Operations, Production</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings sidebar hint -->
|
||
<div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px;font-size:11px;color:#1d4ed8;">
|
||
⚙️ <strong>New Settings section in sidebar</strong> — Admins can manage <em>Locations</em>, <em>Projects</em>, and <em>Urgency Levels</em> from here. Each has a simple list with Add / Edit / Delete.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function toggleUrgencyPopup() {
|
||
var p = document.getElementById('urgency-popup');
|
||
p.style.display = p.style.display === 'none' ? 'block' : 'none';
|
||
}
|
||
|
||
function pickUrgency(label, emoji, bg, color) {
|
||
document.getElementById('urgency-display').innerHTML = '<span style="background:' + bg + ';color:' + color + ';border-radius:20px;padding:2px 10px;font-weight:600;">' + emoji + ' ' + label + '</span>';
|
||
document.getElementById('urgency-popup').style.display = 'none';
|
||
document.getElementById('date-section').style.display = 'none';
|
||
// reset planned card
|
||
document.getElementById('planned-card').style.borderColor = '#e2e8f0';
|
||
document.getElementById('planned-card').style.background = '#fff';
|
||
}
|
||
|
||
function showDatePicker() {
|
||
var section = document.getElementById('date-section');
|
||
section.style.display = section.style.display === 'none' ? 'block' : 'none';
|
||
document.getElementById('planned-card').style.borderColor = '#22c55e';
|
||
document.getElementById('planned-card').style.background = '#f0fdf4';
|
||
}
|
||
|
||
function confirmDate(val) {
|
||
if (!val) return;
|
||
var d = new Date(val);
|
||
var formatted = d.toLocaleDateString('en-GB', {day:'2-digit',month:'short',year:'numeric'});
|
||
document.getElementById('urgency-display').innerHTML = '<span style="background:#f0fdf4;color:#16a34a;border-radius:20px;padding:2px 10px;font-weight:600;">🗓️ ' + formatted + '</span>';
|
||
setTimeout(function(){ document.getElementById('urgency-popup').style.display = 'none'; }, 300);
|
||
}
|
||
|
||
// close on outside click
|
||
document.addEventListener('click', function(e) {
|
||
var popup = document.getElementById('urgency-popup');
|
||
var trigger = document.getElementById('urgency-trigger');
|
||
if (popup && !popup.contains(e.target) && !trigger.contains(e.target)) {
|
||
popup.style.display = 'none';
|
||
}
|
||
});
|
||
</script>
|