80 lines
3.3 KiB
HTML
80 lines
3.3 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|||
|
|
<title>QR Presentation — Host</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=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
|
|||
|
|
<link rel="stylesheet" href="/css/styles.css" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="wrap">
|
|||
|
|
<header class="topbar">
|
|||
|
|
<div class="brand"><img class="brand-logo" src="/img/mps-icon.png" alt="" /> <span class="brand-name">MPS – Martinhal Presentation System</span></div>
|
|||
|
|
<div class="usermenu" id="usermenu">
|
|||
|
|
<span class="who"></span>
|
|||
|
|
<a class="btn ghost small" id="manageBtn" href="/users" style="display:none;">Manage users</a>
|
|||
|
|
<button class="btn ghost small" id="logoutBtn">Sign out</button>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<section class="hero">
|
|||
|
|
<div>
|
|||
|
|
<div class="eyebrow">Host console</div>
|
|||
|
|
<h1>Put your deck on every phone in the room.</h1>
|
|||
|
|
<p class="lede">Drop in a video, PowerPoint, Word doc, Excel sheet, PDF, or image. We turn it into one shareable link and a QR code. Whoever scans it watches along — in sync with you, or at their own pace.</p>
|
|||
|
|
<p class="note" id="hostWarn"></p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card" style="padding:20px;">
|
|||
|
|
<div class="eyebrow">New presentation</div>
|
|||
|
|
<div class="field">
|
|||
|
|
<input type="text" id="title" placeholder="Title (optional)" autocomplete="off" />
|
|||
|
|
</div>
|
|||
|
|
<div class="drop" id="drop">
|
|||
|
|
<div class="big">Drop a file here</div>
|
|||
|
|
<div class="sub" id="dropSub">or click to browse</div>
|
|||
|
|
<input type="file" id="file" hidden />
|
|||
|
|
</div>
|
|||
|
|
<div class="progress" id="progress"><i></i></div>
|
|||
|
|
<p class="note" id="uploadNote"></p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<div class="section-head">
|
|||
|
|
<h2>Your presentations</h2>
|
|||
|
|
<button class="btn ghost small" id="refresh">Refresh</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="list"><div class="empty">Loading…</div></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- email share modal -->
|
|||
|
|
<div class="overlay" id="emailOverlay">
|
|||
|
|
<div class="card modal">
|
|||
|
|
<div class="eyebrow">Share by email</div>
|
|||
|
|
<h2 id="emailTitle">Send the join link</h2>
|
|||
|
|
<p>The recipient gets the link and a QR code to open the presentation.</p>
|
|||
|
|
<div class="form-row">
|
|||
|
|
<label>Recipients (comma or space separated)</label>
|
|||
|
|
<input class="input" id="emailTo" placeholder="alex@example.com, sam@example.com" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-row">
|
|||
|
|
<label>Message (optional)</label>
|
|||
|
|
<input class="input" id="emailMsg" placeholder="Join my talk at 3pm" />
|
|||
|
|
</div>
|
|||
|
|
<div class="err" id="emailErr"></div>
|
|||
|
|
<div style="display:flex; gap:8px; justify-content:flex-end; margin-top:8px;">
|
|||
|
|
<button class="btn ghost" id="emailCancel">Cancel</button>
|
|||
|
|
<button class="btn primary" id="emailSend">Send</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<footer class="app-footer">© 2026 Martinhal IT - Joao Vaz - Version 1.7</footer>
|
|||
|
|
<div class="toast" id="toast"></div>
|
|||
|
|
<script type="module" src="/js/app.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|