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

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="{{ app.request.locale|default('fr') }}">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>{% block title %}WhileResume{% endblock %}</title>
  7. <link rel="preconnect" href="https://fonts.googleapis.com">
  8. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  9. <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  10. <style>
  11. :root {
  12. --violet: #D0BEFF;
  13. --violet-deep: #8B6FC0;
  14. --violet-dark: #6B4FA0;
  15. --violet-soft: #F0EAFF;
  16. --violet-ultra: #F8F5FF;
  17. --violet-glow: rgba(208,190,255,0.35);
  19. --ink: #1E1E2E;
  20. --ink-80: #3D3D52;
  21. --ink-60: #62627A;
  22. --ink-40: #9090A7;
  23. --ink-20: #C8C8D6;
  24. --ink-10: #E6E6ED;
  25. --ink-05: #F2F2F6;
  27. --cream: #FBFAFF;
  28. --white: #FFFFFF;
  30. --emerald: #34C77B;
  31. --emerald-soft: #EDFCF4;
  32. --ocean: #4E8AE6;
  33. --ocean-soft: #EDF3FE;
  34. --amber: #E6A23C;
  35. --amber-soft: #FEF6E8;
  36. --rose: #E8457A;
  37. --rose-soft: #FEF0F4;
  38. --danger: #EF4444;
  39. --danger-soft: #FEF2F2;
  41. --font-display: 'Fraunces', serif;
  42. --font-body: 'Outfit', sans-serif;
  43. --font-mono: 'JetBrains Mono', monospace;
  45. --r-sm: 10px;
  46. --r-md: 14px;
  47. --r-lg: 20px;
  48. --r-xl: 28px;
  49. --r-full: 100px;
  51. --ease: cubic-bezier(0.16, 1, 0.3, 1);
  52. --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  53. }
  55. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  56. html { scroll-behavior: smooth; }
  58. body {
  59. font-family: var(--font-body);
  60. background: var(--cream);
  61. color: var(--ink);
  62. -webkit-font-smoothing: antialiased;
  63. line-height: 1.6;
  64. overflow-x: hidden;
  65. min-height: 100vh;
  66. }
  68. body::after {
  69. content: '';
  70. position: fixed;
  71. inset: 0;
  72. pointer-events: none;
  73. z-index: 9999;
  74. opacity: 0.018;
  75. background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  76. background-size: 200px;
  77. }
  79. /* TOP BAR */
  80. .topbar {
  81. position: fixed;
  82. top: 0; left: 0; right: 0;
  83. z-index: 90;
  84. display: flex;
  85. align-items: center;
  86. justify-content: space-between;
  87. padding: 0 40px;
  88. height: 60px;
  89. background: rgba(251,250,255,0.88);
  90. backdrop-filter: blur(16px) saturate(1.6);
  91. border-bottom: 1px solid rgba(208,190,255,0.15);
  92. }
  94. .topbar-logo {
  95. font-family: var(--font-display);
  96. font-size: 1.3rem;
  97. font-weight: 600;
  98. text-decoration: none;
  99. color: var(--ink);
  100. letter-spacing: -0.03em;
  101. }
  103. .topbar-logo span { color: var(--violet-dark); font-style: italic; }
  105. .topbar-right { display: flex; align-items: center; gap: 16px; }
  107. .topbar-save {
  108. display: none;
  109. align-items: center;
  110. gap: 6px;
  111. font-size: 0.75rem;
  112. color: var(--ink-60);
  113. }
  115. .topbar-save.visible { display: flex; }
  116. .topbar-save.saved { color: var(--emerald); }
  117. .topbar-save.saving { color: var(--ink-60); }
  118. .topbar-save.error { color: var(--danger); }
  120. .topbar-save-dot {
  121. width: 6px; height: 6px; border-radius: 50%;
  122. background: currentColor;
  123. }
  125. .topbar-save.saving .topbar-save-dot { animation: pulse 1.2s ease-in-out infinite; }
  127. .topbar-link {
  128. font-size: 0.82rem;
  129. font-weight: 500;
  130. color: var(--ink-60);
  131. text-decoration: none;
  132. transition: color 0.2s;
  133. }
  135. .topbar-link:hover { color: var(--violet-dark); }
  137. /* Bouton violet "Retour au dashboard" dans la topbar */
  138. .topbar-btn-primary {
  139. display: inline-flex;
  140. align-items: center;
  141. gap: 8px;
  142. padding: 9px 18px;
  143. background: linear-gradient(135deg, var(--violet-deep), var(--violet-dark));
  144. color: white;
  145. font-family: var(--font-body);
  146. font-size: 0.82rem;
  147. font-weight: 600;
  148. text-decoration: none;
  149. border-radius: var(--r-full);
  150. box-shadow: 0 4px 14px var(--violet-glow);
  151. transition: all 0.25s var(--ease);
  152. white-space: nowrap;
  153. }
  155. .topbar-btn-primary:hover {
  156. transform: translateY(-1px);
  157. box-shadow: 0 8px 22px rgba(139, 111, 192, 0.35);
  158. background: linear-gradient(135deg, var(--violet-dark), var(--violet-deep));
  159. }
  161. .topbar-btn-primary:active {
  162. transform: translateY(0);
  163. box-shadow: 0 3px 10px var(--violet-glow);
  164. }
  166. .topbar-btn-primary svg {
  167. flex-shrink: 0;
  168. }
  170. .topbar-avatar {
  171. width: 34px;
  172. height: 34px;
  173. border-radius: 50%;
  174. background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  175. color: white;
  176. display: flex;
  177. align-items: center;
  178. justify-content: center;
  179. font-weight: 700;
  180. font-size: 0.72rem;
  181. }
  183. /* PAGE CONTAINER */
  184. .page-container {
  185. min-height: 100vh;
  186. padding: 110px 100px 60px;
  187. position: relative;
  188. }
  190. .page-inner {
  191. max-width: 820px;
  192. margin: 0 auto;
  193. position: relative;
  194. }
  196. /* DECO BLOBS */
  197. .page-container::before,
  198. .page-container::after {
  199. content: '';
  200. position: fixed;
  201. border-radius: 50%;
  202. pointer-events: none;
  203. opacity: 0.4;
  204. z-index: 0;
  205. }
  207. .page-container::before {
  208. width: 520px; height: 520px;
  209. top: -120px; right: -160px;
  210. background: radial-gradient(circle, var(--violet-soft), transparent 70%);
  211. }
  213. .page-container::after {
  214. width: 400px; height: 400px;
  215. bottom: -80px; left: -120px;
  216. background: radial-gradient(circle, var(--ocean-soft), transparent 70%);
  217. }
  219. /* STEPS PROGRESS (top of page under topbar) */
  220. .tunnel-progress {
  221. position: fixed;
  222. top: 60px;
  223. left: 0; right: 0;
  224. z-index: 80;
  225. background: rgba(251,250,255,0.85);
  226. backdrop-filter: blur(12px);
  227. border-bottom: 1px solid rgba(208,190,255,0.1);
  228. padding: 16px 40px;
  229. }
  231. .tunnel-progress-inner {
  232. max-width: 820px;
  233. margin: 0 auto;
  234. display: flex;
  235. align-items: center;
  236. gap: 16px;
  237. }
  239. .tp-step {
  240. display: flex;
  241. align-items: center;
  242. gap: 10px;
  243. flex: 1;
  244. opacity: 0.4;
  245. transition: opacity 0.3s;
  246. }
  248. .tp-step.active, .tp-step.done { opacity: 1; }
  250. .tp-dot {
  251. width: 26px; height: 26px;
  252. border-radius: 50%;
  253. background: var(--ink-10);
  254. color: var(--ink-40);
  255. display: flex;
  256. align-items: center;
  257. justify-content: center;
  258. font-size: 0.72rem;
  259. font-weight: 700;
  260. flex-shrink: 0;
  261. transition: all 0.3s var(--ease-spring);
  262. }
  264. .tp-step.active .tp-dot {
  265. background: var(--violet-deep);
  266. color: white;
  267. box-shadow: 0 0 0 4px var(--violet-glow);
  268. }
  270. .tp-step.done .tp-dot {
  271. background: var(--emerald);
  272. color: white;
  273. }
  275. .tp-label {
  276. font-size: 0.78rem;
  277. font-weight: 500;
  278. color: var(--ink-60);
  279. white-space: nowrap;
  280. }
  282. .tp-step.active .tp-label { color: var(--violet-dark); font-weight: 600; }
  283. .tp-step.done .tp-label { color: var(--emerald); }
  285. .tp-line {
  286. flex: 1;
  287. height: 2px;
  288. background: var(--ink-10);
  289. position: relative;
  290. overflow: hidden;
  291. min-width: 20px;
  292. }
  294. .tp-line::after {
  295. content: '';
  296. position: absolute;
  297. top: 0; left: 0;
  298. width: 100%;
  299. height: 100%;
  300. background: var(--emerald);
  301. transform: scaleX(0);
  302. transform-origin: left;
  303. transition: transform 0.5s var(--ease);
  304. }
  306. .tp-line.done::after { transform: scaleX(1); }
  308. .page-container { padding-top: 150px; }
  310. /* BADGE / TITLES */
  311. .badge {
  312. display: inline-flex;
  313. align-items: center;
  314. gap: 8px;
  315. padding: 6px 16px;
  316. border-radius: var(--r-full);
  317. font-size: 0.7rem;
  318. font-weight: 600;
  319. text-transform: uppercase;
  320. letter-spacing: 0.1em;
  321. margin-bottom: 24px;
  322. background: var(--violet-soft);
  323. color: var(--violet-dark);
  324. }
  326. .badge-num {
  327. width: 20px; height: 20px;
  328. border-radius: 50%;
  329. display: flex;
  330. align-items: center;
  331. justify-content: center;
  332. font-size: 0.65rem;
  333. font-weight: 700;
  334. background: var(--violet-deep);
  335. color: white;
  336. }
  338. .stitle {
  339. font-family: var(--font-display);
  340. font-size: clamp(2rem, 4vw, 3rem);
  341. font-weight: 400;
  342. line-height: 1.15;
  343. letter-spacing: -0.03em;
  344. margin-bottom: 14px;
  345. }
  347. .stitle em { font-style: italic; color: var(--violet-dark); }
  349. .sdesc {
  350. font-size: 1.05rem;
  351. color: var(--ink-60);
  352. max-width: 540px;
  353. margin-bottom: 40px;
  354. font-weight: 300;
  355. }
  357. /* FORM ELEMENTS (communs) */
  358. .fg { display: grid; gap: 16px; }
  359. .fg.c2 { grid-template-columns: 1fr 1fr; }
  360. .fg.c3 { grid-template-columns: 1fr 1fr 1fr; }
  362. .flabel {
  363. display: block;
  364. font-size: 0.72rem;
  365. font-weight: 600;
  366. text-transform: uppercase;
  367. letter-spacing: 0.08em;
  368. color: var(--ink-40);
  369. margin-bottom: 8px;
  370. }
  372. .flabel .req { color: var(--rose); margin-left: 2px; }
  373. .flabel .opt { opacity: 0.5; text-transform: none; letter-spacing: 0; }
  375. .finput, .ftextarea, .fselect {
  376. width: 100%;
  377. padding: 13px 16px;
  378. border: 1.5px solid var(--ink-10);
  379. border-radius: var(--r-md);
  380. font-family: var(--font-body);
  381. font-size: 0.92rem;
  382. color: var(--ink);
  383. background: var(--white);
  384. outline: none;
  385. transition: border-color 0.25s, box-shadow 0.25s;
  386. }
  388. .finput:focus, .ftextarea:focus, .fselect:focus {
  389. border-color: var(--violet);
  390. box-shadow: 0 0 0 4px var(--violet-glow);
  391. }
  393. .finput.invalid, .tag-input-wrap.invalid { border-color: var(--danger); background: var(--danger-soft); }
  395. .finput::placeholder, .ftextarea::placeholder { color: var(--ink-20); }
  397. .ftextarea {
  398. resize: vertical;
  399. min-height: 130px;
  400. line-height: 1.7;
  401. }
  403. .fselect {
  404. appearance: none;
  405. -webkit-appearance: none;
  406. background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239090A7' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  407. background-repeat: no-repeat;
  408. background-position: right 14px center;
  409. background-size: 16px;
  410. padding-right: 40px;
  411. cursor: pointer;
  412. }
  414. .field { margin-bottom: 14px; }
  415. .field:last-child { margin-bottom: 0; }
  417. .section-label {
  418. font-size: 0.72rem;
  419. font-weight: 600;
  420. text-transform: uppercase;
  421. letter-spacing: 0.08em;
  422. color: var(--ink-40);
  423. margin: 32px 0 14px;
  424. }
  426. .section-label:first-of-type { margin-top: 0; }
  428. /* BUTTONS */
  429. .btn-primary, .btn-secondary, .btn-ghost {
  430. display: inline-flex;
  431. align-items: center;
  432. justify-content: center;
  433. gap: 10px;
  434. padding: 15px 32px;
  435. border: none;
  436. border-radius: var(--r-full);
  437. font-family: var(--font-body);
  438. font-size: 0.95rem;
  439. font-weight: 600;
  440. cursor: pointer;
  441. transition: all 0.3s var(--ease);
  442. text-decoration: none;
  443. }
  445. .btn-primary {
  446. background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  447. color: white;
  448. box-shadow: 0 6px 24px var(--violet-glow);
  449. }
  451. .btn-primary:hover {
  452. transform: translateY(-2px);
  453. box-shadow: 0 10px 32px rgba(208,190,255,0.5);
  454. }
  456. .btn-primary:disabled {
  457. opacity: 0.5;
  458. cursor: not-allowed;
  459. transform: none;
  460. }
  462. .btn-secondary {
  463. background: var(--white);
  464. color: var(--ink-80);
  465. border: 1.5px solid var(--ink-10);
  466. }
  468. .btn-secondary:hover { border-color: var(--ink-20); background: var(--ink-05); }
  470. .btn-ghost {
  471. background: transparent;
  472. color: var(--ink-60);
  473. padding: 10px 18px;
  474. }
  476. .btn-ghost:hover { color: var(--ink); background: var(--ink-05); }
  478. .cta-row {
  479. display: flex;
  480. gap: 12px;
  481. margin-top: 36px;
  482. flex-wrap: wrap;
  483. }
  485. @keyframes pulse {
  486. 0%, 100% { opacity: .6; transform: scale(.9); }
  487. 50% { opacity: 1; transform: scale(1.1); }
  488. }
  490. @keyframes fadeUp {
  491. from { opacity: 0; transform: translateY(20px); }
  492. to { opacity: 1; transform: translateY(0); }
  493. }
  495. .fade-up { animation: fadeUp 0.6s var(--ease) both; }
  496. .fade-up.d1 { animation-delay: 0.08s; }
  497. .fade-up.d2 { animation-delay: 0.16s; }
  498. .fade-up.d3 { animation-delay: 0.24s; }
  499. .fade-up.d4 { animation-delay: 0.32s; }
  501. /* ═══════════════════════════════════
  502. LOADER OVERLAY
  503. ═══════════════════════════════════ */
  504. .loader-overlay {
  505. position: fixed;
  506. inset: 0;
  507. z-index: 9998;
  508. background: rgba(251,250,255,0.92);
  509. backdrop-filter: blur(8px);
  510. display: flex;
  511. flex-direction: column;
  512. align-items: center;
  513. justify-content: center;
  514. gap: 24px;
  515. opacity: 1;
  516. transition: opacity 0.4s var(--ease);
  517. pointer-events: all;
  518. }
  520. .loader-overlay.hidden {
  521. opacity: 0;
  522. pointer-events: none;
  523. }
  525. .loader-orb {
  526. width: 84px;
  527. height: 84px;
  528. position: relative;
  529. }
  531. .loader-ring {
  532. position: absolute;
  533. inset: 0;
  534. border-radius: 50%;
  535. border: 2.5px solid var(--violet-soft);
  536. }
  538. .loader-ring::after {
  539. content: '';
  540. position: absolute;
  541. inset: -2.5px;
  542. border-radius: 50%;
  543. border: 3px solid transparent;
  544. border-top-color: var(--violet-deep);
  545. animation: spin 1.2s linear infinite;
  546. }
  548. .loader-ring:nth-child(2) { inset: 14px; }
  549. .loader-ring:nth-child(2)::after {
  550. border-top-color: var(--violet);
  551. animation-duration: 1.8s;
  552. animation-direction: reverse;
  553. }
  555. .loader-core {
  556. position: absolute;
  557. inset: 26px;
  558. border-radius: 50%;
  559. background: var(--violet-soft);
  560. display: flex;
  561. align-items: center;
  562. justify-content: center;
  563. }
  565. .loader-core svg {
  566. color: var(--violet-deep);
  567. animation: pulse 2.2s ease-in-out infinite;
  568. }
  570. .loader-text {
  571. font-family: var(--font-display);
  572. font-size: 1.05rem;
  573. font-weight: 500;
  574. color: var(--ink-80);
  575. letter-spacing: -0.01em;
  576. }
  578. .loader-sub {
  579. font-size: 0.82rem;
  580. color: var(--ink-40);
  581. font-weight: 400;
  582. max-width: 280px;
  583. text-align: center;
  584. margin-top: -16px;
  585. }
  587. @keyframes spin { to { transform: rotate(360deg); } }
  589. @media (max-width: 760px) {
  590. .page-container { padding: 150px 20px 40px; }
  591. .topbar { padding: 0 20px; }
  592. .tunnel-progress { padding: 14px 20px; }
  593. .tp-label { display: none; }
  594. .fg.c2, .fg.c3 { grid-template-columns: 1fr; }
  595. }
  597. {% block extra_css %}{% endblock %}
  598. </style>
  599. </head>
  600. <body>
  602. <div class="loader-overlay{% if not show_loader|default(false) %} hidden{% endif %}" id="loaderOverlay">
  603. <div class="loader-orb">
  604. <div class="loader-ring"></div>
  605. <div class="loader-ring"></div>
  606. <div class="loader-core">
  607. <svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
  608. <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
  609. <polyline points="14 2 14 8 20 8"/>
  610. </svg>
  611. </div>
  612. </div>
  613. <div class="loader-text" id="loaderText">{{ 'generate2.loader.default_title'|trans({}, 'whr-public') }}</div>
  614. <div class="loader-sub" id="loaderSub">{{ 'generate2.loader.default_sub'|trans({}, 'whr-public') }}</div>
  615. </div>
  617. <header class="topbar">
  618. {# Mode public : logo cliquable vers la homepage WhileResume (pas de dashboard puisque pas de compte) #}
  619. <a href="{{ path('locale_whileresume_homepage') }}">
  620. <img src="/uploads/logo.png" style="margin-top:10px;" alt="WhileResume" />
  621. </a>
  622. <div class="topbar-right">
  623. <div class="topbar-save" id="saveIndicator">
  624. <div class="topbar-save-dot"></div>
  625. <span id="saveText">{{ 'generate2.topbar.saved'|trans({}, 'whr-public') }}</span>
  626. </div>
  627. {# Mode public : pas de lien dashboard ni d'avatar — visiteur anonyme #}
  628. {# On garde un placeholder discret indiquant le temps restant pour rappeler les 48h #}
  629. {% if draft is defined and draft and draft.expiresAt %}
  630. <span class="topbar-link" id="cvpub-expires" data-expires-at="{{ draft.expiresAt|date('c') }}" style="font-size:0.78rem;color:var(--ink-40)">
  631. {# Le JS calculera le temps restant et l'affichera ici #}
  632. </span>
  633. {% endif %}
  634. <a href="{% if app.request.locale == "fr" %}{{ path('locale_whileresume_homepage',{'_locale':app.request.locale}) }}{% else %}{{ path('whileresume_homepage') }}{% endif %}" class="topbar-btn-primary">
  635. <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
  636. <path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h4v-6h4v6h4a1 1 0 001-1V10"/>
  637. </svg>
  638. {{ 'generate2.topbar.backhomepage'|trans({}, 'whr-candidates') }}
  639. </a>
  640. </div>
  641. </header>
  643. {% block progress %}
  644. <div class="tunnel-progress">
  645. <div class="tunnel-progress-inner">
  646. <div class="tp-step {{ current_step == 1 ? 'active' : (current_step > 1 ? 'done' : '') }}">
  647. <div class="tp-dot">{{ current_step > 1 ? '✓' : '1' }}</div>
  648. <span class="tp-label">{{ 'generate2.progress.step_choice'|trans({}, 'whr-public') }}</span>
  649. </div>
  650. <div class="tp-line {{ current_step > 1 ? 'done' : '' }}"></div>
  651. <div class="tp-step {{ current_step == 2 ? 'active' : (current_step > 2 ? 'done' : '') }}">
  652. <div class="tp-dot">{{ current_step > 2 ? '✓' : '2' }}</div>
  653. <span class="tp-label">{{ 'generate2.progress.step_theme'|trans({}, 'whr-public') }}</span>
  654. </div>
  655. <div class="tp-line {{ current_step > 2 ? 'done' : '' }}"></div>
  656. <div class="tp-step {{ current_step == 3 ? 'active' : (current_step > 3 ? 'done' : '') }}">
  657. <div class="tp-dot">{{ current_step > 3 ? '✓' : '3' }}</div>
  658. <span class="tp-label">{{ 'generate2.progress.step_info'|trans({}, 'whr-public') }}</span>
  659. </div>
  660. </div>
  661. </div>
  662. {% endblock %}
  664. <main class="page-container">
  665. <div class="page-inner">
  666. {% block body %}{% endblock %}
  667. </div>
  668. </main>
  670. {# ════════════════════════════════════════════════════════════════════════════
  671. CONTEXT POUR LE JS (data-attributes)
  672. ════════════════════════════════════════════════════════════════════════════
  673. Approche imperméable aux caractères de contrôle / encodage cassé :
  674. chaque trad est un attribut HTML séparé, escapé par Twig via |e('html_attr').
  675. Si UNE trad est corrompue, ça affecte SEULEMENT cet attribut, pas le reste.
  676. #}
  677. {# Détecte si la requête courante utilise une route avec préfixe locale.
  678. Si oui, on génère TOUTES les URLs des routes du tunnel avec préfixe pour
  679. que la navigation conserve /fr/, /de/, etc. dans l'URL. #}
  680. {% set _current_route = app.request.attributes.get('_route') %}
  681. {% set _has_locale_prefix = _current_route starts with 'locale_' %}
  683. <div id="__cv_ctx_root__" style="display:none"
  684. data-api-base="{{ api_base|default('/api/cv-public')|e('html_attr') }}"
  685. data-jwt="{{ jwt|default('')|e('html_attr') }}"
  686. data-locale="{{ app.request.locale|default('fr')|e('html_attr') }}"
  687. data-is-public="{{ is_public|default(true) ? '1' : '0' }}"
  688. data-public-slug="{{ public_slug|default('')|e('html_attr') }}"
  690. data-user-first-name="{{ (user_data.first_name|default(''))|e('html_attr') }}"
  691. data-user-last-name="{{ (user_data.last_name|default(''))|e('html_attr') }}"
  692. data-user-email="{{ (user_data.email|default(''))|e('html_attr') }}"
  694. data-route-choice="{{ public_slug|default('') ? (_has_locale_prefix ? path('locale_cv_public_choice', { slug: public_slug, _locale: app.request.locale }) : path('cv_public_choice', { slug: public_slug }))|e('html_attr') : '' }}"
  695. data-route-theme="{{ public_slug|default('') ? (_has_locale_prefix ? path('locale_cv_public_theme', { slug: public_slug, _locale: app.request.locale }) : path('cv_public_theme', { slug: public_slug }))|e('html_attr') : '' }}"
  696. data-route-form="{{ public_slug|default('') ? (_has_locale_prefix ? path('locale_cv_public_form', { slug: public_slug, _locale: app.request.locale }) : path('cv_public_form', { slug: public_slug }))|e('html_attr') : '' }}"
  697. data-route-register="{{ public_slug|default('') ? (_has_locale_prefix ? path('locale_cv_public_register', { slug: public_slug, _locale: app.request.locale }) : path('cv_public_register', { slug: public_slug }))|e('html_attr') : '' }}"
  698. data-route-generate="{{ public_slug|default('') ? (_has_locale_prefix ? path('locale_cv_public_generate', { slug: public_slug, _locale: app.request.locale }) : path('cv_public_generate', { slug: public_slug }))|e('html_attr') : '' }}"
  700. data-i18n-saving="{{ 'generate2.topbar.saving'|trans({}, 'whr-public')|e('html_attr') }}"
  701. data-i18n-saved="{{ 'generate2.topbar.saved'|trans({}, 'whr-public')|e('html_attr') }}"
  702. data-i18n-save-error="{{ 'generate2.topbar.save_error'|trans({}, 'whr-public')|e('html_attr') }}"
  703. data-i18n-load-error="{{ 'generate2.form.error.load'|trans({}, 'whr-public')|e('html_attr') }}"
  704. data-i18n-analyze-error="{{ 'generate2.form.analyzing.error'|trans({}, 'whr-public')|e('html_attr') }}"
  705. data-i18n-generate-error="{{ 'generate2.form.error.generate'|trans({}, 'whr-public')|e('html_attr') }}"
  706. data-i18n-missing-fields="{{ 'generate2.form.error.missing_fields'|trans({}, 'whr-public')|e('html_attr') }}"
  707. data-i18n-generate-first="{{ 'generate2.form.error.generate_first'|trans({}, 'whr-public')|e('html_attr') }}"
  708. data-i18n-preview-loading="{{ 'generate2.done.preview_loading'|trans({}, 'whr-public')|e('html_attr') }}"
  709. data-i18n-preview-unavailable="{{ 'generate2.done.preview_unavailable'|trans({}, 'whr-public')|e('html_attr') }}"
  710. data-i18n-preview-fallback="{{ 'generate2.done.preview_fallback'|trans({}, 'whr-public')|e('html_attr') }}"
  711. data-i18n-download-error="{{ 'generate2.form.error.download'|trans({}, 'whr-public')|e('html_attr') }}"
  712. data-i18n-file-too-large="{{ 'generate2.form.upload.error_too_large'|trans({}, 'whr-public')|e('html_attr') }}"
  713. data-i18n-file-must-be-pdf="{{ 'generate2.form.upload.error_must_be_pdf'|trans({}, 'whr-public')|e('html_attr') }}"
  714. data-i18n-generating="{{ 'generate2.loader.generate_title'|trans({}, 'whr-public')|e('html_attr') }}"
  715. data-i18n-generating-hint="{{ 'generate2.loader.generate_sub'|trans({}, 'whr-public')|e('html_attr') }}"
  716. data-i18n-generate-cta="{{ 'generate2.form.cta_generate'|trans({}, 'whr-public')|e('html_attr') }}"
  717. data-i18n-generating-cta="{{ 'generate2.form.cta_generating'|trans({}, 'whr-public')|e('html_attr') }}"
  718. data-i18n-loader-analyze="{{ 'generate2.loader.analyze_done_title'|trans({}, 'whr-public')|e('html_attr') }}"
  719. data-i18n-loader-analyze-sub="{{ 'generate2.loader.analyze_done_sub'|trans({}, 'whr-public')|e('html_attr') }}"
  720. data-i18n-loader-prefs="{{ 'generate2.loader.prefs_title'|trans({}, 'whr-public')|e('html_attr') }}"
  721. data-i18n-loader-prefs-sub="{{ 'generate2.loader.prefs_sub'|trans({}, 'whr-public')|e('html_attr') }}"
  722. data-i18n-loader-form-scratch="{{ 'generate2.loader.form_scratch_title'|trans({}, 'whr-public')|e('html_attr') }}"
  723. data-i18n-loader-form-scratch-sub="{{ 'generate2.loader.form_scratch_sub'|trans({}, 'whr-public')|e('html_attr') }}"
  724. data-i18n-loader-form-edit="{{ 'generate2.loader.form_edit_title'|trans({}, 'whr-public')|e('html_attr') }}"
  725. data-i18n-loader-form-edit-sub="{{ 'generate2.loader.form_edit_sub'|trans({}, 'whr-public')|e('html_attr') }}"
  726. data-i18n-loader-form-analyze="{{ 'generate2.loader.form_analyze_title'|trans({}, 'whr-public')|e('html_attr') }}"
  727. data-i18n-loader-form-analyze-sub="{{ 'generate2.loader.form_analyze_sub'|trans({}, 'whr-public')|e('html_attr') }}"
  728. data-i18n-network-error="{{ 'generate2.form.error.network'|trans({}, 'whr-public')|e('html_attr') }}"
  730. data-i18n-title-language="{{ 'generate2.form.item_title.language'|trans({}, 'whr-public')|e('html_attr') }}"
  731. data-i18n-title-experience="{{ 'generate2.form.item_title.experience'|trans({}, 'whr-public')|e('html_attr') }}"
  732. data-i18n-title-degree="{{ 'generate2.form.item_title.degree'|trans({}, 'whr-public')|e('html_attr') }}"
  733. data-i18n-title-certification="{{ 'generate2.form.item_title.certification'|trans({}, 'whr-public')|e('html_attr') }}"
  734. data-i18n-title-project="{{ 'generate2.form.item_title.project'|trans({}, 'whr-public')|e('html_attr') }}"
  736. data-i18n-label-language="{{ 'generate2.form.label.language'|trans({}, 'whr-public')|e('html_attr') }}"
  737. data-i18n-label-level="{{ 'generate2.form.label.level'|trans({}, 'whr-public')|e('html_attr') }}"
  738. data-i18n-label-position="{{ 'generate2.form.label.position'|trans({}, 'whr-public')|e('html_attr') }}"
  739. data-i18n-label-company="{{ 'generate2.form.label.company'|trans({}, 'whr-public')|e('html_attr') }}"
  740. data-i18n-label-start-date="{{ 'generate2.form.label.start_date'|trans({}, 'whr-public')|e('html_attr') }}"
  741. data-i18n-label-end-date="{{ 'generate2.form.label.end_date'|trans({}, 'whr-public')|e('html_attr') }}"
  742. data-i18n-label-city="{{ 'generate2.form.label.city'|trans({}, 'whr-public')|e('html_attr') }}"
  743. data-i18n-label-contract-type="{{ 'generate2.form.label.contract_type'|trans({}, 'whr-public')|e('html_attr') }}"
  744. data-i18n-label-description="{{ 'generate2.form.label.description'|trans({}, 'whr-public')|e('html_attr') }}"
  745. data-i18n-label-degree="{{ 'generate2.form.label.degree'|trans({}, 'whr-public')|e('html_attr') }}"
  746. data-i18n-label-school="{{ 'generate2.form.label.school'|trans({}, 'whr-public')|e('html_attr') }}"
  747. data-i18n-label-field="{{ 'generate2.form.label.field'|trans({}, 'whr-public')|e('html_attr') }}"
  748. data-i18n-label-cert-name="{{ 'generate2.form.label.cert_name'|trans({}, 'whr-public')|e('html_attr') }}"
  749. data-i18n-label-issuer="{{ 'generate2.form.label.issuer'|trans({}, 'whr-public')|e('html_attr') }}"
  750. data-i18n-label-year="{{ 'generate2.form.label.year'|trans({}, 'whr-public')|e('html_attr') }}"
  751. data-i18n-label-project-name="{{ 'generate2.form.label.project_name'|trans({}, 'whr-public')|e('html_attr') }}"
  753. data-i18n-ph-lang-name="{{ 'generate2.form.placeholder.lang_name'|trans({}, 'whr-public')|e('html_attr') }}"
  754. data-i18n-ph-lang-level="{{ 'generate2.form.placeholder.lang_level'|trans({}, 'whr-public')|e('html_attr') }}"
  755. data-i18n-ph-position="{{ 'generate2.form.placeholder.position'|trans({}, 'whr-public')|e('html_attr') }}"
  756. data-i18n-ph-company="{{ 'generate2.form.placeholder.company'|trans({}, 'whr-public')|e('html_attr') }}"
  757. data-i18n-ph-present="{{ 'generate2.form.placeholder.end_date_present'|trans({}, 'whr-public')|e('html_attr') }}"
  758. data-i18n-ph-choose="{{ 'generate2.common.choose'|trans({}, 'whr-public')|e('html_attr') }}"
  759. data-i18n-ph-exp-desc="{{ 'generate2.form.placeholder.exp_desc'|trans({}, 'whr-public')|e('html_attr') }}"
  760. data-i18n-ph-degree="{{ 'generate2.form.placeholder.degree'|trans({}, 'whr-public')|e('html_attr') }}"
  761. data-i18n-ph-school="{{ 'generate2.form.placeholder.school'|trans({}, 'whr-public')|e('html_attr') }}"
  762. data-i18n-ph-field="{{ 'generate2.form.placeholder.field'|trans({}, 'whr-public')|e('html_attr') }}"
  763. data-i18n-ph-cert-name="{{ 'generate2.form.placeholder.cert_name'|trans({}, 'whr-public')|e('html_attr') }}"
  764. data-i18n-ph-issuer="{{ 'generate2.form.placeholder.issuer'|trans({}, 'whr-public')|e('html_attr') }}"
  765. data-i18n-ph-project-name="{{ 'generate2.form.placeholder.project_name'|trans({}, 'whr-public')|e('html_attr') }}"
  766. data-i18n-ph-project-desc="{{ 'generate2.form.placeholder.project_desc'|trans({}, 'whr-public')|e('html_attr') }}"
  767. ></div>
  769. <script>
  770. /**
  771. * Construction de window.__CV_CTX__ depuis les data-attributes du div root.
  772. * Approche imperméable aux caractères qui cassent : pas de json_encode,
  773. * pas de JSON inline, juste des attributs HTML standards.
  774. */
  775. (function () {
  776. const FALLBACK = {
  777. apiBase: '/api/cv-public',
  778. jwt: null,
  779. locale: 'fr',
  780. user: { first_name: '', last_name: '', email: '' },
  781. isPublic: true,
  782. publicSlug: '',
  783. routes: { choice: '', theme: '', form: '', register: '', generate: '' },
  784. i18n: {}
  785. };
  787. const root = document.getElementById('__cv_ctx_root__');
  788. if (!root) {
  789. console.error('[CV] __cv_ctx_root__ introuvable, fallback utilisé');
  790. window.__CV_CTX__ = FALLBACK;
  791. return;
  792. }
  794. const ds = root.dataset;
  796. // Construction de l'objet i18n depuis tous les data-i18n-* présents
  797. // Le dataset HTML5 fait déjà la conversion data-i18n-save-error -> i18nSaveError
  798. const i18n = {};
  799. Object.keys(ds).forEach(key => {
  800. if (!key.startsWith('i18n')) return;
  801. const trKey = key.charAt(4).toLowerCase() + key.slice(5);
  802. i18n[trKey] = ds[key] || '';
  803. });
  805. window.__CV_CTX__ = {
  806. apiBase: ds.apiBase || FALLBACK.apiBase,
  807. jwt: ds.jwt || null,
  808. locale: ds.locale || FALLBACK.locale,
  809. isPublic: ds.isPublic === '1',
  810. publicSlug: ds.publicSlug || '',
  811. user: {
  812. first_name: ds.userFirstName || '',
  813. last_name: ds.userLastName || '',
  814. email: ds.userEmail || ''
  815. },
  816. routes: {
  817. choice: ds.routeChoice || '',
  818. theme: ds.routeTheme || '',
  819. form: ds.routeForm || '',
  820. register: ds.routeRegister || '',
  821. generate: ds.routeGenerate || ''
  822. },
  823. i18n: i18n
  824. };
  825. })();
  827. /**
  828. * MODE PUBLIC : pas de JWT à envoyer.
  829. */
  830. window.authHeaders = function () {
  831. return { 'Content-Type': 'application/json' };
  832. };
  834. /**
  835. * Ajoute le slug au body d'une requête API publique.
  836. */
  837. window.publicBody = function (payload) {
  838. return Object.assign({}, payload || {}, {
  839. slug: window.__CV_CTX__.publicSlug
  840. });
  841. };
  843. /**
  844. * Ajoute le slug en query string pour les GET.
  845. */
  846. window.publicQuery = function () {
  847. const slug = window.__CV_CTX__.publicSlug;
  848. return slug ? '?slug=' + encodeURIComponent(slug) : '';
  849. };
  851. window.setSaveStatus = function (status) {
  852. const el = document.getElementById('saveIndicator');
  853. const txt = document.getElementById('saveText');
  854. if (!el) return;
  855. el.classList.remove('saving', 'saved', 'error');
  856. el.classList.add(status, 'visible');
  857. if (txt) {
  858. const i18n = window.__CV_CTX__.i18n || {};
  859. txt.textContent = status === 'saving' ? (i18n.saving || 'Enregistrement…')
  860. : status === 'saved' ? (i18n.saved || 'Enregistré')
  861. : (i18n.saveError || 'Erreur');
  862. }
  863. };
  865. window.cvLoader = {
  866. show(text, sub) {
  867. const o = document.getElementById('loaderOverlay');
  868. if (!o) return;
  869. const t = document.getElementById('loaderText');
  870. const s = document.getElementById('loaderSub');
  871. if (t && text) t.textContent = text;
  872. if (s && sub !== undefined) s.textContent = sub || '';
  873. o.classList.remove('hidden');
  874. },
  875. hide() {
  876. const o = document.getElementById('loaderOverlay');
  877. if (o) o.classList.add('hidden');
  878. }
  879. };
  881. /**
  882. * Filet de sécurité : si le loader reste visible 5s, fermeture forcée.
  883. */
  884. window.addEventListener('load', () => {
  885. setTimeout(() => {
  886. const o = document.getElementById('loaderOverlay');
  887. if (o && !o.classList.contains('hidden')) {
  888. console.warn('[CV] Loader bloqué après 5s, fermeture forcée');
  889. o.classList.add('hidden');
  890. }
  891. }, 5000);
  892. });
  894. /**
  895. * Countdown 48h dans la topbar.
  896. */
  897. (function () {
  898. const el = document.getElementById('cvpub-expires');
  899. if (!el || !el.dataset.expiresAt) return;
  900. const expiresAt = new Date(el.dataset.expiresAt);
  901. function update() {
  902. const now = new Date();
  903. const ms = expiresAt - now;
  904. if (ms <= 0) {
  905. el.textContent = 'Brouillon expiré';
  906. el.style.color = 'var(--danger)';
  907. return;
  908. }
  909. const h = Math.floor(ms / 3600000);
  910. const m = Math.floor((ms % 3600000) / 60000);
  911. el.textContent = h >= 1
  912. ? 'Expire dans ' + h + 'h' + (m > 0 ? ' ' + m + 'min' : '')
  913. : 'Expire dans ' + m + 'min';
  914. if (h < 2) el.style.color = 'var(--amber)';
  915. if (h < 1) el.style.color = 'var(--danger)';
  916. }
  917. update();
  918. setInterval(update, 60000);
  919. })();
  920. </script>
  923. {% block body_js %}{% endblock %}
  925. </body>
  926. </html>