From 4eb5d8d5b8002a498071f859aaff75053f3cde7c Mon Sep 17 00:00:00 2001 From: "p.belezov" Date: Wed, 26 Jun 2024 11:24:48 +0800 Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=D0=BC=D1=83=D1=82=D0=B8=D0=BB=20?= =?UTF-8?q?=D1=84=D1=80=D0=BE=D0=BD=D1=82=D0=B5=D0=BD=D0=B4=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 15 +++ package.json | 1 + resources/App.vue | 95 +++++++++++----- resources/app.js | 17 ++- resources/css/app.css | 209 +++++++++++++++++++++++++++++++++++ resources/views/About.vue | 13 +++ resources/views/Login.vue | 20 +++- resources/views/Register.vue | 31 ++++++ 8 files changed, 368 insertions(+), 33 deletions(-) create mode 100644 resources/views/About.vue create mode 100644 resources/views/Register.vue diff --git a/package-lock.json b/package-lock.json index c323634..98c6863 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "pinia": "^2.1.7", "typescript": "^5.3.3", "vue": "^3.4.14", + "vue-router": "^4.4.0", "vuetify": "^3.4.10" }, "devDependencies": { @@ -1196,6 +1197,20 @@ } } }, + "node_modules/vue-router": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz", + "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==", + "dependencies": { + "@vue/devtools-api": "^6.5.1" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "vue": "^3.2.0" + } + }, "node_modules/vuetify": { "version": "3.6.1", "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.6.1.tgz", diff --git a/package.json b/package.json index bb015f0..8abe0e7 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "pinia": "^2.1.7", "typescript": "^5.3.3", "vue": "^3.4.14", + "vue-router": "^4.4.0", "vuetify": "^3.4.10" } } diff --git a/resources/App.vue b/resources/App.vue index 15c9e38..6a87148 100644 --- a/resources/App.vue +++ b/resources/App.vue @@ -1,52 +1,87 @@ diff --git a/resources/app.js b/resources/app.js index 056a8ca..30bc099 100644 --- a/resources/app.js +++ b/resources/app.js @@ -6,10 +6,25 @@ import 'vuetify/styles' import * as components from 'vuetify/components' import * as directives from 'vuetify/directives' import '@mdi/font/css/materialdesignicons.css' +import Login from "./views/Login.vue"; +import About from "./views/About.vue"; +import Register from "./views/Register.vue"; +import {createMemoryHistory, createRouter} from "vue-router"; + +const routes = [ + {path: '/', component: About, props: true}, + {path: '/login', component: Login, props: true}, + {path: '/register', component: Register, props: true} +] + +const router = createRouter({ + history: createMemoryHistory(), + routes, +}) const vuetify = createVuetify({ components, directives }) -createApp(App).use(vuetify).mount("#app") +createApp(App).use(vuetify).use(router).mount("#app") diff --git a/resources/css/app.css b/resources/css/app.css index e69de29..b4971e2 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -0,0 +1,209 @@ +.main-bg { + background-color: #424242!important; + color: #e0e0e0!important; + text-decoration-color: #e0e0e0!important; +} + +.bg-gradient { + background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff)!important; + background-size: 200% 200%!important; + animation: gradient 15s ease infinite!important; + height: 100vh!important; +} + +@keyframes gradient { + 0% { + background-position: 0 50%!important; + } + 50% { + background-position: 100% 50%!important; + } + 100% { + background-position: 0 50%!important; + } +} + +.nav-link:link { + color: #4FDBFEFF!important; +} + +.nav-link:visited { + color: #F0A068FF!important; +} + +.nav-link:hover { + color: #F103B0FF!important; +} + +.nav-link:active { + color: #F103B0FF!important; +} + +.link-no-color:link { + color: #000000 !important; +} + +.link-no-color:visited { + color: #000000 !important; +} + +.link-no-color:hover { + color: #000000 !important; +} + +.link-no-color:active { + color: #000000 !important; +} +.ham { + cursor: pointer; + -webkit-tap-highlight-color: transparent; + transition: transform 400ms; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} +.hamRotate.active { + transform: rotate(45deg); +} +.hamRotate180.active { + transform: rotate(180deg); +} +.line { + fill:none; + transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; + stroke: #ffffff; + stroke-width:5.5; + stroke-linecap:round; +} +.ham1 .top { + stroke-dasharray: 40 139; +} +.ham1 .bottom { + stroke-dasharray: 40 180; +} +.ham1.active .top { + stroke-dashoffset: -98px; +} +.ham1.active .bottom { + stroke-dashoffset: -138px; +} +.ham2 .top { + stroke-dasharray: 40 121; +} +.ham2 .bottom { + stroke-dasharray: 40 121; +} +.ham2.active .top { + stroke-dashoffset: -102px; +} +.ham2.active .bottom { + stroke-dashoffset: -102px; +} +.ham3 .top { + stroke-dasharray: 40 130; +} +.ham3 .middle { + stroke-dasharray: 40 140; +} +.ham3 .bottom { + stroke-dasharray: 40 205; +} +.ham3.active .top { + stroke-dasharray: 75 130; + stroke-dashoffset: -63px; +} +.ham3.active .middle { + stroke-dashoffset: -102px; +} +.ham3.active .bottom { + stroke-dasharray: 110 205; + stroke-dashoffset: -86px; +} +.ham4 .top { + stroke-dasharray: 40 121; +} +.ham4 .bottom { + stroke-dasharray: 40 121; +} +.ham4.active .top { + stroke-dashoffset: -68px; +} +.ham4.active .bottom { + stroke-dashoffset: -68px; +} +.ham5 .top { + stroke-dasharray: 40 82; +} +.ham5 .bottom { + stroke-dasharray: 40 82; +} +.ham5.active .top { + stroke-dasharray: 14 82; + stroke-dashoffset: -72px; +} +.ham5.active .bottom { + stroke-dasharray: 14 82; + stroke-dashoffset: -72px; +} +.ham6 .top { + stroke-dasharray: 40 172; +} +.ham6 .middle { + stroke-dasharray: 40 111; +} +.ham6 .bottom { + stroke-dasharray: 40 172; +} +.ham6.active .top { + stroke-dashoffset: -132px; +} +.ham6.active .middle { + stroke-dashoffset: -71px; +} +.ham6.active .bottom { + stroke-dashoffset: -132px; +} +.ham7 .top { + stroke-dasharray: 40 82; +} +.ham7 .middle { + stroke-dasharray: 40 111; +} +.ham7 .bottom { + stroke-dasharray: 40 161; +} +.ham7.active .top { + stroke-dasharray: 17 82; + stroke-dashoffset: -62px; +} +.ham7.active .middle { + stroke-dashoffset: 23px; +} +.ham7.active .bottom { + stroke-dashoffset: -83px; +} +.ham8 .top { + stroke-dasharray: 40 160; +} +.ham8 .middle { + stroke-dasharray: 40 142; + transform-origin: 50%; + transition: transform 400ms; +} +.ham8 .bottom { + stroke-dasharray: 40 85; + transform-origin: 50%; + transition: transform 400ms, stroke-dashoffset 400ms; +} +.ham8.active .top { + stroke-dashoffset: -64px; +} +.ham8.active .middle { +//stroke-dashoffset: -20px; + transform: rotate(90deg); +} +.ham8.active .bottom { + stroke-dashoffset: -64px; +} + diff --git a/resources/views/About.vue b/resources/views/About.vue new file mode 100644 index 0000000..a924e1b --- /dev/null +++ b/resources/views/About.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/resources/views/Login.vue b/resources/views/Login.vue index 1058ab9..b4985df 100644 --- a/resources/views/Login.vue +++ b/resources/views/Login.vue @@ -1,10 +1,26 @@ diff --git a/resources/views/Register.vue b/resources/views/Register.vue new file mode 100644 index 0000000..629c2de --- /dev/null +++ b/resources/views/Register.vue @@ -0,0 +1,31 @@ + + + + +