Initial commit: SIBU 2.0 MISSION

frontend/src/components/common/OffersBadge.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+defineProps<{
+  isClose?: boolean
+}>()
+</script>
+
+<template>
+  <div class="offers-container" :class="{ 'is-close': isClose }">
+    <div class="loader">
+      <svg width="100" height="100" viewBox="0 0 100 100">
+        <defs>
+          <mask id="clipping">
+            <polygon points="0,0 100,0 100,100 0,100" fill="black"></polygon>
+            <polygon points="25,25 75,25 50,75" fill="white"></polygon>
+            <polygon points="50,25 75,75 25,75" fill="white"></polygon>
+            <polygon points="35,35 65,35 50,65" fill="white"></polygon>
+            <polygon points="35,35 65,35 50,65" fill="white"></polygon>
+          </mask>
+        </defs>
+      </svg>
+      <div class="box">
+        <span class="material-icons offer-icon">{{ isClose ? 'close' : 'local_offer' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.offers-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+  height: 65px;
+  transform: scale(0.65);
+}
+
+.loader {
+  /* Default: SIBU GOLD */
+  --color-one: #fee715; 
+  --color-two: #facc15;
+  --color-three: rgba(254, 231, 21, 0.5);
+  --color-four: rgba(250, 204, 21, 0.3);
+  --color-five: rgba(254, 231, 21, 0.1);
+  --time-animation: 2s;
+  --size: 1;
+  position: relative;
+  border-radius: 50%;
+  transform: scale(var(--size));
+  box-shadow: 0 0 25px 0 var(--color-three), 
+              0 10px 30px 0 var(--color-four);
+  animation: colorize calc(var(--time-animation) * 3) ease-in-out infinite;
+}
+
+/* RED PHASE: CLOSE MODE */
+.is-close .loader {
+  --color-one: #ef4444; 
+  --color-two: #dc2626;
+  --color-three: rgba(239, 68, 68, 0.5);
+  --color-four: rgba(220, 38, 38, 0.3);
+  --color-five: rgba(239, 68, 68, 0.1);
+}
+
+.loader::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  border-top: solid 2px var(--color-one);
+  border-bottom: solid 2px var(--color-two);
+  background: radial-gradient(circle, var(--color-five), transparent);
+  box-shadow: inset 0 10px 20px 0 var(--color-three), 
+              inset 0 -10px 20px 0 var(--color-four);
+}
+
+.loader .box {
+  width: 100px;
+  height: 100px;
+  background: var(--color-one);
+  mask: url(#clipping);
+  -webkit-mask: url(#clipping);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.offer-icon {
+  color: #101820;
+  font-size: 32px;
+  font-weight: bold;
+  z-index: 5;
+  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+}
+
+.is-close .offer-icon {
+  color: #ffffff;
+}
+
+.loader svg {
+  position: absolute;
+}
+
+.loader svg #clipping {
+  filter: contrast(15);
+  animation: roundness calc(var(--time-animation) / 2) linear infinite;
+}
+
+.loader svg #clipping polygon {
+  filter: blur(7px);
+}
+
+.loader svg #clipping polygon:nth-child(1) {
+  transform-origin: 75% 25%;
+  transform: rotate(90deg);
+}
+
+.loader svg #clipping polygon:nth-child(2) {
+  transform-origin: 50% 50%;
+  animation: rotation var(--time-animation) linear infinite reverse;
+}
+
+.loader svg #clipping polygon:nth-child(3) {
+  transform-origin: 50% 60%;
+  animation: rotation var(--time-animation) linear infinite;
+  animation-delay: calc(var(--time-animation) / -3);
+}
+
+.loader svg #clipping polygon:nth-child(4) {
+  transform-origin: 40% 40%;
+  animation: rotation var(--time-animation) linear infinite reverse;
+}
+
+.loader svg #clipping polygon:nth-child(5) {
+  transform-origin: 60% 40%;
+  animation: rotation var(--time-animation) linear infinite;
+}
+
+@keyframes rotation {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes roundness {
+  0%, 60%, 100% { filter: contrast(12); }
+  20%, 40% { filter: contrast(2); }
+}
+
+@keyframes colorize {
+  0%, 100% { filter: saturate(1) brightness(1); }
+  50% { filter: saturate(1.5) brightness(1.2); }
+}
+</style>