https://www.golfduhavre.com/2023/05/08/coupe-des-nouveaux-membres/

10.4 KB· 1634 ms· text/html· Cloudflare, PHP
Saved copy from just now.
More ▾
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="robots" content="noindex, nofollow">

  <title>Site en maintenance</title>

  <style>
    :root {
      --bg: #f5f7fb;
      --surface: rgba(255, 255, 255, 0.9);
      --text: #172033;
      --muted: #677086;
      --primary: #3157d5;
      --primary-soft: #e9eeff;
      --border: rgba(23, 32, 51, 0.08);
      --shadow: 0 30px 80px rgba(31, 45, 85, 0.12);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
    }

    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;

      padding: 32px 20px;

      font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

      color: var(--text);

      background:
        radial-gradient(
          circle at 15% 15%,
          rgba(49, 87, 213, 0.12),
          transparent 32%
        ),
        radial-gradient(
          circle at 85% 80%,
          rgba(91, 131, 255, 0.12),
          transparent 30%
        ),
        var(--bg);
    }

    .maintenance {
      width: 100%;
      max-width: 920px;

      position: relative;

      overflow: hidden;

      padding: clamp(32px, 6vw, 72px);

      background: var(--surface);

      border: 1px solid var(--border);
      border-radius: 28px;

      box-shadow: var(--shadow);

      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .maintenance::before {
      content: "";

      position: absolute;
      top: -120px;
      right: -120px;

      width: 300px;
      height: 300px;

      border-radius: 50%;

      background: rgba(49, 87, 213, 0.06);
    }

    .layout {
      position: relative;
      z-index: 1;

      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
      gap: 48px;
      align-items: center;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 9px;

      margin-bottom: 22px;
      padding: 9px 14px;

      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;

      color: var(--primary);

      background: var(--primary-soft);

      border-radius: 999px;
    }

    .badge-dot {
      width: 8px;
      height: 8px;

      border-radius: 50%;

      background: var(--primary);

      animation: pulse 1.8s ease-in-out infinite;
    }

    h1 {
      margin: 0 0 20px;

      max-width: 620px;

      font-size: clamp(42px, 7vw, 72px);
      line-height: 0.98;
      letter-spacing: -0.055em;
    }

    p {
      margin: 0;

      max-width: 580px;

      color: var(--muted);

      font-size: clamp(17px, 2vw, 20px);
      line-height: 1.7;
    }

    .secondary {
      margin-top: 18px;

      font-size: 15px;
    }

    .visual {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .visual svg {
      width: 100%;
      max-width: 310px;
      height: auto;

      overflow: visible;
    }

    .gear-large {
      transform-origin: 155px 150px;
      animation: rotate 14s linear infinite;
    }

    .gear-small {
      transform-origin: 225px 205px;
      animation: rotate-reverse 9s linear infinite;
    }

    .float {
      animation: float 4s ease-in-out infinite;
    }

    footer {
      position: relative;
      z-index: 1;

      margin-top: 54px;
      padding-top: 22px;

      border-top: 1px solid var(--border);

      color: #9299a9;

      font-size: 13px;
    }

    @keyframes pulse {
      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.4;
        transform: scale(0.8);
      }
    }

    @keyframes rotate {
      from {
        transform: rotate(0);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes rotate-reverse {
      from {
        transform: rotate(360deg);
      }

      to {
        transform: rotate(0);
      }
    }

    @keyframes float {
      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-9px);
      }
    }

    @media (max-width: 760px) {
      body {
        padding: 18px;
      }

      .maintenance {
        padding: 38px 28px;
        border-radius: 22px;
      }

      .layout {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      .visual {
        order: -1;
      }

      .visual svg {
        max-width: 220px;
      }

      footer {
        margin-top: 38px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
    }
  </style>
</head>

<body>

  <main class="maintenance">

    <div class="layout">

      <div class="content">

        <div class="badge">
          <span class="badge-dot"></span>
          Maintenance en cours
        </div>

        <h1>
          Nous revenons très vite.
        </h1>

        <p class="secondary">
          À la suite de la découverte de vulnérabilités de sécurité affectant une technologie utilisée par de nombreux sites Internet, nous avons choisi de suspendre temporairement l'accès à notre site, par mesure de précaution.
        </p>
        
        <p class="secondary">
        Nos équipes techniques suivent le déploiement des correctifs de sécurité et procèdent aux vérifications nécessaires afin de garantir une reprise du service dans les meilleures conditions.
</p>


        <p class="secondary">
          Merci de votre compréhension. Nous mettons tout en œuvre pour rétablir l'accès au site dans les meilleurs délais.
        </p>

      </div>

      <div class="visual" aria-hidden="true">

        <svg
          viewBox="0 0 320 320"
          xmlns="http://www.w3.org/2000/svg"
        >

          <defs>
            <linearGradient
              id="gradient"
              x1="0"
              y1="0"
              x2="1"
              y2="1"
            >
              <stop
                offset="0%"
                stop-color="#3157d5"
              />

              <stop
                offset="100%"
                stop-color="#7894f8"
              />
            </linearGradient>
          </defs>

          <!-- Décor -->

          <circle
            cx="160"
            cy="160"
            r="125"
            fill="#f4f6ff"
          />

          <circle
            cx="160"
            cy="160"
            r="92"
            fill="#ffffff"
          />

          <circle
            cx="67"
            cy="92"
            r="8"
            fill="#dfe6ff"
            class="float"
          />

          <circle
            cx="265"
            cy="102"
            r="5"
            fill="#3157d5"
            opacity="0.25"
          />

          <circle
            cx="74"
            cy="231"
            r="5"
            fill="#3157d5"
            opacity="0.18"
          />

          <!-- Grand engrenage -->

          <g class="gear-large">

            <path
              d="
                M155 78
                L166 80
                L170 96
                C179 98 188 102 195 107
                L210 99
                L219 108
                L211 123
                C216 130 220 138 222 147
                L238 151
                L238 164
                L222 168
                C220 177 216 185 211 192
                L219 207
                L210 216
                L195 208
                C188 213 179 217 170 219
                L166 235
                L153 235
                L149 219
                C140 217 131 213 124 208
                L109 216
                L100 207
                L108 192
                C103 185 99 177 97 168
                L81 164
                L81 151
                L97 147
                C99 138 103 130 108 123
                L100 108
                L109 99
                L124 107
                C131 102 140 98 149 96
                Z
              "
              fill="url(#gradient)"
            />

            <circle
              cx="160"
              cy="157"
              r="42"
              fill="#ffffff"
            />

            <circle
              cx="160"
              cy="157"
              r="25"
              fill="#e8edff"
            />

          </g>

          <!-- Petit engrenage -->

          <g class="gear-small">

            <path
              d="
                M225 171
                L232 173
                L234 183
                C239 184 243 186 247 189
                L256 184
                L262 190
                L257 199
                C260 203 262 207 263 212
                L273 214
                L273 223
                L263 225
                C262 230 260 234 257 238
                L262 247
                L256 253
                L247 248
                C243 251 239 253 234 254
                L232 264
                L223 264
                L221 254
                C216 253 212 251 208 248
                L199 253
                L193 247
                L198 238
                C195 234 193 230 192 225
                L182 223
                L182 214
                L192 212
                C193 207 195 203 198 199
                L193 190
                L199 184
                L208 189
                C212 186 216 184 221 183
                Z
              "
              fill="#172033"
            />

            <circle
              cx="228"
              cy="218"
              r="18"
              fill="#ffffff"
            />

          </g>

          <!-- Petite clé -->

          <g
            class="float"
            transform="translate(37 34)"
          >

            <path
              d="
                M39 15
                C31 8 19 8 11 15
                C4 22 3 34 9 42
                L43 76
                C48 81 56 81 61 76
                C66 71 66 63 61 58
                L27 24
                C31 22 35 19 39 15
                Z
              "
              fill="#172033"
              opacity="0.85"
            />

            <circle
              cx="52"
              cy="67"
              r="5"
              fill="#ffffff"
            />

          </g>

        </svg>

      </div>

    </div>

    <footer>
      © 2026 — Maintenance temporaire du site
    </footer>

  </main>

</body>
</html>
Shown as plain text. Nothing from www.golfduhavre.com runs in your browser. Underlined links open their own code view, and line numbers give you a link to share.