zetikettes/frontend/index.html
Paul Mathieu 3474239727 Now with edits, delete confirmations
- and also a better alignment on actions
- and konami code that works before login
2025-08-06 19:12:44 +02:00

117 lines
5.0 KiB
HTML

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zětikwett's</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="placeholder.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://accounts.google.com/gsi/client"></script>
<script src="jscolor.min.js"></script>
<script src="config.js"></script>
<script src="zetikettes.js"></script>
<style>
.actions {
margin-left: auto;
white-space: nowrap;
}
.confirm {
width: 35%;
min-width: 20em;
max-width: 85%;
}
</style>
</head>
<body>
<nav class="light-blue">
<div class="nav-wrapper container">
<a href="#" class="brand-logo">Zětikwett's</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<a class="modal-trigger btn orange disabled" href="#newproduct">
<i class="material-icons left">add</i>Nouveau produit
</a>
</li>
</ul>
</div>
</nav>
<main class="container row">
<p></p>
<div class="col s4 offset-s4" id="signin-prompt" style="display: none"></div>
<div class="col m6 offset-m3 s12">
<a class="modal-trigger btn orange hide-on-large-only disabled" href="#newproduct"><i class="material-icons left">add</i>Nouveau produit</a>
<ul class="collapsible collection" id="appbody">
<div class="shimmer">
<li><div class="collapsible-header"><h6 class="faux-text short"></h6></div></li>
<li><div class="collapsible-header"><h6 class="faux-text"></h6></div></li>
<li><div class="collapsible-header"><h6 class="faux-text shorter"></h6></div></li>
</div>
</ul>
</div>
<div id="confirmdelete" class="modal confirm">
<div class="modal-content">
Supprimer le produit <b id="delete-title">blařg titre long de test sa mère</b> ?
</div>
<div class="modal-footer">
<button class="modal-close waves-effect btn-flat" id="delete-cancel">annuler</button>
<button type="submit" class="modal-close waves-effect waves-green btn" id="delete-confirm">supprimer</button>
</div>
</div>
<!-- Modal Structure -->
<div id="newproduct" class="modal">
<div class="modal-content">
<div class="input-field">
<input id="new-name" type="text">
<label>Nom interne du produit</label>
</div>
<div class="input-field">
<select id="new-type">
</select>
<label>Type de produit</label>
</div>
<div class="input-field">
<input id="new-designation" type="text">
<label>Désignation</label>
</div>
<div class="input-field">
<textarea id="new-ingredients" class="materialize-textarea"></textarea>
<label>Ingrédients</label>
</div>
<div class="input-field">
<textarea id="new-description" class="materialize-textarea"></textarea>
<label>Description</label>
</div>
<div class="input-field">
<input value="#97A1CC" data-jscolor="{previewSize: 0}" id="new-color" type="text">
<label>Couleur</label>
</div>
<label>
<input type="checkbox" id="new-organic">
<span>Bio</span>
</label>
<div class="modal-footer">
<button type="submit" class="modal-close waves-effect waves-green btn" id="new-add">Ajouter</button>
</div>
</div>
</div>
</main>
<footer class="page-footer orange">
<div class="container row">
<span class="col right">displayed with recycled electrons.</span>
</div>
</footer>
</body>
</html>