adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
Adam French
2025-12-16 03:42:18 +00:00
parent 9681143719
commit 52757b05f9
9 changed files with 159 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nginx/vue/public/css/styles.css
View File

@@ -37,7 +37,7 @@
--portal_light_blue: #00a2ff; --portal_light_blue: #00a2ff;
/* MAIN COLORS */ /* MAIN COLORS */
--primary: #000; --primary: #fff;
--secondary: #000; --secondary: #000;
--tertiary: #5a6952; --tertiary: #5a6952;
--quaternary: #424542; --quaternary: #424542;
@@ -90,6 +90,23 @@ video {
button { button {
color: red; color: red;
} }
table {
border: 1px solid var(--primary);
}
th {
border: 1px solid var(--primary);
}
tr {
border: 1px solid var(--primary);
}
td {
border: 1px solid var(--primary);
}
/* END OF ELEMENTS */ /* END OF ELEMENTS */
/* CLASSES */ /* CLASSES */
@@ -227,6 +244,10 @@ button {
/* ALIGNMENT */ /* ALIGNMENT */
.relative {
position: relative;
}
.center-content { .center-content {
align-items: center; align-items: center;
text-align: center; text-align: center;
@@ -240,6 +261,10 @@ button {
margin: 0px; margin: 0px;
} }
.flex {
display: flex;
}
.flex-col { .flex-col {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

BIN
nginx/vue/public/img/memes/glass-of-beer-with-foam-on-transparent-background-free-png.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

2
nginx/vue/src/components/admin/CreatePost.vue
View File

@@ -23,7 +23,7 @@ async function post() {
</script> </script>
<template> <template>
<div v-if="auth.loggedIn"> <div v-if="auth.loggedIn" class="flex-col">
<h1>Create Post</h1> <h1>Create Post</h1>
<input type="text" v-model="title" placeholder="Title" /> <input type="text" v-model="title" placeholder="Title" />
<textarea v-model="content" placeholder="Content"></textarea> <textarea v-model="content" placeholder="Content"></textarea>

7
nginx/vue/src/components/admin/CreateUser.vue
View File

@@ -12,12 +12,13 @@ function handleLogin() {
</script> </script>
<template> <template>
<div v-if="auth.loggedIn"> <div v-if="auth.loggedIn" class="flex-col">
<h1>Logged in</h1> <h1>Logged in</h1>
<p>{{ auth.user.ID }}</p> <p>{{ auth.user.id }}</p>
<p>{{ auth.user.username }}</p> <p>{{ auth.user.username }}</p>
<p>{{ auth.user.admin }}</p>
</div> </div>
<div v-else> <div v-else class="flex-col">
<h1>Create User</h1> <h1>Create User</h1>
<input type="text" v-model="username" placeholder="Username" /> <input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="Password" /> <input type="password" v-model="password" placeholder="Password" />

7
nginx/vue/src/components/admin/Login.vue
View File

@@ -16,13 +16,14 @@ function handleLogout() {
</script> </script>
<template> <template>
<div v-if="auth.loggedIn"> <div v-if="auth.loggedIn" class="flex-col">
<h1>Logged in</h1> <h1>Logged in</h1>
<p>{{ auth.user.ID }}</p> <p>{{ auth.user.id }}</p>
<p>{{ auth.user.username }}</p> <p>{{ auth.user.username }}</p>
<p>{{ auth.user.admin }}</p>
<button @click="handleLogout">Log Out</button> <button @click="handleLogout">Log Out</button>
</div> </div>
<div v-else> <div v-else class="flex-col">
<h1>Login</h1> <h1>Login</h1>
<input type="text" v-model="username" placeholder="Username" /> <input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="Password" /> <input type="password" v-model="password" placeholder="Password" />

79
nginx/vue/src/components/home/Favorites.vue
View File

@@ -1,26 +1,59 @@
<template> <template>
<div class="flex-row"> <div>
<table> <p class="margin1">My favs</p>
<tr> <div class="flex-row bdr-primary">
<td>Color</td> <table>
<td>Aqua</td> <tr>
</tr> <th>Color</th>
<tr> <td>Aqua</td>
<td>Pet</td> </tr>
<td>Cat</td> <tr>
</tr> <th>Pet</th>
</table> <td>Cat</td>
<table> </tr>
<tr> <tr>
<td>Color</td> <th>Food</th>
<td>Blue</td> <td>Eggs</td>
</tr> </tr>
</table> <tr>
<th>Subject</th>
<td>Math</td>
</tr>
<tr>
<th>Drink</th>
<td>Monster</td>
</tr>
<tr>
<th>Sport</th>
<td>Running</td>
</tr>
</table>
<table>
<tr>
<th>Color</th>
<td>Aqua</td>
</tr>
<tr>
<th>Pet</th>
<td>Cat</td>
</tr>
<tr>
<th>Food</th>
<td>Eggs</td>
</tr>
<tr>
<th>Subject</th>
<td>Math</td>
</tr>
<tr>
<th>Drink</th>
<td>Monster</td>
</tr>
<tr>
<th>Sport</th>
<td>Running</td>
</tr>
</table>
</div>
</div> </div>
</template> </template>
<style scoped>
img {
width: 100%;
}
</style>

4
nginx/vue/src/components/home/Feed.vue
View File

@@ -16,7 +16,7 @@ let len = 0;
async function fetchPosts() { async function fetchPosts() {
try { try {
const res = await axios.get("/api/posts"); const res = await axios.get("https://www.adam-french.co.uk/api/posts");
posts = res.data; posts = res.data;
len = posts.length; len = posts.length;
fetched.value = true; fetched.value = true;
@@ -68,8 +68,8 @@ onMounted(() => {
<template> <template>
<div v-if="fetched" class="center-content"> <div v-if="fetched" class="center-content">
<h2>{{ post.title }}</h2> <h2>{{ post.title }}</h2>
<p>By: {{ post.author.username }}</p>
<div>{{ post.content }}</div> <div>{{ post.content }}</div>
<p>by: {{ post.author.username }}</p>
<small <small
>Created at: {{ new Date(post.createdAt).toLocaleString() }}</small >Created at: {{ new Date(post.createdAt).toLocaleString() }}</small
> >

9
nginx/vue/src/views/Admin.vue
View File

@@ -2,14 +2,17 @@
import Login from "@/components/admin/Login.vue"; import Login from "@/components/admin/Login.vue";
import CreateUser from "@/components/admin/CreateUser.vue"; import CreateUser from "@/components/admin/CreateUser.vue";
import CreatePost from "@/components/admin/CreatePost.vue"; import CreatePost from "@/components/admin/CreatePost.vue";
import Halftone from "@/components/backgrounds/Halftone.vue";
</script> </script>
<template> <template>
<main class="center-content flex-col"> <main class="center-content flex-col">
<Halftone />
<div class="a5page-portrait bdr-1 grid"> <div class="a5page-portrait bdr-1 grid">
<Login /> <Login class="bdr-2 bg-secondary" />
<CreateUser /> <CreateUser class="bdr-2 bg-secondary" />
<CreatePost /> <CreatePost class="bdr-2 bg-secondary" />
</div> </div>
</main> </main>
</template> </template>

62
nginx/vue/src/views/Home.vue
View File

@@ -10,12 +10,21 @@ import Gym from "@/components/home/Gym.vue";
import Watching from "@/components/home/Watching.vue"; import Watching from "@/components/home/Watching.vue";
import Halftone from "@/components/backgrounds/Halftone.vue"; import Halftone from "@/components/backgrounds/Halftone.vue";
import Overlay from "@/components/Overlay.vue";
</script> </script>
<template> <template>
<Halftone />
<main class="center-content flex-col"> <main class="center-content flex-col">
<Halftone /> <div class="a4page-portrait bdr-1 grid relative">
<div class="a4page-portrait bdr-1 grid"> <Overlay>
<img src="/img/memes/star.gif" class="ov1" />
<img src="/img/memes/welcome2.png" class="ov2" />
<img src="/img/memes/pidgeon.gif" class="ov3" />
<img src="/img/memes/no_slip.png" class="ov5" />
<img src="/img/memes/beer.png" class="ov6" />
</Overlay>
<Intro class="intro bdr-primary bg-primary" /> <Intro class="intro bdr-primary bg-primary" />
<Listening class="listening bdr-primary bg-primary" /> <Listening class="listening bdr-primary bg-primary" />
<Stamps class="stamps bdr-primary bg-primary" /> <Stamps class="stamps bdr-primary bg-primary" />
@@ -27,6 +36,7 @@ import Halftone from "@/components/backgrounds/Halftone.vue";
<Watching class="watching bdr-primary bg-primary" /> <Watching class="watching bdr-primary bg-primary" />
</div> </div>
</main> </main>
<img src="/img/memes/fire-woman.gif" class="ov4" />
</template> </template>
<style scoped> <style scoped>
@@ -80,4 +90,52 @@ import Halftone from "@/components/backgrounds/Halftone.vue";
grid-column: span 3; grid-column: span 3;
grid-row: span 2; grid-row: span 2;
} }
.ov1 {
rotate: 10deg;
width: 100px;
position: absolute;
top: -90px;
left: 0px;
}
.ov2 {
width: 100px;
position: absolute;
top: -102px;
right: 0px;
}
.ov3 {
width: 200px;
position: absolute;
bottom: -150px;
left: -200px;
}
.ov4 {
width: 250px;
position: absolute;
bottom: 0px;
right: 0px;
}
.ov5 {
height: 100px;
position: absolute;
top: -100px;
right: 200px;
}
.ov6 {
height: 250px;
position: absolute;
top: 450px;
right: -200px;
animation: floatY 5s ease-in-out infinite alternate;
}
@keyframes floatY {
from {
transform: translateY(0);
}
to {
transform: translateY(-500px);
}
}
</style> </style>