Oliver/od8n_homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working

Browse Source
This commit is contained in:
Oliver
2025-07-28 07:22:36 -03:00
parent abe9ae4712
commit 7695e30d59
8 changed files with 325 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/widget/box/index.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Order Status Wizard</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="wizard">
<li class="open">
<div class="header">
<i class="fa-solid fa-signature"></i>
<span class="title">Name</span>
</div>
<div class="text">Open</div>
</li>
<li class="done">
<div class="header">
<i class="fa-solid fa-envelope"></i>
<span class="title">Email</span>
</div>
<div class="text">deraa@fewew.de</div>
</li>
<li class="done">
<div class="header">
<i class="fa-solid fa-cart-shopping"></i>
<span class="title">Product</span>
</div>
<div class="text">3 Hours</div>
</li>
</ul>
</body>
</html>

69
public/widget/box/styles.css Normal file
View File

@@ -0,0 +1,69 @@
body {
margin: 0;
font-family: Arial, sans-serif;
}
.wizard {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
background-color: #e0e0e0;
}
.wizard li {
flex: 1;
display: flex;
flex-direction: column;
border-right: 2px solid #fff;
color: white;
box-sizing: border-box;
}
.wizard li:last-child {
border-right: none;
}
.wizard .header {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 10px;
font-weight: bold;
font-size: 16px;
text-align: center;
}
/* Detail text section */
.wizard .text {
padding: 20px 10px;
text-align: center;
font-size: 14px;
flex-grow: 1;
}
/* DARK GREY: Open */
.wizard li.open {
background-color: #7f8c8d;
}
.wizard li.open .header {
background-color: #5d6d7e;
}
/* DARK GREEN: Done */
.wizard li.done {
background-color: #1e8449;
}
.wizard li.done .header {
background-color: #145a32;
}
.wizard i {
font-size: 18px;
}