/* این بخش فقط استایل هست */
#ring-size-widget {
font-family: "IRANSans", sans-serif;
max-width: 400px;
margin: 0 auto;
--bg: #ffffff;
--border: #e5e5e5;
--accent: #3b82f6;
--accent-strong: #1e3a8a;
}
#ring-size-widget .card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
#ring-size-widget .header {
font-size: 20px;
font-weight: 700;
margin-bottom: 18px;
text-align: center;
color: var(--accent-strong);
}
#ring-size-widget .control {
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#ring-size-widget label {
font-size: 14px;
flex: 1;
}
#ring-size-widget input[type=range] {
width: 100%;
accent-color: var(--accent);
}
#ring-size-widget input[type=number] {
width: 90px;
padding: 6px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 14px;
}
#ring-size-widget .result {
background: #f9fafb;
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px;
margin-top: 16px;
font-size: 15px;
text-align: center;
color: var(--accent-strong);
}
#ring-size-widget .result strong {
font-size: 18px;
color: var(--accent);
}
#ring-size-widget .graphic {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
gap: 20px;
flex-wrap: wrap;
}
#ring-size-widget .ring-view {
background: radial-gradient(circle at 30% 30%, #fff, #e0e7ff);
border: 4px solid var(--accent-strong);
border-radius: 50%;
box-shadow: inset 0 0 12px rgba(0,0,0,.08);
}
#ring-size-widget .ring-info {
font-size: 16px;
font-weight: 600;
color: var(--accent-strong);
line-height: 1.6;
text-align: center;
flex: 1;
}
#ring-size-widget .footer {
font-size: 12px;
color: var(--accent);
margin-top: 10px;
text-align: center;
}
@media (max-width: 480px) {
#ring-size-widget .control {
flex-direction: column;
align-items: flex-start;
}
#ring-size-widget input[type=number] {
width: 100%;
}
#ring-size-widget .graphic {
flex-direction: column;
}
}
/* این بخش فقط جاوااسکریپت هست */
(function () {
const $ = (id) => document.getElementById(id);
const circRange = $("circRange");
const circInput = $("circInput");
const iranSizeEl = $("iranSize");
const diameterEl = $("diameter");
const ringGraphic = $("ringGraphic");
const ringLabel = $("ringLabel");
const clamp = (v, min, max) => Math.min(Math.max(v, min), max);
const fmt = (n, d=1) => Number(n).toFixed(d).replace('.', '٫');
const iranRingTable = [
{ size: 4, circ: 47, diam: 14.9 },
{ size: 5, circ: 49.3, diam: 15.7 },
{ size: 6, circ: 51.9, diam: 16.5 },
{ size: 7, circ: 54.4, diam: 17.3 },
{ size: 8, circ: 57.0, diam: 18.1 },
{ size: 9, circ: 59.6, diam: 18.9 },
{ size: 10, circ: 62.1, diam: 19.7 },
{ size: 11, circ: 64.6, diam: 20.6 },
{ size: 12, circ: 67.2, diam: 21.4 },
{ size: 13, circ: 69.7, diam: 22.2 },
{ size: 14, circ: 72.3, diam: 23.0 },
{ size: 15, circ: 74.8, diam: 23.8 }
];
function findIranSize(circ) {
let closest = iranRingTable[0];
let diff = Math.abs(circ - closest.circ);
iranRingTable.forEach(r => {
const d = Math.abs(circ - r.circ);
if (d < diff) {
diff = d;
closest = r;
}
});
return closest;
}
function compute() {
const circ = parseFloat(circInput.value || "57");
const match = findIranSize(circ);
iranSizeEl.textContent = match.size;
diameterEl.textContent = fmt(match.diam, 1);
const scale = 4;
const ringDiameter = match.diam * scale;
ringGraphic.style.width = ringDiameter + "px";
ringGraphic.style.height = ringDiameter + "px";
ringLabel.innerHTML = "سایز " + match.size + "
("+fmt(match.diam,1)+" mm)";
}
circRange.addEventListener("input", () => { circInput.value = circRange.value; compute(); });
circInput.addEventListener("input", () => {
let v = clamp(parseFloat(circInput.value||0),47,75);
circInput.value=v; circRange.value=v; compute();
});
compute();
})();
