landing page ui

22b397b4 · rinaboc · ec03b2fa · 22b397b4 · 22b397b4 · 22b397b4
Commit 22b397b4 authored 1 year ago by rinaboc
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
 import TheWelcome from './components/TheWelcome.vue'
+import PeldaKomponens from "@/components/pelda-komponens.vue";
+import RegisterKomponens from "@/components/register-komponens.vue";
+import IntroKomponens from "@/components/intro-komponens.vue";
 </script>

 <template>
  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
+    <HelloWorld msg="TechnoCool NoteStore" />
  </header>

+<!--  <PeldaKomponens />-->
+
+
  <main>
-    <TheWelcome />
+<!--    <TheWelcome />-->
+    <h1>A TechnoCool NoteStore jegyzetek, segédanyagok hallgatók közötti egyszerű megosztására alkalmas szolgáltatás.</h1>
+  </main>
+<!--  <main>-->
+<!--    <h2>Az oldal eléréséhez jelentkezz be.</h2>-->
+<!--    <h3>Nincsen felhasználód? <register-komponens/></h3>-->
+<!--  </main>-->
+  <main>
+    <intro-komponens/>
  </main>
 </template>

 <style scoped>
-header {
-  line-height: 1.5;
-}
+

 .logo {
  display: block;
@@ -28,20 +36,37 @@ header {
 }

 @media (min-width: 1024px) {
+
+  main {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: lightseagreen;
+  }
+
  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    line-height: 1.5;
+    background-color: #224c49;
  }

  .logo {
    margin: 0 2rem 0 0;
  }

-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+  .wrapper {
+    display: block;
+    width: 100%;
+    height: 20%;
+  }
+
+  main h1 {
+    padding-right: 20%;
+    text-align: justify;
  }
 }
 </style>
--- a/frontend/src/assets/book-shelf.svg
+++ b/frontend/src/assets/book-shelf.svg
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#FFFFF" width="800px" height="800px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M7.8125 3C7.335938 3.089844 6.992188 3.511719 7 4L7 31L3 31C2.96875 31 2.9375 31 2.90625 31C2.390625 31.046875 1.996094 31.480469 2 32L2 36C2 36.550781 2.449219 37 3 37L6 37L6 44.5C6 45.867188 7.132813 47 8.5 47C9.867188 47 11 45.867188 11 44.5L11 37L39 37L39 44.5C39 45.867188 40.132813 47 41.5 47C42.867188 47 44 45.867188 44 44.5L44 37L47 37C47.550781 37 48 36.550781 48 36L48 32C48 31.449219 47.550781 31 47 31L43.875 31C43.902344 30.867188 43.902344 30.726563 43.875 30.59375L38.8125 9.1875C38.703125 8.671875 38.210938 8.328125 37.6875 8.40625C37.667969 8.414063 37.644531 8.425781 37.625 8.4375L32.75 9.59375C32.378906 9.679688 32.085938 9.972656 32 10.34375L32 10C32 9.449219 31.550781 9 31 9L25 9L25 4C25 3.449219 24.550781 3 24 3L16.0625 3C16.042969 3 16.019531 3 16 3L8 3C7.96875 3 7.9375 3 7.90625 3C7.875 3 7.84375 3 7.8125 3 Z M 9 5L15 5L15 31L9 31 Z M 17 5L23 5L23 9.90625C23 9.9375 23 9.96875 23 10L23 31L17 31 Z M 10.71875 7C10.167969 7.078125 9.78125 7.589844 9.859375 8.140625C9.9375 8.691406 10.449219 9.078125 11 9L13 9C13.359375 9.003906 13.695313 8.816406 13.878906 8.503906C14.058594 8.191406 14.058594 7.808594 13.878906 7.496094C13.695313 7.183594 13.359375 6.996094 13 7L11 7C10.96875 7 10.9375 7 10.90625 7C10.875 7 10.84375 7 10.8125 7C10.78125 7 10.75 7 10.71875 7 Z M 18.71875 7C18.167969 7.078125 17.78125 7.589844 17.859375 8.140625C17.9375 8.691406 18.449219 9.078125 19 9L21 9C21.359375 9.003906 21.695313 8.816406 21.878906 8.503906C22.058594 8.191406 22.058594 7.808594 21.878906 7.496094C21.695313 7.183594 21.359375 6.996094 21 7L19 7C18.96875 7 18.9375 7 18.90625 7C18.875 7 18.84375 7 18.8125 7C18.78125 7 18.75 7 18.71875 7 Z M 37.09375 10.59375L37.71875 13.28125C37.507813 12.902344 37.082031 12.703125 36.65625 12.78125C36.625 12.789063 36.59375 12.800781 36.5625 12.8125L35.59375 13.03125C35.1875 13.101563 34.867188 13.410156 34.78125 13.8125L34.1875 11.28125 Z M 32 10.78125L36.78125 31L32 31 Z M 25 11L30 11L30 31L25 31 Z M 26.71875 13C26.167969 13.078125 25.78125 13.589844 25.859375 14.140625C25.9375 14.691406 26.449219 15.078125 27 15L28 15C28.359375 15.003906 28.695313 14.816406 28.878906 14.503906C29.058594 14.191406 29.058594 13.808594 28.878906 13.496094C28.695313 13.183594 28.359375 12.996094 28 13L27 13C26.96875 13 26.9375 13 26.90625 13C26.875 13 26.84375 13 26.8125 13C26.78125 13 26.75 13 26.71875 13 Z M 37.84375 13.84375L40.875 26.6875C40.652344 26.445313 40.324219 26.332031 40 26.375C39.945313 26.382813 39.894531 26.390625 39.84375 26.40625C39.824219 26.414063 39.800781 26.425781 39.78125 26.4375L38.8125 26.65625C38.40625 26.726563 38.085938 27.035156 38 27.4375L35 14.6875C35.265625 14.984375 35.683594 15.09375 36.0625 14.96875L37.03125 14.75C37.476563 14.664063 37.808594 14.292969 37.84375 13.84375 Z M 10.71875 27C10.167969 27.078125 9.78125 27.589844 9.859375 28.140625C9.9375 28.691406 10.449219 29.078125 11 29L13 29C13.359375 29.003906 13.695313 28.816406 13.878906 28.503906C14.058594 28.191406 14.058594 27.808594 13.878906 27.496094C13.695313 27.183594 13.359375 26.996094 13 27L11 27C10.96875 27 10.9375 27 10.90625 27C10.875 27 10.84375 27 10.8125 27C10.78125 27 10.75 27 10.71875 27 Z M 18.71875 27C18.167969 27.078125 17.78125 27.589844 17.859375 28.140625C17.9375 28.691406 18.449219 29.078125 19 29L21 29C21.359375 29.003906 21.695313 28.816406 21.878906 28.503906C22.058594 28.191406 22.058594 27.808594 21.878906 27.496094C21.695313 27.183594 21.359375 26.996094 21 27L19 27C18.96875 27 18.9375 27 18.90625 27C18.875 27 18.84375 27 18.8125 27C18.78125 27 18.75 27 18.71875 27 Z M 26.71875 27C26.167969 27.078125 25.78125 27.589844 25.859375 28.140625C25.9375 28.691406 26.449219 29.078125 27 29L28 29C28.359375 29.003906 28.695313 28.816406 28.878906 28.503906C29.058594 28.191406 29.058594 27.808594 28.878906 27.496094C28.695313 27.183594 28.359375 26.996094 28 27L27 27C26.96875 27 26.9375 27 26.90625 27C26.875 27 26.84375 27 26.8125 27C26.78125 27 26.75 27 26.71875 27 Z M 41.09375 27.625L41.6875 30.0625L38.78125 30.75L38.21875 28.3125C38.484375 28.609375 38.902344 28.71875 39.28125 28.59375L40.25 28.375C40.65625 28.320313 40.992188 28.023438 41.09375 27.625 Z M 4 33L46 33L46 35L4 35 Z M 8 37L9 37L9 44.5C9 44.785156 8.785156 45 8.5 45C8.214844 45 8 44.785156 8 44.5 Z M 41 37L42 37L42 44.5C42 44.785156 41.785156 45 41.5 45C41.214844 45 41 44.785156 41 44.5Z"/></svg>
\ No newline at end of file
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
 <script setup>
 import PeldaKomponens from "@/components/pelda-komponens.vue";
+import LoginKomponens from "@/components/login-komponens.vue";
+
 defineProps({
  msg: {
    type: String,
@@ -10,17 +12,38 @@ defineProps({

 <template>
  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3 class="subtitle">
-      You’ve successfully created a project with
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
-    </h3>
-    <PeldaKomponens />
+<!--    <h1 class="green">{{ msg }}</h1>-->
+    <img alt="NoteStore logo" class="logo" src="../assets/book-shelf.svg" width="100" height="100" />
+    <h1 class="title">{{msg}}</h1>
+<!--    <h3 class="subtitle">-->
+<!--      You’ve successfully created a project with-->
+<!--      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +-->
+<!--      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.-->
+<!--    </h3>-->
+<!--    <div class="space"></div>-->
+    <div class="login">
+      <LoginKomponens />
+    </div>
  </div>
 </template>

 <style scoped>
+
+.login {
+  position: fixed;
+  right: 5%;
+}
+
+.title {
+  color: lightseagreen;
+}
+
+.title:after{
+  content: "™";
+  vertical-align: super;
+  font-size: large;
+}
+
 h1 {
  font-weight: 500;
  font-size: 2.6rem;
@@ -37,11 +60,31 @@ h3 {
  text-align: center;
 }

+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
 @media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
+
+  .greetings {
+    display: flex;
+    padding: 1em;
+    place-items: center flex-start;
+    flex-wrap: wrap;
+  }
+
+  .space {
+    width: 40%;
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
 }

 .subtitle {

--- a/frontend/src/components/intro-komponens.vue
+++ b/frontend/src/components/intro-komponens.vue
+<script setup>
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+import RegisterKomponens from "@/components/register-komponens.vue";
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Jegyzetek</template>
+    Minden hallgató által készített jegyzet és segédanyag egy helyen.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Elérhetőség</template>
+    Az oldal használata belépés köteles.
+    Lépj be vagy <RegisterKomponens/>!
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>TechnoCool Csapata</template>
+    A projekt a TechnoCool jóvoltából készült a Szoftvertechnológia alapjai tárgy keretein belül.
+  </WelcomeItem>
+</template>
--- a/frontend/src/components/login-komponens.vue
+++ b/frontend/src/components/login-komponens.vue
+<script setup>
+import {ref} from "vue";
+import axios from 'axios';
+
+// const isLoading = ref(true);
+// const aFact = ref('');
+
+// function getAFact() {
+//   isLoading.value = true;
+//   axios.get('https://catfact.ninja/fact').then(result => {
+//     aFact.value = result.data.fact;
+//     isLoading.value = false;
+//   }).catch(error => {
+//     console.error('cannot get data from api', error);
+//   });
+// }
+//
+// getAFact();
+
+// const backendStatus = ref('unknown');
+// function checkBackend() {
+//   axios.get('/api/ok').then(result=>{
+//     backendStatus.value = result.data;
+//   }).catch(error => {
+//     console.error('cannot get backend OK api endpoint', error);
+//     backendStatus.value = 'error';
+//   })
+// }
+
+const loggedIn = ref(false);
+const btnText = ref("Bejelentkezés")
+function login(){
+  loggedIn.value = !loggedIn.value
+
+  if(loggedIn.value){
+    btnText.value = "Kijelentkezés"
+  } else {
+    btnText.value = "Bejelentkezés"
+  }
+}
+
+</script>
+
+<template>
+  <button class="grow" @click="login">{{btnText}}</button>
+</template>
+
+<style scoped>
+button {
+  height: 40px;
+  width: 130px;
+  color: lightseagreen;
+  background-color: #181818;
+  font-weight: bold;
+  border-color: #181818;
+}
+
+button:hover{
+  background-color: #224c49;
+  color: lightseagreen;
+  border-color: lightseagreen;
+}
+
+button:active {
+  border-color: lightseagreen;
+  background-color: #181818;
+  color: lightseagreen;
+}
+
+.grow:active {
+    animation-name: growScale;
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+    animation-duration: 0.1s;
+}
+
+@keyframes growScale {
+    0% {
+        scale: 1;
+    }
+    100%{
+        scale: 1.05;
+    }
+}
+
+.a-fact {
+  font-weight: bold;
+}
+</style>
\ No newline at end of file
--- a/frontend/src/components/pelda-komponens.vue
+++ b/frontend/src/components/pelda-komponens.vue
@@ -31,8 +31,8 @@ function checkBackend() {
 <template>
  <div v-if="isLoading" class="loading">Loading...</div>
  <template v-else>
-    <button @click="getAFact">Next fact</button>
-    <div class="a-fact">{{ aFact }}</div>
+<!--    <button @click="getAFact">Next fact</button>-->
+<!--    <div class="a-fact">{{ aFact }}</div>-->
  </template>
  <button @click="checkBackend">Check Backend</button>
  <p>Backend status is: {{backendStatus}}</p>

--- a/frontend/src/components/register-komponens.vue
+++ b/frontend/src/components/register-komponens.vue
+<script setup>
+
+function register(){
+
+}
+
+</script>
+
+<template>
+  <p @click="register">regisztrálj</p>
+</template>
+
+<style>
+p {
+  display: inline-block;
+  color: aqua;
+}
+
+p:hover {
+  color: lightseagreen;
+  cursor: grab;
+  text-decoration: underline;
+}
+
+p:active {
+  color: aqua;
+}
+
+</style>
\ No newline at end of file