CashCreditCab Application
<div class="ccc ccc-skin-b">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=Rajdhani:wght@400;600;700&display=swap');
.ccc{font-family:Rajdhani,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.25;}
.ccc *{box-sizing:border-box;}
.ccc .wrap{max-width:950px;margin:18px auto;padding:18px;}
.ccc .card{
background:radial-gradient(1200px 600px at 20% 0%, rgba(0,255,255,.10), transparent 60%),
radial-gradient(900px 500px at 90% 20%, rgba(255,0,220,.10), transparent 55%),
#070914;
color:#eaf6ff;
border:1px solid rgba(255,255,255,.10);
border-radius:22px;
padding:18px;
box-shadow:0 0 0 1px rgba(0,255,255,.10), 0 18px 60px rgba(0,0,0,.55);
position:relative;
overflow:hidden;
}
.ccc .card:before{
content:"";
position:absolute; inset:-2px;
background:linear-gradient(120deg, rgba(0,255,255,.35), rgba(255,0,220,.28), rgba(0,255,255,.18));
filter:blur(18px);
opacity:.35;
z-index:0;
}
.ccc .card > *{position:relative; z-index:1;}
.ccc .header{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px;}
.ccc .title{
font-family:Orbitron,system-ui,sans-serif;
font-size:28px; font-weight:800; letter-spacing:1px;
text-shadow:0 0 18px rgba(0,255,255,.25);
}
.ccc .subtitle{opacity:.85;font-size:14px;}
.ccc .pill{
display:inline-flex; align-items:center; gap:8px;
padding:8px 12px; border-radius:999px;
background:rgba(0,255,255,.10);
border:1px solid rgba(0,255,255,.35);
color:#bffcff;
font-weight:800;
text-transform:uppercase;
letter-spacing:.8px;
box-shadow:0 0 18px rgba(0,255,255,.08);
}
.ccc .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:12px; margin-top:12px;}
.ccc label{display:block; font-size:13px; opacity:.9; margin:0 0 6px 2px; letter-spacing:.4px;}
.ccc input,.ccc select,.ccc textarea{
width:100%;
padding:12px 12px;
border-radius:14px;
background:rgba(255,255,255,.06);
color:#eaf6ff;
border:1px solid rgba(255,255,255,.14);
outline:none;
transition:transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}
.ccc input::placeholder{color:rgba(234,246,255,.55);}
.ccc input:focus,.ccc select:focus,.ccc textarea:focus{
border-color:rgba(0,255,255,.70);
box-shadow:0 0 0 4px rgba(0,255,255,.14), 0 0 22px rgba(0,255,255,.12);
transform:translateY(-1px);
}
.ccc .col-12{grid-column:span 12;}
.ccc .col-6{grid-column:span 6;}
.ccc .col-4{grid-column:span 4;}
.ccc .col-3{grid-column:span 3;}
.ccc .tiny{font-size:12px; opacity:.85; margin-top:6px; padding-left:2px;}
.ccc .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.ccc button{
border:0; cursor:pointer;
padding:12px 14px;
border-radius:14px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
background:linear-gradient(90deg, #00ffff, #ff00dc);
color:#070914;
box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 14px 34px rgba(0,0,0,.35);
}
.ccc button:active{transform:translateY(1px);}
.ccc button.secondary{
background:rgba(255,255,255,.08);
color:#eaf6ff;
border:1px solid rgba(255,255,255,.18);
box-shadow:none;
}
.ccc .warn,.ccc .ok{
display:none; margin-top:10px;
padding:10px 12px; border-radius:14px; font-size:13px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
}
.ccc .warn{border-color:rgba(255,120,120,.35); box-shadow:0 0 18px rgba(255,90,90,.10);}
.ccc .ok{border-color:rgba(0,255,170,.28); box-shadow:0 0 18px rgba(0,255,170,.10);}
</style>
<div class="wrap">
<div class="card">
<div class="header">
<div>
<div class="title">DRIVER RECORD</div>
<div class="subtitle">CCC • Neon Arcade Skin (B)</div>
</div>
<div class="pill">Driver</div>
</div>
<form id="cccDriverB" novalidate>
<div class="grid">
<div class="col-6">
<label>Driver Full Name</label>
<input name="driver_name" autocomplete="name" placeholder="e.g., Ted Myers" required>
</div>
<div class="col-6">
<label>Phone (auto-formats)</label>
<input name="driver_phone" inputmode="tel" placeholder="(607) 555-1212" required>
</div>
<div class="col-4">
<label>Email</label>
<input name="driver_email" type="email" autocomplete="email" placeholder="name@email.com">
</div>
<div class="col-4">
<label>Territory (City + State)</label>
<input name="territory" placeholder="e.g., Vestal, NY" required>
</div>
<div class="col-4">
<label>Status</label>
<select name="status" required>
<option value="">Select…</option>
<option>Active</option>
<option>Paused</option>
<option>Onboarding</option>
</select>
</div>
<div class="col-4">
<label>Car Year (min = current year − 6)</label>
<input name="car_year" inputmode="numeric" placeholder="e.g., 2020" required>
<div class="tiny" id="carYearHintB"></div>
</div>
<div class="col-4">
<label>Car Type</label>
<select name="car_type" required>
<option value="">Select…</option>
<option>Sedan</option>
<option>Wagon</option>
</select>
</div>
<div class="col-4">
<label>Passengers</label>
<select name="passengers" required>
<option value="">Select…</option>
<option value="3">3</option>
<option value="5">5</option>
</select>
</div>
<div class="col-6">
<label>Vehicle Make/Model</label>
<input name="vehicle" placeholder="e.g., Toyota Highlander">
</div>
<div class="col-6">
<label>Notes</label>
<input name="notes" placeholder="pets, luggage, special needs, etc.">
</div>
<div class="col-12 actions">
<button type="button" id="btnValidateDB">Validate</button>
<button type="reset" class="secondary">Reset</button>
<button type="button" class="secondary" id="btnPrintDB">Print</button>
</div>
<div class="col-12 warn" id="warnDB"></div>
<div class="col-12 ok" id="okDB"></div>
</div>
</form>
</div>
</div>
<script>
(function(){
const form = document.getElementById('cccDriverB');
const warn = document.getElementById('warnDB');
const ok = document.getElementById('okDB');
const phone = form.querySelector('input[name="driver_phone"]');
const carYear = form.querySelector('input[name="car_year"]');
const carYearHint = document.getElementById('carYearHintB');
const minYear = (new Date()).getFullYear() - 6;
carYearHint.textContent = "Minimum allowed year: " + minYear;
function onlyDigits(s){ return (s||"").replace(/\D/g,""); }
function formatUSPhone(v){
const d = onlyDigits(v).slice(0,10);
if(d.length<=3) return d ? "(" + d : "";
if(d.length<=6) return "(" + d.slice(0,3) + ") " + d.slice(3);
return "(" + d.slice(0,3) + ") " + d.slice(3,6) + "-" + d.slice(6);
}
phone.addEventListener('input', ()=>{ phone.value = formatUSPhone(phone.value); });
function showWarn(msg){ warn.style.display="block"; ok.style.display="none"; warn.textContent = msg; }
function showOk(msg){ ok.style.display="block"; warn.style.display="none"; ok.textContent = msg; }
function validate(){
const missing = [];
[...form.querySelectorAll('[required]')].forEach(el=>{
if(!String(el.value||"").trim()) missing.push(el.name);
});
const y = parseInt(onlyDigits(carYear.value),10);
if(!isNaN(y) && y < minYear) return showWarn("Car Year is too old. Must be " + minYear + " or newer.");
if(missing.length) return showWarn("Missing required fields: " + missing.join(", "));
if(onlyDigits(phone.value).length !== 10) return showWarn("Phone number must have 10 digits.");
showOk("Mock validation passed. Ready for wiring.");
}
document.getElementById('btnValidateDB').addEventListener('click', validate);
document.getElementById('btnPrintDB').addEventListener('click', ()=>window.print());
})();
</script>
</div>
System standing by.