288 lines
8.0 KiB
HTML
288 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RV License Dialog</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', sans-serif;
|
|
user-select: none;
|
|
}
|
|
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
}
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 40;
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
|
|
.overlay.active {
|
|
display: flex;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.dialog {
|
|
background-color: #0D0F11;
|
|
border: 1.5px solid #121416;
|
|
border-radius: 6px;
|
|
width: 380px;
|
|
overflow: hidden;
|
|
animation: slideUp 0.3s ease-out;
|
|
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.dialog-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 18px 20px 14px;
|
|
border-bottom: 1px solid #1a1c1e;
|
|
position: relative;
|
|
}
|
|
|
|
.dialog-header .icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: rgba(255, 26, 53, 0.12);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dialog-header .icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: #ff1a35;
|
|
}
|
|
|
|
.dialog-header h2 {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
letter-spacing: -0.3px;
|
|
}
|
|
|
|
.dialog-header .close-x {
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 28px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.dialog-header .close-x:hover {
|
|
background: #1f2225;
|
|
}
|
|
|
|
.dialog-header .close-x svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: #898989;
|
|
transition: stroke 0.2s;
|
|
}
|
|
|
|
.dialog-header .close-x:hover svg {
|
|
stroke: #ffffff;
|
|
}
|
|
|
|
.dialog-body {
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.dialog-body p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #898989;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.dialog-body .highlight {
|
|
display: block;
|
|
margin: 12px 0;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #ff1a35;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.dialog-body .sub-text {
|
|
font-size: 13px;
|
|
color: #898989;
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 4px 20px 20px;
|
|
}
|
|
|
|
.btn {
|
|
flex: 1;
|
|
height: 42px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-family: 'Segoe UI', sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #222528;
|
|
color: #e0e0e0;
|
|
border: 1.5px solid #3a3d40;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #33363a;
|
|
color: #ffffff;
|
|
border-color: #4a4d50;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #ff1a35;
|
|
color: #ffffff;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.btn-primary svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: #ffffff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="overlay" id="licenseDialog">
|
|
<div class="dialog">
|
|
<div class="dialog-header">
|
|
<div class="icon">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L1 21h22L12 2zm0 4l7.53 13H4.47L12 6zm-1 4v4h2v-4h-2zm0 6v2h2v-2h-2z"/>
|
|
</svg>
|
|
</div>
|
|
<h2>Permis Necesar</h2>
|
|
<div class="icon">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L1 21h22L12 2zm0 4l7.53 13H4.47L12 6zm-1 4v4h2v-4h-2zm0 6v2h2v-2h-2z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="close-x" id="btnCloseX">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 6L6 18M6 6l12 12" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dialog-body">
|
|
<p>Acest job necesită conducerea unui vehicul.</p>
|
|
<span class="highlight">Nu ai permis de conducere.</span>
|
|
<p class="sub-text">Mergi la Școala de Șoferi pentru a obține unul.</p>
|
|
</div>
|
|
|
|
<div class="dialog-footer">
|
|
<button class="btn btn-secondary" id="btnClose">Închide</button>
|
|
<button class="btn btn-primary" id="btnRoute">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
|
</svg>
|
|
Rută Școala de Șoferi
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// NUI Communication
|
|
window.addEventListener("message", function(event) {
|
|
if (event.data.action === "show") {
|
|
document.getElementById("licenseDialog").classList.add("active");
|
|
}
|
|
});
|
|
|
|
function closeDialog() {
|
|
document.getElementById("licenseDialog").classList.remove("active");
|
|
fetch("https://rv-license-dialog/close", {
|
|
method: "POST",
|
|
body: JSON.stringify({})
|
|
});
|
|
}
|
|
|
|
function routeToSchool() {
|
|
document.getElementById("licenseDialog").classList.remove("active");
|
|
fetch("https://rv-license-dialog/route", {
|
|
method: "POST",
|
|
body: JSON.stringify({})
|
|
});
|
|
}
|
|
|
|
document.getElementById("btnClose").addEventListener("click", closeDialog);
|
|
document.getElementById("btnCloseX").addEventListener("click", closeDialog);
|
|
document.getElementById("btnRoute").addEventListener("click", routeToSchool);
|
|
|
|
// Close on Escape key
|
|
document.addEventListener("keydown", function(e) {
|
|
if (e.key === "Escape") {
|
|
closeDialog();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|