form-computers/AddDevice.html at main · wilfrad/form-computers · GitHub

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
<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 --blurred-border" 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">
                    <div id="form-general" class="carousel-item active" >
                        <label for="select-device" class="form-label text-start" >Device format : (required)</label>
                        <select 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 type="text" class="form-control"  id="brand-input" name="brand-input" required><br>
                        <label for="storage-input" class="form-label text-start" >Memory storage : (required)</label>
                        <input type="number" class="form-control" id="storage-input" name="storage-input" placeholder="GB" required><br>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end mt-2">
                <input type="button" class="btn btn-primary w-25 ms-2" id="send-form" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next" value="Next">
            </div>
        </div>
    </div>
</form>
<script async type="module" src="/scripts/formControl.js"></script>