Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 oliver
|
af1e219c12 | ||
|
oliver
|
cf9af9e7a9 |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
+192
-71
@@ -14,13 +14,24 @@
|
||||
<header class="topbar" role="banner">
|
||||
<div class="topbar-logo">
|
||||
<img src="asset/logo.webp" alt="[fi-ne] & LACUEOR" />
|
||||
<span class="topbar-label">B2B<br />Partner Portal</span>
|
||||
<span class="topbar-label" data-i18n="topbar.label"
|
||||
>B2B<br />Partner Portal</span
|
||||
>
|
||||
</div>
|
||||
<nav class="topbar-nav" aria-label="Primary">
|
||||
<a href="#brands" class="nav-hide">Our Brands</a>
|
||||
<a href="#b2b" class="nav-hide">Partner Benefits</a>
|
||||
<a href="#signup" class="nav-hide">Contact</a>
|
||||
<a href="https://b2b.finorbrands.com" class="btn-topbar"
|
||||
<a href="#brands" class="nav-hide" data-i18n="nav.brands"
|
||||
>Our Brands</a
|
||||
>
|
||||
<a href="#b2b" class="nav-hide" data-i18n="nav.benefits"
|
||||
>Partner Benefits</a
|
||||
>
|
||||
<a href="#signup" class="nav-hide" data-i18n="nav.contact"
|
||||
>Contact</a
|
||||
>
|
||||
<a
|
||||
href="https://b2b.finorbrands.com"
|
||||
class="btn-topbar"
|
||||
data-i18n="nav.signin"
|
||||
>Anmelden</a
|
||||
>
|
||||
</nav>
|
||||
@@ -35,11 +46,17 @@
|
||||
id="brands"
|
||||
aria-labelledby="brands-heading"
|
||||
>
|
||||
<p class="section-label">Our Brand Universe</p>
|
||||
<h2 class="section-title" id="brands-heading">
|
||||
<p class="section-label" data-i18n="brands.label">
|
||||
Our Brand Universe
|
||||
</p>
|
||||
<h2
|
||||
class="section-title"
|
||||
id="brands-heading"
|
||||
data-i18n="brands.title"
|
||||
>
|
||||
Consumer & Retail Destinations
|
||||
</h2>
|
||||
<p class="section-body">
|
||||
<p class="section-body" data-i18n="brands.body">
|
||||
Direct our clients and consumers to our flagship brand
|
||||
destinations.
|
||||
</p>
|
||||
@@ -55,7 +72,9 @@
|
||||
aria-label="Visit [fi-ne] consumer website — finecosmetic.de"
|
||||
>
|
||||
<div class="brand-card-header">
|
||||
<span class="brand-card-eyebrow"
|
||||
<span
|
||||
class="brand-card-eyebrow"
|
||||
data-i18n="fine.eyebrow"
|
||||
>Premium Natural Cosmetics</span
|
||||
>
|
||||
<img
|
||||
@@ -65,7 +84,10 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="brand-card-footer">
|
||||
<span class="brand-card-tagline">
|
||||
<span
|
||||
class="brand-card-tagline"
|
||||
data-i18n="fine.tagline"
|
||||
>
|
||||
Clean. Unisex. Uncompromisingly effective Body
|
||||
Care. <br />
|
||||
Born in Berlin.
|
||||
@@ -91,7 +113,9 @@
|
||||
aria-label="Visit LACUEOR consumer website — lacueor.com"
|
||||
>
|
||||
<div class="brand-card-header">
|
||||
<span class="brand-card-eyebrow"
|
||||
<span
|
||||
class="brand-card-eyebrow"
|
||||
data-i18n="lacueor.eyebrow"
|
||||
>Premium Organic Skin Care</span
|
||||
>
|
||||
<img
|
||||
@@ -101,7 +125,10 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="brand-card-footer">
|
||||
<span class="brand-card-tagline">
|
||||
<span
|
||||
class="brand-card-tagline"
|
||||
data-i18n="lacueor.tagline"
|
||||
>
|
||||
Premium organic skin care.<br />
|
||||
Born in Switzerland.
|
||||
</span>
|
||||
@@ -115,28 +142,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<img
|
||||
class="brands-banner"
|
||||
id="brands-banner"
|
||||
src="asset/banner/5.webp"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Banner image selector -->
|
||||
<div class="banner-selector">
|
||||
<label for="banner-picker">Banner:</label>
|
||||
<select id="banner-picker">
|
||||
<option value="1">Banner 1</option>
|
||||
<option value="2">Banner 2</option>
|
||||
<option value="3">Banner 3</option>
|
||||
<option value="4">Banner 4</option>
|
||||
<option value="5" selected>Banner 5</option>
|
||||
<option value="6">Banner 6</option>
|
||||
<option value="7">Banner 7</option>
|
||||
<option value="8">Banner 8</option>
|
||||
<option value="9">Banner 9</option>
|
||||
</select>
|
||||
<img class="brands-banner" src="asset/banner.webp" alt="" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -148,11 +154,17 @@
|
||||
id="b2b"
|
||||
aria-labelledby="b2b-heading"
|
||||
>
|
||||
<p class="section-label">Exclusive Partnership</p>
|
||||
<h2 class="section-title" id="b2b-heading">
|
||||
<p class="section-label" data-i18n="b2b.label">
|
||||
Exclusive Partnership
|
||||
</p>
|
||||
<h2
|
||||
class="section-title"
|
||||
id="b2b-heading"
|
||||
data-i18n="b2b.title"
|
||||
>
|
||||
Apply for B2B Partnership
|
||||
</h2>
|
||||
<p class="section-body">
|
||||
<p class="section-body" data-i18n="b2b.body">
|
||||
We love to partner and collaborate with like-minded people
|
||||
and companies! If you are interested in a retail partnership
|
||||
or colaboration, please fill out
|
||||
@@ -183,9 +195,16 @@
|
||||
<line x1="12" y1="22.08" x2="12" y2="12" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="b2b-benefit-title">Bulk Pricing</span>
|
||||
<span
|
||||
class="b2b-benefit-title"
|
||||
data-i18n="b2b.benefit1.title"
|
||||
>Bulk Pricing</span
|
||||
>
|
||||
<div class="b2b-benefit-rule" aria-hidden="true"></div>
|
||||
<span class="b2b-benefit-text">
|
||||
<span
|
||||
class="b2b-benefit-text"
|
||||
data-i18n="b2b.benefit1.text"
|
||||
>
|
||||
Tiered wholesale rates on every SKU across our
|
||||
entire brand portfolio — the more you order, the
|
||||
more you save.
|
||||
@@ -211,11 +230,16 @@
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="b2b-benefit-title"
|
||||
<span
|
||||
class="b2b-benefit-title"
|
||||
data-i18n="b2b.benefit2.title"
|
||||
>Exclusive Promotions</span
|
||||
>
|
||||
<div class="b2b-benefit-rule" aria-hidden="true"></div>
|
||||
<span class="b2b-benefit-text">
|
||||
<span
|
||||
class="b2b-benefit-text"
|
||||
data-i18n="b2b.benefit2.text"
|
||||
>
|
||||
Partner-only seasonal campaigns, early-access
|
||||
product launches, and co-marketing opportunities
|
||||
reserved for B2B members.
|
||||
@@ -244,23 +268,21 @@
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="b2b-benefit-title">Dedicated Support</span>
|
||||
<span
|
||||
class="b2b-benefit-title"
|
||||
data-i18n="b2b.benefit3.title"
|
||||
>Dedicated Support</span
|
||||
>
|
||||
<div class="b2b-benefit-rule" aria-hidden="true"></div>
|
||||
<span class="b2b-benefit-text">
|
||||
<span
|
||||
class="b2b-benefit-text"
|
||||
data-i18n="b2b.benefit3.text"
|
||||
>
|
||||
A personal account manager and priority fulfilment
|
||||
to keep your business moving without friction.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b2b-divider" aria-hidden="true"></div>
|
||||
|
||||
<p class="b2b-notice">
|
||||
Already a partner?  —  
|
||||
<a href="https://b2b.finorbrands.com"
|
||||
>Sign in to your B2B account</a
|
||||
>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================
|
||||
@@ -270,26 +292,40 @@
|
||||
<div class="values-grid" role="list">
|
||||
<div class="value-item" role="listitem">
|
||||
<p class="value-number">01</p>
|
||||
<p class="value-title">Curated</p>
|
||||
<p class="value-desc">Selectively distributed</p>
|
||||
<p class="value-title" data-i18n="value1.title">
|
||||
Curated
|
||||
</p>
|
||||
<p class="value-desc" data-i18n="value1.desc">
|
||||
Selectively distributed
|
||||
</p>
|
||||
</div>
|
||||
<div class="value-item" role="listitem">
|
||||
<p class="value-number">02</p>
|
||||
<p class="value-title">Certified</p>
|
||||
<p class="value-desc">Vegan & natural formulas</p>
|
||||
<p class="value-title" data-i18n="value2.title">
|
||||
Certified
|
||||
</p>
|
||||
<p class="value-desc" data-i18n="value2.desc">
|
||||
Vegan & natural formulas
|
||||
</p>
|
||||
</div>
|
||||
<div class="value-item" role="listitem">
|
||||
<p class="value-number">03</p>
|
||||
<p class="value-title">Crafted</p>
|
||||
<p class="value-desc">
|
||||
<p class="value-title" data-i18n="value3.title">
|
||||
Crafted
|
||||
</p>
|
||||
<p class="value-desc" data-i18n="value3.desc">
|
||||
Handmade in Germany,<br />
|
||||
Austria and Switzerland
|
||||
</p>
|
||||
</div>
|
||||
<div class="value-item" role="listitem">
|
||||
<p class="value-number">04</p>
|
||||
<p class="value-title">Committed</p>
|
||||
<p class="value-desc">Personal B2B support</p>
|
||||
<p class="value-title" data-i18n="value4.title">
|
||||
Committed
|
||||
</p>
|
||||
<p class="value-desc" data-i18n="value4.desc">
|
||||
Personal B2B support
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -307,7 +343,12 @@
|
||||
Interested in carrying [fi-ne] or LACUEOR? Send us your details
|
||||
and we will get back to you within 48 hours.
|
||||
</p>
|
||||
<form class="signup-form" action="#signup" method="post" novalidate>
|
||||
<form
|
||||
class="signup-form"
|
||||
action="https://n8n.finorbrands.com/webhook/b2b-signup"
|
||||
method="post"
|
||||
novalidate
|
||||
>
|
||||
<div class="signup-grid">
|
||||
<div class="form-group">
|
||||
<label for="signup-name" data-i18n="signup.name"
|
||||
@@ -319,6 +360,9 @@
|
||||
name="name"
|
||||
required
|
||||
/>
|
||||
<span class="field-error" data-i18n="signup.err.name"
|
||||
>Please enter your name.</span
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="signup-email" data-i18n="signup.email"
|
||||
@@ -330,6 +374,9 @@
|
||||
name="email"
|
||||
required
|
||||
/>
|
||||
<span class="field-error" data-i18n="signup.err.email"
|
||||
>Please enter a valid email address.</span
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="signup-phone" data-i18n="signup.phone"
|
||||
@@ -348,16 +395,62 @@
|
||||
placeholder="https://"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="signup-social" data-i18n="signup.social"
|
||||
>Social Media</label
|
||||
<div class="form-group form-group--full">
|
||||
<label data-i18n="signup.channels"
|
||||
>Sales Channels</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="signup-social"
|
||||
name="social"
|
||||
placeholder="Instagram / LinkedIn / …"
|
||||
/>
|
||||
<div class="checkbox-group">
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="channel_online"
|
||||
value="online_shop"
|
||||
/>
|
||||
<span data-i18n="signup.channel.online"
|
||||
>Online Shop</span
|
||||
>
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="channel_showroom"
|
||||
value="showroom"
|
||||
/>
|
||||
<span data-i18n="signup.channel.showroom"
|
||||
>Showroom</span
|
||||
>
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="channel_store"
|
||||
value="physical_store"
|
||||
/>
|
||||
<span data-i18n="signup.channel.store"
|
||||
>Physical Store</span
|
||||
>
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="channel_amazon"
|
||||
value="amazon"
|
||||
/>
|
||||
<span data-i18n="signup.channel.amazon"
|
||||
>Amazon</span
|
||||
>
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="channel_other"
|
||||
value="other"
|
||||
/>
|
||||
<span data-i18n="signup.channel.other"
|
||||
>Other</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-group--full">
|
||||
<label for="signup-message" data-i18n="signup.message"
|
||||
@@ -370,6 +463,9 @@
|
||||
rows="5"
|
||||
required
|
||||
></textarea>
|
||||
<span class="field-error" data-i18n="signup.err.message"
|
||||
>Please describe your business case.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@@ -381,6 +477,29 @@
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div
|
||||
id="signup-confirm"
|
||||
class="signup-confirm"
|
||||
style="display: none"
|
||||
>
|
||||
<div class="signup-confirm-inner">
|
||||
<span class="signup-confirm-icon" aria-hidden="true"></span>
|
||||
<h3
|
||||
class="signup-confirm-title"
|
||||
data-i18n="signup.confirm.title"
|
||||
>
|
||||
Thank You!
|
||||
</h3>
|
||||
<p
|
||||
class="signup-confirm-body"
|
||||
data-i18n="signup.confirm.body"
|
||||
>
|
||||
We have received your request and will get back to you
|
||||
within 48 hours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="signup-notice-rule" aria-hidden="true"></div>
|
||||
|
||||
<p
|
||||
@@ -388,7 +507,9 @@
|
||||
style="margin-top: 0; border-top: none; background: transparent"
|
||||
>
|
||||
Already a partner?  —  
|
||||
<a href="https://b2b.finorbrands.com"
|
||||
<a
|
||||
href="https://b2b.finorbrands.com"
|
||||
data-i18n="signup.notice_link"
|
||||
>Sign in to your B2B account</a
|
||||
>
|
||||
</p>
|
||||
|
||||
@@ -9,6 +9,43 @@
|
||||
/* ── Translations ─────────────────────────────────────── */
|
||||
var translations = {
|
||||
en: {
|
||||
"topbar.label": "B2B Partner Portal",
|
||||
"nav.brands": "Our Brands",
|
||||
"nav.benefits": "Partner Benefits",
|
||||
"nav.contact": "Contact",
|
||||
"nav.signin": "Anmelden",
|
||||
"brands.label": "Our Brand Universe",
|
||||
"brands.title": "Consumer & Retail Destinations",
|
||||
"brands.body":
|
||||
"Direct our clients and consumers to our flagship brand destinations.",
|
||||
"fine.eyebrow": "Premium Natural Cosmetics",
|
||||
"fine.tagline":
|
||||
"Clean. Unisex. Uncompromisingly effective Body Care. Born in Berlin.",
|
||||
"lacueor.eyebrow": "Premium Organic Skin Care",
|
||||
"lacueor.tagline": "Premium organic skin care. Born in Switzerland.",
|
||||
"b2b.label": "Exclusive Partnership",
|
||||
"b2b.title": "Apply for B2B Partnership",
|
||||
"b2b.body":
|
||||
"We love to partner and collaborate with like-minded people and companies! If you are interested in a retail partnership or colaboration, please fill out the form below and we will reach out to you.",
|
||||
"b2b.benefit1.title": "Bulk Pricing",
|
||||
"b2b.benefit1.text":
|
||||
"Tiered wholesale rates on every SKU across our entire brand portfolio — the more you order, the more you save.",
|
||||
"b2b.benefit2.title": "Exclusive Promotions",
|
||||
"b2b.benefit2.text":
|
||||
"Partner-only seasonal campaigns, early-access product launches, and co-marketing opportunities reserved for B2B members.",
|
||||
"b2b.benefit3.title": "Dedicated Support",
|
||||
"b2b.benefit3.text":
|
||||
"A personal account manager and priority fulfilment to keep your business moving without friction.",
|
||||
"b2b.notice": "Already a partner?",
|
||||
"b2b.notice_link": "Sign in to your B2B account",
|
||||
"value1.title": "Curated",
|
||||
"value1.desc": "Selectively distributed",
|
||||
"value2.title": "Certified",
|
||||
"value2.desc": "Vegan & natural formulas",
|
||||
"value3.title": "Crafted",
|
||||
"value3.desc": "Handmade in Germany, Austria and Switzerland",
|
||||
"value4.title": "Committed",
|
||||
"value4.desc": "Personal B2B support",
|
||||
"signup.label": "Contact Us",
|
||||
"signup.title": "Become a Partner",
|
||||
"signup.body":
|
||||
@@ -18,26 +55,79 @@
|
||||
"signup.phone": "Phone",
|
||||
"signup.website": "Website",
|
||||
"signup.social": "Social Media",
|
||||
"signup.message": "Describe your business case *",
|
||||
"signup.message":
|
||||
"Your background / your philosophy / your favorite brands *",
|
||||
"signup.submit": "Send Request",
|
||||
"footer.copyright": "\u00a9 2025 FINOR GmbH. All rights reserved.",
|
||||
"signup.confirm.title": "Thank You!",
|
||||
"signup.confirm.body":
|
||||
"We have received your request and will get back to you within 48 hours.",
|
||||
"signup.err.name": "Please enter your name.",
|
||||
"signup.err.email": "Please enter a valid email address.",
|
||||
"signup.err.message": "Please describe your business case.",
|
||||
"signup.notice_link": "Sign in to your B2B account",
|
||||
"footer.copyright": "© 2025 FINOR GmbH. All rights reserved.",
|
||||
"footer.legal": "Legal Notice",
|
||||
"footer.privacy": "Privacy Policy",
|
||||
"footer.tagline": "Made in Berlin, with love.",
|
||||
},
|
||||
de: {
|
||||
"topbar.label": "B2B Partner Portal",
|
||||
"nav.brands": "Unsere Marken",
|
||||
"nav.benefits": "Partner-Vorteile",
|
||||
"nav.contact": "Kontakt",
|
||||
"nav.signin": "Anmelden",
|
||||
"brands.label": "Unser Markenuniversum",
|
||||
"brands.title": "Consumer & Retail Ziele",
|
||||
"brands.body":
|
||||
"Leiten Sie Ihre Kunden zu unseren Flaggschiff-Marken weiter.",
|
||||
"fine.eyebrow": "Premium Naturkosmetik",
|
||||
"fine.tagline":
|
||||
"Clean. Unisex. Unkompromittierend wirksame Body Care. Aus Berlin.",
|
||||
"lacueor.eyebrow": "Premium Bio-Hautpflege",
|
||||
"lacueor.tagline": "Premium Bio-Hautpflege. Aus der Schweiz.",
|
||||
"b2b.label": "Exklusive Partnerschaft",
|
||||
"b2b.title": "B2B Partnerschaft beantragen",
|
||||
"b2b.body":
|
||||
"Wir lieben Partnerschaften mit gleichgesinnten Menschen und Unternehmen! Bei Interesse an einer Retail-Partnerschaft oder Kooperation füllt gerne das untenstehende Formular aus. Wir melden uns bei euch.",
|
||||
"b2b.benefit1.title": "Mengenrabatte",
|
||||
"b2b.benefit1.text":
|
||||
"Gestaffelte Großhandelspreise für jede SKU unseres gesamten Markenportfolios – je mehr Sie bestellen, desto mehr sparen Sie.",
|
||||
"b2b.benefit2.title": "Exklusive Aktionen",
|
||||
"b2b.benefit2.text":
|
||||
"Partner-exklusive saisonale Kampagnen, frühzeitiger Zugang zu Produktneuheiten und Co-Marketing-Möglichkeiten.",
|
||||
"b2b.benefit3.title": "Persönlicher Support",
|
||||
"b2b.benefit3.text":
|
||||
"Ein persönlicher Account-Manager und prioritäre Auftragsabwicklung für reibungslose Geschäftsabläufe.",
|
||||
"b2b.notice": "Bereits Partner?",
|
||||
"b2b.notice_link": "Zum B2B-Konto anmelden",
|
||||
"value1.title": "Kuratiert",
|
||||
"value1.desc": "Selektiv vertrieben",
|
||||
"value2.title": "Zertifiziert",
|
||||
"value2.desc": "Vegane & natürliche Formeln",
|
||||
"value3.title": "Handgefertigt",
|
||||
"value3.desc": "Hergestellt in Deutschland, Österreich und der Schweiz",
|
||||
"value4.title": "Engagiert",
|
||||
"value4.desc": "Persönlicher B2B-Support",
|
||||
"signup.label": "Kontakt",
|
||||
"signup.title": "Partner werden",
|
||||
"signup.body":
|
||||
"Interesse an [fi-ne] oder LACUEOR? Senden Sie uns Ihre Daten und wir melden uns innerhalb von 48 Stunden zur\u00fcck.",
|
||||
"Interesse an [fi-ne] oder LACUEOR? Schickt uns eure Daten und wir melden uns spätestens innerhalb von 48 Stunden zurück.",
|
||||
"signup.name": "Name *",
|
||||
"signup.email": "E-Mail *",
|
||||
"signup.phone": "Telefon",
|
||||
"signup.website": "Webseite",
|
||||
"signup.social": "Social Media",
|
||||
"signup.message": "Beschreiben Sie Ihr Gesch\u00e4ftsfeld *",
|
||||
"signup.message":
|
||||
"Ihr Hintergrund / Ihre Philosophie / Ihre Lieblingsmarken *",
|
||||
"signup.submit": "Anfrage senden",
|
||||
"footer.copyright": "\u00a9 2025 FINOR GmbH. Alle Rechte vorbehalten.",
|
||||
"signup.confirm.title": "Vielen Dank!",
|
||||
"signup.confirm.body":
|
||||
"Wir haben Ihre Anfrage erhalten und melden uns spätestens innerhalb von 48 Stunden zurück.",
|
||||
"signup.err.name": "Bitte geben Sie Ihren Namen ein.",
|
||||
"signup.err.email": "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
|
||||
"signup.err.message": "Bitte beschreiben Sie Ihr Geschäftsfeld.",
|
||||
"signup.notice_link": "Zum B2B-Konto anmelden",
|
||||
"footer.copyright": "© 2025 FINOR GmbH. Alle Rechte vorbehalten.",
|
||||
"footer.legal": "Impressum",
|
||||
"footer.privacy": "Datenschutz",
|
||||
"footer.tagline": "Hergestellt in Berlin, mit Liebe.",
|
||||
@@ -64,12 +154,72 @@
|
||||
applyLang(this.value);
|
||||
});
|
||||
|
||||
/* ── Banner image selector ──────────────────────────────── */
|
||||
var bannerPicker = document.getElementById("banner-picker");
|
||||
var brandsBanner = document.getElementById("brands-banner");
|
||||
if (bannerPicker && brandsBanner) {
|
||||
bannerPicker.addEventListener("change", function () {
|
||||
brandsBanner.src = "asset/banner/" + this.value + ".webp";
|
||||
/* ── Form validation + AJAX submission ────────────── */
|
||||
var signupForm = document.querySelector(".signup-form");
|
||||
if (signupForm) {
|
||||
signupForm.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var name = document.getElementById("signup-name");
|
||||
var email = document.getElementById("signup-email");
|
||||
var message = document.getElementById("signup-message");
|
||||
var valid = true;
|
||||
|
||||
function clearErrors() {
|
||||
document
|
||||
.querySelectorAll(".form-group.has-error")
|
||||
.forEach(function (g) {
|
||||
g.classList.remove("has-error");
|
||||
});
|
||||
}
|
||||
|
||||
function markError(el) {
|
||||
var group = el.closest(".form-group");
|
||||
if (group) group.classList.add("has-error");
|
||||
valid = false;
|
||||
}
|
||||
|
||||
clearErrors();
|
||||
|
||||
if (!name.value.trim()) markError(name);
|
||||
if (
|
||||
!email.value.trim() ||
|
||||
!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)
|
||||
)
|
||||
markError(email);
|
||||
if (!message.value.trim()) markError(message);
|
||||
|
||||
if (!valid) return;
|
||||
|
||||
/* Gather data */
|
||||
var data = {
|
||||
name: name.value.trim(),
|
||||
email: email.value.trim(),
|
||||
phone: document.getElementById("signup-phone")?.value || "",
|
||||
website: document.getElementById("signup-website")?.value || "",
|
||||
channels: Array.from(
|
||||
document.querySelectorAll(
|
||||
".checkbox-group input[type=checkbox]:checked",
|
||||
),
|
||||
).map(function (c) {
|
||||
return c.value;
|
||||
}),
|
||||
message: message.value.trim(),
|
||||
};
|
||||
|
||||
/* Submit via AJAX */
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", signupForm.getAttribute("action"), true);
|
||||
xhr.setRequestHeader("Content-Type", "application/json");
|
||||
xhr.onload = function () {
|
||||
signupForm.style.display = "none";
|
||||
document.getElementById("signup-confirm").style.display = "block";
|
||||
};
|
||||
xhr.onerror = function () {
|
||||
signupForm.style.display = "none";
|
||||
document.getElementById("signup-confirm").style.display = "block";
|
||||
};
|
||||
xhr.send(JSON.stringify(data));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
--dark: #0e0e0e;
|
||||
--mid-grey: #7a7265;
|
||||
--light-grey: #d6d0c8;
|
||||
--fine-beige: #e8e0d0;
|
||||
--fine-beige: #efe9db;
|
||||
--lacueor-dark: #1a1814;
|
||||
--lacueor-gold: #c9aa5e;
|
||||
--border: rgba(184, 150, 90, 0.25);
|
||||
@@ -360,7 +360,7 @@ body::before {
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
text-transform: none;
|
||||
padding: 12px 32px;
|
||||
border: 1px solid;
|
||||
transition: all var(--transition);
|
||||
@@ -812,7 +812,7 @@ footer {
|
||||
color: var(--mid-grey);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group input:not([type="checkbox"]),
|
||||
.signup-form textarea {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 13px;
|
||||
@@ -835,7 +835,7 @@ footer {
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group input:not([type="checkbox"]):focus,
|
||||
.signup-form textarea:focus {
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 0 0 3px rgba(184, 150, 90, 0.12);
|
||||
@@ -845,6 +845,10 @@ footer {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.form-group--half {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.signup-form textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
@@ -874,6 +878,33 @@ footer {
|
||||
color: var(--warm-white);
|
||||
}
|
||||
|
||||
/* Checkbox group */
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 20px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--charcoal);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--gold);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Gold rule above the notice */
|
||||
.signup-notice-rule {
|
||||
width: 60px;
|
||||
@@ -887,47 +918,76 @@ footer {
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
BANNER SELECTOR
|
||||
============================================================ */
|
||||
.banner-selector {
|
||||
/* Confirmation panel */
|
||||
.signup-confirm {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 60px 40px;
|
||||
}
|
||||
|
||||
.signup-confirm-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.signup-confirm-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 2px solid var(--gold);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 20px 48px;
|
||||
background: var(--cream);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--mid-grey);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.banner-selector label {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--gold);
|
||||
.signup-confirm-icon::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 7px;
|
||||
border-left: 2px solid var(--gold);
|
||||
border-bottom: 2px solid var(--gold);
|
||||
transform: rotate(-45deg) translateY(-1px);
|
||||
}
|
||||
|
||||
.banner-selector select {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 11px;
|
||||
.signup-confirm-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--warm-white);
|
||||
color: var(--charcoal);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color var(--transition);
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
.banner-selector select:hover,
|
||||
.banner-selector select:focus {
|
||||
border-color: var(--gold);
|
||||
.signup-confirm-body {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
color: var(--mid-grey);
|
||||
letter-spacing: 0.02em;
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
/* Error states */
|
||||
.form-group .field-error {
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
color: #c0392b;
|
||||
margin-top: 2px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-group.has-error .field-error {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-group.has-error input,
|
||||
.form-group.has-error textarea {
|
||||
border-color: #c0392b;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
|
||||
Reference in New Issue
Block a user