From 52c258669981b8fa75b04a5a2939f67a4d970205 Mon Sep 17 00:00:00 2001
From: Rayhan <rayhan.hassou@etu.uca.fr>
Date: Tue, 8 Nov 2022 13:44:41 +0100
Subject: [PATCH] ajout des dossiers html/css/javascript et ajout des vues pour
 la partie inscription

---
 src/Vue/css/inscription.css       | 272 ++++++++++++++++++++++++++++++
 src/Vue/html/inscription.html     |  54 ++++++
 src/Vue/javaScript/inscription.js |  53 ++++++
 3 files changed, 379 insertions(+)
 create mode 100644 src/Vue/css/inscription.css
 create mode 100644 src/Vue/html/inscription.html
 create mode 100644 src/Vue/javaScript/inscription.js

diff --git a/src/Vue/css/inscription.css b/src/Vue/css/inscription.css
new file mode 100644
index 0000000..35d7376
--- /dev/null
+++ b/src/Vue/css/inscription.css
@@ -0,0 +1,272 @@
+
+body {
+  background: #33cc33;
+  font-family: sans-serif;
+}
+body fieldset {
+  box-shadow: 0 8px 10px #29a329;
+}
+
+body.error {
+  background: #f04000;
+}
+body.error fieldset {
+  box-shadow: 0 8px 10px #bd3200;
+}
+
+h1, h2 {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+
+h1 {
+  top: 24px;
+  color: white;
+  font-size: 12px;
+}
+
+h2 {
+  top: 44px;
+  color: white;
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+ul.items {
+  position: absolute;
+  width: 30px;
+  height: auto;
+  top: 50%;
+  left: -60px;
+  transform: translateY(-50%);
+}
+ul.items li {
+  width: 8px;
+  height: 8px;
+  margin: 10px 0;
+  background: white;
+  border-radius: 50%;
+  opacity: 0.4;
+  cursor: pointer;
+}
+ul.items li.active {
+  opacity: 1;
+}
+
+form {
+  position: absolute;
+  width: 300px;
+  height: 60px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+form fieldset {
+  position: absolute;
+  width: 300px;
+  height: 60px;
+  background: white;
+  border-radius: 3px;
+  opacity: 0;
+  transform: scale(0.2);
+  transition: all 0.4s ease-in-out;
+}
+form fieldset input, form fieldset p {
+  display: inline-block;
+  width: 200px;
+  margin-left: 50px;
+  color: #333333;
+  font-size: 16px;
+  letter-spacing: 1px;
+}
+form fieldset p {
+  margin-top: 22px;
+  text-align: center;
+}
+form fieldset input {
+  height: 40px;
+  margin-top: 8px;
+  border: none;
+  outline: none;
+}
+form fieldset .icon {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  top: 15px;
+  transition: all 0.4s ease;
+}
+form fieldset .icon i {
+  position: absolute;
+  display: block;
+}
+form fieldset .icon i::before, form fieldset .icon i::after {
+  position: absolute;
+  content: "";
+}
+form fieldset .icon.left {
+  left: 10px;
+}
+form fieldset .icon.right {
+  right: 10px;
+  cursor: pointer;
+}
+form fieldset .icon.button:hover {
+  background: #f2f2f2;
+  border-radius: 3px;
+  transition: all 0.4s ease;
+}
+form fieldset.enable {
+  z-index: 1;
+  opacity: 1;
+  transition: all 0.5s ease-out 0.2s;
+  transform: scale(1);
+  animation: enable 0.5s ease-out 0.2s;
+}
+form fieldset.disable {
+  opacity: 0;
+  transition: all 0.3s ease-in;
+  transform: translateY(120px) scale(0.9);
+}
+
+body.error fieldset {
+  transform-origin: 50% 100%;
+  animation: error 0.3s ease-out;
+}
+
+@keyframes enable {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  60% {
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes error {
+  0%, 50%, 100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-3deg);
+  }
+  75% {
+    transform: rotate(3deg);
+  }
+}
+/**
+ * * Icons in CSS, long as f****
+ * */
+.icon .arrow {
+  width: 2px;
+  height: 17px;
+  top: 5px;
+  left: 14px;
+  background: #333333;
+}
+.icon .arrow::before {
+  width: 6px;
+  height: 6px;
+  bottom: -1px;
+  left: -3px;
+  border-color: #333333;
+  border-right: 2px solid;
+  border-bottom: 2px solid;
+  transform: rotate(45deg);
+}
+
+.icon .user {
+  width: 20px;
+  height: 10px;
+  bottom: 5px;
+  left: 5px;
+  box-shadow: 0 0 0 2px #333333 inset;
+  border-radius: 6px 6px 3px 3px;
+}
+.icon .user::before {
+  width: 10px;
+  height: 10px;
+  top: -9px;
+  left: 5px;
+  box-shadow: 0 0 0 2px #333333 inset;
+  border-radius: 50%;
+}
+
+.icon .letter {
+  width: 20px;
+  height: 12px;
+  top: 9px;
+  left: 5px;
+  box-shadow: 0 0 0 2px #333333 inset;
+  border-radius: 3px;
+}
+.icon .letter::before, .icon .letter::after {
+  width: 11px;
+  height: 2px;
+  top: 4px;
+  background: #333333;
+}
+.icon .letter::before {
+  left: 0;
+  transform: rotate(30deg);
+}
+.icon .letter::after {
+  right: 0;
+  transform: rotate(-30deg);
+}
+
+.icon .lock {
+  width: 20px;
+  height: 16px;
+  top: 9px;
+  left: 5px;
+  box-shadow: 0 0 0 2px #333333 inset;
+  border-radius: 3px;
+}
+.icon .lock::before {
+  width: 8px;
+  height: 8px;
+  top: -4px;
+  left: 4px;
+  border: 2px solid transparent;
+  border-top: 2px solid #333333;
+  border-right: 2px solid #333333;
+  border-radius: 50%;
+  transform: rotate(-45deg);
+}
+.icon .lock::after {
+  width: 6px;
+  height: 7px;
+  top: 4px;
+  left: 7px;
+  box-shadow: 0 0 0 2px #333333 inset;
+}
+
+.icon .heart {
+  width: 10px;
+  height: 10px;
+  top: 11px;
+  left: 7px;
+  background: #ff5233;
+  transform: rotate(45deg);
+}
+.icon .heart::before, .icon .heart::after {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #ff5233;
+}
+.icon .heart::before {
+  left: -6px;
+}
+.icon .heart::after {
+  top: -6px;
+}
\ No newline at end of file
diff --git a/src/Vue/html/inscription.html b/src/Vue/html/inscription.html
new file mode 100644
index 0000000..70781e4
--- /dev/null
+++ b/src/Vue/html/inscription.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+
+      <title>Page d'inscription</title>
+
+      <meta charset="utf-8">
+
+       <meta name="viewport" content="width=device-width, initial-scale=1">
+
+       <link rel="stylesheet" href="../css/inscription.css">
+
+       <script type="text/javascript" src="../javaScript/inscription.js" defer></script> 
+
+    </head>
+
+    <body>
+      
+          <h1>Inscription</h1>
+        
+          <form>
+
+            <ul class="items"></ul>
+
+            <fieldset class="username enable">
+                <div class="icon left"><i class="user"></i></div>
+                <input type="text" name="username" placeholder="Username"/>
+                <div class="icon right button"><i class="arrow"></i></div>
+            </fieldset>
+
+            <fieldset class="email">
+              <div class="icon left"><i class="letter"></i></div>
+              <input type="mail" name="email" placeholder="Email"/>
+              <div class="icon right button"><i class="arrow"></i></div>
+            </fieldset>
+
+            <fieldset class="password">
+              <div class="icon left"><i class="lock"></i></div>
+              <input type="password" name="password" placeholder="Password"/>
+              <div class="icon right button"><i class="arrow"></i></div>
+            </fieldset>
+
+            <fieldset class="thanks">
+              <div class="icon left"><i class="heart"></i></div>
+              <p>Merci pour votre inscription</p>
+              <div class="icon right"><i class="heart"></i></div>
+            </fieldset>
+
+        </form>
+
+    </body>
+
+</html>
\ No newline at end of file
diff --git a/src/Vue/javaScript/inscription.js b/src/Vue/javaScript/inscription.js
new file mode 100644
index 0000000..93fb3f2
--- /dev/null
+++ b/src/Vue/javaScript/inscription.js
@@ -0,0 +1,53 @@
+
+function init() {
+  // Generate li foreach fieldset
+  for (var i = 0; i < count; i++) {
+    var ul = document.querySelector("ul.items"),
+      li = document.createElement("li");
+
+    ul.appendChild(li);
+  }
+  // Add class active on first li
+  ul.firstChild.classList.add("active");
+}
+
+function next(target) {
+  var input = target.previousElementSibling;
+
+  // Check if input is empty
+  if (input.value === "") {
+    body.classList.add("error");
+  } else {
+    body.classList.remove("error");
+
+    var enable = document.querySelector("form fieldset.enable"),
+      nextEnable = enable.nextElementSibling;
+    enable.classList.remove("enable");
+    enable.classList.add("disable");
+    nextEnable.classList.add("enable");
+
+    // Switch active class on left list
+    var active = document.querySelector("ul.items li.active"),
+      nextActive = active.nextElementSibling;
+    active.classList.remove("active");
+    nextActive.classList.add("active");
+  }
+}
+
+function keyDown(event) {
+  var key = event.keyCode,
+    target = document.querySelector("fieldset.enable .button");
+  if (key == 13 || key == 9) next(target);
+}
+
+var body = document.querySelector("body"),
+  form = document.querySelector("form"),
+  count = form.querySelectorAll("fieldset").length;
+
+window.onload = init;
+document.body.onmouseup = function (event) {
+  var target = event.target || event.toElement;
+  if (target.classList.contains("button")) next(target);
+};
+document.addEventListener("keydown", keyDown, false);
+