Merge pull request #86 from unb-mds/front-73/feat/implementacao-telas…

…-iniciais

Front 73/feat/implementacao telas iniciais

web/postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  };
+

web/src/App.vue

@@ -1,11 +1,9 @@
 <script setup>
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterLink, RouterView } from "vue-router";
 </script>
 
 <template>
-
+  <router-view />
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

web/src/assets/base.css

@@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

web/src/assets/main.css

@@ -1,38 +1,4 @@
-@import './base.css';
+/*@import './base.css';*/
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

web/src/components/Logo.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1 class="text-5xl italic font-light">
+    Achei<span class="text-5xl font-bold">UnB</span>
+  </h1>
+</template>
+
+<script>
+export default {
+  name: "Logo",
+};
+</script>
+
+<style scoped></style>

web/src/main.js

@@ -1,11 +1,11 @@
-import './assets/main.css'
+import "./assets/main.css";
 
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(router)
+app.use(router);
 
-app.mount('#app')
+app.mount("#app");

web/src/router/index.js

@@ -1,4 +1,23 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from "vue-router";
+import Login from "../views/Login.vue";
+import About from "../views/About.vue";
 
+const routes = [
+  {
+    path: "/",
+    name: "Login",
+    component: Login,
+  },
+  {
+    path: "/about",
+    name: "About",
+    component: About,
+  },
+];
 
-export default router
+const router = createRouter({
+  history: createWebHashHistory(), // Usar histórico do navegador
+  routes,
+});
+
+export default router;

web/src/views/About.vue

@@ -0,0 +1,7 @@
+<template></template>
+
+<script setup>
+import Logo from "../components/Logo.vue";
+</script>
+
+<style scoped></style>

web/src/views/Login.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="telaInteira bg-azul text-white p-4 h-screen">
+      <div class="titulo flex space-x-1 mt-20 mb-20 ml-8 md:flex md:justify-center md:mb-52">
+        <h1 class="text-5xl italic font-light md:text-6xl">Achei</h1>
+        <h1 class="text-5xl font-bold md:text-6xl">UnB</h1>
+      </div>
+      <div class="slogan max-w-72 ml-8 md:mr-8 md:max-w-none md:w-auto md:text-center">
+        <p class="text-5xl font-bold mb-4 md:text-6xl">Perdeu algo no campus?</p>
+        <p class="text-5xl italic font-light mb-4 md:text-6xl">A gente te ajuda!</p>
+      </div>
+
+      <div class="flex justify-center mt-52 lg:">
+      <button 
+      @click="redirectToLoginMicrosoft"
+      class="flex items-center rounded-full bg-gray-50 px-5 py-3 text-md font-medium text-azul ring-1 ring-inset ring-gray-500/10">
+        <!--img src="../components/icons/Microsoft_logo.svg" alt="Logo Microsoft" class="h-6 w-auto mr-2"/-->
+        Entre com a conta da Microsoft
+      </button>
+    </div>
+    </div>
+</template>
+
+<script setup>
+  function redirectToLoginMicrosoft(){
+    window.location.href = "http://localhost:8000/accounts/microsoft/login/callback/?code=1.AQoAoZs17AtjK024M8jm1I-AWaQndEAgaUlFgMa8dyuNqUUKAEsKAA.AgABBAIAAADW6jl31mB3T7ugrWTT8pFeAwDs_wUA9P9MZdKMoEzV5HiWul9EpMcaWKfGBT0keLmk9c-rCvbWkOxjVSGoUAMeU6cAae8lWykGXY-tzhlJL6cUPo_1F1vEPTJPL-vd3xiMZhexpdE1KrfxPUJaUfkyZf83gIq6lH5iY8rjmPDncnEGE-QiawLZBcUGrUbCd6yeBV1N2v5tJcUIL0qnOPX55XDo22hEKnC-AGK-PimzMAB66TIfwOmMEmoA-3Oga80t8c6Y3h0fVCbx5znZHoziSu1xaG9f0ZeptIAuZUn_GStwiBVua8wstZ7ETcqmauX6KJIIl2TIUZ_UGDmzlOM-5cAyl6X8K0d-qjQ6ojSppdPt5ZuMXjFJO7uTqxpFfz6z5QoU_JxlG264WmVlGOwZ6LlMVHv29zSeE__3siJqpsnnvqnhMEbsIpxxwHi54esBWwhTEtp70fmDo9QdOzALuUyiCXm09ucno-2c4Xbf7v1NQgbWlzEhzrDVAOM-OKD19B5UMRhqHYbjUwQjjmXm390DoYKNDX3OZbvY5RHiV48Xlw3pH9TtTlyLGgOeX4TkGFSpaorkoRKpf7Ra05vD5pWkY2-w3X0zkWwvjK_CPkqn-6Noj-KNGtAmdzc7CZDY8CkjV7malOf8qHw2JgPP7M2a9jzjk6hNOi0ZKBe1WQBTXDzxzykjHZt1_5Mruo2FDo6mSIr4UcftjCgLf1b7Asd9yIHWSmCA8YhXFWBG8wlI6bNLMj-ytwOcjKYlTdkRTeKT&state=Zay5NfY4tSn7JgvO&session_state=22111dff-b57b-4d45-97be-8c7ffaf3d2b7#"
+  }
+</script>
+
+<style scoped>
+
+</style>

web/tailwind.config.js

@@ -1,9 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [],
+  content: [
+    "./src/views/Login.vue",
+    "./src/views/About.vue",
+    "./src/components/Logo.vue",
+  ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        azul: "#133E78",
+        laranja: "#F59E0B",
+        verde: "#008940",
+      },
+    },
   },
   plugins: [],
-}
-
+};

web/vite.config.js

@@ -10,6 +10,9 @@ export default defineConfig({
     vue(),
     vueDevTools(),
   ],
+  css: {
+    postcss: './postcss.config.cjs',
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))