added prototype
This commit is contained in:
Philippe Torrel
267
webseite-gulp-ts/frontend/projects/product-manager.html
Normal file
267
webseite-gulp-ts/frontend/projects/product-manager.html
Normal file
@@ -0,0 +1,267 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Webseite mit SASS</title>
|
||||
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="Donkey-Coder" />
|
||||
<link rel="manifest" href="/favicon/site.webmanifest" />
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
<script src="/assets/js/build.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- header.header-main>.content-box>figure>img[alt="Logo"]+figc{The Donkey Coders} -->
|
||||
<header class="header-main--min">
|
||||
<div class="content-box">
|
||||
<figure class="logo-main">
|
||||
<img src="/assets/img/donkey-logo.min.svg" alt="Logo - The Donkey Coders" />
|
||||
<figcaption>The Donkey Coders</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</header>
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>
|
||||
<a href="#projects">Projects</a>
|
||||
<ul class="sublist">
|
||||
<li><a href="/projects/product-manager.html">Product Manager</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main id="main">
|
||||
<div class="container py-5">
|
||||
<h1>Product Manager</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, praesentium! Deleniti quasi laborum saepe,</p>
|
||||
</div>
|
||||
|
||||
<!-- ▼ product-manager ▼ -->
|
||||
<div class="product-manager">
|
||||
<div class="container">
|
||||
<nav class="nav-products-actions">
|
||||
<ul class="list">
|
||||
<li>
|
||||
<button class="btn btn-dark button-products-save">
|
||||
<i class="fa-solid fa-hard-drive"></i>
|
||||
Save Products
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="btn btn-danger button-products-reset">
|
||||
<i class="fa-solid fa-box-archive"></i>
|
||||
Reset Products
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- table.table.table-striped.table-products>(thead.table-dark>tr>th{Name}+th{Price in €})+tbody>tr>td*2 -->
|
||||
<table class="table table-striped table-products">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th class="th-drag">#</th>
|
||||
<th class="th-name">Name</th>
|
||||
<th class="th-price">Price in €</th>
|
||||
<th class="th-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control input-product-name"
|
||||
name="product-name"
|
||||
placeholder="Insert product name"
|
||||
aria-label="Product Name" />
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="number"
|
||||
name="product-price"
|
||||
class="form-control input-product-price"
|
||||
placeholder="00.00"
|
||||
aria-label="Product Price"
|
||||
step="0.01"
|
||||
min="0" />
|
||||
<span class="input-group-text">€</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg">
|
||||
<button class="btn btn-dark button-product-add">
|
||||
<i class="fas fa-plus"></i>
|
||||
Add product
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /row ▲ -->
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<template class="template-row">
|
||||
<tr>
|
||||
<td class="td-drag">
|
||||
<button class="btn btn-sm button-drag">
|
||||
<i class="fas fa-grip"></i>
|
||||
<span class="visually-hidden">Drag Row</span>
|
||||
</button>
|
||||
</td>
|
||||
<td class="td-name">[PRODUCT_NAME]</td>
|
||||
<td class="td-price">[PRODUCT_PRICE]</td>
|
||||
<td class="td-actions">
|
||||
<button
|
||||
class="btn btn-sm btn-primary button-product-edit"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modal-edit">
|
||||
<i class="fas fa-file-pen"></i>
|
||||
<span class="visually-hidden">Edit Product</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-danger button-product-remove"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modal-delete">
|
||||
<i class="fas fa-trash-can"></i>
|
||||
<span class="visually-hidden">Remove Product</span>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-secondary button-product-move-up">
|
||||
<i class="fas fa-caret-up"></i>
|
||||
<span class="visually-hidden">Move Up</span>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-secondary button-product-move-down">
|
||||
<i class="fas fa-caret-down"></i>
|
||||
<span class="visually-hidden">Move Down</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<!-- Modal Edit -->
|
||||
<div
|
||||
class="modal modal-edit fade"
|
||||
id="modal-edit"
|
||||
tabindex="-1"
|
||||
aria-labelledby="modal-edit-label"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="modal-edit-label">Edit Product</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<form class="form-product-edit">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-8">
|
||||
<div class="mb-3">
|
||||
<label for="input-edit-name" class="form-label">Product Name</label>
|
||||
<input type="text" id="input-edit-name" class="form-control input-edit-name" name="name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm">
|
||||
<div class="mb-3">
|
||||
<label for="input-edit-price" class="form-label">Product Price</label>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="number"
|
||||
name="price"
|
||||
id="input-edit-price"
|
||||
min="0"
|
||||
step="0.01"
|
||||
class="form-control input-edit-price" />
|
||||
<span class="input-group-text">€</span>
|
||||
</div>
|
||||
<input type="hidden" name="id" class="input-edit-id" />
|
||||
<input type="hidden" name="position" class="input-edit-position" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-primary button-product-update">
|
||||
<i class="fas fa-arrow-rotate-right"></i>
|
||||
Update Product
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /Modal ▲ -->
|
||||
|
||||
<!-- Modal Delete -->
|
||||
<div
|
||||
class="modal modal-delete fade"
|
||||
id="modal-delete"
|
||||
tabindex="-1"
|
||||
aria-labelledby="modal-delete-label"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="modal-delete-label">Delete Product</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
Do you really want to delete Product:<br />
|
||||
<strong class="product-name">PRODUCT_NAME</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger button-confirm-delete">Confirm to delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /Modal Delete ▲ -->
|
||||
</div>
|
||||
<!-- ▲ /product-manager ▲ -->
|
||||
</main>
|
||||
|
||||
<!-- footer.footer-main>.row>.col*3>h3{Headline}+p{lorem10} -->
|
||||
<footer class="footer-main">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Address</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis hic eligendi rem fugiat quo! Autem
|
||||
totam maxime itaque earum?
|
||||
</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>Social Media</h3>
|
||||
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi, earum.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>Privacy Policy</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, porro!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user