377 lines
12 KiB
HTML
377 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Brand Icon Preview</title>
|
|
<style>
|
|
:root {
|
|
--page: #fbf6ee;
|
|
--ink: #725234;
|
|
--ink-soft: #b78d63;
|
|
--line: #e8dccd;
|
|
--card: #fffaf2;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), transparent 34rem),
|
|
linear-gradient(135deg, #fffaf3 0%, var(--page) 45%, #fff8ee 100%);
|
|
color: var(--ink);
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
main {
|
|
width: min(1120px, calc(100vw - 32px));
|
|
margin: 0 auto;
|
|
padding: 56px 0 72px;
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: clamp(28px, 4vw, 44px);
|
|
line-height: 1.05;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
header p {
|
|
max-width: 680px;
|
|
margin: 12px 0 0;
|
|
color: rgba(114, 82, 52, 0.72);
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 34px 54px;
|
|
}
|
|
|
|
.tile {
|
|
text-align: center;
|
|
}
|
|
|
|
.icon-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
aspect-ratio: 1;
|
|
border: 1px solid var(--line);
|
|
border-radius: 24px;
|
|
background: rgba(255, 250, 242, 0.72);
|
|
box-shadow: 0 12px 32px rgba(114, 82, 52, 0.06);
|
|
}
|
|
|
|
.icon-box svg {
|
|
width: 68%;
|
|
height: 68%;
|
|
color: var(--ink);
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.label {
|
|
margin-top: 10px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.label code {
|
|
display: block;
|
|
margin-top: 3px;
|
|
color: rgba(114, 82, 52, 0.58);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 28px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
main {
|
|
width: min(420px, calc(100vw - 28px));
|
|
padding-top: 34px;
|
|
}
|
|
|
|
.grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 22px 18px;
|
|
}
|
|
|
|
.icon-box {
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.label {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Brand Icon Preview</h1>
|
|
<p>
|
|
Preview SVG line icons for a HomAroma-style brand icon set. These are standalone SVG sketches using
|
|
<code>currentColor</code>, so the color can follow the theme later.
|
|
</p>
|
|
</header>
|
|
|
|
<section class="grid" aria-label="Brand icon preview grid">
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M18 26c0-6 28-6 28 0" />
|
|
<path d="M18 26v20c0 6 28 6 28 0V26" />
|
|
<path d="M24 35h16v12H24z" />
|
|
<path d="M32 27V14" />
|
|
<path d="M32 14c-5 7-5 12 0 16c5-4 5-9 0-16z" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">1. Aroma Candle<code>aromaCandle</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M21 34c0-8 4-14 11-14s11 6 11 14v10c0 6-4 10-11 10S21 50 21 44V34z" />
|
|
<path d="M22 40c5-3 9-3 14 0s8 3 13 0" />
|
|
<path d="M22 46c5-3 9-3 14 0s8 3 13 0" />
|
|
<path d="M26 55h3" />
|
|
<path d="M35 55h3" />
|
|
<path d="M27 13c-3 4-3 7 0 11" />
|
|
<path d="M35 10c-3 5-3 8 0 13" />
|
|
<path d="M43 13c-3 4-3 7 0 11" />
|
|
<circle cx="32" cy="49" r="2" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">2. Diffuser<code>diffuser</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M25 17h14" />
|
|
<path d="M24 21h16" />
|
|
<path d="M25 21v-9h14v9" />
|
|
<path d="M26 25h12c3 0 5 2 5 5v22c0 3-2 5-5 5H26c-3 0-5-2-5-5V30c0-3 2-5 5-5z" />
|
|
<path d="M21 37h22" />
|
|
<path d="M21 49h22" />
|
|
<path d="M31 46c-4-4-4-9 0-14c4 5 4 10 0 14z" />
|
|
<path d="M39 55c5-11 12-17 18-19" />
|
|
<path d="M48 44c-1-5 2-9 7-12c1 6-2 10-7 12z" />
|
|
<path d="M45 50c-5-2-8-6-8-12c5 2 8 6 8 12z" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">3. Essential Oil<code>essentialOil</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M16 24l7-10l32 5l-7 10z" />
|
|
<path d="M16 24v23l32 6V29" />
|
|
<path d="M55 19v23l-7 11" />
|
|
<path d="M29 30h13v16H29z" />
|
|
<path d="M36 30v16" />
|
|
<path d="M25 50c6-8 17-8 23 0" />
|
|
<path d="M31 47c-3-2-7-1-9 2c4 1 7 1 9-2z" />
|
|
<path d="M39 47c3-2 7-1 9 2c-4 1-7 1-9-2z" />
|
|
<path d="M44 31h5v12h-5z" />
|
|
<path d="M45 27h3" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">4. Gift Set<code>giftSet</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M34 55c0-14 6-25 19-32" />
|
|
<path d="M44 39c7-1 10-5 12-12c-7 1-11 5-12 12z" />
|
|
<path d="M30 30c-8 2-14-2-16-9c5-6 13-4 16 3c3-7 11-9 16-3c-2 7-8 11-16 9z" />
|
|
<path d="M30 24v13" />
|
|
<path d="M21 27c3 4 7 6 9 3" />
|
|
<path d="M39 27c-3 4-7 6-9 3" />
|
|
<circle cx="30" cy="30" r="3" />
|
|
<circle cx="13" cy="36" r="1.5" />
|
|
<circle cx="49" cy="17" r="1.5" />
|
|
<circle cx="52" cy="28" r="1.2" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">5. Floral Scent<code>floralScent</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<circle cx="28" cy="35" r="15" />
|
|
<circle cx="43" cy="36" r="10" />
|
|
<path d="M28 20c0-8 6-11 12-10c-1 7-5 11-12 10z" />
|
|
<path d="M28 20c-2-6-7-9-13-8c2 6 6 9 13 8z" />
|
|
<path d="M43 27v18" />
|
|
<path d="M34 36h18" />
|
|
<path d="M36 30l14 12" />
|
|
<path d="M50 30L36 42" />
|
|
<path d="M21 29h.1" />
|
|
<path d="M17 38h.1" />
|
|
<path d="M27 46h.1" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">6. Citrus Scent<code>citrusScent</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<circle cx="28" cy="35" r="15" />
|
|
<circle cx="28" cy="35" r="10" />
|
|
<circle cx="28" cy="35" r="5" />
|
|
<path d="M20 22c5-5 13-7 21-4" />
|
|
<path d="M41 19c4 3 6 8 6 13" />
|
|
<path d="M42 47c4-10 10-16 17-19" />
|
|
<path d="M50 36c-1-5 2-9 7-12c1 6-2 10-7 12z" />
|
|
<path d="M46 43c-5-2-8-6-8-12c5 2 8 6 8 12z" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">7. Woody Scent<code>woodyScent</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M17 53c10-17 24-30 40-39" />
|
|
<path d="M30 39c-6-1-10-5-11-12c7 1 11 5 11 12z" />
|
|
<path d="M38 31c-1-7 2-12 8-16c2 7-1 13-8 16z" />
|
|
<path d="M45 25c6 0 10 3 12 9c-7 1-11-2-12-9z" />
|
|
<path d="M25 45c-7 0-12-4-14-10c7-1 12 3 14 10z" />
|
|
<path d="M43 44c5-2 10-1 14 4c-6 3-11 1-14-4z" />
|
|
<path d="M50 17c-3-4-3-8 1-12c4 5 4 9-1 12z" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">8. Herbal Scent<code>herbalScent</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<circle cx="27" cy="27" r="17" />
|
|
<path d="M39 39l15 15" />
|
|
<path d="M48 48l5-5l6 6l-5 5z" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">9. Search<code>search</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M32 53S13 38 13 24c0-8 6-13 13-13c4 0 7 2 10 6c3-4 6-6 10-6c7 0 13 5 13 13c0 14-19 29-27 29z" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">10. Wishlist<code>wishlist</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M18 22h30l3 30H15z" />
|
|
<path d="M25 22v-4c0-5 4-9 9-9s9 4 9 9v4" />
|
|
<path d="M25 22h18" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">11. Shopping Bag<code>shoppingBag</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<circle cx="32" cy="32" r="21" />
|
|
<path d="M11 32h42" />
|
|
<path d="M32 11c6 6 9 13 9 21s-3 15-9 21" />
|
|
<path d="M32 11c-6 6-9 13-9 21s3 15 9 21" />
|
|
<path d="M16 21h32" />
|
|
<path d="M16 43h32" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">12. Language<code>language</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M8 39h26V24H8" />
|
|
<path d="M34 29h12l8 8v9H34z" />
|
|
<path d="M12 47a5 5 0 1 0 10 0a5 5 0 0 0-10 0z" />
|
|
<path d="M42 47a5 5 0 1 0 10 0a5 5 0 0 0-10 0z" />
|
|
<path d="M2 31h10" />
|
|
<path d="M5 25h9" />
|
|
<path d="M15 34h15" />
|
|
<path d="M18 29h10" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">13. Free Shipping<code>freeShipping</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M16 20l18-8l18 8v24l-18 8l-18-8z" />
|
|
<path d="M16 20l18 8l18-8" />
|
|
<path d="M34 28v24" />
|
|
<path d="M25 16l18 8" />
|
|
<circle cx="47" cy="45" r="11" />
|
|
<path d="M47 38v8h6" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">14. Same-Day Shipping<code>sameDayShipping</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M16 28h32v24H16z" />
|
|
<path d="M13 20h38v8H13z" />
|
|
<path d="M32 20v32" />
|
|
<path d="M18 28c6-9 14-9 14-1" />
|
|
<path d="M46 28c-6-9-14-9-14-1" />
|
|
<path d="M48 36l8 4l-5 3l2 6l-8-4z" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">15. Gift Wrapping<code>giftWrapping</code></div>
|
|
</article>
|
|
|
|
<article class="tile">
|
|
<div class="icon-box">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true">
|
|
<path d="M14 30c0-10 9-18 20-18s20 8 20 18s-9 18-20 18c-3 0-6-.5-9-2l-11 5l3-10c-2-3-3-7-3-11z" />
|
|
<circle cx="26" cy="30" r="1.8" />
|
|
<circle cx="34" cy="30" r="1.8" />
|
|
<circle cx="42" cy="30" r="1.8" />
|
|
</svg>
|
|
</div>
|
|
<div class="label">16. Customer Support<code>customerSupport</code></div>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|