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 %}