<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Order Detail</title>
<style>
* {
box-sizing: border-box;
}
:root {
--red: #ef3a3a;
--green: #44c05c;
--text: #111;
--border: #ececec;
--bg: #f6f6f6;
--muted: #8b8b8b;
}
body {
margin: 0;
font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;
color: var(--text);
background: var(--bg);
}
.wrap {
width: 100vw;
max-width: 1365px;
margin: 0 auto;
padding: 8px 6px 0;
}
.topbar {
height: 56px;
/* background: #fff; */
/* border: 1px solid var(--border); */
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
font-size: 15px;
font-weight: 700;
}
.order-no {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.icon-action {
position: relative;
width: 30px;
height: 30px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 12px;
overflow: visible;
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
cursor: pointer;
}
.copy {
width: 16px;
height: 16px;
object-fit: contain;
display: block;
filter: grayscale(0.08) contrast(1.05);
}
.icon-action.copy-action {
background: linear-gradient(145deg, #ffffff, #eef4ff);
border: 1px solid #dbe4ff;
box-shadow:
0 2px 8px rgba(51, 90, 170, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.icon-action.copy-action:hover {
transform: translateY(-1px) scale(1.05);
box-shadow:
0 6px 14px rgba(51, 90, 170, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
background: linear-gradient(145deg, #ffffff, #e8f1ff);
}
.order_operation_log {
width: 16px;
height: 16px;
object-fit: contain;
display: block;
filter: saturate(1.2) contrast(1.08);
}
.icon-action.log-action {
background: linear-gradient(145deg, #fff7f8, #ffe8eb);
border: 1px solid #ffc5cf;
box-shadow:
0 0 0 0 rgba(239, 58, 58, 0.36),
0 3px 10px rgba(239, 58, 58, 0.22);
animation: logPulse 1.9s ease-out infinite;
}
.icon-action.log-action::after {
content: "";
position: absolute;
top: -3px;
right: -2px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff2e2e;
box-shadow:
0 0 0 2px #fff,
0 0 8px rgba(255, 46, 46, 0.8);
animation: dotBlink 1s ease-in-out infinite;
}
.icon-action.log-action:hover {
transform: translateY(-1px) scale(1.08);
box-shadow:
0 0 0 8px rgba(239, 58, 58, 0.16),
0 8px 18px rgba(239, 58, 58, 0.34);
animation: logPulse 1.2s ease-out infinite, logShake 0.9s ease-in-out infinite;
}
.log-tip {
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(-6px) scale(0.97);
transform-origin: left center;
padding: 7px 11px;
min-width: 150px;
border-radius: 10px;
border: 1px solid #e9ecf3;
background: #ffffff;
color: #23252d;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.12px;
text-align: left;
white-space: nowrap;
box-shadow:
0 8px 24px rgba(23, 33, 61, 0.15),
0 1px 0 rgba(255, 255, 255, 0.7) inset;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.22s ease, visibility 0.2s ease;
z-index: 12;
}
.log-tip::after {
content: "";
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #ffffff;
}
.log-tip::before {
content: "";
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid #e9ecf3;
}
.icon-action.log-action:hover .log-tip {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0) scale(1);
}
@keyframes logPulse {
0% {
box-shadow:
0 0 0 0 rgba(239, 58, 58, 0.35),
0 3px 10px rgba(239, 58, 58, 0.2);
}
70% {
box-shadow:
0 0 0 9px rgba(239, 58, 58, 0),
0 5px 12px rgba(239, 58, 58, 0.25);
}
100% {
box-shadow:
0 0 0 0 rgba(239, 58, 58, 0),
0 3px 10px rgba(239, 58, 58, 0.2);
}
}
@keyframes dotBlink {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.18); opacity: 0.72; }
}
@keyframes logShake {
0%, 100% { transform: translateY(-1px) rotate(0deg) scale(1.08); }
25% { transform: translateY(-1px) rotate(-3deg) scale(1.08); }
75% { transform: translateY(-1px) rotate(3deg) scale(1.08); }
}
.copy-icon {
width: 16px;
height: 16px;
border: 1px solid #777;
border-radius: 2px;
position: relative;
margin-left: 6px;
}
.copy-icon::before {
content: "";
position: absolute;
left: -5px;
top: -5px;
width: 16px;
height: 16px;
border: 1px solid #aaa;
border-radius: 2px;
background: #fff;
}
.badge {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--red);
color: #fff;
font-size: 14px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: -4px;
margin-top: -11px;
}
.btn-cs {
border: none;
background: var(--red);
color: #fff;
font-size: 15px;
font-weight: 700;
border-radius: 16px;
height: 36px;
padding: 0 22px;
cursor: pointer;
line-height: 36px;
}
.caret {
display: inline-block;
margin-left: 4px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #fff;
vertical-align: middle;
}
.card {
background: #fff;
border: 1px solid var(--border);
margin-top: 10px;
}
.timeline-head {
display: flex;
justify-content: space-between;
padding: 16px 14px 10px;
font-size: 14px;
font-weight: 700;
}
.red {
color: var(--red);
font-size: 14px;
}
.steps {
padding: 5px 28px 14px;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
align-items: start;
}
.step {
text-align: center;
position: relative;
}
.step:not(:last-child)::after {
content: "";
position: absolute;
right: -50%;
top: 20px;
width: 100%;
height: 4px;
background: #f0f0f0;
z-index: 0;
border-radius: 3px;
}
.step.done:not(:last-child)::after {
background: var(--green);
}
.dot {
width: 42px;
height: 42px;
border-radius: 50%;
margin: 0 auto;
border: 4px solid #f0f0f0;
background: #fff;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: #c4c4c4;
}
.done .dot {
background: var(--green);
color: #fff;
border-color: #def3e3;
}
.step-title {
margin-top: 8px;
font-size: 16px;
font-weight: 700;
line-height: 1.15;
}
.done .step-title {
color: var(--green);
}
.step-date {
font-size: 15px;
font-weight: 700;
color: var(--green);
line-height: 1.05;
min-height: 16px;
}
.section {
background: #fff;
border: 1px solid var(--border);
margin-top: 10px;
padding: 14px 14px 12px;
}
.title {
font-size: 15px;
font-weight: 700;
margin-bottom: 14px;
}
.line-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.line-left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.label {
font-size: 15px;
font-weight: 700;
white-space: nowrap;
}
.address {
font-size: 14px;
font-weight: 700;
background: #f8f8f8;
border-radius: 18px;
padding: 4px 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 845px;
}
.btn-change,
.btn-view {
border: 1px solid var(--red);
color: var(--red);
background: #fff;
border-radius: 16px;
font-size: 13px;
font-weight: 700;
height: 30px;
padding: 0 18px;
cursor: pointer;
white-space: nowrap;
}
.btn-view {
background: var(--red);
color: #fff;
border: none;
border-radius: 16px;
height: 30px;
padding: 0 20px;
}
.subline {
font-size: 14px;
font-weight: 700;
margin-bottom: 12px;
}
.product-row {
border: 1px solid var(--border);
padding: 10px 10px;
display: grid;
grid-template-columns: 22px 170px 1fr 70px 260px;
align-items: center;
column-gap: 12px;
}
.check {
width: 14px;
height: 14px;
border: 1px solid #d6d6d6;
border-radius: 2px;
}
.thumb {
width: 170px;
height: 112px;
object-fit: cover;
border: 1px solid #dfdfdf;
background: #e9e9e9;
}
.p-name {
font-size: 15px;
margin-bottom: 8px;
color: #2f2f2f;
}
.p-text {
font-size: 13px;
margin-bottom: 5px;
color: #2f2f2f;
line-height: 1.15;
}
.p-link {
color: var(--red);
text-decoration: underline;
font-weight: 700;
}
.qty {
width: 30px;
height: 24px;
border: 1px solid #e2e2e2;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
background: #f7f7f7;
}
.price-col {
justify-self: end;
width: 240px;
font-size: 14px;
font-weight: 700;
line-height: 1.62;
}
.price-col .row {
display: flex;
justify-content: space-between;
}
.price-col .final span:last-child {
color: var(--red);
}
.bottom {
border-top: 1px solid var(--border);
margin-top: 10px;
padding: 10px 0 2px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.select-all {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #3f3f3f;
padding-left: 8px;
margin-top: 2px;
}
.summary {
width: 250px;
font-size: 14px;
font-weight: 700;
line-height: 1.42;
padding-right: 2px;
}
.summary .row {
display: flex;
justify-content: space-between;
}
.summary .total span {
color: var(--red);
}
.summary .total span:first-child {
letter-spacing: 0.3px;
}
.addr-modal-mask {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
}
.addr-modal-mask.show {
display: flex;
}
.addr-modal {
width: 560px;
max-width: 100%;
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 6px;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.addr-modal-header {
position: relative;
text-align: center;
font-size: 15px;
font-weight: 700;
padding: 18px 46px 14px;
border-bottom: 1px solid #ececec;
line-height: 1.1;
}
.addr-close {
position: absolute;
right: 18px;
top: 12px;
font-size: 30px;
font-weight: 100;
line-height: 1;
color: #555;
cursor: pointer;
user-select: none;
}
.addr-modal-body {
padding: 18px 50px 24px;
}
.addr-field {
margin-bottom: 10px;
}
.addr-label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 700;
}
.addr-input,
.addr-select {
width: 100%;
height: 44px;
border: 1px solid #d8d8d8;
border-radius: 2px;
background: #fff;
font-size: 15px;
padding: 0 10px;
color: #111;
outline: none;
}
.addr-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #bdbdbd 50%),
linear-gradient(135deg, #bdbdbd 50%, transparent 50%);
background-position:
calc(100% - 16px) 18px,
calc(100% - 9px) 18px;
background-size: 7px 7px, 7px 7px;
background-repeat: no-repeat;
padding-right: 30px;
}
.addr-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-bottom: 10px;
}
.addr-confirm-wrap {
padding-top: 8px;
display: flex;
justify-content: center;
}
.addr-confirm {
width: 190px;
height: 44px;
border: none;
border-radius: 22px;
background: var(--red);
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 44px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<div class="topbar">
<div class="order-no">
<span>Order Number：</span>
<span>NK13348</span>
<span class="badge">1</span>
<span class="icon-action copy-action" title="Copy Order Number">
<svg t="1776231789398" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2808" width="20" height="20"><path d="M334.5 704.5V331.4H191v499.8h499.9V704.5H386.3z" fill="#a5b4e1" p-id="2809"></path><path d="M386.3 204.7V652.8h448.1V204.7z" fill="#a5b4e1" p-id="2810"></path></svg>
<!-- <img class="copy" src="https://ordertrack.info/static/admin/images/icon_copy_pc.png" alt="copy" /> -->
</span>
<span class="icon-action log-action" aria-label="Order Operation Record">
<svg t="1776231914159" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3975" width="20" height="20"><path d="M665.6 153.6a102.4 102.4 0 0 1 102.4 102.4v149.5552L502.8352 670.7456a76.8 76.8 0 0 0-18.0992 28.6976l-1.7152 5.4784-10.7008 39.3984a76.8 76.8 0 0 0 81.7408 96.5376l48.5632-4.8384a76.8 76.8 0 0 0 46.6688-22.1184L768 695.1936V768a102.4 102.4 0 0 1-102.4 102.4H256a102.4 102.4 0 0 1-102.4-102.4V256a102.4 102.4 0 0 1 102.4-102.4h409.6z m176.384 250.4192a51.2 51.2 0 1 1 72.3968 72.4224L613.0944 777.7024a25.6 25.6 0 0 1-15.5648 7.3728l-48.5376 4.864a25.6 25.6 0 0 1-27.2384-32.2048l10.7008-39.3984a25.6 25.6 0 0 1 6.5792-11.392L841.984 404.0192zM608 435.2h-345.6a32 32 0 0 0 0 64h345.6a32 32 0 0 0 0-64z m-136.5248-128H262.4a32 32 0 0 0 0 64h209.0752a32 32 0 0 0 0-64z" fill="#f4899b" p-id="3976"></path></svg>
<span class="log-tip">Order Operation Record </span>
</span>
<!-- <span class="copy-icon" aria-hidden="true"></span> -->
</div>
<button class="btn-cs">Customer Service <span class="caret"></span></button>
</div>
<div class="card">
<div class="timeline-head">
<div>Estimated Finish & Shiping Time <span class="red">◷</span> 2026-04-19</div>
<div>Production Time <span class="red">◷</span> 3-5 Working Days</div>
</div>
<div class="steps">
<div class="step done">
<div class="dot">▤</div>
<div class="step-title">Order placed</div>
<div class="step-date">2026-04-11</div>
</div>
<div class="step done">
<div class="dot">✎</div>
<div class="step-title">Desiging</div>
<div class="step-date">2026-04-15</div>
</div>
<div class="step">
<div class="dot">⚙</div>
<div class="step-title">Prducing</div>
<div class="step-date"> </div>
</div>
<div class="step">
<div class="dot">◷</div>
<div class="step-title">Packing</div>
<div class="step-date"> </div>
</div>
<div class="step">
<div class="dot">↵</div>
<div class="step-title">Shipping</div>
<div class="step-date"> </div>
</div>
<div class="step">
<div class="dot">✓</div>
<div class="step-title">Delivred</div>
<div class="step-date"> </div>
</div>
</div>
</div>
<div class="section">
<div class="title">Delivery Info.</div>
<div class="line-row">
<div class="line-left">
<div class="label">Shipping Address:</div>
<div class="address">Jay Anderson, +1319788859, 16805 Sprenger Ave, Eastpointe, Michigan, United States, 48021-3099</div>
</div>
<button class="btn-change" id="changeBtn">Change</button>
</div>
</div>
<div class="section">
<div class="title">Product Info.</div>
<div class="line-row" style="margin-bottom: 10px;">
<div class="subline">Product Qty: 1 Completed Qty: 0</div>
<button class="btn-view">View Design</button>
</div>
<div class="product-row">
<div class="check"></div>
<img class="thumb" alt="product" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160'%3E%3Crect width='240' height='160' fill='%23d9dde2'/%3E%3Crect x='15' y='18' width='95' height='65' fill='%23f9f9f9' stroke='%23a8a8a8'/%3E%3Crect x='130' y='18' width='95' height='65' fill='%23f9f9f9' stroke='%23a8a8a8'/%3E%3Crect x='15' y='95' width='210' height='50' fill='%23f7f7f7' stroke='%23a8a8a8'/%3E%3Ccircle cx='62' cy='50' r='18' fill='%2396b8d5'/%3E%3Ccircle cx='177' cy='50' r='18' fill='%23d9b596'/%3E%3C/svg%3E" />
<div>
<div class="p-name">--W.7.6*H11---</div>
<div class="p-text">Item No.: BXT0P1670X03</div>
<div class="p-text">Unique Code: X2604159130148</div>
<div class="p-text p-link">Design Details & History</div>
<div class="p-text">Product Status: - Desiging</div>
</div>
<div class="qty">x1</div>
<div class="price-col">
<div class="row"><span>Unit price</span><span>($15.95)</span></div>
<div class="row"><span>Total price</span><span>($15.95)</span></div>
<div class="row"><span>Discount Amount</span><span>($0.00)</span></div>
<div class="row final"><span>Actual price</span><span>($15.95)</span></div>
</div>
</div>
<div class="bottom">
<div class="select-all">
<div class="check"></div>
<span>Select All</span>
</div>
<div class="summary">
<div class="row"><span>Order Total</span><span>$25.13</span></div>
<div class="row"><span>Shipping Fee</span><span>$9.99</span></div>
<div class="row"><span>Duty</span><span>$0.80</span></div>
<div class="row total"><span>Grand Total</span><span>$35.92</span></div>
</div>
</div>
</div>
</div>
<div class="addr-modal-mask" id="addrModalMask">
<div class="addr-modal">
<div class="addr-modal-header">
Update Address
<span class="addr-close" id="addrCloseBtn">×</span>
</div>
<div class="addr-modal-body">
<div class="addr-field">
<label class="addr-label" for="recipientName">Recipient name:</label>
<input class="addr-input" id="recipientName" type="text" value="Jay Anderson" />
</div>
<div class="addr-field">
<label class="addr-label" for="recipientArea">Recipient area:</label>
<select class="addr-select" id="recipientArea">
<option selected>United States</option>
</select>
</div>
<div class="addr-row">
<div class="addr-field" style="margin-bottom: 0;">
<label class="addr-label" for="stateInput">State:</label>
<select class="addr-select" id="stateInput">
<option selected>Michigan</option>
</select>
</div>
<div class="addr-field" style="margin-bottom: 0;">
<label class="addr-label" for="cityInput">City:</label>
<input class="addr-input" id="cityInput" type="text" value="Eastpointe" />
</div>
<div class="addr-field" style="margin-bottom: 0;">
<label class="addr-label" for="zipInput">Zip code:</label>
<input class="addr-input" id="zipInput" type="text" value="48021-3099" />
</div>
</div>
<div class="addr-field">
<label class="addr-label" for="streetInput">Street (Please provide detailed street address and Apt.or house number):</label>
<input class="addr-input" id="streetInput" type="text" value="16805 Sprenger Ave" />
</div>
<div class="addr-field">
<label class="addr-label" for="phoneInput">Phone number:</label>
<input class="addr-input" id="phoneInput" type="text" value="+1313978859" />
</div>
<div class="addr-confirm-wrap">
<button class="addr-confirm" id="addrConfirmBtn" type="button">Confirm</button>
</div>
</div>
</div>
</div>
<script>
(function () {
var changeBtn = document.getElementById("changeBtn");
var modalMask = document.getElementById("addrModalMask");
var closeBtn = document.getElementById("addrCloseBtn");
var confirmBtn = document.getElementById("addrConfirmBtn");
if (!changeBtn || !modalMask || !closeBtn || !confirmBtn) {
return;
}
function openModal() {
modalMask.classList.add("show");
}
function closeModal() {
modalMask.classList.remove("show");
}
changeBtn.addEventListener("click", openModal);
closeBtn.addEventListener("click", closeModal);
confirmBtn.addEventListener("click", closeModal);
modalMask.addEventListener("click", function (event) {
if (event.target === modalMask) {
closeModal();
}
});
})();
</script>
</body>
</html>
index.html
md
README.md
index.html