proposition frontend

2026-05-29 12:06:40 +02:00
parent 12afb71a67
commit 97f6fdaeae
14 changed files with 793 additions and 193 deletions
--- a/frontend/src/components/InlineCasinoAd.vue
+++ b/frontend/src/components/InlineCasinoAd.vue
@@ -0,0 +1,135 @@
+<!-- Pub casino néon : overlay dans le feed (identique à la maquette SVG) -->
+<template>
+  <div class="casino">
+    <div class="casino-head">
+      <p class="casino-title">♠ CASINO LUCKY ♠</p>
+      <p class="casino-subtitle">OFFRE EXCLUSIVE</p>
+    </div>
+
+    <div class="casino-body">
+      <p class="bonus">+200%</p>
+      <p class="bonus-sub">sur votre 1er dépôt &bull; 500&euro; max</p>
+
+      <div class="slots">
+        <span class="suit suit--diamond">♦</span>
+        <span class="seven">7</span>
+        <span class="seven">7</span>
+        <span class="seven">7</span>
+        <span class="suit suit--spade">♠</span>
+      </div>
+
+      <button class="casino-cta">
+        JOUER MAINTENANT &rarr;
+      </button>
+      <p class="disclaimer">18+ &bull; Jeu responsable &bull; casino-lucky.bet</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.casino {
+  width: 248px;
+  background: #100400;
+  border: 2px solid #ff2200;
+  border-radius: 6px;
+  box-shadow: 0 0 18px #ff220055;
+}
+
+/* ── En-tête rouge ── */
+.casino-head {
+  background: #1a0400;
+  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid #440000;
+  padding: 10px 8px;
+  text-align: center;
+}
+
+.casino-title {
+  font-family: Arial, sans-serif;
+  font-size: 15px;
+  font-weight: bold;
+  color: #ff5533;
+  text-shadow: 0 0 8px #ff2200;
+  margin: 0;
+}
+
+.casino-subtitle {
+  font-family: Arial, sans-serif;
+  font-size: 9px;
+  letter-spacing: 2px;
+  color: #882200;
+  margin: 4px 0 0;
+}
+
+/* ── Corps ── */
+.casino-body {
+  padding: 12px;
+  text-align: center;
+}
+
+.bonus {
+  font-family: Arial, sans-serif;
+  font-size: 32px;
+  font-weight: bold;
+  color: #ffdd00;
+  text-shadow: 0 0 14px #99660099;
+  margin: 0;
+}
+
+.bonus-sub {
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  color: #cc6600;
+  margin: 4px 0 10px;
+}
+
+/* ── Machines à sous ── */
+.slots {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.suit {
+  font-size: 24px;
+}
+.suit--diamond { color: #ffaa44; }
+.suit--spade   { color: #ffaa44; }
+
+.seven {
+  font-size: 30px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px #ffdd00;
+}
+
+/* ── CTA ── */
+.casino-cta {
+  width: 100%;
+  padding: 8px 0;
+  background: #220000;
+  border: 1.5px solid #ff2200;
+  border-radius: 19px;
+  color: #ff4422;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  font-weight: bold;
+  cursor: pointer;
+  text-shadow: 0 0 6px #ff2200;
+  box-shadow: 0 0 8px #ff220044;
+  transition: box-shadow 0.15s;
+}
+
+.casino-cta:hover {
+  box-shadow: 0 0 16px #ff220088;
+}
+
+.disclaimer {
+  font-family: Arial, sans-serif;
+  font-size: 7px;
+  color: #440000;
+  margin-top: 8px;
+}
+</style>