-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
78 lines (78 loc) · 5.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My crud page</title>
<link rel="apple-touch-icon" sizes="180x180" href="/resource/icon/icon-car-blue-logo.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/resource/icon/icon-car-blue-logo.png">
<link rel="icon" type="image/png" sizes="16x16" href="/resource/icon/icon-car-blue-logo.png">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/lib/bootstrap-5.2.0-dist/css/bootstrap.css">
</head>
<body class="--background-gradient-blue">
<header>
<nav tabindex="0" class="bg-light pt-3">
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a class="nav-link active" id="nav-btn-form" aria-current="page" href="#">Add</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-btn-table" href="#">Data</a>
</li>
</ul>
</nav>
</header>
<main id="container"><form id="container-from" class="card w-75 h-75 mt-4 position-absolute top-50 start-50 translate-middle" id="form-main">
<div class="card-header">
<span id="main-section-title">Add new device</span>
<span id="sub-section" hidden>
<img class="mx-1" src="/resource/icon/sub-section.svg" alt="...">
<span id="sub-section-title">Laptop</span>
</span>
</div>
<div class="row g-0 w-100 h-100">
<div class="col-4 d-flex justify-content-center align-items-center p-2">
<img src="resource/img/form-img-laptop.jpg" class="card-img w-100" alt="form-card-image">
</div>
<div class="col-8 p-2 d-flex flex-column justify-content-between">
<div id="carouselExampleControlsNoTouching" class="carousel slide h-100 d-inline-flex flex-column justify-content-center" data-bs-ride="false">
<div id="container-forms" class="carousel-inner d-flex align-items-center p-1">
<div id="form-general" class="carousel-item active" >
<label for="select-device" class="form-label text-start" >Device format : (required)</label>
<select tabindex="1" name="select-device" class="form-select" id="select-device">
<option value="" selected disabled hidden>Select a type</option>
<option value="laptop">Laptop</option>
<option value="desk">Desk</option>
</select><br>
<label for="brand-input" class="form-label text-start" >Brand : (required)</label>
<input tabindex="2" type="text" class="form-control" id="brand-input" name="brand-input" required><br>
<label for="model-input" class="form-label text-start" >Model : (required)</label>
<input tabindex="3" type="text" class="form-control" id="model-input" name="model-input" required><br>
<label for="storage-input" class="form-label text-start" >Memory storage : (required)</label>
<input tabindex="4" type="number" class="form-control" id="storage-input" name="storage-input" placeholder="GB" required>
</div>
<div id="form-format" class="carousel-item"></div>
<div id="form-additional" class="carousel-item additional-quest">
<label for="img-input" class="form-label text-start" >Image : </label>
<input tabindex="7" type="file" class="form-control" id="img-input" name="img-input" accept=".png,.jpg,.svg"><br>
<label for="description-input" class="form-label text-start" >Description :</label>
<textarea tabindex="8" class="form-control size-f" id="description-input" name="description-input" rows="3" cols="30" placeholder="observations and comments"></textarea>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<input type="button" class="btn btn-secondary text-center w-25 ms-2" id="prev-form" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev" disabled value="Back">
<input type="button" class="btn btn-primary text-center w-25 ms-2" id="send-form" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next" disabled value="Next">
</div>
</div>
</div>
</form>
<script async type="module" src="./scripts/formControl.js"></script>
</main>
<script async type="module" src="/main.js"></script>
<script type="text/javascript" src="/lib/bootstrap-5.2.0-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="/lib/popper/popper.js"></script>
</body>
</html>