LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚸 Added navbar

Browse Source
This commit is contained in:
Mawoka
2022-03-03 17:24:37 +01:00
parent a3f781e610
commit c126bbcd59
7 changed files with 183 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker-compose.yml
+1 -1
View File
@@ -58,7 +58,7 @@ services:
- ./db:/var/lib/postgresql/data
proxy:
image: caddy:alpine
restart: unless-stopped
restart: always
volumes:
- ./Caddyfile-docker:/etc/caddy/Caddyfile
ports:
frontend/package.json
+2
View File
@@ -14,6 +14,7 @@
},
"devDependencies": {
"@felte/validator-yup": "^1.0.1",
"@fontsource/marck-script": "^4.5.2",
"@sveltejs/adapter-auto": "next",
"@sveltejs/adapter-node": "^1.0.0-next.70",
"@sveltejs/kit": "next",
@@ -35,6 +36,7 @@
"postcss-load-config": "^3.1.1",
"prettier": "^2.5.1",
"prettier-plugin-svelte": "^2.5.0",
"sass": "^1.49.9",
"socket.io-client": "^4.4.1",
"svelte": "^3.44.0",
"svelte-check": "^2.2.6",
frontend/pnpm-lock.yaml
Generated
+35 -11
View File
@@ -2,6 +2,7 @@ lockfileVersion: 5.3
specifiers:
'@felte/validator-yup': ^1.0.1
'@fontsource/marck-script': ^4.5.2
'@sveltejs/adapter-auto': next
'@sveltejs/adapter-node': ^1.0.0-next.70
'@sveltejs/kit': next
@@ -23,6 +24,7 @@ specifiers:
postcss-load-config: ^3.1.1
prettier: ^2.5.1
prettier-plugin-svelte: ^2.5.0
sass: ^1.49.9
socket.io-client: ^4.4.1
svelte: ^3.44.0
svelte-check: ^2.2.6
@@ -34,9 +36,10 @@ specifiers:
devDependencies:
'@felte/validator-yup': 1.0.1_yup@0.32.11
'@fontsource/marck-script': 4.5.2
'@sveltejs/adapter-auto': 1.0.0-next.30
'@sveltejs/adapter-node': 1.0.0-next.70
'@sveltejs/kit': 1.0.0-next.288_svelte@3.46.4
'@sveltejs/kit': 1.0.0-next.291_sass@1.49.9+svelte@3.46.4
'@types/luxon': 2.0.9
'@types/yup': 0.29.13
'@typescript-eslint/eslint-plugin': 5.12.1_78ba2542c270c83b2a80bb1c125195b6
@@ -55,10 +58,11 @@ devDependencies:
postcss-load-config: 3.1.3
prettier: 2.5.1
prettier-plugin-svelte: 2.6.0_prettier@2.5.1+svelte@3.46.4
sass: 1.49.9
socket.io-client: 4.4.1
svelte: 3.46.4
svelte-check: 2.4.5_267bdea6a4c44ec9b77b315a8750f243
svelte-preprocess: 4.10.4_f1d8dc2d3af270254b6b481163b9d605
svelte-check: 2.4.5_bb21b93d557fc716a6ae071c4dce10e1
svelte-preprocess: 4.10.4_c54fd0a3479054b5002c3dc2e70c9c9a
tailwindcss: 3.0.23_autoprefixer@10.4.2
tslib: 2.3.1
typescript: 4.5.5
@@ -132,6 +136,10 @@ packages:
yup: 0.32.11
dev: true
/@fontsource/marck-script/4.5.2:
resolution: {integrity: sha512-uqy1//nAM1INtRvVPD/E1FQEk+Hf4DpudVSvmrXkCE/oUU87V/saKw5Xuz4QLhJVbcL1oYjqrMzC91H3jclt5g==}
dev: true
/@humanwhocodes/config-array/0.5.0:
resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==}
engines: {node: '>=10.10.0'}
@@ -223,8 +231,8 @@ packages:
esbuild: 0.14.23
dev: true
/@sveltejs/kit/1.0.0-next.288_svelte@3.46.4:
resolution: {integrity: sha512-6ky4CUFNGKoU1QV+fY2LOIB7atHdUCIMRx3pX21B2g9yZzQzkot0zHBrMMBSKF0/4Wx19PLEWrlGxlhakYmi8Q==}
/@sveltejs/kit/1.0.0-next.291_sass@1.49.9+svelte@3.46.4:
resolution: {integrity: sha512-mFd1EJbxoyPGiomYwYhZnjNLPYahCC2gHfKvPetguL/7BCHcyUjjYQbwTTmjVxtgBs0oLzKVA9bt45gpr9JqBQ==}
engines: {node: '>=14.13'}
hasBin: true
peerDependencies:
@@ -233,7 +241,7 @@ packages:
'@sveltejs/vite-plugin-svelte': 1.0.0-next.37_svelte@3.46.4+vite@2.8.4
sade: 1.8.1
svelte: 3.46.4
vite: 2.8.4
vite: 2.8.4_sass@1.49.9
transitivePeerDependencies:
- diff-match-patch
- less
@@ -259,7 +267,7 @@ packages:
magic-string: 0.25.7
svelte: 3.46.4
svelte-hmr: 0.14.9_svelte@3.46.4
vite: 2.8.4
vite: 2.8.4_sass@1.49.9
transitivePeerDependencies:
- supports-color
dev: true
@@ -1365,6 +1373,10 @@ packages:
engines: {node: '>= 4'}
dev: true
/immutable/4.0.0:
resolution: {integrity: sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==}
dev: true
/import-fresh/3.3.0:
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
engines: {node: '>=6'}
@@ -1917,6 +1929,16 @@ packages:
rimraf: 2.7.1
dev: true
/sass/1.49.9:
resolution: {integrity: sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==}
engines: {node: '>=12.0.0'}
hasBin: true
dependencies:
chokidar: 3.5.3
immutable: 4.0.0
source-map-js: 1.0.2
dev: true
/semver/7.3.5:
resolution: {integrity: sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==}
engines: {node: '>=10'}
@@ -2056,7 +2078,7 @@ packages:
engines: {node: '>= 0.4'}
dev: true
/svelte-check/2.4.5_267bdea6a4c44ec9b77b315a8750f243:
/svelte-check/2.4.5_bb21b93d557fc716a6ae071c4dce10e1:
resolution: {integrity: sha512-nRft8BbG2wcxyCdHDZ7X43xLcvDzua3xLwq6wzHGcAF3ka3Jyhv2rvgq0+SF9NwHLMefp9C2XkM6etzsxK/cMQ==}
hasBin: true
peerDependencies:
@@ -2070,7 +2092,7 @@ packages:
sade: 1.8.1
source-map: 0.7.3
svelte: 3.46.4
svelte-preprocess: 4.10.4_f1d8dc2d3af270254b6b481163b9d605
svelte-preprocess: 4.10.4_c54fd0a3479054b5002c3dc2e70c9c9a
typescript: 4.5.5
transitivePeerDependencies:
- '@babel/core'
@@ -2093,7 +2115,7 @@ packages:
svelte: 3.46.4
dev: true
/svelte-preprocess/4.10.4_f1d8dc2d3af270254b6b481163b9d605:
/svelte-preprocess/4.10.4_c54fd0a3479054b5002c3dc2e70c9c9a:
resolution: {integrity: sha512-fuwol0N4UoHsNQolLFbMqWivqcJ9N0vfWO9IuPAiX/5okfoGXURyJ6nECbuEIv0nU3M8Xe2I1ONNje2buk7l6A==}
engines: {node: '>= 9.11.2'}
requiresBuild: true
@@ -2140,6 +2162,7 @@ packages:
magic-string: 0.25.7
postcss: 8.4.7
postcss-load-config: 3.1.3
sass: 1.49.9
sorcery: 0.10.0
strip-indent: 3.0.0
svelte: 3.46.4
@@ -2267,7 +2290,7 @@ packages:
resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==}
dev: true
/vite/2.8.4:
/vite/2.8.4_sass@1.49.9:
resolution: {integrity: sha512-GwtOkkaT2LDI82uWZKcrpRQxP5tymLnC7hVHHqNkhFNknYr0hJUlDLfhVRgngJvAy3RwypkDCWtTKn1BjO96Dw==}
engines: {node: '>=12.2.0'}
hasBin: true
@@ -2287,6 +2310,7 @@ packages:
postcss: 8.4.7
resolve: 1.22.0
rollup: 2.68.0
sass: 1.49.9
optionalDependencies:
fsevents: 2.3.2
dev: true
frontend/src/app.css
+17
View File
@@ -2,3 +2,20 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@fontsource/marck-script;
.marck-script {
font-family: 'Marck Script';
}
.link-hover {
transition: all 0.3s;
}
.link-hover:hover {
background: linear-gradient(90deg, #009444, #39b54a, #8dc63f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
frontend/src/lib/navbar.svelte
+96
View File
@@ -0,0 +1,96 @@
<script>
import '@fontsource/marck-script/index.css';
let openMenu = true;
let closeMenu = false;
let menuItems = false;
const toggleMenu = () => {
openMenu = !openMenu;
closeMenu = !closeMenu;
menuItems = !menuItems;
};
</script>
<nav
class='w-screen px-4 lg:px-10 py-2 flex flex-col lg:flex-row lg:items-center fixed backdrop-blur-sm bg-white/60 shadow-md z-50 top-0'
>
<!-- Our logo and button -->
<section class='w-full lg:w-max flex justify-between'>
<!-- Logo -->
<a href='/' class='font-black tracking-tight text-xl text-black marck-script link-hover'
>ClassQuiz</a
>
<!-- Our open/close buttons -->
<!-- Open menu -->
<button class='lg:hidden' id='open-menu' on:click={toggleMenu} class:hidden={!openMenu}>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
stroke-width='2'
stroke-linecap='round'
stroke-linejoin='round'
display='block'
id='TextAlignJustified'
>
<path d='M3 6h18M3 12h18M3 18h18' />
</svg>
</button>
<!-- Close menu -->
<button class='hidden' id='close-menu' class:hidden={!closeMenu} on:click={toggleMenu}>
<svg
xmlns='http://www.w3.org/2000/svg'
width='14'
height='14'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
stroke-width='3'
stroke-linecap='round'
stroke-linejoin='round'
display='block'
id='Cross'
>
<path d='M20 20L4 4m16 0L4 20' />
</svg>
</button>
</section>
<!-- Our list of items -->
<ul
id='menu-items'
class='lg:flex w-full flex-col lg:flex-row lg:pl-6'
class:hidden={!menuItems}
>
<li class='py-2'>
<a
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
href='#install'>Play</a
>
</li>
<li class='py-2'>
<a
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
href='/account/register'>Register</a
>
</li>
<li class='py-2'>
<a
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
href='/account/login'>Login</a
>
<li class='py-2'>
<a
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
href='https://github.com/mawoka-myblock/classquiz'>GitHub</a
>
</li>
</ul>
</nav>
frontend/src/routes/__layout.svelte
+31 -1
View File
@@ -1,5 +1,35 @@
<script>
import '../app.css';
import Navbar from '$lib/navbar.svelte';
</script>
<slot />
<Navbar />
<div class='pt-16 h-screen'>
<slot />
</div>
<style lang='scss'>
:global(body) {
background: linear-gradient(to right, #009444, #39b54a, #8dc63f);
// height: 100%;
// width: 100%;
background-repeat: no-repeat;
background-size: cover;
/*background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%); */
/*background: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%); */
color: beige;
background-size: 400% 400%;
animation: background_animation 30s ease infinite;
}
@keyframes background_animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
frontend/src/routes/index.svelte
+1
View File
@@ -1,2 +1,3 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>