Feat: écran de remerciement post-téléchargement white paper
All checks were successful
Deploy / Deploy to Production (push) Successful in 22s
All checks were successful
Deploy / Deploy to Production (push) Successful in 22s
- Remplace le message inline par un écran centré (smiley + heading + signature) - Ajout clés i18n wp_success_heading / wp_success_sub - Ajustements blueprints white-paper / white-papers / site - Route : stockage leads sur page livres-blancs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
1cbb843c89
commit
79019b761f
7 changed files with 133 additions and 107 deletions
15
assets/img/smiley.svg
Normal file
15
assets/img/smiley.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2188_87542)">
|
||||
<path d="M31.8075 60.7859H25.501V67.0923H31.8075V60.7859Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
|
||||
<path d="M38.1341 28.0353H31.8276V55.167H38.1341V28.0353Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
|
||||
<path d="M67.4657 28.0353H61.1592V55.167H67.4657V28.0353Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
|
||||
<path d="M73.7918 60.7859H67.4854V67.0923H73.7918V60.7859Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
|
||||
<path d="M67.4858 67.112H31.8276V73.4185H67.4858V67.112Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
|
||||
<path d="M75.6778 9.82318C83.6739 9.82318 90.1768 16.3261 90.1768 24.3222V75.6974C90.1768 83.6935 83.6739 90.1965 75.6778 90.1965H24.3222C16.3261 90.1965 9.82318 83.6935 9.82318 75.6974V24.3222C9.82318 16.3261 16.3261 9.82318 24.3222 9.82318H75.6974M75.6778 0H24.3222C10.8841 0 0 10.8841 0 24.3222V75.6974C0 89.1159 10.8841 100.02 24.3222 100.02H75.6974C89.1159 100.02 100.02 89.1356 100.02 75.6974V24.3222C100.02 10.9037 89.1356 0 75.6974 0H75.6778Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2188_87542">
|
||||
<rect width="100" height="100" fill="white" style="fill:white;fill-opacity:1;"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -59,50 +59,3 @@ tabs:
|
|||
accept: application/pdf
|
||||
translate: false
|
||||
help: Fichier téléchargé après soumission du formulaire
|
||||
leads:
|
||||
label: Contacts intéressés
|
||||
icon: users
|
||||
sections:
|
||||
contactDatabase:
|
||||
type: fields
|
||||
fields:
|
||||
contactDatabase:
|
||||
label: Visiteurs ayant téléchargé
|
||||
type: structure
|
||||
translate: false
|
||||
columns:
|
||||
firstName:
|
||||
label: Prénom
|
||||
width: 1/4
|
||||
lastName:
|
||||
label: Nom
|
||||
width: 1/4
|
||||
email:
|
||||
label: Email
|
||||
width: 1/4
|
||||
company:
|
||||
label: Entreprise
|
||||
width: 1/4
|
||||
role:
|
||||
label: Fonction
|
||||
downloadedAt:
|
||||
label: Date
|
||||
fields:
|
||||
firstName:
|
||||
type: text
|
||||
label: Prénom
|
||||
lastName:
|
||||
type: text
|
||||
label: Nom
|
||||
email:
|
||||
type: email
|
||||
label: Email
|
||||
company:
|
||||
type: text
|
||||
label: Entreprise
|
||||
role:
|
||||
type: text
|
||||
label: Fonction
|
||||
downloadedAt:
|
||||
type: text
|
||||
label: Date
|
||||
|
|
|
|||
|
|
@ -41,3 +41,48 @@ tabs:
|
|||
ratio: 3/4
|
||||
cover: true
|
||||
info: "{{ page.published.toDate('d/m/Y') }}"
|
||||
dataTab:
|
||||
label: Contacts
|
||||
icon: chart
|
||||
fields:
|
||||
contactDatabase:
|
||||
label: Ont téléchargé un livre blanc
|
||||
type: structure
|
||||
columns:
|
||||
firstName:
|
||||
label: Prénom
|
||||
width: 1/4
|
||||
lastName:
|
||||
label: Nom
|
||||
width: 1/4
|
||||
email:
|
||||
label: Email
|
||||
width: 1/4
|
||||
company:
|
||||
label: Entreprise
|
||||
width: 1/4
|
||||
role:
|
||||
label: Fonction
|
||||
downloadedAt:
|
||||
label: Date
|
||||
fields:
|
||||
firstName:
|
||||
label: Prénom
|
||||
type: text
|
||||
required: true
|
||||
lastName:
|
||||
label: Nom
|
||||
type: text
|
||||
required: true
|
||||
company:
|
||||
label: Société
|
||||
type: text
|
||||
role:
|
||||
label: Fonction
|
||||
type: text
|
||||
email:
|
||||
type: email
|
||||
required: true
|
||||
downloadedAt:
|
||||
type: text
|
||||
label: Date
|
||||
|
|
|
|||
|
|
@ -86,28 +86,3 @@ tabs:
|
|||
max: 1
|
||||
accept: application/pdf
|
||||
translate: false
|
||||
dataTab:
|
||||
label: Données d'usage
|
||||
icon: chart
|
||||
fields:
|
||||
contactDatabase:
|
||||
label: Ont téléchargé un livre blanc
|
||||
type: structure
|
||||
fields:
|
||||
firstName:
|
||||
label: Prénom
|
||||
type: text
|
||||
required: true
|
||||
lastName:
|
||||
label: Nom
|
||||
type: text
|
||||
required: true
|
||||
company:
|
||||
label: Société
|
||||
type: text
|
||||
role:
|
||||
label: Fonction
|
||||
type: text
|
||||
email:
|
||||
type: email
|
||||
required: true
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ return [
|
|||
}
|
||||
|
||||
kirby()->impersonate('kirby', function () use ($page, $entries) {
|
||||
$page->update(['contactDatabase' => \Kirby\Data\Data::encode($entries, 'yaml')]);
|
||||
page('livres-blancs')->update(['contactDatabase' => \Kirby\Data\Data::encode($entries, 'yaml')]);
|
||||
});
|
||||
|
||||
header('Content-Type: application/json');
|
||||
|
|
|
|||
|
|
@ -64,9 +64,13 @@ const dict = {
|
|||
en: "By checking this box, I agree to be contacted by World Game. My data will not be sold or shared.",
|
||||
},
|
||||
wp_download: { fr: "TÉLÉCHARGER", en: "DOWNLOAD" },
|
||||
wp_success: {
|
||||
fr: "Votre demande a été enregistrée. Le téléchargement devrait démarrer.",
|
||||
en: "Your request has been registered. The download should start.",
|
||||
wp_success_heading: {
|
||||
fr: "Merci pour votre\nintérêt et bonne lecture !",
|
||||
en: "Thank you for your\ninterest, enjoy the read!",
|
||||
},
|
||||
wp_success_sub: {
|
||||
fr: "L'équipe du World Game.",
|
||||
en: "The World Game team.",
|
||||
},
|
||||
wp_error: {
|
||||
fr: "Une erreur est survenue, veuillez réessayer.",
|
||||
|
|
|
|||
|
|
@ -80,38 +80,44 @@
|
|||
<!-- Form area: right column on desktop, full-screen overlay on mobile -->
|
||||
<div class="form-area" class:is-visible={showForm}>
|
||||
<button class="form-close" onclick={() => showForm = false} aria-label="Fermer">✕</button>
|
||||
<div class="form-card">
|
||||
<p class="form-intro">{t('wp_form_intro')}</p>
|
||||
<form class="form" onsubmit={handleSubmit}>
|
||||
<div class="form-row">
|
||||
<input class="input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required />
|
||||
<input class="input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required />
|
||||
</div>
|
||||
<input class="input" type="text" placeholder={t('wp_company')} bind:value={company} />
|
||||
<input class="input" type="text" placeholder={t('wp_role')} bind:value={role} />
|
||||
<input class="input" type="email" placeholder={t('wp_email')} bind:value={email} required />
|
||||
{#if status === 'success'}
|
||||
<div class="thank-you">
|
||||
<img src="/assets/img/smiley.svg" alt="" class="thank-you-smiley" aria-hidden="true" />
|
||||
<p class="thank-you-heading">{t('wp_success_heading')}</p>
|
||||
<p class="thank-you-sub">{t('wp_success_sub')}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="form-card">
|
||||
<p class="form-intro">{t('wp_form_intro')}</p>
|
||||
<form class="form" onsubmit={handleSubmit}>
|
||||
<div class="form-row">
|
||||
<input class="input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required />
|
||||
<input class="input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required />
|
||||
</div>
|
||||
<input class="input" type="text" placeholder={t('wp_company')} bind:value={company} />
|
||||
<input class="input" type="text" placeholder={t('wp_role')} bind:value={role} />
|
||||
<input class="input" type="email" placeholder={t('wp_email')} bind:value={email} required />
|
||||
|
||||
<div class="hp" aria-hidden="true">
|
||||
<label for="website">Website</label>
|
||||
<input id="website" type="text" name="website" tabindex="-1" autocomplete="off" bind:value={honeypot} />
|
||||
</div>
|
||||
<div class="hp" aria-hidden="true">
|
||||
<label for="website">Website</label>
|
||||
<input id="website" type="text" name="website" tabindex="-1" autocomplete="off" bind:value={honeypot} />
|
||||
</div>
|
||||
|
||||
<label class="consent">
|
||||
<input type="checkbox" bind:checked={consent} required />
|
||||
<span>{t('wp_consent')}</span>
|
||||
</label>
|
||||
<label class="consent">
|
||||
<input type="checkbox" bind:checked={consent} required />
|
||||
<span>{t('wp_consent')}</span>
|
||||
</label>
|
||||
|
||||
{#if status === 'success'}
|
||||
<p class="status status--success">{t('wp_success')}</p>
|
||||
{:else if status === 'error'}
|
||||
<p class="status status--error">{t('wp_error')}</p>
|
||||
{/if}
|
||||
{#if status === 'error'}
|
||||
<p class="status status--error">{t('wp_error')}</p>
|
||||
{/if}
|
||||
|
||||
<button type="submit" class="submit button download-icon" disabled={submitting || !isDownloadable}>
|
||||
{t('wp_download')}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<button type="submit" class="submit button download-icon" disabled={submitting || !isDownloadable}>
|
||||
{t('wp_download')}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -179,8 +185,10 @@
|
|||
|
||||
/* ── Form area: desktop — right column ── */
|
||||
.form-area {
|
||||
background: #000;
|
||||
margin-top: 2rem;
|
||||
width: 30vw;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
|
@ -193,7 +201,6 @@
|
|||
}
|
||||
|
||||
.form-card {
|
||||
background: #0b0b18;
|
||||
border-radius: 4px;
|
||||
padding: 2.5rem;
|
||||
width: 100%;
|
||||
|
|
@ -294,9 +301,36 @@
|
|||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.status--success {
|
||||
background: rgba(4, 254, 160, 0.15);
|
||||
/* ── Thank you screen ── */
|
||||
.thank-you {
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
padding: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thank-you-smiley {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.thank-you-heading {
|
||||
font-family: "Danzza bold", sans-serif;
|
||||
font-size: var(--font-size-title-section);
|
||||
color: var(--color-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.thank-you-sub {
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.status--error {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue