<!DOCTYPE html>
<html lang=”it”>
<head>
<meta charset=”UTF-8″ />
<title>Preview Icone Nautica</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
background: #0b0b10;
color: #fff;
padding: 24px;
}
h1 {
margin-bottom: 16px;
font-size: 20px;
}
.grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.icon-card {
width: 100px;
padding: 12px;
border-radius: 16px;
background: rgba(255,255,255,0.04);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.icon-card svg {
width: 32px;
height: 32px;
}
.label {
font-size: 12px;
opacity: 0.8;
text-align: center;
}
</style>
</head>
<body>
<h1>Preview Icone Nautica</h1>
<div class=”grid”>
<!– Bussola –>
<div class=”icon-card”>
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″
fill=”none” stroke=”currentColor” stroke-width=”1.8″
stroke-linecap=”round” stroke-linejoin=”round”>
<circle cx=”12″ cy=”12″ r=”8″ />
<path d=”M12 7.5l2.4 4.8-4.8 2.4L12 7.5z” />
<circle cx=”12″ cy=”12″ r=”0.7″ />
</svg>
<div class=”label”>Bussola</div>
</div>
<!– Faro –>
<div class=”icon-card”>
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″
fill=”none” stroke=”currentColor” stroke-width=”1.8″
stroke-linecap=”round” stroke-linejoin=”round”>
<path d=”M6 20h12l-2-3H8l-2 3z” />
<path d=”M10 9h4l1 8h-6l1-8z” />
<rect x=”9.5″ y=”6.5″ width=”5″ height=”2.5″ rx=”1″ />
<path d=”M9 6h6″ />
<path d=”M11 11.5h2″ />
<path d=”M11 13.5h2″ />
<path d=”M16.5 7.5h2.5″ />
<path d=”M4.5 7.5H7″ />
</svg>
<div class=”label”>Faro</div>
</div>
<!– Barca –>
<div class=”icon-card”>
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″
fill=”none” stroke=”currentColor” stroke-width=”1.8″
stroke-linecap=”round” stroke-linejoin=”round”>
<path d=”M4 14.5l2 4h12l2-4-8 1.5-8-1.5z” />
<path d=”M9 10h4.5a1 1 0 0 1 1 1v2.5H9V10z” />
<path d=”M6 13l1-2.5″ />
<path d=”M6 19.5c0.6 0.5 1.3 0.5 1.9 0 0.6-0.5 1.3-0.5 1.9 0″ />
<path d=”M12.2 19.5c0.6 0.5 1.3 0.5 1.9 0 0.6-0.5 1.3-0.5 1.9 0″ />
</svg>
<div class=”label”>Barca</div>
</div>
<!– VHF fisso –>
<div class=”icon-card”>
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″
fill=”none” stroke=”currentColor” stroke-width=”1.8″
stroke-linecap=”round” stroke-linejoin=”round”>
<rect x=”5″ y=”9″ width=”14″ height=”9″ rx=”2″ />
<rect x=”7″ y=”11″ width=”5″ height=”3″ rx=”0.5″ />
<path d=”M13.5 11.5h3.5″ />
<path d=”M13.5 13.5h3.5″ />
<path d=”M9 9V5″ />
<path d=”M9 5l2-2″ />
<path d=”M17.5 7.5c0.8 0.6 1.3 1.4 1.5 2.4″ />
<path d=”M15.5 6.5c1.2 0.6 2.1 1.7 2.5 3″ />
</svg>
<div class=”label”>VHF fisso</div>
</div>
<!– Turno –>
<div class=”icon-card”>
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″
fill=”none” stroke=”currentColor” stroke-width=”1.8″
stroke-linecap=”round” stroke-linejoin=”round”>
<circle cx=”12″ cy=”12″ r=”8″ />
<path d=”M12 8v4l2 2″ />
<path d=”M12 4.5v1.2″ />
<path d=”M12 18.3v1.2″ />
<path d=”M4.5 12h1.2″ />
<path d=”M18.3 12h1.2″ />
</svg>
<div class=”label”>Turno</div>
</div>
<!– Profilo –>
<div class=”icon-card”>
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″
fill=”none” stroke=”currentColor” stroke-width=”1.8″
stroke-linecap=”round” stroke-linejoin=”round”>
<circle cx=”12″ cy=”9″ r=”3″ />
<path d=”M6.5 18.5c0.8-2.3 2.7-3.5 5.5-3.5s4.7 1.2 5.5 3.5″ />
<path d=”M5.5 19.5h13″ />
</svg>
<div class=”label”>Profilo</div>
</div>
</div>
</body>
</html>