IOTech
CYBER OPS

Documentación práctica de UI con iocloud.min.css + OneUI + jQuery.
Standalone HTML
Copia/pega
Helpers JS
Generado:
Este archivo es tu “manual de UI” para prototipos rápidos: componentes, snippets, y helpers. Todo usa tus CDNs (no agrego libs raras).
Toast Modal Tabs Accordions Forms Tables Badges Progress Loader Realtime logs
Base: Head/Boot Layout y contenedores Toasts / alerts Modals Formularios Tablas Tabs Accordion Badges / chips Progress / status Realtime panel Helpers JS (API)

Base: plantilla mínima

Incluye solo lo indispensable. Respeta exactamente tus CDNs.
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>Mi App</title>

  <link rel="stylesheet" id="css-main" href="https://cdn.inforganic.net/APP_LIB/CSS/iocloud.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.inforganic.net/APP_LIB/JS/oneui.core.min.js"></script>
  <script src="https://cdn.inforganic.net/APP_LIB/JS/oneui.app.min.js"></script>
</head>
<body class="bg-dark">

  <main id="main-container" class="content content-full">
    ...
  </main>

</body>
</html>
OneUI ya trae Bootstrap debajo. O sea: data-toggle, modal, toast, collapse, etc.

Layout y contenedores

Card base

Block

Usa block + block-rounded + block-bordered.

Tip: para dashboards, combina con bg-black-10/25/50.
<div class="block block-rounded block-bordered bg-black-25">
  <div class="block-header block-header-default bg-black-50">
    <h3 class="block-title text-white">Título</h3>
  </div>
  <div class="block-content text-white">...</div>
</div>

Grid rápido

col-6
cards pequeñas
col-6
cards pequeñas

Paleta de ejemplo

Primary
.text-primary / .bg-primary
Orange
.text-warning / custom accents
Success
.text-success / .bg-success
Danger
.text-danger / .bg-danger

Toasts / Alerts

Probar toast

API: UI.toast({title, body, kind, ms}) usa tu #toast-container.

Snippet de toast

// UI.toast({ title, body, kind: 'ok|warn|bad|info', ms })
UI.toast({ title:'OK', body:'Guardado con éxito', kind:'ok', ms: 4000 });
Soporta también: info (default), ok, warn, bad.

Modals

Abrir modal

Con OneUI/Bootstrap, el modal sale con data-toggle="modal".

Snippet

<button class="btn btn-primary" data-toggle="modal" data-target="#miModal">Abrir</button>

<div class="modal fade" id="miModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">...</div>
  </div>
</div>

Formularios

Form con validación simple

required
Se normaliza a número.
Salida (JSON):

Snippet

// Capturar form a JSON
const data = UI.formToJSON('#miForm');
console.log(data);

// Validación rápida
if (!data.name) UI.toast({title:'Falta', body:'Nombre requerido', kind:'warn'});
Helper: UI.formToJSON(formSelector) convierte inputs + selects + textarea.

Tablas

Tabla con acciones

ID Evento Estado Acción

Snippet

<table class="table table-sm table-bordered table-hover table-vcenter">
  <thead class="thead-dark">...</thead>
  <tbody>...</tbody>
</table>
Para “monitor RT”: mete badges en la columna Estado y botones compactos en acciones.

Tabs

Tabs estilo dashboard

Nodo: entrada-01
Último ping: —

Snippet

<ul class="nav nav-tabs nav-tabs-alt">
  <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#t1">Tab</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="t1">...</div>
</div>

Accordion / Collapse

Accordion

Sección 1: Resumen
KPI: OK — Latencia: 120ms
Sección 2: Detalle
Aquí metes JSON, transcripción, o “bloques de evidencia”.
Para paneles grandes: usa collapse para “reducir ruido”.

Snippet

<a data-toggle="collapse" href="#c1">Abrir</a>
<div id="c1" class="collapse">...</div>

Badges / chips

Estados típicos (monitor)

OK WARN BAD INFO IDLE

Chips rápidos

STT VISION TTS API

Snippet

<span class="badge badge-success">OK</span>
<span class="badge badge-warning">WARN</span>
<span class="badge badge-danger">BAD</span>

Progress / status

Barra de progreso

Útil para uploads, STT chunking, colas de análisis, o “paso 3/7” de wizard.

Snippet

<div class="progress">
  <div class="progress-bar" style="width:35%"></div>
</div>

Panel Realtime (patrón)

Event log + stream

Event Log

Formato recomendado de evento

{
  ts: 1734652800000,
  kind: "ok|warn|bad|info",
  tag: "stt|tts|api|ui",
  msg: "texto corto",
  data: { ... opcional ... }
}
“Monitor” = sólo lectura + autorefresh. “Cliente” = captura + envía eventos.

Helpers JS (tipo API)

Estos helpers ya vienen embebidos en este documento. Copia a tu app tal cual.
/**
 * UI.toast({title, body, kind, ms})
 * UI.formToJSON(formSelector)
 * UI.formReset(formSelector)
 * UI.copy(inputSelector|element)
 * UI.timeHHMMSS(msEpoch?)
 * UI.nowTag()
 */

Pruebas rápidas

Código helper (pegable)