2026-03-04T08-40-23_auto_memory/memories.db
This commit is contained in:
parent
7e646eaac8
commit
bedc39d2bc
399
booking-story2.html
Normal file
399
booking-story2.html
Normal file
@ -0,0 +1,399 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Caveat:wght@400;600;700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
background: #111;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: 'DM Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story {
|
||||||
|
width: 540px;
|
||||||
|
height: 960px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #e8e0d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Harlequin bg */
|
||||||
|
.story::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(45deg, #1a0808 25%, transparent 25%),
|
||||||
|
linear-gradient(-45deg, #1a0808 25%, transparent 25%),
|
||||||
|
linear-gradient(45deg, transparent 75%, #1a0808 75%),
|
||||||
|
linear-gradient(-45deg, transparent 75%, #1a0808 75%);
|
||||||
|
background-size: 40px 40px;
|
||||||
|
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
|
||||||
|
opacity: 0.12;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 28px 26px 20px 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Film strip */
|
||||||
|
.filmstrip {
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 22px;
|
||||||
|
background: #1a0808;
|
||||||
|
z-index: 5;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
.filmstrip .hole {
|
||||||
|
width: 8px; height: 12px;
|
||||||
|
background: #e8e0d0;
|
||||||
|
border-radius: 2px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SVG stickers */
|
||||||
|
.sticker {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 30;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .shop-name {
|
||||||
|
font-family: 'Caveat', cursive;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #8B1A1A;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appointments-text {
|
||||||
|
font-family: 'Fredoka One', cursive;
|
||||||
|
font-size: 2.8rem;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
.appointments-text .a1 { color: #C0392B; }
|
||||||
|
.appointments-text .a2 { color: #1a6b3a; }
|
||||||
|
.appointments-text .a3 { color: #1a4a8B; }
|
||||||
|
|
||||||
|
.available-text {
|
||||||
|
font-family: 'Fredoka One', cursive;
|
||||||
|
font-size: 2.2rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.available-text .v1 { color: #8B1A1A; }
|
||||||
|
.available-text .v2 { color: #1a5a2a; }
|
||||||
|
.available-text .v3 { color: #6b1a8B; }
|
||||||
|
|
||||||
|
.month-tag {
|
||||||
|
display: inline-block;
|
||||||
|
background: #1a0808;
|
||||||
|
color: #e8e0d0;
|
||||||
|
font-family: 'Caveat', cursive;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 2px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Polaroids */
|
||||||
|
.dates-area {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.polaroid {
|
||||||
|
background: #f5f0e8;
|
||||||
|
padding: 8px 8px 24px;
|
||||||
|
box-shadow: 2px 3px 8px rgba(0,0,0,0.25);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.polaroid:nth-child(1) { transform: rotate(-2deg); }
|
||||||
|
.polaroid:nth-child(2) { transform: rotate(1.5deg); }
|
||||||
|
.polaroid:nth-child(3) { transform: rotate(2deg); }
|
||||||
|
.polaroid:nth-child(4) { transform: rotate(-1deg); }
|
||||||
|
|
||||||
|
.polaroid-inner {
|
||||||
|
background: #1a0808;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 8px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.polaroid-inner::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(45deg, #2a0808 25%, transparent 25%),
|
||||||
|
linear-gradient(-45deg, #2a0808 25%, transparent 25%),
|
||||||
|
linear-gradient(45deg, transparent 75%, #2a0808 75%),
|
||||||
|
linear-gradient(-45deg, transparent 75%, #2a0808 75%);
|
||||||
|
background-size: 18px 18px;
|
||||||
|
background-position: 0 0, 0 9px, 9px -9px, -9px 0px;
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-num {
|
||||||
|
font-family: 'Fredoka One', cursive;
|
||||||
|
font-size: 2.2rem;
|
||||||
|
color: #e8e0d0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.date-detail {
|
||||||
|
font-family: 'Caveat', cursive;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #C0392B;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
.slots-list {
|
||||||
|
list-style: none;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-top: 6px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
.slots-list li {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
color: #a89080;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
.polaroid .caption {
|
||||||
|
font-family: 'Caveat', cursive;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: #3a1a1a;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tape */
|
||||||
|
.tape {
|
||||||
|
position: absolute;
|
||||||
|
width: 45px;
|
||||||
|
height: 16px;
|
||||||
|
background: rgba(200,180,140,0.5);
|
||||||
|
z-index: 25;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 8px;
|
||||||
|
border-top: 1px dashed rgba(26,8,8,0.25);
|
||||||
|
}
|
||||||
|
.footer .ready {
|
||||||
|
font-family: 'Fredoka One', cursive;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #1a0808;
|
||||||
|
}
|
||||||
|
.footer .website {
|
||||||
|
font-family: 'Caveat', cursive;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #8B1A1A;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
.footer .dm {
|
||||||
|
font-family: 'Caveat', cursive;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #5a3030;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="story">
|
||||||
|
<div class="filmstrip">
|
||||||
|
<div class="hole"></div><div class="hole"></div><div class="hole"></div>
|
||||||
|
<div class="hole"></div><div class="hole"></div><div class="hole"></div>
|
||||||
|
<div class="hole"></div><div class="hole"></div><div class="hole"></div>
|
||||||
|
<div class="hole"></div><div class="hole"></div><div class="hole"></div>
|
||||||
|
<div class="hole"></div><div class="hole"></div><div class="hole"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tape pieces -->
|
||||||
|
<div class="tape" style="top:238px; left:78px; transform:rotate(-14deg);"></div>
|
||||||
|
<div class="tape" style="top:238px; right:36px; transform:rotate(11deg);"></div>
|
||||||
|
<div class="tape" style="top:496px; left:68px; transform:rotate(9deg);"></div>
|
||||||
|
<div class="tape" style="top:496px; right:46px; transform:rotate(-9deg);"></div>
|
||||||
|
|
||||||
|
<!-- SVG Sticker Flowers & Stars scattered around -->
|
||||||
|
|
||||||
|
<!-- Top left flower (orange) -->
|
||||||
|
<svg class="sticker" style="top:16px; left:28px; width:48px; height:48px;" viewBox="0 0 100 100">
|
||||||
|
<circle cx="50" cy="50" r="18" fill="#C0392B"/>
|
||||||
|
<ellipse cx="50" cy="18" rx="12" ry="18" fill="#C0392B" opacity="0.85"/>
|
||||||
|
<ellipse cx="50" cy="82" rx="12" ry="18" fill="#C0392B" opacity="0.85"/>
|
||||||
|
<ellipse cx="18" cy="50" rx="18" ry="12" fill="#C0392B" opacity="0.85"/>
|
||||||
|
<ellipse cx="82" cy="50" rx="18" ry="12" fill="#C0392B" opacity="0.85"/>
|
||||||
|
<ellipse cx="27" cy="27" rx="12" ry="18" fill="#C0392B" opacity="0.7" transform="rotate(45 27 27)"/>
|
||||||
|
<ellipse cx="73" cy="27" rx="12" ry="18" fill="#C0392B" opacity="0.7" transform="rotate(-45 73 27)"/>
|
||||||
|
<ellipse cx="27" cy="73" rx="12" ry="18" fill="#C0392B" opacity="0.7" transform="rotate(-45 27 73)"/>
|
||||||
|
<ellipse cx="73" cy="73" rx="12" ry="18" fill="#C0392B" opacity="0.7" transform="rotate(45 73 73)"/>
|
||||||
|
<circle cx="50" cy="50" r="14" fill="#e8c030"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Top right flower (dark green) -->
|
||||||
|
<svg class="sticker" style="top:12px; right:28px; width:42px; height:42px;" viewBox="0 0 100 100">
|
||||||
|
<circle cx="50" cy="50" r="18" fill="#1a5a2a"/>
|
||||||
|
<ellipse cx="50" cy="18" rx="12" ry="18" fill="#1a5a2a" opacity="0.85"/>
|
||||||
|
<ellipse cx="50" cy="82" rx="12" ry="18" fill="#1a5a2a" opacity="0.85"/>
|
||||||
|
<ellipse cx="18" cy="50" rx="18" ry="12" fill="#1a5a2a" opacity="0.85"/>
|
||||||
|
<ellipse cx="82" cy="50" rx="18" ry="12" fill="#1a5a2a" opacity="0.85"/>
|
||||||
|
<ellipse cx="27" cy="27" rx="12" ry="18" fill="#1a5a2a" opacity="0.7" transform="rotate(45 27 27)"/>
|
||||||
|
<ellipse cx="73" cy="27" rx="12" ry="18" fill="#1a5a2a" opacity="0.7" transform="rotate(-45 73 27)"/>
|
||||||
|
<ellipse cx="27" cy="73" rx="12" ry="18" fill="#1a5a2a" opacity="0.7" transform="rotate(-45 27 73)"/>
|
||||||
|
<ellipse cx="73" cy="73" rx="12" ry="18" fill="#1a5a2a" opacity="0.7" transform="rotate(45 73 73)"/>
|
||||||
|
<circle cx="50" cy="50" r="14" fill="#e87060"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- 4-point sparkle top center left -->
|
||||||
|
<svg class="sticker" style="top:22px; left:140px; width:24px; height:24px;" viewBox="0 0 100 100">
|
||||||
|
<path d="M50 5 L55 45 L95 50 L55 55 L50 95 L45 55 L5 50 L45 45 Z" fill="#6b1a8B"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- 4-point sparkle top center right -->
|
||||||
|
<svg class="sticker" style="top:28px; right:80px; width:20px; height:20px;" viewBox="0 0 100 100">
|
||||||
|
<path d="M50 5 L55 45 L95 50 L55 55 L50 95 L45 55 L5 50 L45 45 Z" fill="#1a4a8B"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- small star top -->
|
||||||
|
<svg class="sticker" style="top:52px; left:100px; width:16px; height:16px;" viewBox="0 0 100 100">
|
||||||
|
<path d="M50 5 L55 45 L95 50 L55 55 L50 95 L45 55 L5 50 L45 45 Z" fill="#C0392B"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Bottom left flower (pink) -->
|
||||||
|
<svg class="sticker" style="bottom:80px; left:30px; width:44px; height:44px;" viewBox="0 0 100 100">
|
||||||
|
<circle cx="50" cy="50" r="18" fill="#8B1a6a"/>
|
||||||
|
<ellipse cx="50" cy="18" rx="12" ry="18" fill="#8B1a6a" opacity="0.85"/>
|
||||||
|
<ellipse cx="50" cy="82" rx="12" ry="18" fill="#8B1a6a" opacity="0.85"/>
|
||||||
|
<ellipse cx="18" cy="50" rx="18" ry="12" fill="#8B1a6a" opacity="0.85"/>
|
||||||
|
<ellipse cx="82" cy="50" rx="18" ry="12" fill="#8B1a6a" opacity="0.85"/>
|
||||||
|
<ellipse cx="27" cy="27" rx="12" ry="18" fill="#8B1a6a" opacity="0.7" transform="rotate(45 27 27)"/>
|
||||||
|
<ellipse cx="73" cy="27" rx="12" ry="18" fill="#8B1a6a" opacity="0.7" transform="rotate(-45 73 27)"/>
|
||||||
|
<ellipse cx="27" cy="73" rx="12" ry="18" fill="#8B1a6a" opacity="0.7" transform="rotate(-45 27 73)"/>
|
||||||
|
<ellipse cx="73" cy="73" rx="12" ry="18" fill="#8B1a6a" opacity="0.7" transform="rotate(45 73 73)"/>
|
||||||
|
<circle cx="50" cy="50" r="14" fill="#e8c030"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Bottom right scattered stars -->
|
||||||
|
<svg class="sticker" style="bottom:110px; right:30px; width:22px; height:22px;" viewBox="0 0 100 100">
|
||||||
|
<path d="M50 5 L55 45 L95 50 L55 55 L50 95 L45 55 L5 50 L45 45 Z" fill="#1a4a8B"/>
|
||||||
|
</svg>
|
||||||
|
<svg class="sticker" style="bottom:140px; right:55px; width:16px; height:16px;" viewBox="0 0 100 100">
|
||||||
|
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#C0392B"/>
|
||||||
|
</svg>
|
||||||
|
<svg class="sticker" style="bottom:90px; right:65px; width:18px; height:18px;" viewBox="0 0 100 100">
|
||||||
|
<path d="M50 5 L55 45 L95 50 L55 55 L50 95 L45 55 L5 50 L45 45 Z" fill="#1a5a2a"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Small daisy bottom center -->
|
||||||
|
<svg class="sticker" style="bottom:78px; left:50%; transform:translateX(-50%); width:30px; height:30px;" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="50" cy="20" rx="9" ry="16" fill="#C0392B"/>
|
||||||
|
<ellipse cx="50" cy="80" rx="9" ry="16" fill="#C0392B"/>
|
||||||
|
<ellipse cx="20" cy="50" rx="16" ry="9" fill="#C0392B"/>
|
||||||
|
<ellipse cx="80" cy="50" rx="16" ry="9" fill="#C0392B"/>
|
||||||
|
<ellipse cx="29" cy="29" rx="9" ry="16" fill="#C0392B" transform="rotate(45 29 29)"/>
|
||||||
|
<ellipse cx="71" cy="29" rx="9" ry="16" fill="#C0392B" transform="rotate(-45 71 29)"/>
|
||||||
|
<ellipse cx="29" cy="71" rx="9" ry="16" fill="#C0392B" transform="rotate(-45 29 71)"/>
|
||||||
|
<ellipse cx="71" cy="71" rx="9" ry="16" fill="#C0392B" transform="rotate(45 71 71)"/>
|
||||||
|
<circle cx="50" cy="50" r="12" fill="#e8c030"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div class="header">
|
||||||
|
<div class="shop-name">✦ grimm tatts ✦</div>
|
||||||
|
<div class="appointments-text">
|
||||||
|
<span class="a1">Appoint</span><span class="a2">ments</span>
|
||||||
|
</div>
|
||||||
|
<div class="available-text">
|
||||||
|
<span class="v1">Avail</span><span class="v2">able</span><span class="v3">!</span>
|
||||||
|
</div>
|
||||||
|
<div class="month-tag">march · colorado springs</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dates-area">
|
||||||
|
<div class="polaroid">
|
||||||
|
<div class="polaroid-inner">
|
||||||
|
<div class="date-num">03.21</div>
|
||||||
|
<div class="date-detail">friday</div>
|
||||||
|
<ul class="slots-list">
|
||||||
|
<li>12:00 pm</li><li>3:00 pm</li><li>6:00 pm</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="caption">all day ♥</div>
|
||||||
|
</div>
|
||||||
|
<div class="polaroid">
|
||||||
|
<div class="polaroid-inner">
|
||||||
|
<div class="date-num">03.24</div>
|
||||||
|
<div class="date-detail">monday</div>
|
||||||
|
<ul class="slots-list">
|
||||||
|
<li>12:00 pm</li><li>3:00 pm</li><li>6:00 pm</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="caption">all day ♥</div>
|
||||||
|
</div>
|
||||||
|
<div class="polaroid">
|
||||||
|
<div class="polaroid-inner">
|
||||||
|
<div class="date-num">03.26</div>
|
||||||
|
<div class="date-detail">wednesday</div>
|
||||||
|
<ul class="slots-list">
|
||||||
|
<li>12:00 pm</li><li>3:00 pm</li><li>6:00 pm</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="caption">all day ♥</div>
|
||||||
|
</div>
|
||||||
|
<div class="polaroid">
|
||||||
|
<div class="polaroid-inner">
|
||||||
|
<div class="date-num">03.31</div>
|
||||||
|
<div class="date-detail">monday</div>
|
||||||
|
<ul class="slots-list">
|
||||||
|
<li>12:00 pm</li><li>3:00 pm</li><li>6:00 pm</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="caption">all day ♥</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<div class="ready">ready to book? ✦</div>
|
||||||
|
<div class="website">grimmtatts.glossgenius.com</div>
|
||||||
|
<div class="dm">or dm @grimmtatt ♠</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user