urieljareth/whatsapp-api-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Estado inicial del mockup

Browse Source
This commit is contained in:
urieljareth
2026-09-27 19:17:33 -06:00
commit dc6e31a9d7
15 changed files with 6590 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+196
View File
@@ -0,0 +1,196 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Mockup visual 100 % estático de los mensajes de la WhatsApp Cloud API renderizados en un iPhone.">
<meta name="referrer" content="no-referrer">
<title>WhatsApp Cloud API · Mockup</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%2300a884'/%3E%3Cpath fill='%23fff' d='M7.1 3.8c.5-.1 1 .2 1.2.7l1.3 3c.2.4.1.9-.3 1.2l-1.6 1.4a13.3 13.3 0 0 0 6.2 6.2l1.4-1.6c.3-.4.8-.5 1.2-.3l3 1.3c.5.2.8.7.7 1.2l-.5 2.6c-.1.5-.6.9-1.1.9C10.4 20.4 3.6 13.6 3.6 5.4c0-.5.4-1 .9-1.1z'/%3E%3C/svg%3E">
<!-- Orden EXACTO de la SPEC §2/§4 -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/iphone.css">
<link rel="stylesheet" href="css/whatsapp.css">
<link rel="stylesheet" href="css/editor.css">
</head>
<body data-tema="claro">
<div id="app">
<!-- ============ Barra superior de la app (shell A) ============ -->
<header id="toolbar" class="toolbar">
<div class="toolbar-marca">
<span class="toolbar-logo" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M7.1 3.8c.5-.1 1 .2 1.2.7l1.3 3c.2.4.1.9-.3 1.2l-1.6 1.4a13.3 13.3 0 0 0 6.2 6.2l1.4-1.6c.3-.4.8-.5 1.2-.3l3 1.3c.5.2.8.7.7 1.2l-.5 2.6c-.1.5-.6.9-1.1.9C10.4 20.4 3.6 13.6 3.6 5.4c0-.5.4-1 .9-1.1z"/></svg>
</span>
<div class="toolbar-titulos">
<h1>WhatsApp Cloud API</h1>
<span class="toolbar-subtitulo">Mockup visual · demo estática</span>
</div>
</div>
<div class="toolbar-acciones">
<button id="btn-tema" class="tb-btn" type="button" title="Alternar tema claro / oscuro" aria-label="Alternar tema">
<svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor" aria-hidden="true"><path d="M12 2.6a9.4 9.4 0 1 0 0 18.8 9.4 9.4 0 0 0 0-18.8zm0 16.9V4.5a7.5 7.5 0 0 1 0 15z"/></svg>
<span>Tema</span>
</button>
<button id="btn-presentacion" class="tb-btn" type="button" title="Modo presentación (oculta el editor)">
<svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor" fill-rule="evenodd" aria-hidden="true"><path d="M3 4.5h18a1 1 0 0 1 1 1V16a1 1 0 0 1-1 1h-6.4v2.1h1.9a.9.9 0 1 1 0 1.8H7.5a.9.9 0 1 1 0-1.8h1.9V17H3a1 1 0 0 1-1-1V5.5a1 1 0 0 1 1-1zm8 3.4v5.7l4.6-2.85z"/></svg>
<span>Presentación</span>
</button>
<span class="tb-separador" aria-hidden="true"></span>
<button id="btn-exportar" class="tb-btn" type="button" title="Exportar el estado a JSON">
<svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor" aria-hidden="true"><path d="M12 3.2c.5 0 .9.4.9.9v8.2l2.7-2.7a.9.9 0 1 1 1.3 1.3l-4.2 4.2a.9.9 0 0 1-1.3 0L7.2 11a.9.9 0 1 1 1.3-1.3l2.7 2.7V4.1c0-.5.4-.9.9-.9zM4.9 18.5h14.2a.9.9 0 1 1 0 1.8H4.9a.9.9 0 1 1 0-1.8z"/></svg>
<span>Exportar</span>
</button>
<button id="btn-importar" class="tb-btn" type="button" title="Importar un estado JSON">
<svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor" aria-hidden="true"><path d="M12 15.6c-.5 0-.9-.4-.9-.9V6.5L8.4 9.2A.9.9 0 1 1 7.1 7.9l4.2-4.2a.9.9 0 0 1 1.3 0l4.2 4.2a.9.9 0 1 1-1.3 1.3l-2.7-2.7v8.2c0 .5-.4.9-.9.9zM4.9 18.5h14.2a.9.9 0 1 1 0 1.8H4.9a.9.9 0 1 1 0-1.8z"/></svg>
<span>Importar</span>
</button>
<input type="file" id="importar-archivo" accept="application/json,.json" hidden>
<button id="btn-reset" class="tb-btn" type="button" title="Restablecer la demo (borra localStorage)">
<svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor" aria-hidden="true"><path d="M12 5V2.8a.7.7 0 0 0-1.13-.55L6.9 5.2a.7.7 0 0 0 0 1.1l3.97 2.95A.7.7 0 0 0 12 8.7V6.5a5.5 5.5 0 1 1-5.5 5.5H4.75A7.25 7.25 0 1 0 12 5z"/></svg>
<span>Restablecer</span>
</button>
</div>
</header>
<!-- ============ Panel editor (columna izquierda · contenido: módulo C) ============ -->
<aside id="panel-editor" aria-label="Editor del mockup">
<section class="wam-bloque">
<h2 class="wam-bloque-titulo">Cuenta</h2>
<!-- El formulario de identidad lo pinta js/editor.js (C) en runtime -->
<div id="editor-cuenta"></div>
</section>
<section class="wam-bloque">
<h2 class="wam-bloque-titulo">Mensajes</h2>
<div class="wam-alta">
<!-- Paleta de tarjetas de los 13 tipos; la rellena js/editor.js (C) en runtime.
El tipo elegido queda en #nuevo-tipo-valor (hidden) y en data-valor de la paleta. -->
<div id="nuevo-tipo" class="ed-paleta" role="radiogroup" aria-label="Tipo de mensaje a añadir"></div>
<input type="hidden" id="nuevo-tipo-valor" value="text">
<button id="btn-anadir" class="wam-btn-anadir" type="button">Añadir</button>
</div>
<!-- Una tarjeta colapsable por mensaje la pinta js/editor.js (C) -->
<div id="lista-mensajes"></div>
</section>
</aside>
<!-- ============ Panel móvil (columna derecha · shell A) ============ -->
<section id="panel-movil" aria-label="Vista previa en un iPhone">
<div id="barra-movil">
<span class="barra-titulo">Vista previa</span>
<button id="btn-reproducir" type="button" title="Reproducir la demo paso a paso (clic de nuevo para detener)">
<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M8.4 5.6v12.8c0 .8.9 1.3 1.6.9l10-6.4c.6-.4.6-1.4 0-1.8l-10-6.4c-.7-.4-1.6.1-1.6.9z"/></svg>
<span>Reproducir demo</span>
</button>
</div>
<div class="iphone-escena">
<div id="iphone" class="iphone">
<div id="pantalla" class="pantalla wa">
<!-- Hardware -->
<div id="isla" class="island" aria-hidden="true"></div>
<div id="statusbar" class="statusbar" aria-hidden="true">
<span class="sb-hora">9:41</span>
<span class="sb-iconos">
<svg class="sb-svg sb-senal" width="18" height="12" viewBox="0 0 18 12" fill="currentColor" aria-hidden="true">
<rect x="0" y="7.4" width="3" height="4.6" rx="1"/>
<rect x="4.7" y="5.2" width="3" height="6.8" rx="1"/>
<rect x="9.4" y="2.8" width="3" height="9.2" rx="1"/>
<rect x="14.1" y="0.4" width="3" height="11.6" rx="1"/>
</svg>
<svg class="sb-svg sb-wifi" width="17" height="12" viewBox="0 0 17 12" fill="none" aria-hidden="true">
<path d="M1.2 4.1a11 11 0 0 1 14.6 0" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
<path d="M3.9 7a7 7 0 0 1 9.2 0" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
<circle cx="8.5" cy="10.2" r="1.7" fill="currentColor"/>
</svg>
<svg class="sb-svg sb-bateria" width="28" height="13" viewBox="0 0 28 13" fill="none" aria-hidden="true">
<rect x="0.75" y="0.75" width="22.5" height="11.5" rx="3.5" stroke="currentColor" stroke-width="1.2" opacity="0.45"/>
<path d="M25.3 4.4v4.2c1.2-.3 2-1.1 2-2.1s-.8-1.8-2-2.1z" fill="currentColor" opacity="0.45"/>
<rect x="2.5" y="2.5" width="15.5" height="8" rx="2" fill="currentColor"/>
</svg>
</span>
</div>
<!-- Header del chat (estructura A · contenido B) -->
<header id="chat-header" class="header">
<svg class="back-chevron" viewBox="0 0 24 24" width="24" height="24" fill="none" aria-hidden="true">
<path d="M15 4.5 7.5 12l7.5 7.5" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<img id="chat-avatar" class="avatar" alt="Avatar de la cuenta">
<div class="header-title">
<span class="header-linea">
<span id="chat-nombre"></span>
<span id="chat-verificado" class="header-verificado" title="Cuenta verificada">
<svg class="verificado-svg" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
<path fill="currentColor" d="M12 1.7l2.1 1.6 2.6-.5 1.1 2.4 2.4 1.1-.5 2.6 1.6 2.1-1.6 2.1.5 2.6-2.4 1.1-1.1 2.4-2.6-.5-2.1 1.6-2.1-1.6-2.6.5-1.1-2.4-2.4-1.1.5-2.6L2.7 12l1.6-2.1-.5-2.6 2.4-1.1 1.1-2.4 2.6.5z"/>
<path fill="#fff" d="M10.7 15.1l-3-3 1.3-1.3 1.7 1.7 4.3-4.3 1.3 1.3z"/>
</svg>
</span>
</span>
<span id="chat-subtitulo" class="header-sub"></span>
</div>
<svg class="icon-video" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true">
<path d="M4.5 5.5h9A2.5 2.5 0 0 1 16 8v8a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 2 16V8a2.5 2.5 0 0 1 2.5-2.5z"/>
<path d="M17.5 10.2l3.6-2.6c.5-.4 1.2 0 1.2.6v7.6c0 .6-.7 1-1.2.6l-3.6-2.6z"/>
</svg>
<svg class="icon-call" viewBox="0 0 24 24" width="21" height="21" fill="currentColor" aria-hidden="true">
<path d="M7.1 3.8c.5-.1 1 .2 1.2.7l1.3 3c.2.4.1.9-.3 1.2l-1.6 1.4a13.3 13.3 0 0 0 6.2 6.2l1.4-1.6c.3-.4.8-.5 1.2-.3l3 1.3c.5.2.8.7.7 1.2l-.5 2.6c-.1.5-.6.9-1.1.9C10.4 20.4 3.6 13.6 3.6 5.4c0-.5.4-1 .9-1.1z"/>
</svg>
</header>
<!-- Scroll de mensajes (estructura A · filas li.wa-row de B) -->
<ul id="chat-cuerpo" aria-live="polite"></ul>
<!-- Indicador "escribiendo…" (estructura A · contenido y animación de B) -->
<div id="chat-escribiendo"></div>
<!-- Composer (estructura A · lógica D) -->
<form id="composer" class="compose" autocomplete="off">
<button type="button" class="attach" aria-label="Adjuntar">
<svg viewBox="0 0 24 24" width="25" height="25" fill="currentColor" aria-hidden="true"><path d="M11.1 11.1V5.4a.9.9 0 1 1 1.8 0v5.7h5.7a.9.9 0 1 1 0 1.8h-5.7v5.7a.9.9 0 1 1-1.8 0v-5.7H5.4a.9.9 0 1 1 0-1.8z"/></svg>
</button>
<div class="field">
<input id="composer-input" type="text" placeholder="Mensaje" aria-label="Mensaje" autocomplete="off" enterkeyhint="send">
<svg class="mic" viewBox="0 0 24 24" width="21" height="21" fill="currentColor" aria-hidden="true">
<path d="M12 13.6a3.2 3.2 0 0 0 3.2-3.2V5.2a3.2 3.2 0 1 0-6.4 0v5.2A3.2 3.2 0 0 0 12 13.6z"/>
<path d="M18.4 10.4a.9.9 0 1 0-1.8 0 4.6 4.6 0 0 1-9.2 0 .9.9 0 1 0-1.8 0 6.4 6.4 0 0 0 5.5 6.3v2.1H8.6a.9.9 0 1 0 0 1.8h6.8a.9.9 0 1 0 0-1.8h-2.5v-2.1a6.4 6.4 0 0 0 5.5-6.3z"/>
</svg>
</div>
<button id="composer-enviar" class="enviar" type="submit" aria-label="Enviar mensaje">
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M3.5 20.2 21.4 12 3.5 3.8v6.3L15 12 3.5 13.9z"/></svg>
</button>
</form>
<!-- Sheet de lista (estructura A · ciclo crear/destruir y contenido: B) -->
<div id="sheet" class="sheet" hidden>
<div id="sheet-fondo" class="sheet-fondo"></div>
<div class="sheet-panel" role="dialog" aria-modal="true" aria-labelledby="sheet-titulo">
<div id="sheet-titulo" class="sheet-titulo"></div>
<ul id="sheet-opciones" class="sheet-opciones"></ul>
</div>
</div>
<div id="home-indicator" class="home-indicator" aria-hidden="true"></div>
</div>
</div>
</div>
</section>
</div>
<noscript><p class="wam-noscript">Esta demo necesita JavaScript habilitado.</p></noscript>
<!-- Orden EXACTO de la SPEC §3 (todos al final del body, sin defer/module;
el único efecto al cargar es WAM.init() desde main.js) -->
<script src="js/store.js"></script> <!-- D: WAM.CLAVE/estado/normalizar; NO toca DOM al cargar -->
<script src="js/render.js"></script> <!-- B: render del chat; NO toca DOM al cargar -->
<script src="js/editor.js"></script> <!-- C: formularios del editor; NO toca DOM al cargar -->
<script src="js/interactivity.js"></script> <!-- D: flujos/typing/demo; NO toca DOM al cargar -->
<script src="js/main.js"></script> <!-- D: única ejecución — WAM.init() -->
</body>
</html>