neckfireandClaude Opus 4.8
8ee9596529
Build & Deploy / build (push) Failing after 5s
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
74 lines
2.0 KiB
Vue
74 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* Logo "SF" de StreakFit — monogramme flamme animé.
|
|
* Sert AUSSI de loader : passer `loader` pour le mode chargement (flamme qui monte + halo tournant).
|
|
*/
|
|
const props = withDefaults(defineProps<{
|
|
size?: number
|
|
loader?: boolean
|
|
label?: string
|
|
}>(), {
|
|
size: 40,
|
|
loader: false,
|
|
label: 'StreakFit'
|
|
})
|
|
|
|
const uid = useId()
|
|
</script>
|
|
|
|
<template>
|
|
<svg
|
|
:class="['sf-logo', { 'sf-loader': props.loader }]"
|
|
:width="props.size"
|
|
:height="props.size"
|
|
viewBox="0 0 64 64"
|
|
fill="none"
|
|
role="img"
|
|
:aria-label="props.label"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs>
|
|
<linearGradient :id="`flame-${uid}`" x1="20" y1="8" x2="46" y2="60" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0" stop-color="#FBBF24" />
|
|
<stop offset="0.5" stop-color="#F97316" />
|
|
<stop offset="1" stop-color="#EF4444" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Halo (visible en mode loader) -->
|
|
<circle
|
|
v-if="props.loader"
|
|
class="sf-logo__halo"
|
|
cx="32" cy="32" r="28"
|
|
:stroke="`url(#flame-${uid})`"
|
|
stroke-width="3"
|
|
stroke-linecap="round"
|
|
stroke-dasharray="44 132"
|
|
opacity="0.7"
|
|
/>
|
|
|
|
<!-- Badge arrondi -->
|
|
<rect x="8" y="8" width="48" height="48" rx="14" :fill="`url(#flame-${uid})`" />
|
|
|
|
<!-- Flamme qui vacille au-dessus du monogramme -->
|
|
<path
|
|
class="sf-logo__flame"
|
|
d="M32 13c3.6 3.1 5.3 6.4 4.1 9.4-.8 2-2.7 2.9-2.7 5.1 0 1.7 1.2 3 2.9 3 2.3 0 3.9-2 3.9-5 3 2.4 4.6 5.4 4.6 8.6C44.8 40.4 39 45 32 45s-12.8-4.6-12.8-10.9c0-4.8 3.2-9.2 8.2-13.4-.4 2.3.3 4 2 4 1.4 0 2.3-1.1 2.3-2.6 0-2.8-2-4.9-.7-9.1Z"
|
|
fill="#FFF7ED"
|
|
opacity="0.95"
|
|
/>
|
|
|
|
<!-- Monogramme "SF" -->
|
|
<text
|
|
x="32" y="49"
|
|
text-anchor="middle"
|
|
font-family="Inter, ui-sans-serif, system-ui, sans-serif"
|
|
font-size="20"
|
|
font-weight="800"
|
|
letter-spacing="-1"
|
|
fill="#7C2D12"
|
|
opacity="0.9"
|
|
>SF</text>
|
|
</svg>
|
|
</template>
|