added prototype
This commit is contained in:
Philippe Torrel
14
webseite-gulp-ts/frontend/dev/html/includes/head.html
Normal file
14
webseite-gulp-ts/frontend/dev/html/includes/head.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<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>
|
||||
14
webseite-gulp-ts/frontend/dev/html/includes/menu-main.html
Normal file
14
webseite-gulp-ts/frontend/dev/html/includes/menu-main.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!-- 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>
|
||||
24
webseite-gulp-ts/frontend/dev/html/includes/splide.html
Normal file
24
webseite-gulp-ts/frontend/dev/html/includes/splide.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<section class="splide my-slider" aria-label="Splide Basic HTML Example">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<li class="splide__slide">
|
||||
<figure class="splider-content">
|
||||
<img src="/assets/img/slider/slide-01.webp" alt="slide-image-1" />
|
||||
<figcaption>Slide 01</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
<li class="splide__slide">
|
||||
<figure class="splider-content">
|
||||
<img src="/assets/img/slider/slide-02.webp" alt="slide-image-2" />
|
||||
<figcaption>Slide 02</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
<li class="splide__slide">
|
||||
<figure class="splider-content">
|
||||
<img src="/assets/img/slider/slide-03.webp" alt="slide-image-3" />
|
||||
<figcaption>Slide 03</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
63
webseite-gulp-ts/frontend/dev/html/pages/index.html
Normal file
63
webseite-gulp-ts/frontend/dev/html/pages/index.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
@@include('head.html')
|
||||
<body>
|
||||
<!-- header.header-main>.content-box>figure>img[alt="Logo"]+figc{The Donkey Coders} -->
|
||||
<header class="header-main">
|
||||
<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>
|
||||
|
||||
@@include('splide.html')
|
||||
</header>
|
||||
@@include('menu-main.html')
|
||||
|
||||
<main id="main">
|
||||
<div class="container py-5">
|
||||
<h1>Website with SASS!</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. A, praesentium! Deleniti quasi laborum saepe,
|
||||
pariatur ipsam rem nihil ut omnis minus non consequuntur nulla doloribus excepturi qui soluta odit adipisci
|
||||
minima sunt assumenda repudiandae! Eum recusandae, alias autem illum consequuntur repellat asperiores nesciunt
|
||||
quo quibusdam! Voluptatibus in nihil facilis quidem. Enim, doloremque eveniet! Suscipit nam labore excepturi
|
||||
impedit nobis sed facere alias incidunt, velit esse a ipsum minima et quo quasi aperiam voluptates doloribus
|
||||
beatae unde ipsam porro quas? Veniam aperiam minima voluptatum consequatur hic suscipit modi tenetur cum
|
||||
saepe, quis quam quaerat alias accusamus possimus? Ratione, rerum. Iusto suscipit vitae earum minus corrupti
|
||||
expedita aperiam ad dolores, obcaecati cupiditate ipsam minima optio deserunt quia tempora quaerat est commodi
|
||||
voluptatibus porro. Blanditiis praesentium veniam ea exercitationem cum odio quas consequatur sit nemo commodi
|
||||
magnam maxime cumque dolor atque recusandae, labore doloribus quam libero eaque ab. Pariatur illum blanditiis
|
||||
adipisci temporibus deleniti omnis totam labore soluta est repellat? Officia quos vero quis rem ex, non dolor
|
||||
alias pariatur quia tempora, qui animi inventore magni, sit quod numquam? Repellendus iste magnam facilis,
|
||||
veniam laboriosam facere animi, iure maiores molestias quidem repudiandae perspiciatis ratione quam blanditiis
|
||||
dicta eos. A fuga nobis nisi eveniet?
|
||||
</p>
|
||||
</div>
|
||||
</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>
|
||||
@@ -0,0 +1,239 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
@@include('head.html')
|
||||
<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>
|
||||
@@include('menu-main.html')
|
||||
|
||||
<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