initial commit

app/components/ui/LangSelect.vue

@@ -0,0 +1,31 @@
+
+<script setup lang="ts">
+// This Component is Not used any more, as long as I use Buttons to switch between languages.
+const { locales, locale, setLocale } = useI18n()
+
+// Langues disponibles sauf celle courante
+const otherLocales = computed(() =>
+  locales.value.filter(l => l.code !== locale.value)
+)
+
+// Changer la langue
+function changeLocale(locale: 'fr' | 'en') {
+  setLocale(locale)
+}
+</script>
+
+<template>
+    <button class="panel-item" v-for="l in otherLocales" :key="l.code"
+    @click="changeLocale(l.code)"
+    >{{ l.name }}</button>
+</template>
+
+<style scoped lang="scss">
+
+
+
+/* Optional: transition hover pour le select */
+select:hover {
+  border-color: #999;
+}
+</style>

app/components/ui/Loading.vue

@@ -0,0 +1,68 @@
+<template>
+<h3>
+</h3>
+  <div class="loading">
+    <div class="loading__circle loading__circle--color-blue"></div>
+		<div class="loading__circle loading__circle--color-red"></div>
+    <div class="loading__circle loading__circle--color-yellow"></div>
+		<div class="loading__circle loading__circle--color-green"></div>
+	</div>
+</template>
+
+<style lang=scss scoped>
+.loading {
+  position: absolute;
+  top:40%;
+  left:calc(50% - (2rem*4 + 0.750rem * 3) / 2); 
+  margin:auto;
+  //padding: 0.625rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading__circle {
+  min-width: 2rem;
+  aspect-ratio: 1;
+  background-color: lightgrey;
+  border-radius: 50%;
+  margin: 0 0.375rem;
+    animation-name: bump; 
+    animation-duration: 2s; 
+    animation-iteration-count: infinite; 
+}
+
+.loading__circle--color-blue {
+  background-color: #4285f4;
+  animation-delay:0;
+
+}
+.loading__circle--color-red {
+  background-color: #ea4335;
+  animation-delay:0.5s;
+}
+.loading__circle--color-yellow {
+  background-color: #fbbc05;
+  animation-delay:1s;
+    
+}
+.loading__circle--color-green {
+  background-color: #34a853;
+  animation-delay:1.5s;
+}
+
+@keyframes bump {
+    from {
+    transform: scale(1);
+    }
+    25% {
+    transform: scale(1.4);
+    }
+    50%{
+    transform: scale(1);
+    }
+    100%{
+    transform:scale(1);
+    }
+}
+</style>

app/components/ui/Modale.vue

@@ -0,0 +1,33 @@
+<template>
+	<Transition name="modal-animation">
+		<div v-show="modalActive" class="modale">
+			<transition name="modal-frame-animation">
+        <div v-show="modalActive" class="modal-frame">
+          <font-awesome-icon class="close-btn"  @click="close" icon="fa-regular fa-circle-xmark" />
+          <div class="modale-content">
+            <slot>
+            </slot> 
+          </div>
+				</div>
+			</transition>
+		</div>
+	</Transition>
+  
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modalActive: Boolean,
+  title: String
+});
+
+const emit = defineEmits(['close']);
+
+const close = () => {
+  emit('close');
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

app/components/ui/SpinnerCpnt.vue

@@ -0,0 +1,78 @@
+<template>
+		<div>
+		</div>
+</template>
+<script>
+</script>
+
+<style lang="scss" scoped>
+
+div{
+	height: 1.3em;
+	width: 1.3em;
+  border:3px solid #ff00c8;
+  border-top:3px solid rgb(216, 226, 253);
+  border-radius:50%;
+	
+	-webkit-transition-property: -webkit-transform;
+  -webkit-transition-duration: 1.2s;
+  -webkit-animation-name: rotate;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+  
+  -moz-transition-property: -moz-transform;
+  -moz-animation-name: rotate; 
+  -moz-animation-duration: 1.2s; 
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-timing-function: linear;
+  
+  transition-property: transform;
+  animation-name: rotate; 
+  animation-duration: 1.2s; 
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;}
+
+@-webkit-keyframes rotate {
+    from {-webkit-transform: rotate(0deg);}
+    to {-webkit-transform: rotate(360deg);}
+}
+
+@-moz-keyframes rotate {
+    from {-moz-transform: rotate(0deg);}
+    to {-moz-transform: rotate(360deg);}
+}
+
+@keyframes rotate {
+    from {transform: rotate(0deg);}
+    to {transform: rotate(360deg);}
+}
+
+
+/* Rest of page style*/
+body{
+  background:#FABC20;
+  font-family: 'Open Sans', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  color:#393D3D;
+}
+
+#container{
+  width:90%;
+  max-width:700px;
+  margin:1em auto;
+  position:relative;
+}
+
+/* spinner positioning */
+
+#html-spinner, #svg-spinner{
+  position:absolute;
+  top:80px;
+  margin-left:-24px;
+}
+
+
+
+
+
+</style>

app/components/ui/unconfirmedBanner.vue

@@ -0,0 +1,22 @@
+<template>
+<h3>
+</h3>
+  <div class="unconfirmed-banner">
+    <p>{{ $t('unconfirmedBanner.message') }}</p>
+	</div>
+</template>
+
+<style lang=scss scoped>
+.unconfirmed-banner {
+  width:100%;
+  background-color: #ea4335;
+  height:1.3em;
+
+}
+
+p{
+  text-align: center;
+  margin: auto;
+}
+
+</style>