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/SendButton.vue
+++ b/frontend/src/components/SendButton.vue
@@ -0,0 +1,51 @@
+<!-- Bouton d'envoi circulaire avec flèche cyan -->
+<template>
+  <button
+    class="send-btn"
+    :disabled="disabled"
+    aria-label="Envoyer"
+    @click="$emit('send')"
+  >
+    <!-- Flèche droite SVG (identique au SVG de la maquette) -->
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <polygon points="4,5 15,9 4,13 7,9" fill="currentColor" />
+    </svg>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{ disabled?: boolean }>();
+defineEmits<{ send: [] }>();
+</script>
+
+<style scoped>
+.send-btn {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: #004488;
+  border: 1px solid #004466;
+  color: #00ddff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 12px #00448866;
+  transition: background 0.15s, box-shadow 0.15s;
+}
+
+.send-btn:hover:not(:disabled) {
+  background: #005599;
+  box-shadow: 0 0 20px #00ddff55;
+}
+
+.send-btn:active:not(:disabled) {
+  background: #003377;
+}
+
+.send-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+</style>