oliver
1578 lines
56 KiB
HTML
1578 lines
56 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
name="description"
|
|
content="my-biz.app — a hassle-free all-in-one back-office for NGOs, Startups, Manufacturers and Restaurants."
|
|
/>
|
|
<title>my-biz.app — Your Back-Office, Sorted.</title>
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
--espresso: #1a0c05;
|
|
--roast: #2e1608;
|
|
--brown: #5c2e0e;
|
|
--caramel: #c07b3b;
|
|
--amber: #e8a84a;
|
|
--cream: #f5ecd7;
|
|
--chalk: #fefbf5;
|
|
--parchment: #f0e4c8;
|
|
--muted: #8a6a4a;
|
|
--dark-text: #2a1508;
|
|
--sage: #7a8c5c;
|
|
--r: 10px;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family:
|
|
"Segoe UI",
|
|
system-ui,
|
|
-apple-system,
|
|
sans-serif;
|
|
background: var(--chalk);
|
|
color: var(--dark-text);
|
|
line-height: 1.7;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Subtle paper grain overlay */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
background-image:
|
|
radial-gradient(
|
|
circle 1px at 20% 30%,
|
|
rgba(160, 100, 40, 0.06),
|
|
transparent 2px
|
|
),
|
|
radial-gradient(
|
|
circle 1px at 55% 15%,
|
|
rgba(160, 100, 40, 0.04),
|
|
transparent 2px
|
|
),
|
|
radial-gradient(
|
|
circle 1px at 80% 60%,
|
|
rgba(160, 100, 40, 0.05),
|
|
transparent 2px
|
|
),
|
|
radial-gradient(
|
|
circle 1px at 35% 75%,
|
|
rgba(160, 100, 40, 0.04),
|
|
transparent 2px
|
|
),
|
|
radial-gradient(
|
|
circle 1px at 90% 25%,
|
|
rgba(160, 100, 40, 0.06),
|
|
transparent 2px
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ── KEYFRAMES ── */
|
|
|
|
@keyframes steamRise {
|
|
0% {
|
|
transform: translateY(0) scaleX(1);
|
|
opacity: 0.55;
|
|
}
|
|
50% {
|
|
transform: translateY(-18px) scaleX(1.15);
|
|
opacity: 0.25;
|
|
}
|
|
100% {
|
|
transform: translateY(-36px) scaleX(0.9);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes floatGently {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-7px);
|
|
}
|
|
}
|
|
|
|
@keyframes warmGlow {
|
|
0%,
|
|
100% {
|
|
box-shadow:
|
|
0 0 30px rgba(232, 168, 74, 0.2),
|
|
0 8px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 55px rgba(232, 168, 74, 0.4),
|
|
0 12px 40px rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
@keyframes inkDrop {
|
|
0% {
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
60% {
|
|
transform: scale(1.04);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ── CAROUSEL NEXT BUTTON ── */
|
|
#cc-next {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
z-index: 9999;
|
|
background: var(--espresso);
|
|
color: var(--cream);
|
|
border: 2px solid var(--caramel);
|
|
border-radius: 6px;
|
|
padding: 13px 26px;
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
letter-spacing: 0.6px;
|
|
cursor: pointer;
|
|
box-shadow:
|
|
0 6px 24px rgba(192, 123, 59, 0.3),
|
|
0 2px 8px rgba(0, 0, 0, 0.3);
|
|
transition:
|
|
transform 0.22s,
|
|
background 0.22s,
|
|
box-shadow 0.22s;
|
|
}
|
|
#cc-next:hover {
|
|
background: var(--roast);
|
|
transform: translateY(-3px);
|
|
box-shadow:
|
|
0 10px 32px rgba(192, 123, 59, 0.45),
|
|
0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
#cc-next:active {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* ── NAV ── */
|
|
nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 200;
|
|
background: rgba(26, 12, 5, 0.97);
|
|
backdrop-filter: blur(16px);
|
|
border-bottom: 2px solid var(--caramel);
|
|
padding: 0 6vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
}
|
|
|
|
.nav-logo {
|
|
font-size: 1.3rem;
|
|
font-weight: 900;
|
|
font-family: Georgia, serif;
|
|
text-decoration: none;
|
|
color: var(--cream);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.nav-logo span {
|
|
color: var(--caramel);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 26px;
|
|
list-style: none;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: rgba(245, 236, 215, 0.6);
|
|
font-size: 0.88rem;
|
|
transition: color 0.25s;
|
|
}
|
|
.nav-links a:hover {
|
|
color: var(--amber);
|
|
}
|
|
|
|
.nav-cta {
|
|
background: var(--caramel) !important;
|
|
color: var(--espresso) !important;
|
|
padding: 8px 20px !important;
|
|
border-radius: 4px !important;
|
|
font-weight: 800 !important;
|
|
font-size: 0.82rem !important;
|
|
letter-spacing: 0.8px !important;
|
|
text-transform: uppercase !important;
|
|
transition: background 0.2s !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.nav-cta:hover {
|
|
background: var(--amber) !important;
|
|
color: var(--espresso) !important;
|
|
}
|
|
|
|
/* ── HERO ── */
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(
|
|
ellipse 70% 60% at 40% 50%,
|
|
rgba(92, 46, 14, 0.9) 0%,
|
|
transparent 70%
|
|
),
|
|
radial-gradient(
|
|
ellipse 50% 40% at 75% 30%,
|
|
rgba(60, 26, 8, 0.8) 0%,
|
|
transparent 60%
|
|
),
|
|
var(--espresso);
|
|
color: var(--cream);
|
|
padding: 120px 6vw 140px;
|
|
text-align: center;
|
|
min-height: calc(100vh - 64px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Coffee ring decorations */
|
|
.hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 50px;
|
|
right: 8vw;
|
|
width: 110px;
|
|
height: 110px;
|
|
border: 7px solid rgba(192, 123, 59, 0.14);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
inset 0 0 0 3px rgba(192, 123, 59, 0.07),
|
|
0 0 0 12px rgba(192, 123, 59, 0.04);
|
|
pointer-events: none;
|
|
animation: floatGently 7s ease-in-out infinite;
|
|
}
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 60px;
|
|
left: 7vw;
|
|
width: 70px;
|
|
height: 70px;
|
|
border: 5px solid rgba(232, 168, 74, 0.1);
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 0 0 2px rgba(232, 168, 74, 0.06);
|
|
pointer-events: none;
|
|
animation: floatGently 9s ease-in-out infinite 2s;
|
|
}
|
|
|
|
.hero-eyebrow {
|
|
display: inline-block;
|
|
background: rgba(192, 123, 59, 0.18);
|
|
border: 1.5px solid rgba(192, 123, 59, 0.5);
|
|
color: var(--amber);
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
padding: 7px 22px;
|
|
border-radius: 3px;
|
|
margin-bottom: 34px;
|
|
position: relative;
|
|
z-index: 1;
|
|
animation: floatGently 5s ease-in-out infinite;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2.2rem, 5vw, 4.2rem);
|
|
font-weight: 900;
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
line-height: 1.12;
|
|
max-width: 820px;
|
|
margin: 0 auto 24px;
|
|
letter-spacing: -0.3px;
|
|
color: var(--cream);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.hero h1 em {
|
|
font-style: italic;
|
|
color: var(--amber);
|
|
}
|
|
|
|
.hero-sub {
|
|
font-size: clamp(0.98rem, 2vw, 1.18rem);
|
|
max-width: 580px;
|
|
margin: 0 auto 18px;
|
|
color: rgba(245, 236, 215, 0.75);
|
|
line-height: 1.82;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: 1rem;
|
|
color: rgba(192, 123, 59, 0.65);
|
|
margin-bottom: 48px;
|
|
font-style: italic;
|
|
font-family: Georgia, serif;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 18px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--caramel);
|
|
color: var(--espresso);
|
|
padding: 15px 38px;
|
|
border-radius: 5px;
|
|
font-weight: 800;
|
|
font-size: 0.95rem;
|
|
text-decoration: none;
|
|
letter-spacing: 0.8px;
|
|
box-shadow: 0 6px 24px rgba(192, 123, 59, 0.45);
|
|
transition:
|
|
background 0.25s,
|
|
transform 0.25s,
|
|
box-shadow 0.25s;
|
|
display: inline-block;
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--amber);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 32px rgba(232, 168, 74, 0.5);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
border: 2px solid rgba(245, 236, 215, 0.3);
|
|
color: var(--cream);
|
|
padding: 15px 38px;
|
|
border-radius: 5px;
|
|
font-weight: 700;
|
|
font-size: 0.95rem;
|
|
text-decoration: none;
|
|
transition:
|
|
border-color 0.25s,
|
|
background 0.25s;
|
|
display: inline-block;
|
|
}
|
|
.btn-secondary:hover {
|
|
border-color: var(--caramel);
|
|
background: rgba(192, 123, 59, 0.12);
|
|
}
|
|
|
|
.hero-trust {
|
|
margin-top: 56px;
|
|
font-size: 0.78rem;
|
|
color: rgba(192, 123, 59, 0.5);
|
|
letter-spacing: 0.8px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.hero-trust strong {
|
|
color: rgba(192, 123, 59, 0.85);
|
|
}
|
|
|
|
/* ── SECTION COMMONS ── */
|
|
section {
|
|
padding: 90px 6vw;
|
|
min-height: calc(100vh - 64px);
|
|
position: relative;
|
|
}
|
|
|
|
.section-label {
|
|
display: inline-block;
|
|
font-size: 0.68rem;
|
|
font-weight: 800;
|
|
letter-spacing: 3.5px;
|
|
text-transform: uppercase;
|
|
color: var(--caramel);
|
|
margin-bottom: 12px;
|
|
border-bottom: 1.5px solid var(--caramel);
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
|
|
font-weight: 900;
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
color: var(--roast);
|
|
line-height: 1.18;
|
|
max-width: 700px;
|
|
margin-bottom: 14px;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.section-sub {
|
|
font-size: 0.98rem;
|
|
color: var(--muted);
|
|
max-width: 560px;
|
|
margin-bottom: 55px;
|
|
line-height: 1.82;
|
|
}
|
|
|
|
/* ── VERTICALS ── */
|
|
#verticals {
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--chalk) 0%,
|
|
var(--cream) 100%
|
|
);
|
|
}
|
|
#verticals::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
var(--caramel),
|
|
var(--amber),
|
|
var(--caramel),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.verticals-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
|
|
.vertical-card {
|
|
background: var(--chalk);
|
|
border: 1.5px solid var(--parchment);
|
|
border-left: 4px solid var(--caramel);
|
|
border-radius: var(--r);
|
|
padding: 34px 26px;
|
|
box-shadow: 0 3px 16px rgba(92, 46, 14, 0.08);
|
|
transition:
|
|
transform 0.3s,
|
|
box-shadow 0.3s,
|
|
border-left-color 0.3s;
|
|
cursor: default;
|
|
position: relative;
|
|
}
|
|
.vertical-card:nth-child(1) {
|
|
border-left-color: var(--caramel);
|
|
}
|
|
.vertical-card:nth-child(2) {
|
|
border-left-color: var(--sage);
|
|
}
|
|
.vertical-card:nth-child(3) {
|
|
border-left-color: #b04e20;
|
|
}
|
|
.vertical-card:nth-child(4) {
|
|
border-left-color: var(--amber);
|
|
}
|
|
|
|
.vertical-card:hover {
|
|
transform: translateY(-5px) rotate(0.3deg);
|
|
box-shadow: 0 12px 36px rgba(92, 46, 14, 0.14);
|
|
}
|
|
|
|
.vertical-icon {
|
|
font-size: 2.4rem;
|
|
margin-bottom: 16px;
|
|
display: block;
|
|
}
|
|
|
|
.vertical-name {
|
|
font-size: 1.18rem;
|
|
font-weight: 800;
|
|
font-family: Georgia, serif;
|
|
color: var(--roast);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.vertical-desc {
|
|
font-size: 0.9rem;
|
|
color: var(--muted);
|
|
line-height: 1.74;
|
|
}
|
|
|
|
.vertical-tag {
|
|
display: inline-block;
|
|
margin-top: 16px;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
color: var(--brown);
|
|
background: rgba(192, 123, 59, 0.1);
|
|
border: 1px solid rgba(192, 123, 59, 0.25);
|
|
padding: 4px 12px;
|
|
border-radius: 3px;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
/* ── NEWS ── */
|
|
#news {
|
|
background: var(--parchment);
|
|
}
|
|
#news::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
var(--amber),
|
|
var(--caramel),
|
|
var(--amber),
|
|
transparent
|
|
);
|
|
}
|
|
/* Floating coffee ring in background */
|
|
#news::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 80px;
|
|
right: 6vw;
|
|
width: 160px;
|
|
height: 160px;
|
|
border: 8px solid rgba(192, 123, 59, 0.08);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.news-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 22px;
|
|
}
|
|
|
|
.news-card {
|
|
background: var(--chalk);
|
|
border-radius: var(--r);
|
|
border: 1.5px solid rgba(192, 123, 59, 0.2);
|
|
border-top: 4px solid var(--caramel);
|
|
padding: 28px 24px;
|
|
box-shadow: 0 2px 12px rgba(92, 46, 14, 0.07);
|
|
transition:
|
|
transform 0.3s,
|
|
box-shadow 0.3s;
|
|
}
|
|
.news-card:nth-child(2) {
|
|
border-top-color: var(--sage);
|
|
}
|
|
.news-card:nth-child(3) {
|
|
border-top-color: #b04e20;
|
|
}
|
|
.news-card:nth-child(4) {
|
|
border-top-color: var(--amber);
|
|
}
|
|
.news-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 10px 30px rgba(92, 46, 14, 0.12);
|
|
}
|
|
|
|
.news-area {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--caramel);
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.news-title {
|
|
font-size: 1.02rem;
|
|
font-weight: 700;
|
|
font-family: Georgia, serif;
|
|
color: var(--roast);
|
|
margin-bottom: 9px;
|
|
line-height: 1.38;
|
|
}
|
|
|
|
.news-teaser {
|
|
font-size: 0.87rem;
|
|
color: var(--muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.news-date {
|
|
display: block;
|
|
margin-top: 16px;
|
|
font-size: 0.74rem;
|
|
color: rgba(192, 123, 59, 0.65);
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
/* ── PRICING ── */
|
|
#pricing {
|
|
background: var(--chalk);
|
|
text-align: center;
|
|
}
|
|
#pricing::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
var(--caramel),
|
|
var(--amber),
|
|
var(--caramel),
|
|
transparent
|
|
);
|
|
}
|
|
#pricing .section-title,
|
|
#pricing .section-sub {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 28px;
|
|
max-width: 780px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.pricing-card {
|
|
background: var(--cream);
|
|
border: 2px solid var(--parchment);
|
|
border-radius: 12px;
|
|
padding: 44px 34px;
|
|
position: relative;
|
|
text-align: left;
|
|
box-shadow: 0 4px 20px rgba(92, 46, 14, 0.09);
|
|
transition:
|
|
transform 0.3s,
|
|
box-shadow 0.3s;
|
|
}
|
|
.pricing-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 14px 40px rgba(92, 46, 14, 0.14);
|
|
}
|
|
|
|
/* Chalkboard style for featured */
|
|
.pricing-card.featured {
|
|
background: #2a2320;
|
|
border-color: var(--caramel);
|
|
color: var(--cream);
|
|
box-shadow: 0 8px 40px rgba(42, 35, 32, 0.5);
|
|
}
|
|
|
|
.pricing-badge {
|
|
position: absolute;
|
|
top: -1px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--caramel);
|
|
color: var(--espresso);
|
|
font-size: 0.68rem;
|
|
font-weight: 900;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
padding: 5px 18px;
|
|
border-radius: 0 0 8px 8px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pricing-plan {
|
|
font-size: 0.7rem;
|
|
font-weight: 800;
|
|
letter-spacing: 3.5px;
|
|
text-transform: uppercase;
|
|
color: var(--caramel);
|
|
margin-bottom: 12px;
|
|
}
|
|
.pricing-card.featured .pricing-plan {
|
|
color: var(--amber);
|
|
}
|
|
|
|
.pricing-price {
|
|
font-size: 3.2rem;
|
|
font-weight: 900;
|
|
font-family: Georgia, serif;
|
|
color: var(--roast);
|
|
line-height: 1;
|
|
margin-bottom: 6px;
|
|
}
|
|
.pricing-card.featured .pricing-price {
|
|
color: var(--cream);
|
|
}
|
|
|
|
.pricing-period {
|
|
font-size: 0.84rem;
|
|
color: var(--muted);
|
|
margin-bottom: 20px;
|
|
}
|
|
.pricing-card.featured .pricing-period {
|
|
color: rgba(245, 236, 215, 0.6);
|
|
}
|
|
|
|
.pricing-quote {
|
|
font-size: 0.9rem;
|
|
font-style: italic;
|
|
font-family: Georgia, serif;
|
|
color: var(--muted);
|
|
border-left: 3px solid var(--parchment);
|
|
padding-left: 14px;
|
|
margin-bottom: 28px;
|
|
line-height: 1.6;
|
|
}
|
|
.pricing-card.featured .pricing-quote {
|
|
color: rgba(245, 236, 215, 0.7);
|
|
border-left-color: rgba(192, 123, 59, 0.4);
|
|
}
|
|
|
|
.pricing-features {
|
|
list-style: none;
|
|
margin-bottom: 32px;
|
|
}
|
|
.pricing-features li {
|
|
font-size: 0.88rem;
|
|
color: var(--dark-text);
|
|
padding: 7px 0;
|
|
border-bottom: 1px solid var(--parchment);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.pricing-card.featured .pricing-features li {
|
|
color: rgba(245, 236, 215, 0.82);
|
|
border-bottom-color: rgba(192, 123, 59, 0.15);
|
|
}
|
|
.pricing-features li::before {
|
|
content: "✦";
|
|
color: var(--caramel);
|
|
font-size: 0.6rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.pricing-cta {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 13px 28px;
|
|
border-radius: 5px;
|
|
font-weight: 800;
|
|
font-size: 0.9rem;
|
|
text-decoration: none;
|
|
letter-spacing: 0.6px;
|
|
transition:
|
|
transform 0.2s,
|
|
background 0.2s,
|
|
box-shadow 0.2s;
|
|
background: var(--caramel);
|
|
color: var(--espresso);
|
|
box-shadow: 0 4px 16px rgba(192, 123, 59, 0.35);
|
|
}
|
|
.pricing-card.featured .pricing-cta {
|
|
background: var(--amber);
|
|
color: var(--espresso);
|
|
box-shadow: 0 4px 16px rgba(232, 168, 74, 0.4);
|
|
}
|
|
.pricing-cta:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(192, 123, 59, 0.45);
|
|
}
|
|
|
|
/* ── CUSTOMIZATION ── */
|
|
#customization {
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--cream) 0%,
|
|
var(--chalk) 100%
|
|
);
|
|
}
|
|
#customization::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
var(--sage),
|
|
var(--caramel),
|
|
var(--sage),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.custom-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 26px;
|
|
}
|
|
|
|
.custom-card {
|
|
background: var(--chalk);
|
|
border: 1.5px solid var(--parchment);
|
|
border-radius: var(--r);
|
|
padding: 38px 30px;
|
|
box-shadow: 0 3px 16px rgba(92, 46, 14, 0.08);
|
|
transition:
|
|
transform 0.3s,
|
|
box-shadow 0.3s;
|
|
}
|
|
.custom-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 36px rgba(92, 46, 14, 0.13);
|
|
}
|
|
|
|
.custom-icon {
|
|
font-size: 2.4rem;
|
|
margin-bottom: 16px;
|
|
display: block;
|
|
}
|
|
|
|
.custom-title {
|
|
font-size: 1.16rem;
|
|
font-weight: 800;
|
|
font-family: Georgia, serif;
|
|
color: var(--roast);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.custom-body {
|
|
font-size: 0.9rem;
|
|
color: var(--muted);
|
|
line-height: 1.78;
|
|
margin-bottom: 20px;
|
|
}
|
|
.custom-body strong {
|
|
color: var(--brown);
|
|
}
|
|
|
|
.custom-rate {
|
|
display: inline-block;
|
|
background: var(--roast);
|
|
color: var(--amber);
|
|
font-weight: 900;
|
|
font-size: 1.1rem;
|
|
font-family: Georgia, serif;
|
|
padding: 9px 22px;
|
|
border-radius: 5px;
|
|
letter-spacing: 0.4px;
|
|
box-shadow: 0 4px 14px rgba(46, 22, 8, 0.3);
|
|
}
|
|
|
|
.custom-link {
|
|
display: inline-block;
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
color: var(--caramel);
|
|
text-decoration: none;
|
|
border-bottom: 2px solid rgba(192, 123, 59, 0.3);
|
|
padding-bottom: 2px;
|
|
transition:
|
|
color 0.25s,
|
|
border-color 0.25s;
|
|
}
|
|
.custom-link:hover {
|
|
color: var(--roast);
|
|
border-color: var(--roast);
|
|
}
|
|
|
|
/* ── FOOTER ── */
|
|
footer {
|
|
background: var(--espresso);
|
|
color: rgba(245, 236, 215, 0.55);
|
|
padding: 60px 6vw 36px;
|
|
border-top: 3px solid var(--caramel);
|
|
}
|
|
|
|
.footer-top {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 36px;
|
|
padding-bottom: 44px;
|
|
border-bottom: 1px solid rgba(192, 123, 59, 0.15);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.footer-brand {
|
|
max-width: 300px;
|
|
}
|
|
|
|
.footer-logo {
|
|
font-size: 1.4rem;
|
|
font-weight: 900;
|
|
font-family: Georgia, serif;
|
|
text-decoration: none;
|
|
display: block;
|
|
margin-bottom: 12px;
|
|
color: var(--cream);
|
|
}
|
|
.footer-logo span {
|
|
color: var(--caramel);
|
|
}
|
|
.footer-brand p {
|
|
font-size: 0.87rem;
|
|
line-height: 1.78;
|
|
}
|
|
|
|
.footer-col h4 {
|
|
color: var(--amber);
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
letter-spacing: 2.5px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.footer-col ul {
|
|
list-style: none;
|
|
}
|
|
.footer-col ul li {
|
|
margin-bottom: 9px;
|
|
}
|
|
.footer-col ul li a {
|
|
color: rgba(245, 236, 215, 0.5);
|
|
text-decoration: none;
|
|
font-size: 0.87rem;
|
|
transition: color 0.25s;
|
|
}
|
|
.footer-col ul li a:hover {
|
|
color: var(--amber);
|
|
}
|
|
|
|
.footer-bottom {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 0.78rem;
|
|
color: rgba(192, 123, 59, 0.45);
|
|
}
|
|
|
|
.footer-legal a {
|
|
color: rgba(192, 123, 59, 0.4);
|
|
text-decoration: none;
|
|
margin-left: 18px;
|
|
transition: color 0.25s;
|
|
}
|
|
.footer-legal a:hover {
|
|
color: var(--amber);
|
|
}
|
|
|
|
/* ── RESPONSIVE ── */
|
|
@media (max-width: 680px) {
|
|
nav {
|
|
padding: 0 5vw;
|
|
}
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
section {
|
|
padding: 70px 5vw;
|
|
min-height: auto;
|
|
}
|
|
.hero {
|
|
padding: 80px 5vw 100px;
|
|
min-height: auto;
|
|
}
|
|
.footer-top {
|
|
flex-direction: column;
|
|
}
|
|
#cc-next {
|
|
bottom: 18px;
|
|
right: 18px;
|
|
padding: 11px 20px;
|
|
font-size: 0.82rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- ── NAV ── -->
|
|
<nav>
|
|
<a class="nav-logo" href="#">my-biz<span>.app</span></a>
|
|
<ul class="nav-links">
|
|
<li><a href="#verticals">Verticals</a></li>
|
|
<li><a href="#news">News</a></li>
|
|
<li><a href="#pricing">Pricing</a></li>
|
|
<li><a href="#customization">Customization</a></li>
|
|
<li><a class="nav-cta" href="#pricing">Get Started</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- ── HERO ── -->
|
|
<section class="hero" id="home">
|
|
<div class="hero-eyebrow">
|
|
✦ One Stop Shop · Built for Real Businesses
|
|
</div>
|
|
<h1>
|
|
Running a business is hard.<br /><em
|
|
>Your back-office shouldn't be.</em
|
|
>
|
|
</h1>
|
|
<p class="hero-sub">
|
|
We eliminate the chaos behind the scenes — invoicing, HR,
|
|
inventory, CRM, reports — all in one place, set up for your
|
|
exact industry, ready from day one.
|
|
</p>
|
|
<p class="hero-tagline">
|
|
No duct tape. No spreadsheet nightmares. No expensive surprises.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a class="btn-primary" href="#pricing"
|
|
>See Plans & Pricing</a
|
|
>
|
|
<a class="btn-secondary" href="#verticals"
|
|
>Find Your Vertical</a
|
|
>
|
|
</div>
|
|
<p class="hero-trust">
|
|
Powered by <strong>Odoo Community Edition</strong> ·
|
|
Specialists for every industry · From
|
|
<strong>$214 / year</strong>
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ── VERTICALS ── -->
|
|
<section id="verticals">
|
|
<span class="section-label">Our Verticals</span>
|
|
<h2 class="section-title">We speak your industry's language.</h2>
|
|
<p class="section-sub">
|
|
Every vertical has a dedicated specialist who has lived through
|
|
your exact challenges. No generalists. No guessing. Just experts
|
|
who get it.
|
|
</p>
|
|
<div class="verticals-grid">
|
|
<div class="vertical-card">
|
|
<span class="vertical-icon">🌍</span>
|
|
<div class="vertical-name">NGO & Non-Profit</div>
|
|
<p class="vertical-desc">
|
|
Grant tracking, donor management, project accounting,
|
|
and compliance reporting — built for organizations that
|
|
answer to their mission, not just their margin.
|
|
</p>
|
|
<span class="vertical-tag"
|
|
>Donor CRM · Grant Accounting · Impact Reports</span
|
|
>
|
|
</div>
|
|
|
|
<div class="vertical-card">
|
|
<span class="vertical-icon">🚀</span>
|
|
<div class="vertical-name">Startups</div>
|
|
<p class="vertical-desc">
|
|
Move fast without breaking your books. From your first
|
|
invoice to Series A due diligence, we set up systems
|
|
that grow with you and impress every investor.
|
|
</p>
|
|
<span class="vertical-tag"
|
|
>Invoicing · CRM · Equity-Ready Reporting</span
|
|
>
|
|
</div>
|
|
|
|
<div class="vertical-card">
|
|
<span class="vertical-icon">🏭</span>
|
|
<div class="vertical-name">Manufacturing</div>
|
|
<p class="vertical-desc">
|
|
Bills of materials, production orders, real-time
|
|
inventory, and quality control — everything on the floor
|
|
finally reflected in your numbers.
|
|
</p>
|
|
<span class="vertical-tag"
|
|
>MRP · Inventory · Purchase · Quality</span
|
|
>
|
|
</div>
|
|
|
|
<div class="vertical-card">
|
|
<span class="vertical-icon">🍽️</span>
|
|
<div class="vertical-name">Restaurants</div>
|
|
<p class="vertical-desc">
|
|
From tableside POS to supplier invoices to staff
|
|
scheduling — keep the kitchen and the books running
|
|
smoothly, even on your busiest Saturday night.
|
|
</p>
|
|
<span class="vertical-tag"
|
|
>POS · Supplier Mgmt · Payroll · Food Cost</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── NEWS ── -->
|
|
<section id="news">
|
|
<span class="section-label">News from Our Verticals</span>
|
|
<h2 class="section-title">Insights from the front lines.</h2>
|
|
<p class="section-sub">
|
|
Our specialists share what's actually working — no fluff, no
|
|
vendor noise. Real stories from real businesses in your space.
|
|
</p>
|
|
<div class="news-grid">
|
|
<div class="news-card">
|
|
<div class="news-area">NGO</div>
|
|
<div class="news-title">
|
|
How a regional NGO cut grant reporting time by 70%
|
|
</div>
|
|
<p class="news-teaser">
|
|
Automating donor reconciliation and project cost
|
|
allocation freed up 15 hours per week that went straight
|
|
back into their mission.
|
|
</p>
|
|
<span class="news-date">June 2025</span>
|
|
</div>
|
|
|
|
<div class="news-card">
|
|
<div class="news-area">Startups</div>
|
|
<div class="news-title">
|
|
Why investors love clean Odoo data rooms
|
|
</div>
|
|
<p class="news-teaser">
|
|
Three founders share how a structured back-office gave
|
|
them an edge during due diligence — and closed their
|
|
rounds faster.
|
|
</p>
|
|
<span class="news-date">May 2025</span>
|
|
</div>
|
|
|
|
<div class="news-card">
|
|
<div class="news-area">Manufacturing</div>
|
|
<div class="news-title">
|
|
Real-time BoM costing saved a mid-size factory $40k
|
|
</div>
|
|
<p class="news-teaser">
|
|
When raw material prices shifted overnight, live
|
|
production cost tracking allowed this team to reprice
|
|
quotes before they lost margin.
|
|
</p>
|
|
<span class="news-date">April 2025</span>
|
|
</div>
|
|
|
|
<div class="news-card">
|
|
<div class="news-area">Restaurants</div>
|
|
<div class="news-title">
|
|
Food cost under control: a chef's back-office story
|
|
</div>
|
|
<p class="news-teaser">
|
|
Linking POS sales data to supplier invoices
|
|
automatically flagged a 12% food cost creep — caught in
|
|
week one, fixed before it hurt.
|
|
</p>
|
|
<span class="news-date">March 2025</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── PRICING ── -->
|
|
<section id="pricing">
|
|
<span class="section-label">Simple Pricing</span>
|
|
<h2 class="section-title">Transparent. Honest. No surprises.</h2>
|
|
<p class="section-sub">
|
|
Pick the plan that matches where your business is today. You can
|
|
always grow into more — on your timeline, not ours.
|
|
</p>
|
|
<div class="pricing-grid">
|
|
<div class="pricing-card">
|
|
<div class="pricing-plan">Side Hustle</div>
|
|
<div class="pricing-price">$214</div>
|
|
<div class="pricing-period">
|
|
per year · billed annually
|
|
</div>
|
|
<p class="pricing-quote">
|
|
"No big customizations — that is all my business needs."
|
|
</p>
|
|
<ul class="pricing-features">
|
|
<li>Core back-office modules</li>
|
|
<li>Invoicing & basic accounting</li>
|
|
<li>Up to 3 users</li>
|
|
<li>Standard onboarding</li>
|
|
<li>Community support</li>
|
|
</ul>
|
|
<a
|
|
class="pricing-cta"
|
|
href="mailto:hello@my-biz.app?subject=Side Hustle Plan"
|
|
>Get Started</a
|
|
>
|
|
</div>
|
|
|
|
<div class="pricing-card featured">
|
|
<div class="pricing-badge">Most Popular</div>
|
|
<div class="pricing-plan">On the Rise</div>
|
|
<div class="pricing-price">$395</div>
|
|
<div class="pricing-period">
|
|
per year · billed annually
|
|
</div>
|
|
<p class="pricing-quote">
|
|
"I need some modules and professional reports."
|
|
</p>
|
|
<ul class="pricing-features">
|
|
<li>Everything in Side Hustle</li>
|
|
<li>Industry-specific modules</li>
|
|
<li>Professional report templates</li>
|
|
<li>Up to 10 users</li>
|
|
<li>Priority onboarding</li>
|
|
<li>Email & chat support</li>
|
|
</ul>
|
|
<a
|
|
class="pricing-cta"
|
|
href="mailto:hello@my-biz.app?subject=On the Rise Plan"
|
|
>Get Started</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── CUSTOMIZATION ── -->
|
|
<section id="customization">
|
|
<span class="section-label">Customization</span>
|
|
<h2 class="section-title">Need something more bespoke?</h2>
|
|
<p class="section-sub">
|
|
Because we build on <strong>Odoo Community Edition</strong>, you
|
|
are never locked in. Choose the path that works best for your
|
|
team and budget.
|
|
</p>
|
|
<div class="custom-grid">
|
|
<div class="custom-card">
|
|
<span class="custom-icon">🌐</span>
|
|
<div class="custom-title">Hire Any Odoo Developer</div>
|
|
<p class="custom-body">
|
|
Since we use Odoo CE, the world's largest open-source
|
|
ERP community is at your fingertips. Thousands of
|
|
certified freelancers on <strong>Upwork</strong> and
|
|
<strong>Fiverr</strong>
|
|
can extend, theme, or integrate your instance — no
|
|
vendor lock-in, ever. You own your code. You own your
|
|
data.
|
|
</p>
|
|
<a
|
|
class="custom-link"
|
|
href="https://www.upwork.com/search/profiles/?q=odoo"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>Browse Odoo Developers →</a
|
|
>
|
|
</div>
|
|
|
|
<div class="custom-card">
|
|
<span class="custom-icon">🛠️</span>
|
|
<div class="custom-title">Our In-House Team</div>
|
|
<p class="custom-body">
|
|
Prefer to work with specialists who already know your
|
|
setup inside-out? Our senior Odoo developers are on call
|
|
for custom modules, integrations, data migrations, and
|
|
anything else your business needs to scale. Transparent
|
|
scope, no hidden fees.
|
|
</p>
|
|
<span class="custom-rate">$65 USD / hour</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── FOOTER ── -->
|
|
<footer>
|
|
<div class="footer-top">
|
|
<div class="footer-brand">
|
|
<a class="footer-logo" href="#">my-biz<span>.app</span></a>
|
|
<p>
|
|
A hassle-free all-in-one back-office built on Odoo
|
|
Community Edition. Specialists for NGOs, Startups,
|
|
Manufacturing, and Restaurants.
|
|
</p>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Product</h4>
|
|
<ul>
|
|
<li><a href="#verticals">Verticals</a></li>
|
|
<li><a href="#pricing">Pricing</a></li>
|
|
<li><a href="#customization">Customization</a></li>
|
|
<li><a href="#news">News</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Company</h4>
|
|
<ul>
|
|
<li>
|
|
<a href="mailto:hello@my-biz.app">Contact Us</a>
|
|
</li>
|
|
<li><a href="#">About</a></li>
|
|
<li><a href="#">Careers</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Legal</h4>
|
|
<ul>
|
|
<li><a href="#">Privacy Policy</a></li>
|
|
<li><a href="#">Terms of Service</a></li>
|
|
<li><a href="#">Cookie Policy</a></li>
|
|
<li><a href="#">Imprint</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<span>© 2025 my-biz.app — All rights reserved.</span>
|
|
<div class="footer-legal">
|
|
<a href="#">Privacy</a>
|
|
<a href="#">Terms</a>
|
|
<a href="#">Imprint</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
|
|
/* ── All slides: every section + the footer ── */
|
|
var slides = Array.prototype.slice.call(
|
|
document.querySelectorAll("section, footer"),
|
|
);
|
|
var cur = 0;
|
|
var busy = false;
|
|
|
|
/* ── Button label for each slide (shows next destination) ── */
|
|
var LABELS = [
|
|
"Our Verticals →",
|
|
"News & Insights →",
|
|
"Pricing →",
|
|
"Customization →",
|
|
"Wrap it up →",
|
|
"↑ Start Over",
|
|
];
|
|
|
|
/* ── Hide every slide except the first ── */
|
|
slides.forEach(function (s, i) {
|
|
if (i > 0) {
|
|
s.style.display = "none";
|
|
s.style.opacity = "0";
|
|
}
|
|
});
|
|
|
|
/* ── Collect the child elements we want to animate ── */
|
|
function getEls(slide) {
|
|
return Array.prototype.slice.call(
|
|
slide.querySelectorAll(
|
|
".hero-eyebrow, h1, h2," +
|
|
".hero-sub, .hero-tagline, .hero-actions, .hero-trust," +
|
|
".section-label, .section-title, .section-sub," +
|
|
".vertical-card, .news-card, .pricing-card, .custom-card," +
|
|
".footer-brand, .footer-col, .footer-bottom",
|
|
),
|
|
);
|
|
}
|
|
|
|
/* ── Fly elements OUT (exit to the left) ── */
|
|
function flyOut(slide, done) {
|
|
var els = getEls(slide);
|
|
var STEP = 48; /* ms between each element */
|
|
var DUR = 280; /* transition duration */
|
|
var total = els.length * STEP + DUR + 60;
|
|
|
|
els.forEach(function (el, i) {
|
|
el.style.transition =
|
|
"opacity " +
|
|
DUR +
|
|
"ms ease " +
|
|
i * STEP +
|
|
"ms," +
|
|
"transform " +
|
|
DUR +
|
|
"ms cubic-bezier(.55,0,.9,.4) " +
|
|
i * STEP +
|
|
"ms";
|
|
/* trigger reflow so transition fires */
|
|
void el.offsetWidth;
|
|
el.style.opacity = "0";
|
|
el.style.transform = "translateX(-52px) scale(.96)";
|
|
});
|
|
|
|
setTimeout(function () {
|
|
/* reset inline styles so the slide is pristine when revisited */
|
|
els.forEach(function (el) {
|
|
el.style.transition = "";
|
|
el.style.opacity = "";
|
|
el.style.transform = "";
|
|
});
|
|
slide.style.display = "none";
|
|
slide.style.opacity = "0";
|
|
done();
|
|
}, total);
|
|
}
|
|
|
|
/* ── Fly elements IN (enter from right / bottom) ── */
|
|
function flyIn(slide, done) {
|
|
slide.style.display = "";
|
|
slide.style.opacity = "1";
|
|
window.scrollTo({ top: 0, behavior: "auto" });
|
|
|
|
var els = getEls(slide);
|
|
var STEP = 85; /* ms stagger between elements */
|
|
var DUR = 600; /* transition duration */
|
|
var PRE = 60; /* initial pause before first el */
|
|
var total = PRE + els.length * STEP + DUR + 80;
|
|
|
|
/* Snap all elements to their start state */
|
|
els.forEach(function (el) {
|
|
el.style.transition = "none";
|
|
el.style.opacity = "0";
|
|
el.style.transform = "translateY(38px) scale(.94)";
|
|
});
|
|
|
|
/* Double rAF: ensures the browser has painted the start state */
|
|
requestAnimationFrame(function () {
|
|
requestAnimationFrame(function () {
|
|
els.forEach(function (el, i) {
|
|
var delay = PRE + i * STEP;
|
|
el.style.transition =
|
|
"opacity " +
|
|
DUR +
|
|
"ms cubic-bezier(.18,.88,.32,1.15) " +
|
|
delay +
|
|
"ms," +
|
|
"transform " +
|
|
DUR +
|
|
"ms cubic-bezier(.18,.88,.32,1.15) " +
|
|
delay +
|
|
"ms";
|
|
el.style.opacity = "";
|
|
el.style.transform = "";
|
|
});
|
|
|
|
setTimeout(function () {
|
|
busy = false;
|
|
updateBtn();
|
|
if (typeof done === "function") done();
|
|
}, total);
|
|
});
|
|
});
|
|
}
|
|
|
|
/* ── Advance to the next slide ── */
|
|
function next() {
|
|
if (busy) return;
|
|
busy = true;
|
|
|
|
var from = slides[cur];
|
|
cur = (cur + 1) % slides.length;
|
|
var to = slides[cur];
|
|
|
|
flyOut(from, function () {
|
|
flyIn(to, null);
|
|
});
|
|
}
|
|
|
|
/* ── Build the floating button ── */
|
|
var btn = document.createElement("button");
|
|
btn.id = "cc-next";
|
|
document.body.appendChild(btn);
|
|
|
|
function updateBtn() {
|
|
btn.textContent =
|
|
LABELS[cur] !== undefined
|
|
? LABELS[cur]
|
|
: "↑ Start Over";
|
|
}
|
|
|
|
btn.addEventListener("click", next);
|
|
|
|
/* ── Keyboard: → ↓ Space advance; ← ↑ ignored ── */
|
|
document.addEventListener("keydown", function (e) {
|
|
if (
|
|
e.key === "ArrowRight" ||
|
|
e.key === "ArrowDown" ||
|
|
e.key === " "
|
|
) {
|
|
e.preventDefault();
|
|
next();
|
|
}
|
|
});
|
|
|
|
/* ── Progress dots (small, tasteful) ── */
|
|
var dotsWrap = document.createElement("div");
|
|
dotsWrap.id = "cc-dots";
|
|
dotsWrap.style.cssText =
|
|
"position:fixed;bottom:36px;left:50%;transform:translateX(-50%);" +
|
|
"display:flex;gap:8px;z-index:9998;";
|
|
|
|
slides.forEach(function (_, i) {
|
|
var d = document.createElement("span");
|
|
d.style.cssText =
|
|
"width:7px;height:7px;border-radius:50%;cursor:pointer;" +
|
|
"background:rgba(192,123,59,.35);transition:background .3s,transform .3s;";
|
|
d.addEventListener("click", function () {
|
|
if (busy || i === cur) return;
|
|
/* jump forward only (to keep animation direction consistent) */
|
|
if (i > cur) {
|
|
busy = true;
|
|
var from = slides[cur];
|
|
cur = i;
|
|
flyOut(from, function () {
|
|
flyIn(slides[cur], null);
|
|
});
|
|
}
|
|
});
|
|
dotsWrap.appendChild(d);
|
|
});
|
|
document.body.appendChild(dotsWrap);
|
|
|
|
function refreshDots() {
|
|
var ds = dotsWrap.querySelectorAll("span");
|
|
ds.forEach(function (d, i) {
|
|
if (i === cur) {
|
|
d.style.background = "#C07B3B";
|
|
d.style.transform = "scale(1.4)";
|
|
} else {
|
|
d.style.background = "rgba(192,123,59,.35)";
|
|
d.style.transform = "scale(1)";
|
|
}
|
|
});
|
|
}
|
|
|
|
/* Patch updateBtn to also refresh dots */
|
|
var _updateBtn = updateBtn;
|
|
updateBtn = function () {
|
|
_updateBtn();
|
|
refreshDots();
|
|
};
|
|
|
|
/* ── Init ── */
|
|
updateBtn();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|