my_app_remote_server_ui_app/server/frontend/index.html
2026-01-04 18:37:03 +01:00

92 lines
2.8 KiB
HTML

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Link Manager</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Link Manager</h1>
<!-- AUTH -->
<section id="authSection">
<div class="card">
<h2>Accedi</h2>
<form id="loginForm">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<h3>Oppure registrati</h3>
<form id="registerForm">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Registrati</button>
</form>
<div id="authStatus"></div>
</div>
</section>
<!-- LINKS -->
<section id="linkSection" style="display:none;">
<div class="card">
<h2>Nuovo link</h2>
<form id="linkForm">
<div style="display:flex; gap:10px; align-items:center;">
<input type="text" name="url" id="urlInput" placeholder="URL" required style="flex:1;">
<button type="button" id="fetchMetaBtn">Cerca</button>
</div>
<input type="text" name="name" id="nameInput" placeholder="Nome" required>
<!-- Icona manuale -->
<input type="file" id="iconInput" name="icon" accept="image/*">
<!-- Anteprima -->
<img id="iconPreview" style="width:64px; height:64px; margin-top:10px; display:none;">
<div id="iconSize" style="margin-top:5px; font-size:12px; color:#666; display:none;"></div>
<button type="submit">Salva</button>
</form>
</div>
<div class="card">
<h2>I tuoi link</h2>
<div id="list"></div>
</div>
</section>
</div>
<script type="module" src="app.js"></script>
<!-- MODAL EDIT -->
<div id="editModal" class="modal" style="display:none;">
<div class="modal-content">
<h3>Modifica link</h3>
<form id="editForm">
<input type="text" name="name" placeholder="Nome">
<input type="text" name="url" placeholder="URL">
<input type="file" id="iconInputEdit" name="icon" accept="image/*">
<img id="iconPreviewEdit" style="width:64px; height:64px; margin-top:10px; display:none;">
<div id="iconSizeEdit" style="margin-top:5px; font-size:12px; color:#666; display:none;"></div>
<button type="submit">Salva modifiche</button>
<button type="button" id="closeModal">Annulla</button>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
</body>
</html>