nice
This commit is contained in:
+461
-122
@@ -91,6 +91,7 @@
|
|||||||
h1 { font-size: clamp(2.8rem, 7vw, 5rem); max-width: 80%; margin-top: 18px; }
|
h1 { font-size: clamp(2.8rem, 7vw, 5rem); max-width: 80%; margin-top: 18px; }
|
||||||
.lead { max-width: 62ch; margin-top: 18px; color: var(--silver); font-size: 1rem; }
|
.lead { max-width: 62ch; margin-top: 18px; color: var(--silver); font-size: 1rem; }
|
||||||
.grid-2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
|
.grid-2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
|
||||||
|
.grid-2-equal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
|
||||||
.panel {
|
.panel {
|
||||||
background: rgba(255, 243, 224, 0.84);
|
background: rgba(255, 243, 224, 0.84);
|
||||||
border: 1px solid rgba(93, 64, 55, 0.12);
|
border: 1px solid rgba(93, 64, 55, 0.12);
|
||||||
@@ -103,70 +104,210 @@
|
|||||||
.info-list { display: grid; gap: 16px; }
|
.info-list { display: grid; gap: 16px; }
|
||||||
.info-item { padding: 18px; border-radius: 22px; background: var(--lift); border: 1px solid rgba(93, 64, 55, 0.1); }
|
.info-item { padding: 18px; border-radius: 22px; background: var(--lift); border: 1px solid rgba(93, 64, 55, 0.1); }
|
||||||
.info-item h3 { font-size: 1.2rem; margin-bottom: 8px; }
|
.info-item h3 { font-size: 1.2rem; margin-bottom: 8px; }
|
||||||
.faq-wrap { display: grid; gap: 14px; }
|
.story-card {
|
||||||
.faq-item {
|
|
||||||
border-radius: 24px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid rgba(93, 64, 55, 0.12);
|
|
||||||
background: rgba(255, 243, 224, 0.88);
|
background: rgba(255, 243, 224, 0.88);
|
||||||
|
border: 1px solid rgba(93, 64, 55, 0.12);
|
||||||
|
border-radius: 28px;
|
||||||
|
padding: 28px;
|
||||||
|
box-shadow: 0 18px 44px rgba(62, 39, 35, 0.08);
|
||||||
}
|
}
|
||||||
.faq-button {
|
.story-card h3 {
|
||||||
|
font-size: clamp(1.5rem, 3vw, 2.2rem);
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.story-card p { color: var(--silver); }
|
||||||
|
.pairing-type {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: var(--gold);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.pairing-type [data-mf-text-type="typing"] {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 14ch;
|
||||||
|
}
|
||||||
|
.career-form {
|
||||||
|
margin-top: 24px;
|
||||||
|
display: grid;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.career-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.career-field.full {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
.career-field label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--gold);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.career-input,
|
||||||
|
.career-textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px 22px;
|
padding: 14px 16px;
|
||||||
background: transparent;
|
border: 1px solid rgba(230, 81, 0, 0.18);
|
||||||
border: none;
|
border-radius: 16px;
|
||||||
display: flex;
|
background: rgba(93, 64, 55, 0.05);
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
font: inherit;
|
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
|
font: inherit;
|
||||||
}
|
}
|
||||||
.faq-button strong {
|
.career-input:focus,
|
||||||
font-family: Georgia, "Times New Roman", serif;
|
.career-textarea:focus {
|
||||||
font-size: 1.2rem;
|
outline: none;
|
||||||
text-align: left;
|
border-color: var(--gold);
|
||||||
|
box-shadow: 0 0 0 3px var(--gold-glow);
|
||||||
}
|
}
|
||||||
.faq-icon { color: var(--gold); font-size: 1rem; }
|
.career-textarea {
|
||||||
.faq-panel {
|
min-height: 140px;
|
||||||
display: none;
|
resize: vertical;
|
||||||
padding: 0 22px 22px;
|
|
||||||
color: var(--silver);
|
|
||||||
}
|
}
|
||||||
.faq-panel.open { display: block; }
|
.career-submit {
|
||||||
.faq-panel ul { list-style: none; display: grid; gap: 10px; }
|
border: none;
|
||||||
.faq-panel li { padding-left: 18px; position: relative; }
|
border-radius: 999px;
|
||||||
.faq-panel li::before {
|
padding: 14px 18px;
|
||||||
content: "";
|
font: inherit;
|
||||||
position: absolute;
|
font-weight: 700;
|
||||||
left: 0;
|
color: var(--card);
|
||||||
top: 0.65em;
|
cursor: pointer;
|
||||||
width: 8px;
|
background: linear-gradient(135deg, var(--gold-lo) 0%, var(--gold) 38%, var(--gold-hi) 55%, var(--gold) 75%, var(--gold-lo) 100%);
|
||||||
height: 8px;
|
transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
|
||||||
border-radius: 50%;
|
}
|
||||||
background: linear-gradient(135deg, var(--gold-lo), var(--gold), var(--gold-hi));
|
.career-submit:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 12px 24px var(--gold-glow);
|
||||||
|
}
|
||||||
|
.career-submit:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.career-status {
|
||||||
|
color: var(--grey);
|
||||||
|
font-size: 0.84rem;
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
background: var(--bg-deep);
|
background: var(--bg-deep);
|
||||||
border-top: 3px solid var(--gold);
|
border-top: 3px solid var(--gold);
|
||||||
|
padding: 72px 8vw 40px;
|
||||||
}
|
}
|
||||||
.footer-row {
|
.footer-top {
|
||||||
max-width: 1120px;
|
max-width: 1120px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: grid;
|
||||||
justify-content: space-between;
|
grid-template-columns: 1.4fr 1.1fr 0.8fr 0.8fr;
|
||||||
gap: 18px;
|
gap: 28px;
|
||||||
flex-wrap: wrap;
|
align-items: start;
|
||||||
align-items: center;
|
}
|
||||||
|
.footer-brand p {
|
||||||
|
color: var(--grey);
|
||||||
|
max-width: 28ch;
|
||||||
|
margin-top: 14px;
|
||||||
|
font-size: 0.88rem;
|
||||||
}
|
}
|
||||||
.footer-logo img { height: 34px; width: auto; }
|
.footer-logo img { height: 34px; width: auto; }
|
||||||
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
|
.footer-contact-shell {
|
||||||
.footer-links a, .footer-row span { color: var(--grey); font-size: 0.84rem; }
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.footer-contact-form {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.footer-contact-form textarea,
|
||||||
|
.footer-contact-form input {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid rgba(161, 136, 127, 0.2);
|
||||||
|
border-radius: 18px;
|
||||||
|
background: rgba(255, 243, 224, 0.06);
|
||||||
|
color: var(--card);
|
||||||
|
font: inherit;
|
||||||
|
padding: 14px 16px;
|
||||||
|
}
|
||||||
|
.footer-contact-form textarea {
|
||||||
|
min-height: 110px;
|
||||||
|
resize: vertical;
|
||||||
|
padding-right: 60px;
|
||||||
|
}
|
||||||
|
.footer-contact-message-wrap {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.footer-contact-message-wrap .footer-contact-send {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
min-height: 40px;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: none;
|
||||||
|
background: rgba(255, 243, 224, 0.9);
|
||||||
|
color: var(--gold);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.footer-contact-form input::placeholder,
|
||||||
|
.footer-contact-form textarea::placeholder {
|
||||||
|
color: var(--grey);
|
||||||
|
}
|
||||||
|
.footer-contact-form input:focus,
|
||||||
|
.footer-contact-form textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--gold);
|
||||||
|
box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.12);
|
||||||
|
}
|
||||||
|
.footer-contact-status {
|
||||||
|
color: var(--grey);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
.footer-col h4 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: var(--gold);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.footer-col ul {
|
||||||
|
list-style: none;
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.footer-col a,
|
||||||
|
.footer-bottom span,
|
||||||
|
.footer-legal a {
|
||||||
|
color: var(--grey);
|
||||||
|
font-size: 0.84rem;
|
||||||
|
}
|
||||||
|
.footer-col a:hover,
|
||||||
|
.footer-legal a:hover {
|
||||||
|
color: var(--gold-hi);
|
||||||
|
}
|
||||||
|
.footer-bottom {
|
||||||
|
max-width: 1120px;
|
||||||
|
margin: 24px auto 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-top: 24px;
|
||||||
|
border-top: 1px solid rgba(161, 136, 127, 0.18);
|
||||||
|
}
|
||||||
|
.footer-legal {
|
||||||
|
display: flex;
|
||||||
|
gap: 18px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.grid-2 { grid-template-columns: 1fr; }
|
.grid-2, .grid-2-equal, .career-grid { grid-template-columns: 1fr; }
|
||||||
nav, .hero, section, footer { padding-left: 5vw; padding-right: 5vw; }
|
nav, .hero, section, footer { padding-left: 5vw; padding-right: 5vw; }
|
||||||
h1 { max-width: 100%; }
|
h1 { max-width: 100%; }
|
||||||
|
.footer-top { grid-template-columns: 1fr; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -216,51 +357,41 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="faq">
|
<section>
|
||||||
<div class="wrap panel">
|
<div class="wrap grid-2-equal">
|
||||||
<span class="eyebrow">FAQ</span>
|
<div class="story-card">
|
||||||
<h2 style="margin-top: 16px;">Questions people ask before they commit.</h2>
|
<span class="eyebrow">Coffee Theme</span>
|
||||||
<div class="faq-wrap" style="margin-top: 24px;">
|
<h3 style="margin-top: 16px;">Why the coffee theme and the coffee bean in the logo?</h3>
|
||||||
<div class="faq-item">
|
<p>
|
||||||
<button class="faq-button" type="button"><strong>Commercial and Planning</strong><span class="faq-icon">+</span></button>
|
Out of our own experience: business and coffee belong together. The work is rarely clean, linear, or glamorous. It is early starts, sharp conversations, second drafts, and getting one more useful thing done before the day closes.
|
||||||
<div class="faq-panel">
|
</p>
|
||||||
<ul>
|
<div class="pairing-type">
|
||||||
<li>How pricing works across different stages of growth.</li>
|
Business and coffee go together like
|
||||||
<li>When to start with the base plan versus a broader rollout.</li>
|
<span
|
||||||
<li>How to think about long-term ownership and platform flexibility.</li>
|
data-mf-text-type="typing"
|
||||||
</ul>
|
data-mf-text-typing-speed="55"
|
||||||
</div>
|
data-mf-text-typing-delete-speed="28"
|
||||||
</div>
|
data-mf-text-typing-interval="1600"
|
||||||
<div class="faq-item">
|
data-mf-text-typing-cursor="true"
|
||||||
<button class="faq-button" type="button"><strong>Setup and First Steps</strong><span class="faq-icon">+</span></button>
|
data-mf-text-typing-cursor-char="|"
|
||||||
<div class="faq-panel">
|
><span>Menthos and Coca Cola.</span
|
||||||
<ul>
|
><span>Tom and Jerry.</span
|
||||||
<li>What information is needed to get the first instance ready.</li>
|
><span>peanut butter and jelly.</span
|
||||||
<li>How teams choose modules, server location, and initial workflows.</li>
|
><span>Batman and Robin.</span
|
||||||
<li>What a sensible first phase looks like for a new client.</li>
|
><span>thunder and lightning.</span
|
||||||
</ul>
|
><span>late nights and pitch decks.</span></span
|
||||||
</div>
|
>
|
||||||
</div>
|
|
||||||
<div class="faq-item">
|
|
||||||
<button class="faq-button" type="button"><strong>Managing My Instance</strong><span class="faq-icon">+</span></button>
|
|
||||||
<div class="faq-panel">
|
|
||||||
<ul>
|
|
||||||
<li>How to keep data clean and users aligned after launch.</li>
|
|
||||||
<li>What ongoing maintenance and governance can look like.</li>
|
|
||||||
<li>How permissions, updates, and operational routines are handled.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="faq-item">
|
|
||||||
<button class="faq-button" type="button"><strong>Professional Growth and Advanced Use</strong><span class="faq-icon">+</span></button>
|
|
||||||
<div class="faq-panel">
|
|
||||||
<ul>
|
|
||||||
<li>How custom modules and integrations fit into a mature setup.</li>
|
|
||||||
<li>When to bring in specialist developers or internal teams.</li>
|
|
||||||
<li>How the system supports more demanding operational use cases.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="story-card">
|
||||||
|
<span class="eyebrow">Guild Counsel</span>
|
||||||
|
<h3 style="margin-top: 16px;">Why Guild Counsel?</h3>
|
||||||
|
<p>
|
||||||
|
Because we love startups, builders, and teams that are actually trying to make something work. We are fed up with business BS bingo, inflated consulting theater, and polished nonsense that sounds smart while saying nothing.
|
||||||
|
</p>
|
||||||
|
<p style="margin-top: 16px;">
|
||||||
|
Guild stands for craft, shared standards, and people who know their trade. Counsel stands for practical guidance, not buzzwords. Put together, it means advice for operators who need useful decisions, cleaner systems, and less corporate performance art.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -268,53 +399,261 @@
|
|||||||
<section id="careers">
|
<section id="careers">
|
||||||
<div class="wrap panel">
|
<div class="wrap panel">
|
||||||
<span class="eyebrow">Careers</span>
|
<span class="eyebrow">Careers</span>
|
||||||
<h2 style="margin-top: 16px;">We work with people who care about useful systems.</h2>
|
<h2 style="margin-top: 16px;">We permanently start new guilds and are looking for guild managers.</h2>
|
||||||
<p style="margin-top: 16px; color: var(--silver);">
|
<p style="margin-top: 16px; color: var(--silver);">
|
||||||
This area is ready for your careers content. Use it to describe open roles, how you like to work, and what kind of people thrive in your environment.
|
We expect profound expertise in the guild itself, not generic management language. If you want to lead a guild, tell us which guild you want to build, why you fit, and what practical depth you bring.
|
||||||
</p>
|
</p>
|
||||||
|
<p style="margin-top: 16px; color: var(--silver);">
|
||||||
|
An application with the guild, language, an explanation of why you fit, what you bring to the table, and your commercial expectations is expected.
|
||||||
|
</p>
|
||||||
|
<form class="career-form" id="career-form">
|
||||||
|
<div class="career-grid">
|
||||||
|
<div class="career-field">
|
||||||
|
<label for="career-name">Name</label>
|
||||||
|
<input class="career-input" id="career-name" name="name" type="text" placeholder="Your full name" required />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="career-field">
|
||||||
|
<label for="career-email">Email</label>
|
||||||
<section id="partners">
|
<input class="career-input" id="career-email" name="email" type="email" placeholder="you@example.com" required />
|
||||||
<div class="wrap panel">
|
</div>
|
||||||
<span class="eyebrow">Partners</span>
|
<div class="career-field full">
|
||||||
<h2 style="margin-top: 16px;">Built to collaborate with specialists and trusted operators.</h2>
|
<label for="career-guild">Guild interested in</label>
|
||||||
<p style="margin-top: 16px; color: var(--silver);">
|
<input class="career-input" id="career-guild" name="guild" type="text" placeholder="Example: Manufacturing Systems Guild" required />
|
||||||
This area is ready for partner content. Use it to explain agency partnerships, implementation support, referrals, ecosystem relationships, or co-delivery models.
|
</div>
|
||||||
</p>
|
<div class="career-field full">
|
||||||
|
<label for="career-explanation">Explanation: why you fit and what you bring to the table</label>
|
||||||
|
<textarea class="career-textarea" id="career-explanation" name="explanation" placeholder="Describe your expertise, language skills, operator experience, and why you should lead this guild." required></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="career-field full">
|
||||||
|
<label for="career-commercial">Commercial expectations</label>
|
||||||
|
<textarea class="career-textarea" id="career-commercial" name="commercial_expectations" placeholder="Share your preferred model, compensation expectations, and anything commercial we should know." required></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="career-submit" type="submit">Apply for Guild Leadership</button>
|
||||||
|
<div class="career-status" id="career-status"></div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="footer-row">
|
<div
|
||||||
<a class="footer-logo" href="index.html"><img src="img/logo.svg" alt="my-biz.app" /></a>
|
class="footer-top"
|
||||||
<div class="footer-links">
|
data-mf-stagger-animation="fade-up"
|
||||||
<a href="about.html#about-us">About Us</a>
|
data-mf-stagger-gap="70"
|
||||||
<a href="about.html#faq">FAQ</a>
|
data-mf-stagger-duration="620"
|
||||||
<a href="about.html#careers">Careers</a>
|
data-mf-stagger-distance="24"
|
||||||
<a href="about.html#partners">Partners</a>
|
data-mf-stagger-once="true"
|
||||||
|
>
|
||||||
|
<div class="footer-brand">
|
||||||
|
<a class="footer-logo" href="index.html"
|
||||||
|
><img src="img/logo.svg" alt="my-biz.app"
|
||||||
|
/></a>
|
||||||
|
<p>
|
||||||
|
A practical all-in-one back-office platform built to
|
||||||
|
help businesses run with more clarity, less friction,
|
||||||
|
and room to grow over time.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-contact-shell">
|
||||||
|
<form class="footer-contact-form" id="footer-contact-form">
|
||||||
|
<input type="hidden" name="source" value="my-biz.app" />
|
||||||
|
<div class="footer-contact-input-row">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="Email"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="footer-contact-message-wrap">
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
placeholder="Your message"
|
||||||
|
required
|
||||||
|
></textarea>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="footer-contact-send"
|
||||||
|
aria-label="Send"
|
||||||
|
>
|
||||||
|
➤
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="footer-contact-status"
|
||||||
|
id="footer-contact-status"
|
||||||
|
></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="footer-col">
|
||||||
|
<h4>Product</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html#verticals">Solutions</a></li>
|
||||||
|
<li><a href="index.html#story">How It Works</a></li>
|
||||||
|
<li><a href="index.html#pricing">Pricing</a></li>
|
||||||
|
<li><a href="index.html#customization">Customization</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-col">
|
||||||
|
<h4>About</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="about.html#about-us">About Us</a></li>
|
||||||
|
<li><a href="index.html#faq-chat-link">FAQ</a></li>
|
||||||
|
<li><a href="about.html#careers">Careers</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<span>
|
||||||
|
© 2026 my-biz.app · All rights reserved. · This service is powered by
|
||||||
|
<a href="https://ODOO4projects.com" target="_blank" rel="noopener"
|
||||||
|
>ODOO4projects</a
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
<div class="footer-legal">
|
||||||
|
<a href="legal.html#privacy">Privacy</a>
|
||||||
|
<a href="legal.html#terms">Terms</a>
|
||||||
|
<a href="legal.html#imprint">Imprint</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
var buttons = document.querySelectorAll(".faq-button");
|
var params = new URLSearchParams(window.location.search);
|
||||||
buttons.forEach(function (button) {
|
var tracking = {
|
||||||
button.addEventListener("click", function () {
|
utm_source: params.get("utm_source") || "homepage",
|
||||||
var panel = button.nextElementSibling;
|
utm_medium: params.get("utm_medium") || "direct",
|
||||||
var icon = button.querySelector(".faq-icon");
|
utm_campaign: params.get("utm_campaign") || "none",
|
||||||
var open = panel.classList.contains("open");
|
utm_term: params.get("utm_term") || "",
|
||||||
document.querySelectorAll(".faq-panel").forEach(function (item) {
|
utm_content: params.get("utm_content") || "",
|
||||||
item.classList.remove("open");
|
};
|
||||||
});
|
|
||||||
document.querySelectorAll(".faq-icon").forEach(function (item) {
|
function isTrackableHref(href) {
|
||||||
item.textContent = "+";
|
return (
|
||||||
});
|
href &&
|
||||||
if (!open) {
|
href.charAt(0) !== "#" &&
|
||||||
panel.classList.add("open");
|
href.indexOf("mailto:") !== 0 &&
|
||||||
icon.textContent = "−";
|
href.indexOf("tel:") !== 0 &&
|
||||||
|
href.indexOf("javascript:") !== 0
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function applyToLink(link) {
|
||||||
|
var href = link.getAttribute("href");
|
||||||
|
var url;
|
||||||
|
if (!isTrackableHref(href)) return;
|
||||||
|
try {
|
||||||
|
url = new URL(href, window.location.href);
|
||||||
|
} catch (err) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Object.keys(tracking).forEach(function (key) {
|
||||||
|
if (tracking[key]) url.searchParams.set(key, tracking[key]);
|
||||||
|
});
|
||||||
|
if (url.origin === window.location.origin) {
|
||||||
|
link.setAttribute("href", url.pathname + url.search + url.hash);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
link.setAttribute("href", url.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyToLinks(root) {
|
||||||
|
var scope = root && root.querySelectorAll ? root : document;
|
||||||
|
scope.querySelectorAll("a[href]").forEach(applyToLink);
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyToFields(root) {
|
||||||
|
if (!root || !root.querySelectorAll) return;
|
||||||
|
Object.keys(tracking).forEach(function (key) {
|
||||||
|
root.querySelectorAll('input[name="' + key + '"]').forEach(function (input) {
|
||||||
|
input.value = tracking[key];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function appendToFormData(formData) {
|
||||||
|
Object.keys(tracking).forEach(function (key) {
|
||||||
|
formData.set(key, tracking[key]);
|
||||||
|
});
|
||||||
|
return formData;
|
||||||
|
}
|
||||||
|
|
||||||
|
applyToFields(document);
|
||||||
|
applyToLinks(document);
|
||||||
|
|
||||||
|
window._mbsTracking = {
|
||||||
|
params: tracking,
|
||||||
|
applyToLinks: applyToLinks,
|
||||||
|
applyToFields: applyToFields,
|
||||||
|
appendToFormData: appendToFormData,
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var WEBHOOK =
|
||||||
|
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/41f1356d-2b0b-443c-b381-37195f547198";
|
||||||
|
var form = document.getElementById("footer-contact-form");
|
||||||
|
var status = document.getElementById("footer-contact-status");
|
||||||
|
if (!form) return;
|
||||||
|
|
||||||
|
form.addEventListener("submit", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var button = form.querySelector("button[type='submit']");
|
||||||
|
var formData = new FormData(form);
|
||||||
|
if (window._mbsTracking)
|
||||||
|
formData = window._mbsTracking.appendToFormData(formData);
|
||||||
|
status.textContent = "Sending...";
|
||||||
|
button.disabled = true;
|
||||||
|
fetch(WEBHOOK, {
|
||||||
|
method: "POST",
|
||||||
|
body: formData,
|
||||||
|
})
|
||||||
|
.then(function () {
|
||||||
|
status.textContent = "Message received. We will get back to you soon.";
|
||||||
|
form.reset();
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
status.textContent = "Message received. We will get back to you soon.";
|
||||||
|
form.reset();
|
||||||
|
})
|
||||||
|
.finally(function () {
|
||||||
|
button.disabled = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var WEBHOOK =
|
||||||
|
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/b901fc80-c7d0-4204-a6ee-b01fb6c9d3c9";
|
||||||
|
var form = document.getElementById("career-form");
|
||||||
|
var status = document.getElementById("career-status");
|
||||||
|
if (!form) return;
|
||||||
|
|
||||||
|
form.addEventListener("submit", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var button = form.querySelector("button[type='submit']");
|
||||||
|
var formData = new FormData(form);
|
||||||
|
if (window._mbsTracking)
|
||||||
|
formData = window._mbsTracking.appendToFormData(formData);
|
||||||
|
status.textContent = "Sending application...";
|
||||||
|
button.disabled = true;
|
||||||
|
|
||||||
|
fetch(WEBHOOK, {
|
||||||
|
method: "POST",
|
||||||
|
body: formData,
|
||||||
|
})
|
||||||
|
.then(function () {
|
||||||
|
status.textContent = "Application received. We will review it and come back to you.";
|
||||||
|
form.reset();
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
status.textContent = "Application received. We will review it and come back to you.";
|
||||||
|
form.reset();
|
||||||
|
})
|
||||||
|
.finally(function () {
|
||||||
|
button.disabled = false;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|||||||
+165
-29
@@ -38,6 +38,11 @@
|
|||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.css"
|
href="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.css"
|
||||||
/>
|
/>
|
||||||
|
<script
|
||||||
|
defer
|
||||||
|
data-domain="my-biz.app"
|
||||||
|
src="https://plausible.odoo4projects.com/js/script.outbound-links.tagged-events.js"
|
||||||
|
></script>
|
||||||
<style>
|
<style>
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
@@ -1704,7 +1709,9 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.2s, color 0.2s;
|
transition:
|
||||||
|
background 0.2s,
|
||||||
|
color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-select-option:hover,
|
.modal-select-option:hover,
|
||||||
@@ -1861,7 +1868,11 @@
|
|||||||
<a href="#customization">Customization</a>
|
<a href="#customization">Customization</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-right">
|
<div class="nav-right">
|
||||||
<a class="nav-cta-book" href="#story">Book Meeting</a>
|
<a
|
||||||
|
class="nav-cta-book plausible-event-name=Meeting"
|
||||||
|
href="#story"
|
||||||
|
>Book Meeting</a
|
||||||
|
>
|
||||||
<div class="nav-chat" id="nav-chat">
|
<div class="nav-chat" id="nav-chat">
|
||||||
<div
|
<div
|
||||||
class="nav-chat-panel chat-panel"
|
class="nav-chat-panel chat-panel"
|
||||||
@@ -1906,8 +1917,17 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="nav-cta" id="open-modal" href="#">Free Trial</a>
|
<a
|
||||||
<a class="nav-cta nav-cta-sm open-modal" href="#">Try Free</a>
|
class="nav-cta plausible-event-name=Trial"
|
||||||
|
id="open-modal"
|
||||||
|
href="#"
|
||||||
|
>Free Trial</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="nav-cta nav-cta-sm open-modal plausible-event-name=Trial"
|
||||||
|
href="#"
|
||||||
|
>Try Free</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
@@ -2241,7 +2261,9 @@
|
|||||||
class="hero-actions"
|
class="hero-actions"
|
||||||
style="margin-top: auto; justify-content: flex-end"
|
style="margin-top: auto; justify-content: flex-end"
|
||||||
>
|
>
|
||||||
<a class="btn-secondary" href="#pricing"
|
<a
|
||||||
|
class="btn-secondary plausible-event-name=Meeting"
|
||||||
|
href="#pricing"
|
||||||
>Book Meeting</a
|
>Book Meeting</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@@ -2417,7 +2439,7 @@
|
|||||||
<li>Community support</li>
|
<li>Community support</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a
|
<a
|
||||||
class="pricing-cta open-modal"
|
class="pricing-cta open-modal plausible-event-name=Trial"
|
||||||
data-plan="Side Hustle"
|
data-plan="Side Hustle"
|
||||||
href="#"
|
href="#"
|
||||||
>Free Trial</a
|
>Free Trial</a
|
||||||
@@ -2447,7 +2469,7 @@
|
|||||||
<li>Email and chat support</li>
|
<li>Email and chat support</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a
|
<a
|
||||||
class="pricing-cta open-modal"
|
class="pricing-cta open-modal plausible-event-name=Trial"
|
||||||
data-plan="On the Rise"
|
data-plan="On the Rise"
|
||||||
href="#"
|
href="#"
|
||||||
>Free Trial</a
|
>Free Trial</a
|
||||||
@@ -2476,7 +2498,9 @@
|
|||||||
<li>Unlimited users</li>
|
<li>Unlimited users</li>
|
||||||
<li>Dedicated support line</li>
|
<li>Dedicated support line</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a class="pricing-cta open-modal" href="#"
|
<a
|
||||||
|
class="pricing-cta open-modal plausible-event-name=Trial"
|
||||||
|
href="#"
|
||||||
>Talk through hosting</a
|
>Talk through hosting</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@@ -2534,7 +2558,9 @@
|
|||||||
reporting? Work with the people who already know the
|
reporting? Work with the people who already know the
|
||||||
stack and can ship practical improvements without drama.
|
stack and can ship practical improvements without drama.
|
||||||
</p>
|
</p>
|
||||||
<a class="custom-link open-modal" href="#"
|
<a
|
||||||
|
class="custom-link open-modal plausible-event-name=Trial"
|
||||||
|
href="#"
|
||||||
>Request scoped help →</a
|
>Request scoped help →</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@@ -2561,7 +2587,10 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-contact-shell">
|
<div class="footer-contact-shell">
|
||||||
<form class="footer-contact-form" id="footer-contact-form">
|
<form
|
||||||
|
class="footer-contact-form plausible-event-name=eMail+Feedback"
|
||||||
|
id="footer-contact-form"
|
||||||
|
>
|
||||||
<input type="hidden" name="source" value="my-biz.app" />
|
<input type="hidden" name="source" value="my-biz.app" />
|
||||||
<div class="footer-contact-input-row">
|
<div class="footer-contact-input-row">
|
||||||
<input
|
<input
|
||||||
@@ -2604,14 +2633,23 @@
|
|||||||
<h4>About</h4>
|
<h4>About</h4>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="about.html#about-us">About Us</a></li>
|
<li><a href="about.html#about-us">About Us</a></li>
|
||||||
<li><a href="about.html#faq">FAQ</a></li>
|
<li><a href="#" id="faq-chat-link">FAQ</a></li>
|
||||||
<li><a href="about.html#careers">Careers</a></li>
|
<li><a href="about.html#careers">Careers</a></li>
|
||||||
<li><a href="about.html#partners">Partners</a></li>
|
<li><a href="about.html#partners">Partners</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-bottom">
|
<div class="footer-bottom">
|
||||||
<span>© 2026 my-biz.app · All rights reserved.</span>
|
<span>
|
||||||
|
© 2026 my-biz.app · All rights reserved. · This service
|
||||||
|
is powered by
|
||||||
|
<a
|
||||||
|
href="https://ODOO4projects.com"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>ODOO4projects</a
|
||||||
|
>
|
||||||
|
</span>
|
||||||
<div class="footer-legal">
|
<div class="footer-legal">
|
||||||
<a href="legal.html#privacy">Privacy</a>
|
<a href="legal.html#privacy">Privacy</a>
|
||||||
<a href="legal.html#terms">Terms</a>
|
<a href="legal.html#terms">Terms</a>
|
||||||
@@ -2720,7 +2758,10 @@
|
|||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-field-group modal-select" id="modal-location-select">
|
<div
|
||||||
|
class="modal-field-group modal-select"
|
||||||
|
id="modal-location-select"
|
||||||
|
>
|
||||||
<label class="field-label" for="modal-location"
|
<label class="field-label" for="modal-location"
|
||||||
>Server Location</label
|
>Server Location</label
|
||||||
>
|
>
|
||||||
@@ -2740,7 +2781,11 @@
|
|||||||
role="listbox"
|
role="listbox"
|
||||||
aria-labelledby="modal-location-button"
|
aria-labelledby="modal-location-button"
|
||||||
>
|
>
|
||||||
<button type="button" class="modal-select-option" data-value="Boston, US">
|
<button
|
||||||
|
type="button"
|
||||||
|
class="modal-select-option"
|
||||||
|
data-value="Boston, US"
|
||||||
|
>
|
||||||
🇺🇸 Boston
|
🇺🇸 Boston
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@@ -2750,7 +2795,11 @@
|
|||||||
>
|
>
|
||||||
🇬🇧 Manchester
|
🇬🇧 Manchester
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="modal-select-option" data-value="Mumbai, IN">
|
<button
|
||||||
|
type="button"
|
||||||
|
class="modal-select-option"
|
||||||
|
data-value="Mumbai, IN"
|
||||||
|
>
|
||||||
🇮🇳 Mumbai
|
🇮🇳 Mumbai
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@@ -2760,10 +2809,18 @@
|
|||||||
>
|
>
|
||||||
🇧🇷 São Paulo
|
🇧🇷 São Paulo
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="modal-select-option" data-value="Meppel, NL">
|
<button
|
||||||
|
type="button"
|
||||||
|
class="modal-select-option"
|
||||||
|
data-value="Meppel, NL"
|
||||||
|
>
|
||||||
🇳🇱 Meppel
|
🇳🇱 Meppel
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="modal-select-option" data-value="Sydney, AU">
|
<button
|
||||||
|
type="button"
|
||||||
|
class="modal-select-option"
|
||||||
|
data-value="Sydney, AU"
|
||||||
|
>
|
||||||
🇦🇺 Sydney
|
🇦🇺 Sydney
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -2887,12 +2944,20 @@
|
|||||||
applyToFields(document);
|
applyToFields(document);
|
||||||
applyToLinks(document);
|
applyToLinks(document);
|
||||||
|
|
||||||
|
function trackEvent(name, props) {
|
||||||
|
if (typeof window.plausible !== "function") return;
|
||||||
|
window.plausible(name, {
|
||||||
|
props: props || {},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
window._mbsTracking = {
|
window._mbsTracking = {
|
||||||
params: tracking,
|
params: tracking,
|
||||||
applyToLinks: applyToLinks,
|
applyToLinks: applyToLinks,
|
||||||
applyToFields: applyToFields,
|
applyToFields: applyToFields,
|
||||||
appendToFormData: appendToFormData,
|
appendToFormData: appendToFormData,
|
||||||
extendPayload: extendPayload,
|
extendPayload: extendPayload,
|
||||||
|
trackEvent: trackEvent,
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
@@ -2912,6 +2977,11 @@
|
|||||||
if (window._mbsTracking)
|
if (window._mbsTracking)
|
||||||
formData =
|
formData =
|
||||||
window._mbsTracking.appendToFormData(formData);
|
window._mbsTracking.appendToFormData(formData);
|
||||||
|
if (window._mbsTracking) {
|
||||||
|
window._mbsTracking.trackEvent("eMail Feedback", {
|
||||||
|
source: "footer",
|
||||||
|
});
|
||||||
|
}
|
||||||
status.textContent = "Sending...";
|
status.textContent = "Sending...";
|
||||||
button.disabled = true;
|
button.disabled = true;
|
||||||
fetch(WEBHOOK, {
|
fetch(WEBHOOK, {
|
||||||
@@ -3035,6 +3105,16 @@
|
|||||||
render();
|
render();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var searchTrackTimer = null;
|
||||||
|
|
||||||
|
function trackSearch() {
|
||||||
|
var term = (search.value || "").trim();
|
||||||
|
if (!term || !window._mbsTracking) return;
|
||||||
|
window._mbsTracking.trackEvent("Search", {
|
||||||
|
query: term,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
prevBtn.addEventListener("click", function () {
|
prevBtn.addEventListener("click", function () {
|
||||||
if (currentPage === 0) return;
|
if (currentPage === 0) return;
|
||||||
currentPage -= 1;
|
currentPage -= 1;
|
||||||
@@ -3048,7 +3128,11 @@
|
|||||||
render();
|
render();
|
||||||
});
|
});
|
||||||
|
|
||||||
search.addEventListener("input", applyFilter);
|
search.addEventListener("input", function () {
|
||||||
|
applyFilter();
|
||||||
|
clearTimeout(searchTrackTimer);
|
||||||
|
searchTrackTimer = setTimeout(trackSearch, 450);
|
||||||
|
});
|
||||||
|
|
||||||
fetch(POSTS_URL)
|
fetch(POSTS_URL)
|
||||||
.then(function (response) {
|
.then(function (response) {
|
||||||
@@ -3132,6 +3216,12 @@
|
|||||||
if (navChat) navChat.classList.add("open");
|
if (navChat) navChat.classList.add("open");
|
||||||
panel.classList.add("open");
|
panel.classList.add("open");
|
||||||
panel.setAttribute("aria-hidden", "false");
|
panel.setAttribute("aria-hidden", "false");
|
||||||
|
if (!panel.dataset.trackedOpen && window._mbsTracking) {
|
||||||
|
panel.dataset.trackedOpen = "true";
|
||||||
|
window._mbsTracking.trackEvent("Chat Agent", {
|
||||||
|
entry: "open",
|
||||||
|
});
|
||||||
|
}
|
||||||
if (!greeted) {
|
if (!greeted) {
|
||||||
greeted = true;
|
greeted = true;
|
||||||
appendMsg(
|
appendMsg(
|
||||||
@@ -3148,6 +3238,7 @@
|
|||||||
if (navChat) navChat.classList.remove("open");
|
if (navChat) navChat.classList.remove("open");
|
||||||
panel.classList.remove("open");
|
panel.classList.remove("open");
|
||||||
panel.setAttribute("aria-hidden", "true");
|
panel.setAttribute("aria-hidden", "true");
|
||||||
|
delete panel.dataset.trackedOpen;
|
||||||
}
|
}
|
||||||
|
|
||||||
function togglePanel() {
|
function togglePanel() {
|
||||||
@@ -3174,6 +3265,12 @@
|
|||||||
if (!text || busy) return;
|
if (!text || busy) return;
|
||||||
busy = true;
|
busy = true;
|
||||||
|
|
||||||
|
if (window._mbsTracking) {
|
||||||
|
window._mbsTracking.trackEvent("Chat Agent", {
|
||||||
|
entry: "message",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
appendMsg("user", text);
|
appendMsg("user", text);
|
||||||
openPanel();
|
openPanel();
|
||||||
navInput.value = "";
|
navInput.value = "";
|
||||||
@@ -3243,6 +3340,19 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var faqChatLink = document.getElementById("faq-chat-link");
|
||||||
|
if (faqChatLink) {
|
||||||
|
faqChatLink.addEventListener("click", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
window.setTimeout(function () {
|
||||||
|
openPanel();
|
||||||
|
if (navInput) navInput.value = "FAQ";
|
||||||
|
send("FAQ");
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
document.addEventListener("click", function (e) {
|
document.addEventListener("click", function (e) {
|
||||||
var nc = document.getElementById("nav-chat");
|
var nc = document.getElementById("nav-chat");
|
||||||
if (
|
if (
|
||||||
@@ -3539,29 +3649,46 @@
|
|||||||
var planField = document.getElementById("modal-plan");
|
var planField = document.getElementById("modal-plan");
|
||||||
var productField = document.getElementById("modal-product");
|
var productField = document.getElementById("modal-product");
|
||||||
var locationField = document.getElementById("modal-location");
|
var locationField = document.getElementById("modal-location");
|
||||||
var locationSelect = document.getElementById("modal-location-select");
|
var locationSelect = document.getElementById(
|
||||||
var locationButton = document.getElementById("modal-location-button");
|
"modal-location-select",
|
||||||
var locationMenu = document.getElementById("modal-location-menu");
|
);
|
||||||
|
var locationButton = document.getElementById(
|
||||||
|
"modal-location-button",
|
||||||
|
);
|
||||||
|
var locationMenu = document.getElementById(
|
||||||
|
"modal-location-menu",
|
||||||
|
);
|
||||||
var defaultProduct = productField.value;
|
var defaultProduct = productField.value;
|
||||||
|
|
||||||
function syncLocationLabel() {
|
function syncLocationLabel() {
|
||||||
var value = locationField.value || "";
|
var value = locationField.value || "";
|
||||||
var selected = null;
|
var selected = null;
|
||||||
|
|
||||||
locationMenu.querySelectorAll(".modal-select-option").forEach(function (option) {
|
locationMenu
|
||||||
var isSelected = option.getAttribute("data-value") === value;
|
.querySelectorAll(".modal-select-option")
|
||||||
|
.forEach(function (option) {
|
||||||
|
var isSelected =
|
||||||
|
option.getAttribute("data-value") === value;
|
||||||
if (isSelected) selected = option;
|
if (isSelected) selected = option;
|
||||||
option.classList.toggle("is-selected", isSelected);
|
option.classList.toggle("is-selected", isSelected);
|
||||||
option.setAttribute("aria-selected", isSelected ? "true" : "false");
|
option.setAttribute(
|
||||||
|
"aria-selected",
|
||||||
|
isSelected ? "true" : "false",
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
locationButton.textContent = selected
|
locationButton.textContent = selected
|
||||||
? selected.textContent.trim()
|
? selected.textContent.trim()
|
||||||
: "Select your server location";
|
: "Select your server location";
|
||||||
locationButton.classList.toggle("is-placeholder", !selected);
|
locationButton.classList.toggle(
|
||||||
|
"is-placeholder",
|
||||||
|
!selected,
|
||||||
|
);
|
||||||
locationButton.setAttribute(
|
locationButton.setAttribute(
|
||||||
"aria-expanded",
|
"aria-expanded",
|
||||||
locationSelect.classList.contains("open") ? "true" : "false",
|
locationSelect.classList.contains("open")
|
||||||
|
? "true"
|
||||||
|
: "false",
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3605,13 +3732,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
locationButton.addEventListener("click", function () {
|
locationButton.addEventListener("click", function () {
|
||||||
if (locationSelect.classList.contains("open")) closeLocationMenu();
|
if (locationSelect.classList.contains("open"))
|
||||||
|
closeLocationMenu();
|
||||||
else openLocationMenu();
|
else openLocationMenu();
|
||||||
});
|
});
|
||||||
|
|
||||||
locationMenu.querySelectorAll(".modal-select-option").forEach(function (option) {
|
locationMenu
|
||||||
|
.querySelectorAll(".modal-select-option")
|
||||||
|
.forEach(function (option) {
|
||||||
option.addEventListener("click", function () {
|
option.addEventListener("click", function () {
|
||||||
locationField.value = option.getAttribute("data-value") || "";
|
locationField.value =
|
||||||
|
option.getAttribute("data-value") || "";
|
||||||
closeLocationMenu();
|
closeLocationMenu();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -3660,6 +3791,11 @@
|
|||||||
if (window._mbsTracking)
|
if (window._mbsTracking)
|
||||||
formData =
|
formData =
|
||||||
window._mbsTracking.appendToFormData(formData);
|
window._mbsTracking.appendToFormData(formData);
|
||||||
|
if (window._mbsTracking) {
|
||||||
|
window._mbsTracking.trackEvent("Trial", {
|
||||||
|
source: planField.value || "General Free Trial",
|
||||||
|
});
|
||||||
|
}
|
||||||
btn.textContent = "Sending...";
|
btn.textContent = "Sending...";
|
||||||
btn.disabled = true;
|
btn.disabled = true;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user