front/MyINPulse-front/src/views/JoinOrCreatProjectForEntrep.vue

@@ -0,0 +1,116 @@
+<template>
+    <header class="header">
+        <img
+            src="@/components/icons/logo inpulse.png"
+            alt="INPulse Logo"
+            class="logo"
+        />
+    </header>
+
+    <div class="choix-projet">
+        <h1>Bienvenue sur MyINPulse</h1>
+        <p>
+            Souhaitez-vous créer un nouveau projet ou joindre un projet existant
+            ?
+        </p>
+
+        <div class="button-group">
+            <button @click="choisir('creer')">Créer un projet</button>
+            <button @click="choisir('joindre')">Joindre un projet</button>
+        </div>
+
+        <div v-if="choix === 'creer'" class="form-creer">
+            <h2>Créer un projet</h2>
+            <label for="nomProjet">Nom du projet :</label>
+            <input
+                id="nomProjet"
+                v-model="nomProjet"
+                type="text"
+                placeholder="Nom du projet"
+            />
+            <button @click="validerCreation">Valider</button>
+        </div>
+
+        <div v-if="choix === 'joindre'" class="message-indispo">
+            <h2>Joindre un projet</h2>
+            <p>⚠️ Cette fonctionnalité n'est pas encore disponible.</p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const choix = ref<string | null>(null);
+const nomProjet = ref("");
+
+const choisir = (option: "creer" | "joindre") => {
+    choix.value = option;
+};
+
+const validerCreation = () => {
+    if (!nomProjet.value.trim()) {
+        alert("Veuillez entrer un nom de projet.");
+        return;
+    }
+    alert(`Projet "${nomProjet.value}" créé avec succès !`);
+    // Tu peux ensuite naviguer ou faire un POST ici
+};
+</script>
+
+<style scoped>
+@import "@/components/canvas/style-project.css";
+
+.choix-projet {
+    max-width: 500px;
+    margin: auto;
+    padding: 2rem;
+    background-color: #fefefe;
+    border-radius: 10px;
+    font-family: "Inter", sans-serif;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.button-group {
+    margin: 20px 0;
+    display: flex;
+    justify-content: space-around;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 1em;
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #43a047;
+}
+
+input {
+    padding: 10px;
+    margin-top: 10px;
+    width: 80%;
+    font-size: 1em;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 30px;
+    background-color: #f9f9f9;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.logo {
+    height: 50px;
+}
+</style>