Add 'frontend/' from commit 'c070c0315d66a44154ab7d9f9ea6c211a15f4dba'

git-subtree-dir: frontend
git-subtree-mainline: 205a3bd14b
git-subtree-split: c070c0315d

frontend/src/views/LoginView.vue

@@ -0,0 +1,39 @@
+<template>
+  <div v-if="isMobileView" class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6 text-center">
+    <!-- Image -->
+    <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" alt="Image" class="w-64 h-64 rounded-full mb-4 border" />
+
+    <!-- Message -->
+    <div class="text-lg text-gray-700 mt-8">
+      <p class="font-semibold mb-2">Pour vous connecter et modifier votre page, veuillez utiliser un appareil avec un écran plus large, comme un ordinateur.</p>
+      <p>Pour le moment, l'expérience sur téléphone n'est pas encore complétée.</p>
+      <p class="mt-4 font-bold">Désolé de l'inconvénient.</p>
+    </div>
+  </div>
+  
+  <div>
+    <div class="flex items-start justify-center  py-2">
+  <div class="max-w-[600px] mt-[10%] ">
+    <img class="rounded-2xl"
+         src="/images/hutopymedia/loginpage/loginhutopy.png"
+         alt="hutopy login">
+
+    <login-form></login-form>    
+  </div>
+  </div>
+  </div>
+</template>
+
+<script setup>
+import LoginForm from "@/views/main/LoginForm.vue";
+import { useDisplay } from "vuetify";
+import {ref, watch} from "vue";
+
+const { smAndDown } = useDisplay();
+const isMobileView = ref(smAndDown.value);
+
+watch(smAndDown, (newVal) => {
+  isMobileView.value = newVal;
+});
+
+</script>