github-personal/flapjack-brothers
1
0
Fork 0
mirror of https://github.com/shadoll/flapjack-brothers.git synced 2026-08-28 03:27:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add map, working days, and mascot decorations to Flapjack Bros site

Browse Source 
Embeds an OpenStreetMap view of 2 St Hilda's Road, adds a Working Days
section (Sat/Sun 3-5pm), swaps the footer's cash-only note for creator
credit, and adds background flapjack mascot illustrations with speech
bubbles. Also updates project-description.md with the leaflet perk and
order pricing details.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sha
2026-07-16 12:31:33 +03:00
co-authored by Claude Sonnet 5
parent d7bcd14047
commit 4164609e0f
2 changed files with 119 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
project-description.md
+2 -2
View File
@@ -4,10 +4,10 @@ paragraph for subtitle about us
We are a company that have formed in 2026.
subtitle = where you can find us
paragraph for subtitle where you can find us
You can find us near the English channel on 2 St Hilda's road in Hythe, where you get a 20% discount and a free poster. We strictly accept cash only.
You can find us near the English channel on 2 St Hilda's road in Hythe, where you get a 20% discount, a free poster and leaflet. We strictly accept cash only.
subtitle = what we sell
paragraph for subtitle what we sell
We sell a range of fun things including: flapjacks, chocolate-popcorn biscuits and lots of other things. You can find out more if you come to 2 St Hilda's road. Thank you!
subtitle = order
paragraph for subtitle order
You can order a maximum of 10 products with free
You can order a maximum of 10 products with free delivery. You can only order if you live in Kent. Here are the prices for the products. If you go to 2 St Hilda's road the prices will be: 80p for a flapjack, 1 pound 50p for a chocolate-popcorn biscuit and everything else will cost 1 pound. If you order online the prices will be: 1 pound for a flapjack, 1 pound 75p for a chocolate-popcorn biscuits and 1 pound 25p for everything else.
site/flapjack-brothers/index.html
+117 -5
View File
@@ -138,6 +138,35 @@
.about-card .emoji{font-size:3rem; display:block; margin-bottom:18px;}
.about-card p{font-size:1.15rem; line-height:1.75; color:var(--brown); font-weight:600;}
/* ---------- MASCOTS (background decoration) ---------- */
#find-us, #hours{position:relative;}
.mascot{
position:absolute; display:none; align-items:center; gap:10px;
z-index:0; pointer-events:none;
}
.mascot .face{
width:64px; height:64px; flex:none;
filter:drop-shadow(0 8px 14px rgba(58,36,20,0.25));
}
.mascot .bubble{
position:relative; background:#fff; border:2.5px solid var(--choc);
border-radius:14px; padding:8px 14px; font-weight:800; font-size:0.82rem;
color:var(--brown-dark); white-space:nowrap;
}
.mascot .bubble::before{
content:''; position:absolute; left:-11px; bottom:11px;
width:0; height:0; border:9px solid transparent; border-right-color:var(--choc);
}
.mascot .bubble::after{
content:''; position:absolute; left:-8px; bottom:12px;
width:0; height:0; border:8px solid transparent; border-right-color:#fff;
}
.mascot-find{top:16%; left:2%; transform:rotate(-8deg);}
.mascot-hours{top:14%; right:2%; transform:rotate(7deg);}
@media (min-width:1180px){
.mascot{display:flex;}
}
/* ---------- FIND US ---------- */
.find-grid{
display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
@@ -145,12 +174,18 @@
.find-map{
aspect-ratio:4/3; background:var(--choc); border-radius:22px;
position:relative; overflow:hidden;
display:flex; align-items:center; justify-content:center;
box-shadow:0 10px 0 var(--line);
}
.find-map .pin{
font-size:4.5rem;
.find-map iframe{
width:100%; height:100%; border:0; display:block;
filter:sepia(0.35) saturate(1.15) hue-rotate(-6deg) brightness(0.96);
}
.find-map .map-link{
position:absolute; right:14px; bottom:14px;
background:#fff; color:var(--brown-dark); font-weight:800; font-size:0.8rem;
padding:8px 14px; border-radius:999px; box-shadow:0 4px 0 var(--line);
}
.find-map .map-link:hover{color:var(--caramel-dark);}
.find-text .perk{
display:flex; gap:14px; align-items:flex-start; margin-bottom:20px;
font-size:1.05rem; font-weight:700; color:var(--brown-dark);
@@ -168,6 +203,28 @@
padding:12px 20px; border-radius:14px; font-weight:800; color:var(--caramel-dark); font-size:0.95rem;
}
/* ---------- WORKING DAYS ---------- */
.hours-card{
background:#fff; border-radius:24px; padding:44px;
max-width:760px; margin:0 auto;
box-shadow:0 10px 0 var(--line);
}
.hours-grid{
display:grid; grid-template-columns:repeat(7,1fr); gap:12px;
}
.day{
background:var(--oat); border-radius:14px; padding:20px 6px; text-align:center;
font-weight:800; font-size:0.95rem; color:var(--brown);
}
.day span{
display:block; margin-top:10px; font-size:0.72rem; font-weight:700; color:#8a6f52;
}
.day.open{background:var(--caramel); color:#fff; transform:translateY(-4px); box-shadow:0 6px 0 var(--caramel-dark);}
.day.open span{color:#fff8ec;}
.hours-note{
text-align:center; margin-top:28px; font-size:1rem; font-weight:700; color:var(--brown);
}
/* ---------- WHAT WE SELL ---------- */
.products{background:var(--oat); border-top:2px solid var(--line); border-bottom:2px solid var(--line);}
.products-grid{
@@ -213,6 +270,7 @@
.find-grid{grid-template-columns:1fr;}
.find-map{order:-1; max-width:420px; margin:0 auto; width:100%;}
.products-grid{grid-template-columns:1fr 1fr;}
.hours-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width: 600px){
.nav-links{display:none;}
@@ -220,6 +278,8 @@
.about-card{padding:32px 24px;}
.products-grid{grid-template-columns:1fr;}
.hero-cta .btn{width:100%; justify-content:center;}
.hours-card{padding:28px 20px;}
.hours-grid{grid-template-columns:repeat(3,1fr);}
}
</style>
</head>
@@ -240,6 +300,20 @@
<circle cx="30" cy="29" r="6.5" fill="#3e2312"/>
<circle cx="68" cy="66" r="6.5" fill="#3e2312"/>
</symbol>
<symbol id="flapjack-face" viewBox="0 0 100 100">
<defs>
<linearGradient id="faceGrad" x1="10" y1="10" x2="90" y2="90" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#d98a3a"/>
<stop offset="1" stop-color="#a8611c"/>
</linearGradient>
</defs>
<rect x="11" y="11" width="78" height="78" rx="22" fill="url(#faceGrad)" stroke="#3e2312" stroke-width="3.5"/>
<path d="M27 42 Q34 32 41 42" stroke="#3e2312" stroke-width="4.5" stroke-linecap="round" fill="none"/>
<path d="M59 42 Q66 32 73 42" stroke="#3e2312" stroke-width="4.5" stroke-linecap="round" fill="none"/>
<ellipse cx="50" cy="63" rx="11" ry="8" fill="#3e2312"/>
<circle cx="29" cy="77" r="3" fill="#3e2312" opacity="0.5"/>
<circle cx="69" cy="79" r="2.5" fill="#3e2312" opacity="0.4"/>
</symbol>
</defs>
</svg>
@@ -249,6 +323,7 @@
<div class="nav-links">
<a href="#about">About Us</a>
<a href="#find-us">Find Us</a>
<a href="#hours">Working Days</a>
<a href="#shop">What We Sell</a>
</div>
</nav>
@@ -281,13 +356,24 @@
</section>
<section id="find-us">
<div class="mascot mascot-find">
<svg class="face" viewBox="0 0 100 100"><use href="#flapjack-face"/></svg>
<div class="bubble">Yummy!</div>
</div>
<div class="wrap">
<div class="sec-head">
<span class="kicker">Where You Can Find Us</span>
<h2>Come say hello</h2>
</div>
<div class="find-grid">
<div class="find-map"><span class="pin">📍</span></div>
<div class="find-map">
<iframe
src="https://www.openstreetmap.org/export/embed.html?bbox=1.0767%2C51.0637%2C1.0817%2C51.0662&amp;layer=mapnik&amp;marker=51.0650%2C1.0792"
title="Map to The Flapjack Bros, 2 St Hilda's Road, Hythe"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
<a class="map-link" href="https://www.openstreetmap.org/?mlat=51.0650&amp;mlon=1.0792#map=18/51.0650/1.0792" target="_blank" rel="noopener">Open Map ↗</a>
</div>
<div class="find-text">
<p class="addr">You can find us near the English Channel on <strong>2 St Hilda's Road, Hythe</strong>.</p>
<div class="perk"><span class="ico">%</span> Get a 20% discount when you visit</div>
@@ -298,6 +384,31 @@
</div>
</section>
<section id="hours">
<div class="mascot mascot-hours">
<svg class="face" viewBox="0 0 100 100"><use href="#flapjack-face"/></svg>
<div class="bubble">I've never tasted anything this good!</div>
</div>
<div class="wrap">
<div class="sec-head">
<span class="kicker">Working Days</span>
<h2>Weekends only, worth the wait</h2>
</div>
<div class="hours-card">
<div class="hours-grid">
<div class="day">Mon<span>Closed</span></div>
<div class="day">Tue<span>Closed</span></div>
<div class="day">Wed<span>Closed</span></div>
<div class="day">Thu<span>Closed</span></div>
<div class="day">Fri<span>Closed</span></div>
<div class="day open">Sat<span>3 – 5PM</span></div>
<div class="day open">Sun<span>3 – 5PM</span></div>
</div>
<p class="hours-note">Open Saturdays and Sundays, 3pm – 5pm.</p>
</div>
</div>
</section>
<section class="products" id="shop">
<div class="wrap">
<div class="sec-head">
@@ -344,12 +455,13 @@
<div class="footer-links">
<a href="#about">About Us</a>
<a href="#find-us">Find Us</a>
<a href="#hours">Working Days</a>
<a href="#shop">What We Sell</a>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 The Flapjack Bros. All rights reserved.</span>
<span>Cash only · 2 St Hilda's Road, Hythe</span>
<span>Created and supported by Mykolay</span>
</div>
</div>
</footer>