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>