studio-variable/world-game
3
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Refactor: WhitePaper — redesign layout + suppression préfixes wp-

Browse source 
- Nouveau layout desktop : flex row avec catch-area (label + titre) et form-area (formulaire)
- Mobile : height 100vh non-scrollable, overlay formulaire déclenché au clic
- Tablet : grid 2 colonnes
- Suppression des préfixes wp- sur toutes les classes (CSS scopé Svelte)
- white-paper.json.php : intro via ->inline() pour texte brut

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-18 18:48:50 +01:00
parent d4f05d6157
commit 974067d986
2 changed files with 203 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

2
site/templates/white-paper.json.php
View file

@ -2,7 +2,7 @@
$specificData = [ $specificData = [
'published' => $page->published()->toDate('d/m/Y'), 'published' => $page->published()->toDate('d/m/Y'),
'intro' => $page->intro()->value(), 'intro' => $page->intro()->inline()->value(),
'cover' => $page->cover()->toFile()?->url(), 'cover' => $page->cover()->toFile()?->url(),
'fileUrl' => $page->downloadFile()->toFile()?->url(), 'fileUrl' => $page->downloadFile()->toFile()?->url(),
]; ];

306
src/views/WhitePaper.svelte
View file

@ -12,6 +12,7 @@
let consent = $state(false) let consent = $state(false)
let submitting = $state(false) let submitting = $state(false)
let status = $state(null) // null | 'success' | 'error' let status = $state(null) // null | 'success' | 'error'
let showForm = $state(false)
async function handleSubmit(e) { async function handleSubmit(e) {
e.preventDefault() e.preventDefault()
@ -41,45 +42,57 @@
</script> </script>
<div class="white-paper"> <div class="white-paper">
<!-- Left column --> <div class="catch-area">
<div class="wp-left"> <!-- Label — separate so form can align with title -->
<div class="wp-content"> <p class="label">{t('white_paper_label')}</p>
<p class="wp-label">{t('white_paper_label')}</p>
<h1 class="wp-title">{data.title}</h1> <!-- Title + description + mobile trigger -->
<div class="text">
<h1 class="title">{data.title}</h1>
{#if data.intro} {#if data.intro}
<p class="wp-description">{data.intro}</p> <p class="description">{data.intro}</p>
{/if} {/if}
<button class="trigger button" onclick={() => showForm = true}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
<path d="M5 20H19V18H5V20Z" fill="currentColor"/>
</svg>
{t('wp_download')}
</button>
</div> </div>
</div>
<!-- Cover image -->
{#if data.cover} {#if data.cover}
<img src={data.cover} alt={data.title} class="wp-cover" /> <img src={data.cover} alt={data.title} class="cover" />
{/if} {/if}
</div>
<!-- Right column: download form --> <!-- Form area: right column on desktop, full-screen overlay on mobile -->
<div class="wp-right"> <div class="form-area" class:is-visible={showForm}>
<div class="wp-form-card"> <button class="form-close" onclick={() => showForm = false} aria-label="Fermer">✕</button>
<p class="wp-form-intro">{t('wp_form_intro')}</p> <div class="form-card">
<form class="wp-form" onsubmit={handleSubmit}> <p class="form-intro">{t('wp_form_intro')}</p>
<div class="wp-form-row"> <form class="form" onsubmit={handleSubmit}>
<input class="wp-input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required /> <div class="form-row">
<input class="wp-input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required /> <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> </div>
<input class="wp-input wp-input--full" type="text" placeholder={t('wp_company')} bind:value={company} required /> <input class="input" type="text" placeholder={t('wp_company')} bind:value={company} required />
<input class="wp-input wp-input--full" type="text" placeholder={t('wp_role')} bind:value={role} required /> <input class="input" type="text" placeholder={t('wp_role')} bind:value={role} required />
<input class="wp-input wp-input--full" type="email" placeholder={t('wp_email')} bind:value={email} required /> <input class="input" type="email" placeholder={t('wp_email')} bind:value={email} required />
<label class="wp-consent"> <label class="consent">
<input type="checkbox" bind:checked={consent} required /> <input type="checkbox" bind:checked={consent} required />
<span>{t('wp_consent')}</span> <span>{t('wp_consent')}</span>
</label> </label>
{#if status === 'success'} {#if status === 'success'}
<p class="wp-status wp-status--success">{t('wp_success')}</p> <p class="status status--success">{t('wp_success')}</p>
{:else if status === 'error'} {:else if status === 'error'}
<p class="wp-status wp-status--error">{t('wp_error')}</p> <p class="status status--error">{t('wp_error')}</p>
{/if} {/if}
<button type="submit" class="wp-submit button" disabled={submitting || !consent}> <button type="submit" class="submit button" disabled={submitting || !consent}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/> <path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
<path d="M5 20H19V18H5V20Z" fill="currentColor"/> <path d="M5 20H19V18H5V20Z" fill="currentColor"/>
@ -93,82 +106,89 @@
<style> <style>
.white-paper { .white-paper {
height: 100vh; color: var(--color-text);
display: grid; padding: 8rem 5rem;
grid-template-columns: 1fr 1fr;
overflow: hidden;
padding-top: 8vh;
}
/* --- Left --- */
.wp-left {
position: relative;
display: flex; display: flex;
flex-direction: column; column-gap: 5rem;
justify-content: flex-start;
padding: 4rem 3rem 0 8vw;
overflow: hidden;
} }
.wp-content { .catch-area {
position: relative; width: min(100%, 45vw);
z-index: 1;
} }
.wp-label { .label {
margin-bottom: 1rem;
align-self: end;
font-family: "Terminal", sans-serif; font-family: "Terminal", sans-serif;
font-size: var(--font-size-paragraph); font-size: var(--font-size-paragraph);
color: var(--color-primary); color: var(--color-primary);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 1.5rem; z-index: 1;
} }
.wp-title { /* ── Title + description + mobile trigger ── */
font-family: "Terminal", sans-serif; .text {
font-size: clamp(2rem, 4vw, 3.5rem); display: flex;
font-weight: 700; flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
z-index: 1;
}
.title {
font-family: "Danzza bold", sans-serif;
font-size: var(--font-size-title-main);
font-weight: 400;
text-transform: uppercase; text-transform: uppercase;
line-height: 1.1; line-height: 1.1;
margin-bottom: 2rem;
max-width: 600px;
} }
.wp-description { .description {
font-family: "Danzza", sans-serif; font-family: "Danzza", sans-serif;
font-size: var(--font-size-paragraph); font-size: var(--font-size-paragraph);
line-height: 1.6;
opacity: 0.8; opacity: 0.8;
max-width: 480px; max-width: 480px;
} }
.wp-cover { /* Mobile trigger: hidden on desktop */
position: absolute; .trigger {
bottom: -5%; display: none;
left: 3rem; align-items: center;
width: 55%; gap: 0.5rem;
max-width: 380px; }
.cover {
align-self: start;
width: 100%;
height: auto; height: auto;
object-fit: contain; object-fit: contain;
pointer-events: none; pointer-events: none;
z-index: 0;
} }
/* --- Right --- */ /* ── Form area: desktop — right column ── */
.wp-right { .form-area {
margin-top: 2rem;
width: min(100%, 30vw);
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: center;
padding: 2rem 6vw 2rem 2rem; z-index: 2;
} }
.wp-form-card { /* Close button: hidden on desktop */
.form-close {
display: none;
}
.form-card {
background: #0b0b18; background: #0b0b18;
border-radius: 4px; border-radius: 4px;
padding: 2.5rem; padding: 2.5rem;
width: 100%; width: 100%;
max-width: 500px;
} }
.wp-form-intro { .form-intro {
font-family: "Danzza", sans-serif; font-family: "Danzza", sans-serif;
font-size: var(--font-size-paragraph); font-size: var(--font-size-paragraph);
line-height: 1.5; line-height: 1.5;
@ -176,19 +196,19 @@
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.wp-form { .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
} }
.wp-form-row { .form-row {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 0.75rem; gap: 0.75rem;
} }
.wp-input { .input {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff; color: #fff;
@ -199,16 +219,16 @@
transition: border-color 0.2s; transition: border-color 0.2s;
} }
.wp-input:focus { .input:focus {
outline: none; outline: none;
border-color: var(--color-primary); border-color: var(--color-primary);
} }
.wp-input::placeholder { .input::placeholder {
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
} }
.wp-consent { .consent {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 0.75rem; gap: 0.75rem;
@ -216,7 +236,7 @@
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.wp-consent input[type="checkbox"] { .consent input[type="checkbox"] {
flex-shrink: 0; flex-shrink: 0;
width: 18px; width: 18px;
height: 18px; height: 18px;
@ -225,94 +245,168 @@
cursor: pointer; cursor: pointer;
} }
.wp-consent span { .consent span {
font-family: "Danzza", sans-serif; font-family: "Danzza", sans-serif;
font-size: var(--font-size-paragraph-small); font-size: var(--font-size-paragraph-small);
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
line-height: 1.4; line-height: 1.4;
} }
.wp-submit { .submit {
margin-top: 1rem; margin-top: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
align-self: flex-start; width: 100%;
justify-content: center;
} }
.wp-submit:disabled { .submit:disabled {
opacity: 0.5; opacity: 0.5;
cursor: default; cursor: default;
} }
.wp-status { .status {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
font-family: "Danzza", sans-serif; font-family: "Danzza", sans-serif;
font-size: var(--font-size-paragraph-small); font-size: var(--font-size-paragraph-small);
border-radius: 2px; border-radius: 2px;
} }
.wp-status--success { .status--success {
background: rgba(4, 254, 160, 0.15); background: rgba(4, 254, 160, 0.15);
color: var(--color-primary); color: var(--color-primary);
} }
.wp-status--error { .status--error {
background: rgba(255, 107, 107, 0.15); background: rgba(255, 107, 107, 0.15);
color: #ff6b6b; color: #ff6b6b;
} }
/* --- Mobile --- */ /* ── Mobile ── */
@media (max-width: 700px) { @media (max-width: 700px) {
.white-paper { .white-paper {
grid-template-columns: 1fr; display: flex;
grid-template-rows: auto 1fr; flex-direction: column;
height: auto; height: 100vh;
overflow: hidden;
padding: 6vh 1.25rem 0;
position: relative;
}
.label {
font-size: var(--font-size-paragraph-small);
text-align: center;
margin-bottom: 1rem;
}
.text {
flex: 1;
align-items: center;
text-align: center;
gap: 1rem;
overflow: hidden;
}
.title {
font-size: clamp(2rem, 10vw, 3.5rem);
}
.description {
max-width: 100%;
font-size: var(--font-size-paragraph-small);
}
.trigger {
display: flex;
width: 100%;
justify-content: center;
margin-top: auto;
}
.cover {
position: absolute;
bottom: -10%;
left: 50%;
transform: translateX(-50%);
width: 75%;
max-width: 300px;
z-index: 0;
pointer-events: none;
}
/* Form overlay */
.form-area {
display: none;
position: fixed;
inset: 0;
z-index: 100;
background: #0b0b18;
flex-direction: column;
padding: 1.5rem 1.25rem;
overflow-y: auto; overflow-y: auto;
padding-top: 6vh;
} }
.wp-left { .form-area.is-visible {
padding: 2rem 1.25rem 0; display: flex;
min-height: 300px;
} }
.wp-cover { .form-close {
position: static;
width: 60%;
margin: 2rem auto 0;
display: block; display: block;
align-self: flex-end;
background: none;
border: none;
color: #fff;
font-size: 1.25rem;
cursor: pointer;
padding: 0.25rem 0.5rem;
margin-bottom: 1rem;
} }
.wp-right { .form-card {
padding: 2rem 1.25rem; background: none;
padding: 0;
flex: 1;
} }
.wp-form-card { .submit {
padding: 1.5rem; margin-top: auto;
}
.wp-form-row {
grid-template-columns: 1fr;
} }
} }
/* --- Tablet --- */ /* ── Tablet ── */
@media (min-width: 701px) and (max-width: 912px) { @media (min-width: 701px) and (max-width: 912px) {
.white-paper { .white-paper {
grid-template-columns: 1fr; display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
height: auto; height: 100vh;
overflow-y: auto; padding: 6vh 2rem 2rem;
gap: 1rem 2rem;
} }
.wp-left { .label {
padding: 3rem 2rem 0; grid-column: 1;
min-height: 250px; grid-row: 1;
} }
.wp-right { .text {
padding: 2rem; grid-column: 1;
grid-row: 2;
}
.cover {
display: none;
}
.form-area {
grid-column: 2;
grid-row: 1 / span 2;
align-items: flex-start;
}
.trigger {
display: none;
} }
} }
</style> </style>