resources added

src/main/java/eus/blankcard/decklearn/DecklearnApplication.java

@@ -9,5 +9,4 @@ public class DecklearnApplication {
 	public static void main(String[] args) {
 		SpringApplication.run(DecklearnApplication.class, args);
 	}
-
-}
+}

src/main/resources/application.properties

@@ -1,11 +1,10 @@
 # == THYMELEAF ==
-
 spring.thymeleaf.cache=false
 
-# == MYSQL ==
 
-# spring.jpa.hibernate.ddl-auto=update
-# spring.datasource.url=jdbc:mysql://db.decklearn.eus/decklearn
-# spring.datasource.username=decklearnadmin
-# spring.datasource.password=decklearn
-# spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
+# == MYSQL ==
+spring.jpa.hibernate.ddl-auto=none
+spring.datasource.url=jdbc:mysql://db.decklearn.eus/deck_learn
+spring.datasource.username=decklearnadmin
+spring.datasource.password=decklearn
+spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

src/main/resources/static/js/profile.js

@@ -0,0 +1,20 @@
+window.onload = function(){
+    let selectables = document.getElementsByClassName("selectable");
+    for (let index = 0; index < selectables.length; index++) {
+        selectables[index].addEventListener('click', selecter.bind(null, index));
+    }
+    selectables[0].classList.add("selected");
+}
+
+function selecter(id) {
+    let selectables = document.getElementsByClassName("selectable");
+    reset(selectables)
+    selectables[id].classList.add("selected");
+}
+
+function reset(selectables) {
+    for (let index = 0; index < selectables.length; index++) {
+        selectables[index].classList.remove("selected");        
+    }
+}
+

src/main/resources/static/styles/modules/css/deck_creation.css

@@ -0,0 +1,143 @@
+@font-face {
+  font-family: 'Sans Forgetica Regular';
+  src: local("Sans Forgetica Regular"), url("../../../font/SansForgetica-Regular.woff") format("woff"); }
+
+.deck-creation-section > h2 {
+  display: flex;
+  text-align: center;
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: normal;
+  border-bottom: 1px solid #959595; }
+
+.deck-creation-section__list {
+  display: grid;
+  gap: 2rem; }
+
+.deck-creation > div > h4, .card-creation > h4 {
+  margin: 0;
+  margin-bottom: 0.2rem;
+  font-size: 1.3rem;
+  font-weight: normal; }
+
+.card-creation {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  padding-top: 1rem; }
+  .card-creation__data {
+    outline: none;
+    border: 0;
+    border-bottom: 1px solid #959595;
+    margin-left: 1.5rem;
+    padding-bottom: 0.3rem;
+    width: calc(100% - 1.5rem);
+    resize: none;
+    font-size: 1rem; }
+  .card-creation > label {
+    margin-left: 1rem; }
+
+.deck-creation {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  padding-top: 1rem; }
+
+.creation-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem;
+  padding-left: 0.6rem;
+  font-size: 1rem;
+  border: 0;
+  border-bottom: 1px solid #01CDA9;
+  border-radius: 1.3rem;
+  background-color: #01CDA9;
+  color: #FFFFFF; }
+  .creation-button > img {
+    width: 1.7rem;
+    margin-right: 0.5rem; }
+
+.add-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center; }
+
+.custom-button {
+  text-align: center;
+  border-radius: 1.3rem;
+  border: 0;
+  height: -moz-fit-content;
+  height: fit-content;
+  font-size: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #FFFFFF;
+  background-color: #01CDA9;
+  white-space: nowrap; }
+
+.deck-categories {
+  padding-top: 3rem; }
+  .deck-categories__list {
+    display: flex;
+    flex-wrap: wrap;
+    grid-template-columns: repeat(4, 1fr);
+    padding-top: 1rem;
+    gap: 1rem; }
+    .deck-categories__list > button {
+      display: flex;
+      align-items: center;
+      border: 1px solid #959595;
+      border-radius: 1.3rem;
+      padding: 0.2rem;
+      font-size: 0.7rem; }
+      .deck-categories__list > button > img {
+        width: 1rem;
+        margin-right: 0.2rem;
+        margin-left: 0.2rem; }
+
+.create-deck {
+  display: flex;
+  justify-content: center;
+  padding-top: 3rem; }
+  .create-deck__button {
+    display: flex;
+    justify-content: center;
+    width: 40%;
+    padding: 0.5rem;
+    border-radius: 1.3rem;
+    border: 0;
+    font-size: 1.3rem;
+    color: #FFFFFF;
+    background-color: #01CDA9; }
+
+.categories-bar {
+  width: 100%; }
+
+@media (min-width: 762px) {
+  .categories-bar {
+    width: 40%; } }
+
+@media (min-width: 1024px) {
+  .create-deck__button {
+    width: 33%; }
+  .deck-creation-section__list {
+    grid-template-columns: 3fr 2fr min-content; }
+  .categories-bar {
+    width: 40%; } }
+
+@media (min-width: 1300px) {
+  .create-deck__button {
+    width: 33%; }
+  .deck-creation-section__list {
+    grid-template-columns: 3fr 2fr min-content; }
+  .categories-bar {
+    width: 40%; } }

src/main/resources/static/styles/modules/css/home.css

@@ -0,0 +1,21 @@
+@font-face {
+  font-family: 'Sans Forgetica Regular';
+  src: local("Sans Forgetica Regular"), url("../../../font/SansForgetica-Regular.woff") format("woff"); }
+
+.card-section > h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: normal;
+  border-bottom: 1px solid #959595; }
+
+@media (min-width: 762px) {
+  .card-section {
+    padding: 3rem, 2rem, 2rem, 3rem; } }
+
+@media (min-width: 1024px) {
+  .card-section {
+    padding: 3rem, 2rem, 2rem, 3rem; } }
+
+@media (min-width: 1300px) {
+  .card-section {
+    padding: 3rem, 2rem, 2rem, 3rem; } }

src/main/resources/static/styles/modules/css/login.css

@@ -0,0 +1,79 @@
+@font-face {
+  font-family: 'Sans Forgetica Regular';
+  src: local("Sans Forgetica Regular"), url("../../../font/SansForgetica-Regular.woff") format("woff"); }
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center; }
+
+main {
+  width: 80%;
+  height: 95%;
+  display: grid;
+  grid-template-columns: 1fr 4fr;
+  box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.2); }
+
+.left-part {
+  background-color: #46B6A0;
+  height: 100%;
+  max-height: 100%; }
+
+.right-part {
+  height: 100%;
+  max-height: 100%;
+  display: grid;
+  /* grid-template-rows: 1fr 3fr 2fr; */
+  justify-content: center; }
+
+.right-part > img {
+  width: 65%;
+  padding: 1rem;
+  justify-self: center; }
+
+.inputs {
+  display: flex;
+  flex-direction: column;
+  column-gap: 1rem;
+  row-gap: 1rem; }
+
+.custom-input {
+  border: 0;
+  border-bottom: 1px solid #8D8D8D;
+  outline: 0;
+  font-size: 1.3rem; }
+
+.checkboxes {
+  display: flex;
+  justify-content: space-evenly; }
+
+.custom-submit {
+  background-color: #01CDA9;
+  border: none;
+  border-radius: 1.3rem;
+  color: #FFFFFF;
+  padding: .5rem;
+  font-size: 1.3rem;
+  font-weight: 100;
+  cursor: pointer; }
+
+.custom-button {
+  text-decoration: none;
+  text-align: center;
+  background-color: #FFFFFF;
+  border: 2px solid #01CDA9;
+  border-radius: 1.3rem;
+  height: -moz-fit-content;
+  height: fit-content;
+  font-size: 1.3rem;
+  font-weight: 100;
+  padding: .5rem;
+  color: #969090; }
+
+.forgot-password {
+  text-align: center;
+  text-decoration: none;
+  color: #01CDA9; }