/
home
/
simp499cl
/
public_html
/
notas-prechequeo
/
/home/simp499cl/public_html/notas-prechequeo
mkdir
upload
Name
Size
Mode
Actions
gauges-inspeccion.css
7217
0644
edit
dl
rm
gauges-inspeccion.html
7984
0644
edit
dl
rm
gauges-inspeccion.js
19166
0644
edit
dl
rm
Edit:
/home/simp499cl/public_html/notas-prechequeo/gauges-inspeccion.html
(7984B)
<!doctype html> <html lang="es"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Administrador de Gauges de Inspección</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;600;700;800;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="gauges-inspeccion.css" /> </head> <body> <main class="page-shell"> <section class="hero"> <div> <p class="eyebrow">DIAGNÓSTICO INTEGRAL</p> <h1>Panel de calificación</h1> </div> <div class="legend" aria-label="Leyenda de colores"> <span><i class="dot dot-red"></i>1–2.9</span> <span><i class="dot dot-orange"></i>3–4.9</span> <span><i class="dot dot-green"></i>5–7</span> </div> </section> <section class="gauge-board" id="gaugeBoard"></section> <section class="admin-panel"> <div class="admin-header"> <div> <p class="eyebrow">ADMINISTRACIÓN</p> <h2>Configura notas y apariencia</h2> </div> <div class="header-actions"> <button class="btn btn-secondary" id="resetBtn">Restablecer</button> <button class="btn btn-primary" id="randomBtn">Notas aleatorias</button> </div> </div> <div class="admin-grid"> <article class="control-card"> <h3>Notas por inspección</h3> <div id="scoreControls" class="stack"></div> </article> <article class="control-card"> <h3>Escala y color</h3> <div class="field-grid two"> <label class="field"> <span>Color rojo</span> <input type="color" id="redColor" value="#E63223" /> </label> <label class="field"> <span>Color naranjo</span> <input type="color" id="orangeColor" value="#F97317" /> </label> <label class="field"> <span>Color verde</span> <input type="color" id="greenColor" value="#22C55E" /> </label> <label class="field"> <span>Mostrar números 1–7</span> <small>Las marcas “–” permanecen visibles</small> <input type="checkbox" id="showTicks" /> </label> <label class="field checkbox-field"> <span>Color de la nota</span> <small>Durante la animación sigue el color del puntero. Activa esta opción para dejar la nota negra al finalizar.</small> <span class="checkbox-line"><input type="checkbox" id="scoreUsesBlackColor" /> <span>Usar color negro para la nota</span></span> </label> </div> </article> <article class="control-card"> <h3>Arco</h3> <div class="field-grid two"> <label class="field"> <span>Grosor del arco</span> <input type="range" id="arcWidth" min="8" max="34" value="18" /> <output id="arcWidthOut">18px</output> </label> <label class="field"> <span>Terminación</span> <select id="arcCap"> <option value="round" selected>Redondeada</option> <option value="butt">Plana</option> </select> </label> </div> </article> <article class="control-card"> <h3>Nota principal</h3> <div class="field-grid two"> <label class="field"> <span>Tamaño</span> <input type="range" id="scoreSize" min="28" max="64" value="42" /> <output id="scoreSizeOut">42px</output> </label> <label class="field"> <span>Posición vertical</span> <input type="range" id="scoreY" min="130" max="180" value="150" /> <output id="scoreYOut">150</output> </label> </div> </article> <article class="control-card"> <h3>Texto bajo la nota</h3> <div class="field-grid two"> <label class="field"> <span>Tamaño</span> <input type="range" id="labelSize" min="8" max="18" value="10" /> <output id="labelSizeOut">10px</output> </label> <label class="field"> <span>Posición vertical</span> <input type="range" id="labelY" min="158" max="206" value="178" /> <output id="labelYOut">178</output> </label> </div> </article> <article class="control-card"> <h3>Tamaño de gauges</h3> <div class="field-grid two"> <label class="field"> <span>4 gauges de inspección</span> <input type="range" id="inspectionGaugeSize" min="120" max="260" step="2" value="150" /> <output id="inspectionGaugeSizeOut">150px</output> </label> <label class="field"> <span>Gauge nota final</span> <input type="range" id="finalGaugeSize" min="170" max="300" step="2" value="200" /> <output id="finalGaugeSizeOut">200px</output> </label> </div> </article> <article class="control-card"> <h3>Fondo y sombra</h3> <div class="field-grid two"> <label class="field"> <span>Desenfoque sombra</span> <input type="range" id="shadowBlur" min="0" max="40" value="14" /> <output id="shadowBlurOut">14px</output> </label> <label class="field"> <span>Opacidad sombra</span> <input type="range" id="shadowOpacity" min="0" max="40" value="12" /> <output id="shadowOpacityOut">12%</output> </label> <label class="field"> <span>Desplazamiento vertical</span> <input type="range" id="shadowY" min="-4" max="16" value="5" /> <output id="shadowYOut">5px</output> </label> <label class="field"> <span>Expansión sombra</span> <input type="range" id="shadowSpread" min="-4" max="12" value="0" /> <output id="shadowSpreadOut">0px</output> </label> </div> </article> <article class="control-card"> <h3>Animación y aguja</h3> <div class="field-grid two"> <label class="field"> <span>Duración inicial</span> <input type="range" id="animDuration" min="2500" max="12000" step="100" value="6500" /> <output id="animDurationOut">6500ms</output> </label> <label class="field"> <span>Longitud aguja</span> <input type="range" id="needleLength" min="50" max="84" value="60" /> <output id="needleLengthOut">60</output> </label> <label class="field"> <span>Grosor puntero en la base</span> <input type="range" id="needleBaseWidth" min="1" max="10" step="0.2" value="6" /> <output id="needleBaseWidthOut">6px</output> </label> <label class="field"> <span>Grosor puntero en la punta</span> <input type="range" id="needleTipWidth" min="0.2" max="4" step="0.1" value="2" /> <output id="needleTipWidthOut">2px</output> </label> </div> <label class="field full-width"> <span>Animar cambios de nota</span> <input type="checkbox" id="animateUpdates" checked /> </label> </article> </div> </section> </main> <script src="gauges-inspeccion.js"></script> </body> </html>
Save
cmd:
run