2026-03-04T08-37-15_auto_memory/memories.db
This commit is contained in:
parent
7ab3346cd9
commit
a0269b5555
378
booking-story.html
Normal file
378
booking-story.html
Normal file
@ -0,0 +1,378 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&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: #1a0a0a;
|
||||
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 background */
|
||||
.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.15;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Texture overlay */
|
||||
.story::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
|
||||
opacity: 0.4;
|
||||
z-index: 0;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 30px 28px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.header .shop-name {
|
||||
font-family: 'Caveat', cursive;
|
||||
font-size: 1.1rem;
|
||||
color: #8B1A1A;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2.6rem;
|
||||
color: #1a0808;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.header h1 em {
|
||||
font-style: italic;
|
||||
color: #8B1A1A;
|
||||
}
|
||||
|
||||
.header .month-tag {
|
||||
display: inline-block;
|
||||
background: #8B1A1A;
|
||||
color: #e8e0d0;
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 10px;
|
||||
margin-top: 6px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Polaroid date cards */
|
||||
.dates-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.polaroid {
|
||||
background: #f5f0e8;
|
||||
padding: 10px 10px 28px;
|
||||
box-shadow: 2px 3px 8px rgba(0,0,0,0.25), -1px -1px 4px rgba(0,0,0,0.1);
|
||||
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 .polaroid-inner {
|
||||
background: #1a0808;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
margin-bottom: 6px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.polaroid .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: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.polaroid .date-num {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
color: #e8e0d0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.polaroid .date-detail {
|
||||
font-family: 'Caveat', cursive;
|
||||
font-size: 0.85rem;
|
||||
color: #C0392B;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.polaroid .slots-list {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.polaroid .slots-list li {
|
||||
font-size: 0.65rem;
|
||||
color: #a89080;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.polaroid .caption {
|
||||
font-family: 'Caveat', cursive;
|
||||
font-size: 0.9rem;
|
||||
color: #3a1a1a;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Decorative sticker elements */
|
||||
.sticker {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.star-red { font-size: 1.8rem; color: #8B1A1A; }
|
||||
.star-outline { font-size: 1.4rem; color: #3a1a1a; opacity: 0.6; }
|
||||
.heart { font-size: 1.2rem; color: #8B1A1A; }
|
||||
.spade { font-size: 1.4rem; color: #1a0808; }
|
||||
.scissors { font-size: 1.2rem; color: #3a1a1a; opacity: 0.7; }
|
||||
|
||||
/* Film strip left side */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(26,8,8,0.2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer .book-text {
|
||||
font-family: 'Caveat', cursive;
|
||||
font-size: 1.4rem;
|
||||
color: #1a0808;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.footer .website {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.15em;
|
||||
color: #8B1A1A;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.footer .dm-text {
|
||||
font-family: 'Caveat', cursive;
|
||||
font-size: 0.9rem;
|
||||
color: #5a3030;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Tape pieces */
|
||||
.tape {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 18px;
|
||||
background: rgba(200, 180, 140, 0.5);
|
||||
z-index: 25;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.divider-line {
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: #8B1A1A;
|
||||
margin: 8px auto;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="story">
|
||||
|
||||
<!-- Film strip -->
|
||||
<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:140px; left:80px; transform:rotate(-15deg);"></div>
|
||||
<div class="tape" style="top:140px; right:40px; transform:rotate(12deg);"></div>
|
||||
<div class="tape" style="top:480px; left:70px; transform:rotate(8deg);"></div>
|
||||
<div class="tape" style="top:480px; right:50px; transform:rotate(-10deg);"></div>
|
||||
|
||||
<!-- Sticker decorations -->
|
||||
<div class="sticker star-red" style="top:20px; left:30px;">★</div>
|
||||
<div class="sticker star-outline" style="top:35px; right:25px;">☆</div>
|
||||
<div class="sticker heart" style="bottom:120px; left:30px;">♥</div>
|
||||
<div class="sticker spade" style="bottom:130px; right:28px;">♠</div>
|
||||
<div class="sticker star-red" style="bottom:180px; right:35px; font-size:1rem;">★</div>
|
||||
<div class="sticker" style="top:55px; right:50px; font-size:0.8rem; color:#8B1A1A; font-family:'Caveat',cursive; transform:rotate(15deg);">✦ ✦</div>
|
||||
<div class="sticker" style="bottom:90px; left:35px; font-size:0.75rem; color:#3a1a1a; font-family:'Caveat',cursive; transform:rotate(-8deg); opacity:0.6;">grimmtatt</div>
|
||||
|
||||
<div class="content" style="padding-left: 44px;">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="shop-name">grimm tatts ✦</div>
|
||||
<h1>Book Your<br><em>Appointment</em></h1>
|
||||
<span class="month-tag">march · colorado springs</span>
|
||||
</div>
|
||||
|
||||
<div class="divider-line"></div>
|
||||
|
||||
<!-- Dates -->
|
||||
<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>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
<div class="book-text">ready to book?</div>
|
||||
<div class="website">grimmtatts.glossgenius.com</div>
|
||||
<div class="dm-text">or dm @grimmtatt ♠</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user