4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Update home page

Browse Source
This commit is contained in:
NicolasCantu 2025-03-07 16:36:39 +01:00
parent 090bdbedaa
commit cc0d823125
2 changed files with 53 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/4nk.css
View File

@ -316,7 +316,7 @@ h1 {
margin-top: 0px;
}
.sp-address-btn {
.create-btn {
margin-bottom: 2em;
cursor: pointer;
background-color: #d0d0d7;
@ -778,3 +778,41 @@ select[data-multi-select-plugin] {
.process-card-action {
width: 100%;
}
/**************************************** Select Member Home Page ******************************************************/
.custom-select {
width: 100%;
max-height: 150px;
overflow-y: auto;
direction: ltr;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
margin: 10px 0;
}
.custom-select option {
padding: 8px 12px;
cursor: pointer;
}
.custom-select option:hover {
background-color: #f0f0f0;
}
.custom-select::-webkit-scrollbar {
width: 8px;
}
.custom-select::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-select::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.custom-select::-webkit-scrollbar-thumb:hover {
background: #555;
}

24
src/pages/home/home.html
View File

@ -4,24 +4,23 @@
<div class="tab-container">
<div class="tabs">
<div class="tab active" data-tab="tab1">Scan QR Code</div>
<div class="tab" data-tab="tab2">Scan other device</div>
<div class="tab active" data-tab="tab1">Create an account</div>
<div class="tab" data-tab="tab2">Add a device for an existing memeber</div>
</div>
</div>
<div class="page-container">
<div id="tab1" class="card tab-content active">
<div class="card-description">Scan with your other device :</div>
<div class="card-description">Create an account :</div>
<div class="pairing-request"></div>
<div class="card-image qr-code">
<!-- <div class="card-image qr-code">
<img src="assets/qr_code.png" alt="QR Code" width="150" height="150" />
</div>
<button id="copyBtn" class="sp-address-btn"></button>
<div class="card-image emoji-display" id="emoji-display"></div>
</div> -->
<button id="createButton" class="create-btn"></button>
</div>
<div class="separator"></div>
<div id="tab2" class="card tab-content">
<div class="card-description">Scan your other device :</div>
<div class="card-description">Add a device for an existing member :</div>
<div class="card-image camera-card">
<img id="scanner" src="assets/camera.jpg" alt="QR Code" width="150" height="150" />
<button id="scan-btn" onclick="scanDevice()">Scan</button>
@ -31,8 +30,13 @@
</div>
</div>
<p>Or</p>
<input type="text" id="addressInput" placeholder="Paste address" />
<div id="emoji-display-2"></div>
<!-- <input type="text" id="addressInput" placeholder="Paste address" />
<div id="emoji-display-2"></div> -->
<div class="card-description">Chose a member :</div>
<select name="memberSelect" id="memberSelect" size="5" class="custom-select">
<!-- Options -->
</select>
<button id="okButton" style="display: none">OK</button>
</div>
</div>