146 lines
7.8 KiB
HTML
146 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta charset="utf-8">
|
|
<title>Autoclave Scale 60mm</title>
|
|
<style>
|
|
body { font-family: 'Arial', sans-serif; margin: 40px; background: #fff; text-align: center; }
|
|
.info { font-size: 14px; color: #333; margin-bottom: 20px; text-align: left; max-width: 600px; margin: 0 auto 20px auto; }
|
|
/* Printable 1:1 container in mm */
|
|
.scale-container {
|
|
width: 100mm;
|
|
height: 60mm;
|
|
border: 1px dashed #bbb;
|
|
margin: 0 auto;
|
|
padding: 10mm;
|
|
box-sizing: content-box;
|
|
background: #fafafa;
|
|
}
|
|
svg { width: 100mm; height: 60mm; display: block; }
|
|
@media print {
|
|
body { margin: 0; background: #fff; }
|
|
.info { display: none; }
|
|
.scale-container { border: none; padding: 0; background: #fff; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="info">
|
|
<h2>Horizontal Scale for 60mm Fader (1:1)</h2>
|
|
<p><strong>Instructions:</strong> Press <strong>Ctrl + P</strong> to print. In the print dialog, set <strong>Scale to 100%</strong> (or "Actual Size") and disable margins/headers. Cut along the outer solid box if needed.</p>
|
|
</div>
|
|
|
|
<div class="scale-container">
|
|
<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background panel for the scale label -->
|
|
<rect x="5" y="5" width="90" height="50" fill="#ffffff" stroke="#333333" stroke-width="0.5" rx="3"></rect>
|
|
|
|
<!-- Fader Slot (60mm travel from X=20 to X=80, at Y=30) -->
|
|
<line x1="20" y1="30" x2="80" y2="30" stroke="#000000" stroke-width="1" stroke-linecap="round"></line>
|
|
<line x1="20" y1="30" x2="80" y2="30" stroke="#cccccc" stroke-width="0.3" stroke-dasharray="1 1"></line>
|
|
|
|
<!-- Outer limits anchors -->
|
|
<circle cx="20" cy="30" r="1" fill="#ff3333"></circle>
|
|
<circle cx="80" cy="30" r="1" fill="#ff3333"></circle>
|
|
|
|
<!-- Product Sectors (TOP SIDE, Y < 30) -->
|
|
<!-- Sector 1: Meat / Мясо (1h20m - 2h00m -> 80-120 min -> indices 14 to 18) -->
|
|
<!-- X calculation: tbl_index goes from 0 to 24.
|
|
Index 0 = 5m (X=20)
|
|
Index 24 = 180m (X=80)
|
|
Step size in X = 60 / 24 = 2.5 mm per index.
|
|
|
|
Let's map the minutes precisely to X coordinates:
|
|
5m (idx 0) -> X = 20
|
|
15m (idx 2) -> X = 25
|
|
30m (idx 5) -> X = 32.5
|
|
45m (idx 8) -> X = 40
|
|
60m (idx 11) -> X = 47.5
|
|
90m (idx 14) -> X = 55
|
|
120m(idx 17) -> X = 62.5
|
|
150m(idx 20) -> X = 70
|
|
180m(idx 24) -> X = 80
|
|
-->
|
|
|
|
<!-- Sector: Vegetables / Mushrooms (15m - 40m -> X=25 to X=37.5) -->
|
|
<path d="M 25 25 L 37.5 25" stroke="#4CAF50" stroke-width="3" stroke-linecap="square" fill="none"></path>
|
|
<text x="31.25" y="21" font-size="3" text-anchor="middle" fill="#2E7D32" font-weight="bold">VEG / MUSH</text>
|
|
|
|
<!-- Sector: Fish (30m - 60m -> X=32.5 to X=47.5) -->
|
|
<path d="M 32.5 15 L 47.5 15" stroke="#2196F3" stroke-width="3" stroke-linecap="square" fill="none"></path>
|
|
<text x="40" y="11" font-size="3" text-anchor="middle" fill="#1565C0" font-weight="bold">FISH</text>
|
|
|
|
<!-- Sector: Poultry / Птица (60m - 90m -> X=47.5 to X=55) -->
|
|
<path d="M 47.5 25 L 55 25" stroke="#FF9800" stroke-width="3" stroke-linecap="square" fill="none"></path>
|
|
<text x="51.25" y="21" font-size="3" text-anchor="middle" fill="#E65100" font-weight="bold">POULTRY</text>
|
|
|
|
<!-- Sector: Meat / Мясо (80m - 120m -> idx 13 to 17 -> X=52.5 to X=62.5) -->
|
|
<path d="M 52.5 15 L 62.5 15" stroke="#F44336" stroke-width="3" stroke-linecap="square" fill="none"></path>
|
|
<text x="57.5" y="11" font-size="3" text-anchor="middle" fill="#C62828" font-weight="bold">MEAT</text>
|
|
|
|
<!-- Ticks and Time Labels (BOTTOM SIDE, Y > 30) -->
|
|
<!-- 5m (idx 0, X=20) -->
|
|
<line x1="20" y1="30" x2="20" y2="35" stroke="#000" stroke-width="0.5"></line>
|
|
<text x="20" y="39" font-size="3" text-anchor="middle" font-weight="bold">5m</text>
|
|
|
|
<!-- 15m (idx 2, X=25) -->
|
|
<line x1="25" y1="30" x2="25" y2="34" stroke="#000" stroke-width="0.3"></line>
|
|
<text x="25" y="38" font-size="2.5" text-anchor="middle">15m</text>
|
|
|
|
<!-- 30m (idx 5, X=32.5) -->
|
|
<line x1="32.5" y1="30" x2="32.5" y2="34" stroke="#000" stroke-width="0.3"></line>
|
|
<text x="32.5" y="38" font-size="2.5" text-anchor="middle">30m</text>
|
|
|
|
<!-- 45m (idx 8, X=40) -->
|
|
<line x1="40" y1="30" x2="40" y2="34" stroke="#000" stroke-width="0.3"></line>
|
|
<text x="40" y="38" font-size="2.5" text-anchor="middle">45m</text>
|
|
|
|
<!-- 1h 00m (idx 11, X=47.5) -->
|
|
<line x1="47.5" y1="30" x2="47.5" y2="35" stroke="#000" stroke-width="0.5"></line>
|
|
<text x="47.5" y="39" font-size="3" text-anchor="middle" font-weight="bold">1h </text>
|
|
|
|
<!-- 1h 30m (idx 14, X=55) -->
|
|
<line x1="55" y1="30" x2="55" y2="34" stroke="#000" stroke-width="0.3"></line>
|
|
<text x="55" y="38" font-size="2.5" text-anchor="middle">1:30</text>
|
|
|
|
<!-- 2h 00m (idx 17, X=62.5) -->
|
|
<line x1="62.5" y1="30" x2="62.5" y2="35" stroke="#000" stroke-width="0.5"></line>
|
|
<text x="62.5" y="39" font-size="3" text-anchor="middle" font-weight="bold">2h</text>
|
|
|
|
<!-- 2h 30m (idx 20, X=70) -->
|
|
<line x1="70" y1="30" x2="70" y2="34" stroke="#000" stroke-width="0.3"></line>
|
|
<text x="70" y="38" font-size="2.5" text-anchor="middle">2:30</text>
|
|
|
|
<!-- 3h 00m (idx 24, X=80) -->
|
|
<line x1="80" y1="30" x2="80" y2="35" stroke="#000" stroke-width="0.5"></line>
|
|
<text x="80" y="39" font-size="3" text-anchor="middle" font-weight="bold">3h</text>
|
|
|
|
<!-- Minor ticks for every single step (2.5mm each) -->
|
|
<!-- We can iterate dynamically or just script it, but since this is inside HTML string, let's just add them via SVG elements for simplicity. -->
|
|
<!-- Let's map all 24 intervals visually to ensure exact alignment -->
|
|
<line x1="22.5" y1="30" x2="22.5" y2="32" stroke="#666" stroke-width="0.2"></line>
|
|
<line x1="27.5" y1="30" x2="27.5" y2="32" stroke="#666" stroke-width="0.2"></line>
|
|
<line x1="30.0" y1="30" x2="30.0" y2="32" stroke="#666" stroke-width="0.2"></line>
|
|
<line x1="35.0" y1="30" x2="35.0" y2="32" stroke="#666" stroke-width="0.2"></line>
|
|
<line x1="37.5" y1="30" x2="37.5" y2="32" stroke="#666" stroke-width="0.2"></line>
|
|
<line x1="42.5" y1="30" x2="42.5" y2="32" stroke="#666" stroke-width="0.2"></line>
|
|
<line x1="45.0" y1="30" x2="45.0" y2="32" stroke="#666" stroke-width="0.2"></line>
|
|
|
|
<!-- Post 1h ticks (every 2.5mm represents 10 mins) -->
|
|
<line x1="50.0" y1="30" x2="50.0" y2="32" stroke="#666" stroke-width="0.2"></line> <!-- 1h 10m -->
|
|
<line x1="52.5" y1="30" x2="52.5" y2="32" stroke="#666" stroke-width="0.2"></line> <!-- 1h 20m -->
|
|
<line x1="57.5" y1="30" x2="57.5" y2="32" stroke="#666" stroke-width="0.2"></line> <!-- 1h 40m -->
|
|
<line x1="60.0" y1="30" x2="60.0" y2="32" stroke="#666" stroke-width="0.2"></line> <!-- 1h 50m -->
|
|
<line x1="65.0" y1="30" x2="65.0" y2="32" stroke="#666" stroke-width="0.2"></line> <!-- 2h 10m -->
|
|
<line x1="67.5" y1="30" x2="67.5" y2="32" stroke="#666" stroke-width="0.2"></line> <!-- 2h 20m -->
|
|
<line x1="72.5" y1="30" x2="72.5" y2="32" stroke="#666" stroke-width="0.2"></line> <!-- 2h 40m -->
|
|
<line x1="75.0" y1="30" x2="75.0" y2="32" stroke="#666" stroke-width="0.2"></line> <!-- 2h 50m -->
|
|
<line x1="77.5" y1="30" x2="77.5" y2="32" stroke="#666" stroke-width="0.2"></line> <!-- 3h 00m limit pad -->
|
|
|
|
</svg>
|
|
</div>
|
|
|
|
|
|
|
|
</body></html> |