templates/application/whileresume/website/cv-public/theme.html.twig line 1

Open in your IDE?
  1. {% extends 'application/whileresume/website/cv-public/base.html.twig' %}
  3. {% set show_loader = true %}
  5. {% block title %}{{ 'generate2.theme.page_title'|trans({}, 'whr-public') }} · WhileResume{% endblock %}
  7. {% block extra_css %}
  8.     .theme-grid {
  9.     display: grid;
  10.     grid-template-columns: 1fr 1fr;
  11.     gap: 14px;
  12.     margin-bottom: 8px;
  13.     }
  15.     .theme-card {
  16.     position: relative;
  17.     padding: 24px 22px;
  18.     border: 2px solid var(--ink-10);
  19.     border-radius: var(--r-lg);
  20.     cursor: pointer;
  21.     transition: all 0.3s var(--ease);
  22.     background: var(--white);
  23.     }
  25.     .theme-card:hover { border-color: var(--ink-20); transform: translateY(-2px); }
  27.     .theme-card.selected {
  28.     border-color: var(--violet-deep);
  29.     background: var(--violet-ultra);
  30.     box-shadow: 0 8px 28px var(--violet-glow);
  31.     }
  33.     .theme-card-ico {
  34.     width: 44px; height: 44px;
  35.     border-radius: var(--r-sm);
  36.     background: var(--violet-soft);
  37.     color: var(--violet-dark);
  38.     display: flex;
  39.     align-items: center;
  40.     justify-content: center;
  41.     margin-bottom: 14px;
  42.     transition: all 0.25s;
  43.     }
  45.     .theme-card.selected .theme-card-ico { background: var(--violet-deep); color: white; }
  47.     .theme-card-title { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
  48.     .theme-card-desc  { font-size: 0.82rem; color: var(--ink-60); line-height: 1.5; }
  50.     .theme-check {
  51.     position: absolute;
  52.     top: 14px; right: 14px;
  53.     width: 22px; height: 22px;
  54.     border-radius: 50%;
  55.     background: var(--violet-deep);
  56.     color: white;
  57.     display: flex;
  58.     align-items: center;
  59.     justify-content: center;
  60.     opacity: 0;
  61.     transform: scale(0.5);
  62.     transition: all 0.3s var(--ease-spring);
  63.     }
  65.     .theme-card.selected .theme-check { opacity: 1; transform: scale(1); }
  67.     /* ═══════════════════════════════════
  68.     COULEURS EN CERCLES
  69.     ═══════════════════════════════════ */
  70.     .colors-grid {
  71.     display: grid;
  72.     grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  73.     gap: 14px;
  74.     }
  76.     .color-wrap {
  77.     display: flex;
  78.     flex-direction: column;
  79.     align-items: center;
  80.     gap: 6px;
  81.     }
  83.     .color-swatch {
  84.     width: 52px;
  85.     height: 52px;
  86.     border-radius: 50%;
  87.     cursor: pointer;
  88.     position: relative;
  89.     border: 3px solid transparent;
  90.     box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  91.     transition: all 0.3s var(--ease-spring);
  92.     display: flex;
  93.     align-items: center;
  94.     justify-content: center;
  95.     }
  97.     .color-swatch:hover {
  98.     transform: scale(1.12);
  99.     box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  100.     }
  102.     .color-swatch.selected {
  103.     transform: scale(1.15);
  104.     border-color: var(--white);
  105.     box-shadow: 0 0 0 3px var(--ink), 0 6px 18px rgba(0,0,0,0.2);
  106.     }
  108.     .color-swatch .check {
  109.     opacity: 0;
  110.     transform: scale(0.4);
  111.     transition: all 0.25s var(--ease-spring);
  112.     color: white;
  113.     }
  115.     .color-swatch.selected .check { opacity: 1; transform: scale(1); }
  117.     .color-label {
  118.     font-size: 0.72rem;
  119.     color: var(--ink-60);
  120.     font-weight: 500;
  121.     text-align: center;
  122.     }
  124.     .color-swatch.selected + .color-label { color: var(--ink); font-weight: 600; }
  126.     /* ═══════════════════════════════════
  127.     LANGUES EN BOUTONS PILL
  128.     ═══════════════════════════════════ */
  129.     .lang-grid {
  130.     display: flex;
  131.     flex-wrap: wrap;
  132.     gap: 8px;
  133.     }
  135.     .lang-btn {
  136.     padding: 10px 18px;
  137.     border: 1.5px solid var(--ink-10);
  138.     background: var(--white);
  139.     border-radius: var(--r-full);
  140.     font-family: var(--font-body);
  141.     font-size: 0.86rem;
  142.     font-weight: 500;
  143.     color: var(--ink-60);
  144.     cursor: pointer;
  145.     transition: all 0.2s var(--ease);
  146.     user-select: none;
  147.     }
  149.     .lang-btn:hover {
  150.     border-color: var(--ink-20);
  151.     color: var(--ink-80);
  152.     transform: translateY(-1px);
  153.     }
  155.     .lang-btn.selected {
  156.     background: var(--violet-deep);
  157.     border-color: var(--violet-deep);
  158.     color: white;
  159.     box-shadow: 0 4px 14px var(--violet-glow);
  160.     }
  162.     .lang-btn.selected:hover {
  163.     background: var(--violet-dark);
  164.     transform: translateY(-1px);
  165.     }
  166. {% endblock %}
  168. {% block body %}
  169.     <div class="fade-up">
  170.         <div class="badge"><span class="badge-num">2</span> {{ 'generate2.theme.badge'|trans({}, 'whr-public') }}</div>
  171.         <h1 class="stitle">{{ 'generate2.theme.title_part1'|trans({}, 'whr-public') }}<br><em>{{ 'generate2.theme.title_part2'|trans({}, 'whr-public') }}</em></h1>
  172.         <p class="sdesc">{{ 'generate2.theme.subtitle'|trans({}, 'whr-public') }}</p>
  173.     </div>
  175.     <div class="fade-up d1">
  176.         <div class="section-label">{{ 'generate2.theme.section_template'|trans({}, 'whr-public') }}</div>
  177.         <div class="theme-grid">
  178.             <div class="theme-card" data-theme="simple">
  179.                 <div class="theme-card-ico">
  180.                     <svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
  181.                         <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
  182.                         <polyline points="14 2 14 8 20 8"/>
  183.                         <line x1="16" y1="13" x2="8" y2="13"/>
  184.                         <line x1="16" y1="17" x2="8" y2="17"/>
  185.                         <line x1="10" y1="9" x2="8" y2="9"/>
  186.                     </svg>
  187.                 </div>
  188.                 <div class="theme-card-title">{{ 'generate2.theme.simple_title'|trans({}, 'whr-public') }}</div>
  189.                 <div class="theme-card-desc">{{ 'generate2.theme.simple_desc'|trans({}, 'whr-public') }}</div>
  190.                 <div class="theme-check">
  191.                     <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
  192.                 </div>
  193.             </div>
  195.             <div class="theme-card" data-theme="compact">
  196.                 <div class="theme-card-ico">
  197.                     <svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
  198.                         <line x1="8" y1="6" x2="21" y2="6"/>
  199.                         <line x1="8" y1="12" x2="21" y2="12"/>
  200.                         <line x1="8" y1="18" x2="21" y2="18"/>
  201.                         <line x1="3" y1="6" x2="3.01" y2="6"/>
  202.                         <line x1="3" y1="12" x2="3.01" y2="12"/>
  203.                         <line x1="3" y1="18" x2="3.01" y2="18"/>
  204.                     </svg>
  205.                 </div>
  206.                 <div class="theme-card-title">{{ 'generate2.theme.compact_title'|trans({}, 'whr-public') }}</div>
  207.                 <div class="theme-card-desc">{{ 'generate2.theme.compact_desc'|trans({}, 'whr-public') }}</div>
  208.                 <div class="theme-check">
  209.                     <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
  210.                 </div>
  211.             </div>
  212.         </div>
  213.     </div>
  215.     <div class="fade-up d2">
  216.         <div class="section-label">{{ 'generate2.theme.section_color'|trans({}, 'whr-public') }}</div>
  217.         <div class="colors-grid" id="colorsGrid"></div>
  218.     </div>
  220.     <div class="fade-up d3">
  221.         <div class="section-label">{{ 'generate2.theme.section_language'|trans({}, 'whr-public') }}</div>
  222.         <div class="lang-grid" id="langGrid"></div>
  223.     </div>
  225.     <div class="cta-row fade-up d4">
  226.         <a href="{{ path('cv_public_choice', { slug: public_slug }) }}" class="btn-ghost">
  227.             <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
  228.                 <path d="M19 12H5M12 19l-7-7 7-7"/>
  229.             </svg>
  230.             {{ 'generate2.common.back'|trans({}, 'whr-public') }}
  231.         </a>
  232.         <button class="btn-primary" id="btnContinue" onclick="continueToForm()">
  233.             {{ 'generate2.common.continue'|trans({}, 'whr-public') }}
  234.             <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
  235.                 <path d="M5 12h14M12 5l7 7-7 7"/>
  236.             </svg>
  237.         </button>
  238.     </div>
  239. {% endblock %}
  241. {% block body_js %}
  242.     <script>
  243.         const COLORS = [
  244.             { id: 'bleu_ciel', label: 'Bleu ciel',  primary: '#00AEEF', secondary: '#F59E0B' },
  245.             { id: 'charbon',   label: 'Charbon',    primary: '#374151', secondary: '#9CA3AF' },
  246.             { id: 'emeraude',  label: 'Émeraude',   primary: '#10B981', secondary: '#F59E0B' },
  247.             { id: 'navy',      label: 'Navy',       primary: '#1E3A5F', secondary: '#3B82F6' },
  248.             { id: 'or',        label: 'Or',         primary: '#B8860B', secondary: '#F59E0B' },
  249.             { id: 'rose',      label: 'Rose',       primary: '#EC4899', secondary: '#F9A8D4' },
  250.             { id: 'rouge',     label: 'Rouge',      primary: '#DC2626', secondary: '#F87171' },
  251.             { id: 'corail',    label: 'Corail',     primary: '#F97316', secondary: '#FED7AA' },
  252.             { id: 'vert',      label: 'Vert',       primary: '#16A34A', secondary: '#86EFAC' },
  253.             { id: 'bleu',      label: 'Bleu',       primary: '#2563EB', secondary: '#93C5FD' },
  254.             { id: 'violet',    label: 'Violet',     primary: '#7C3AED', secondary: '#C4B5FD' },
  255.         ];
  257.         const CV_LANGUAGES = [
  258.             { code: 'fr', label: 'Français'    }, { code: 'en', label: 'English'     },
  259.             { code: 'de', label: 'Deutsch'     }, { code: 'es', label: 'Español'     },
  260.             { code: 'it', label: 'Italiano'    }, { code: 'pt', label: 'Português'   },
  261.             { code: 'nl', label: 'Nederlands'  }, { code: 'pl', label: 'Polski'      },
  262.             { code: 'ro', label: 'Română'      }, { code: 'cs', label: 'Čeština'     },
  263.             { code: 'sk', label: 'Slovenčina'  }, { code: 'hu', label: 'Magyar'      },
  264.             { code: 'sv', label: 'Svenska'     }, { code: 'da', label: 'Dansk'       },
  265.             { code: 'fi', label: 'Suomi'       }, { code: 'nb', label: 'Norsk'       },
  266.             { code: 'el', label: 'Ελληνικά'    }, { code: 'bg', label: 'Български'   },
  267.             { code: 'hr', label: 'Hrvatski'    }, { code: 'sl', label: 'Slovenščina' },
  268.             { code: 'lt', label: 'Lietuvių'    }, { code: 'lv', label: 'Latviešu'    },
  269.             { code: 'et', label: 'Eesti'       }, { code: 'uk', label: 'Українська'  },
  270.             { code: 'tr', label: 'Türkçe'      },
  271.         ];
  273.         // État local synchronisé avec l'API via save-draft
  274.         const state = {
  275.             theme:       'simple',
  276.             primary:     COLORS[0].primary,
  277.             secondary:   COLORS[0].secondary,
  278.             cv_language: window.__CV_CTX__.locale || 'fr',
  279.             data:        null,
  280.         };
  282.         function renderColors() {
  283.             const grid = document.getElementById('colorsGrid');
  284.             grid.innerHTML = COLORS.map(c => `
  285.             <div class="color-wrap">
  286.                 <div class="color-swatch ${state.primary === c.primary ? 'selected' : ''}"
  287.                      style="background:${c.primary}"
  288.                      data-color-id="${c.id}"
  289.                      data-primary="${c.primary}"
  290.                      data-secondary="${c.secondary}"
  291.                      onclick="selectColor(this)">
  292.                     <svg class="check" width="20" height="20" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
  293.                         <path d="M20 6L9 17l-5-5"/>
  294.                     </svg>
  295.                 </div>
  296.                 <span class="color-label">${c.label}</span>
  297.             </div>
  298.         `).join('');
  299.         }
  301.         function renderLangs() {
  302.             const grid = document.getElementById('langGrid');
  303.             grid.innerHTML = CV_LANGUAGES.map(l => `
  304.             <button class="lang-btn ${state.cv_language === l.code ? 'selected' : ''}"
  305.                     data-lang="${l.code}"
  306.                     onclick="selectLang('${l.code}')">
  307.                 ${l.label}
  308.             </button>
  309.         `).join('');
  310.         }
  312.         function renderTheme() {
  313.             document.querySelectorAll('.theme-card').forEach(c =>
  314.                 c.classList.toggle('selected', c.dataset.theme === state.theme));
  315.         }
  317.         window.selectColor = (el) => {
  318.             state.primary   = el.dataset.primary;
  319.             state.secondary = el.dataset.secondary;
  320.             document.querySelectorAll('.color-swatch').forEach(s =>
  321.                 s.classList.toggle('selected', s === el));
  322.             scheduleSave();
  323.         };
  325.         window.selectLang = (code) => {
  326.             state.cv_language = code;
  327.             document.querySelectorAll('.lang-btn').forEach(b =>
  328.                 b.classList.toggle('selected', b.dataset.lang === code));
  329.             scheduleSave();
  330.         };
  332.         document.querySelectorAll('.theme-card').forEach(card => {
  333.             card.addEventListener('click', () => {
  334.                 state.theme = card.dataset.theme;
  335.                 renderTheme();
  336.                 scheduleSave();
  337.             });
  338.         });
  340.         // ═══════════════════════════════════
  341.         // CHARGEMENT INITIAL (GET /data)
  342.         // ═══════════════════════════════════
  343.         async function loadExisting() {
  344.             try {
  345.                 const res = await fetch(window.__CV_CTX__.apiBase + '/data' + window.publicQuery(), {
  346.                     headers: { 'Content-Type': 'application/json' }
  347.                 });
  348.                 if (!res.ok) {
  349.                     console.warn('[CV] GET /data a retourné HTTP ' + res.status);
  350.                     return;
  351.                 }
  352.                 const ct = (res.headers.get('content-type') || '').toLowerCase();
  353.                 if (!ct.includes('application/json')) {
  354.                     console.error('[CV] /data a renvoyé du non-JSON. Vérifiez le préfixe API (' + window.__CV_CTX__.apiBase + ').');
  355.                     return;
  356.                 }
  357.                 const json = await res.json();
  358.                 if (json.settings) {
  359.                     state.theme       = json.settings.theme       || state.theme;
  360.                     state.primary     = json.settings.primary     || state.primary;
  361.                     state.secondary   = json.settings.secondary   || state.secondary;
  362.                     state.cv_language = json.settings.cv_language || state.cv_language;
  363.                 }
  364.                 if (json.data) state.data = json.data;
  365.             } catch (e) {
  366.                 console.error('[CV] Erreur chargement données :', e);
  367.             }
  368.         }
  370.         // ═══════════════════════════════════
  371.         // AUTOSAVE
  372.         //
  373.         // Stratégie identique à form.html.twig :
  374.         //   - debounce 2s sur chaque sélection (thème, couleur, langue)
  375.         //   - flush via fetch({keepalive:true}) sur beforeunload / visibilitychange
  376.         //   - flush au clic "Continuer" (déjà fait dans continueToForm)
  377.         // Pas de flush sur blur ici : la page theme n'a pas de champ texte, tous
  378.         // les contrôles sont des clics donc déjà capturés par le debounce court.
  379.         // ═══════════════════════════════════
  380.         let saveTimer = null, saveInFlight = false, dirty = false;
  382.         function buildSavePayload() {
  383.             return {
  384.                 data:        state.data || { first_name: '', last_name: '', email: window.__CV_CTX__.user.email || '' },
  385.                 theme:       state.theme,
  386.                 primary:     state.primary,
  387.                 secondary:   state.secondary,
  388.                 cv_language: state.cv_language,
  389.             };
  390.         }
  392.         async function scheduleSave() {
  393.             dirty = true;
  394.             window.setSaveStatus('saving');
  395.             if (saveTimer) clearTimeout(saveTimer);
  396.             saveTimer = setTimeout(saveNow, 2000);
  397.         }
  399.         async function saveNow() {
  400.             if (saveInFlight) return;
  401.             if (saveTimer) { clearTimeout(saveTimer); saveTimer = null; }
  402.             saveInFlight = true;
  403.             try {
  404.                 const res = await fetch(window.__CV_CTX__.apiBase + '/save-draft', {
  405.                     method: 'POST',
  406.                     headers: window.authHeaders(),
  407.                     body: JSON.stringify(window.publicBody(buildSavePayload())),
  408.                 });
  409.                 if (!res.ok) throw new Error();
  410.                 dirty = false;
  411.                 window.setSaveStatus('saved');
  412.             } catch (e) {
  413.                 window.setSaveStatus('error');
  414.             } finally {
  415.                 saveInFlight = false;
  416.             }
  417.         }
  419.         // Flush beforeunload : survit à la fermeture de l'onglet grâce à keepalive
  420.         function installBeaconFlush() {
  421.             const beaconSave = () => {
  422.                 if (!dirty || saveInFlight) return;
  423.                 try {
  424.                     fetch(window.__CV_CTX__.apiBase + '/save-draft', {
  425.                         method:    'POST',
  426.                         headers:   window.authHeaders(),
  427.                         body:      JSON.stringify(window.publicBody(buildSavePayload())),
  428.                         keepalive: true,
  429.                     });
  430.                     dirty = false;
  431.                 } catch (e) { /* best effort */ }
  432.             };
  433.             window.addEventListener('beforeunload', beaconSave);
  434.             document.addEventListener('visibilitychange', () => {
  435.                 if (document.visibilityState === 'hidden') beaconSave();
  436.             });
  437.         }
  439.         // ═══════════════════════════════════
  440.         // CONTINUER
  441.         // ═══════════════════════════════════
  442.         window.continueToForm = async () => {
  443.             const btn = document.getElementById('btnContinue');
  444.             btn.disabled = true;
  445.             if (saveTimer) { clearTimeout(saveTimer); await saveNow(); }
  446.             const params = new URLSearchParams(window.location.search);
  447.             const mode = params.get('mode') || 'scratch';
  448.             window.location.href = window.__CV_CTX__.routes.form + '?mode=' + mode;
  449.         };
  451.         // ═══════════════════════════════════
  452.         // INIT
  453.         // ═══════════════════════════════════
  454.         (async () => {
  455.             const params = new URLSearchParams(window.location.search);
  456.             const mode = params.get('mode') || 'scratch';
  457.             const i18n = window.__CV_CTX__.i18n;
  459.             if (mode === 'analyze') {
  460.                 window.cvLoader.show(i18n.loaderAnalyze, i18n.loaderAnalyzeSub);
  461.             } else {
  462.                 window.cvLoader.show(i18n.loaderPrefs, i18n.loaderPrefsSub);
  463.             }
  465.             await loadExisting();
  466.             renderTheme();
  467.             renderColors();
  468.             renderLangs();
  469.             installBeaconFlush();
  470.             window.cvLoader.hide();
  471.         })();
  472.     </script>
  473. {% endblock %}