+
+
+
+
+
+
+
+
+
+ Welcome, {{ username }}!
+
+
+
+ Login |
+ Register
+
+
+
+
+
diff --git a/src/assets/base.css b/src/assets/base.css
index f4a2a5d..ea83d05 100755
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,11 +1,154 @@
-@media (prefers-color-scheme: dark) {
- :root {
- --color-surface0: #1e1e2e;
- --color-surface1: #313244;
- --color-surface2: #45475a;
- --color-text: #cdd6f4;
- --color-accent: #a6e3a1;
- --color-accent-hover: #89d58d;
- --color-border: #585b70;
- }
+/* Catppuccin Mocha */
+:root[data-theme="mocha"] {
+ --color-surface0: #1e1e2e; /* Base */
+ --color-surface1: #313244; /* Mantle */
+ --color-surface2: #45475a; /* Surface */
+ --color-text: #cdd6f4; /* Text */
+ --color-accent: #a6e3a1; /* Green */
+ --color-accent-hover: #89d58d; /* Hover Green */
+ --color-border: #585b70; /* Overlay */
+ --color-rosewater: #f5e0dc;
+ --color-flamingo: #f2cdcd;
+ --color-pink: #f5c2e7;
+ --color-mauve: #cba6f7;
+ --color-red: #f38ba8;
+ --color-maroon: #eba0ac;
+ --color-peach: #fab387;
+ --color-yellow: #f9e2af;
+ --color-teal: #94e2d5;
+ --color-sky: #89dceb;
+ --color-sapphire: #74c7ec;
+ --color-blue: #89b4fa;
+ --color-lavender: #b4befe;
+ --color-overlay0: #6c7086;
+ --color-overlay1: #7f849c;
+ --color-overlay2: #9399b2;
}
+
+/* Catppuccin Latte */
+:root[data-theme="latte"] {
+ --color-surface0: #eff1f5; /* Base */
+ --color-surface1: #e6e9ef; /* Mantle */
+ --color-surface2: #ccd0da; /* Surface */
+ --color-text: #4c4f69; /* Text */
+ --color-accent: #d7827e; /* Peach */
+ --color-accent-hover: #e04f58; /* Hover Peach */
+ --color-border: #9ca0b0; /* Overlay */
+ --color-rosewater: #dc8a78;
+ --color-flamingo: #dd7878;
+ --color-pink: #ea76cb;
+ --color-mauve: #8839ef;
+ --color-red: #d20f39;
+ --color-maroon: #e64553;
+ --color-peach: #fe640b;
+ --color-yellow: #df8e1d;
+ --color-teal: #40a02b;
+ --color-sky: #04a5e5;
+ --color-sapphire: #209fb5;
+ --color-blue: #1e66f5;
+ --color-lavender: #7287fd;
+ --color-overlay0: #6c6f85;
+ --color-overlay1: #8c8fa1;
+ --color-overlay2: #9ca0b0;
+}
+
+:root[data-theme="yule-night"] {
+ --color-surface0: #1b1d28; /* Deep midnight */
+ --color-surface1: #252936; /* Frosty steel */
+ --color-surface2: #343a48; /* Snow shadow */
+ --color-text: #d4e6f4; /* Pale moonlight */
+ --color-accent: #a3cf8e; /* Pine green */
+ --color-accent-hover: #7fb36a; /* Mistletoe */
+ --color-border: #475266; /* Frosty edges */
+}
+
+:root[data-theme="yule-day"] {
+ --color-surface0: #f5f3ed; /* Fresh snow */
+ --color-surface1: #ece7df; /* Frosty beige */
+ --color-surface2: #dcd3c3; /* Hearth ash */
+ --color-text: #4e4b43; /* Warm bark */
+ --color-accent: #7ea86a; /* Pine green */
+ --color-accent-hover: #577a46; /* Darker pine */
+ --color-border: #9d9684; /* Frosted wood */
+}
+
+:root[data-theme="midsummer-twilight"] {
+ --color-surface0: #241f36; /* Starry violet */
+ --color-surface1: #2e2746; /* Dusky purple */
+ --color-surface2: #403659; /* Twilight shadow */
+ --color-text: #f6d8e8; /* Fading pink */
+ --color-accent: #ffd983; /* Sunflower gold */
+ --color-accent-hover: #f4be5c; /* Saffron yellow */
+ --color-border: #6b5a89; /* Lavender dusk */
+}
+
+:root[data-theme="midsummer-daylight"] {
+ --color-surface0: #faf8eb; /* Bright sunlight */
+ --color-surface1: #f2e7c4; /* Sunlit field */
+ --color-surface2: #e6d399; /* Wheat gold */
+ --color-text: #3b3a24; /* Tree bark */
+ --color-accent: #f5c34e; /* Summer gold */
+ --color-accent-hover: #d69a30; /* Sunset orange */
+ --color-border: #a38a5b; /* Golden shadows */
+}
+
+:root[data-theme="fireworks-night"] {
+ --color-surface0: #0a0e1a; /* Starry sky */
+ --color-surface1: #121b32; /* Midnight blue */
+ --color-surface2: #1f2945; /* Smoke cloud */
+ --color-text: #ffffff; /* Brilliant white */
+ --color-accent: #ff4c4c; /* Firework red */
+ --color-accent-hover: #ff726f; /* Flaming red */
+ --color-border: #3b4e7e; /* Steel blue */
+}
+
+:root[data-theme="parade-day"] {
+ --color-surface0: #fafafa; /* White fabric */
+ --color-surface1: #eaeaea; /* Pale silver */
+ --color-surface2: #c9d3e3; /* Cerulean mist */
+ --color-text: #2b2b2b; /* Midnight blue */
+ --color-accent: #ff3b3b; /* Firework red */
+ --color-accent-hover: #cc2a2a; /* Deep crimson */
+ --color-border: #8795b4; /* Cloud blue */
+}
+
+:root[data-theme="harvest-twilight"] {
+ --color-surface0: #1d1b13; /* Shadowed wheat field */
+ --color-surface1: #29231a; /* Earthen soil */
+ --color-surface2: #4b3b27; /* Golden dusk */
+ --color-text: #f2e5ce; /* Pale harvest moon */
+ --color-accent: #e4a672; /* Pumpkin orange */
+ --color-accent-hover: #c88752; /* Rusted leaves */
+ --color-border: #5d4633; /* Bark brown */
+}
+
+:root[data-theme="golden-hour"] {
+ --color-surface0: #fef6e6; /* Golden wheat */
+ --color-surface1: #fdecc8; /* Honey glow */
+ --color-surface2: #fcd399; /* Pumpkin yellow */
+ --color-text: #533c24; /* Harvest bark */
+ --color-accent: #e78a4b; /* Autumn orange */
+ --color-accent-hover: #d06b34; /* Deep amber */
+ --color-border: #a88a5f; /* Field shadows */
+}
+
+:root[data-theme="stargazer"] {
+ --color-surface0: #0d1321; /* Midnight sky */
+ --color-surface1: #1c2533; /* Cloudy night */
+ --color-surface2: #283142; /* Subtle twilight */
+ --color-text: #d6e0f5; /* Starlight */
+ --color-accent: #62b6cb; /* Cool cyan */
+ --color-accent-hover: #89d3ed; /* Soft teal */
+ --color-border: #3e506a; /* Lunar blue */
+}
+
+:root[data-theme="daydreamer"] {
+ --color-surface0: #f9f9fc; /* Light paper */
+ --color-surface1: #eceef3; /* Morning mist */
+ --color-surface2: #d7dcea; /* Overcast sky */
+ --color-text: #2e3440; /* Quiet gray */
+ --color-accent: #5e81ac; /* Blue-gray calm */
+ --color-accent-hover: #81a1c1; /* Brighter sky blue */
+ --color-border: #b2c4d4; /* Subtle frost */
+}
+
diff --git a/src/assets/main.css b/src/assets/main.css
index 8b384b4..dc48fa0 100755
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -62,6 +62,56 @@ header nav a.router-link-exact-active {
font-weight: bold;
}
+/* Controls Section */
+.controls {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ background: var(--color-surface2);
+ border-bottom: 1px solid var(--color-border);
+ gap: 1rem;
+}
+
+.theme-selector {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.theme-selector select {
+ padding: 0.5rem;
+ border: 1px solid var(--color-border);
+ border-radius: 4px;
+ background: var(--color-surface0);
+ color: var(--color-text);
+}
+
+.theme-selector select:hover {
+ border-color: var(--color-accent);
+}
+
+.auth-controls {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+}
+
+.logout-button {
+ background: none;
+ border: 1px solid var(--color-accent);
+ color: var(--color-accent);
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+.logout-button:hover {
+ background: var(--color-accent);
+ color: var(--color-surface0);
+}
+
/* Main Content */
main {
margin-top: 2rem;
@@ -69,20 +119,20 @@ main {
/* Hero Section */
.hero {
- background: linear-gradient(135deg, #313244, #45475a); /* Catppuccin Mocha colors */
- color: #ffffff;
+ background: linear-gradient(135deg, var(--color-surface1), var(--color-surface2));
+ color: var(--color-text);
text-align: center;
- padding: 1rem 0.5rem; /* Reduced padding for smaller height */
+ padding: 1rem 0.5rem;
}
.hero h1 {
- font-size: 2rem; /* Smaller font size for the heading */
- margin-bottom: 0.5rem; /* Reduced bottom margin */
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
}
.hero p {
- font-size: 1.25rem; /* Smaller font size for the paragraph */
- margin: 0; /* No extra margin */
+ font-size: 1.25rem;
+ margin: 0;
}
/* Sections */
@@ -91,17 +141,17 @@ main {
}
.section-box {
- margin-bottom: 2rem; /* Reduced bottom margin for sections */
- padding: 1rem; /* Reduced padding inside the section box */
- background-color: #313244;
+ margin-bottom: 2rem;
+ padding: 1rem;
+ background-color: var(--color-surface1);
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.section-box h2 {
- font-size: 1.5rem; /* Slightly smaller font size for headers */
- margin: 0.5rem 0 1rem; /* Reduced top margin and kept space below */
- color: #a6e3a1;
+ font-size: 1.5rem;
+ margin: 0.5rem 0 1rem;
+ color: var(--color-accent);
}
.section-content {
@@ -110,8 +160,9 @@ main {
gap: 1.5rem;
}
+/* Cards */
.card {
- background-color: #45475a;
+ background-color: var(--color-surface2);
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -137,79 +188,525 @@ main {
}
.link {
- color: #a6e3a1;
+ color: var(--color-accent);
text-decoration: none;
padding: 0.5rem 1rem;
- background-color: #313244;
+ background-color: var(--color-surface1);
border-radius: 6px;
transition: background-color 0.3s;
}
.link:hover {
- background-color: #89d58d;
- color: #1e1e2e;
+ background-color: var(--color-accent-hover);
+ color: var(--color-surface0);
}
/* Footer */
.footer {
- background-color: #1e1e2e;
+ background-color: var(--color-surface2);
text-align: center;
padding: 1rem;
- color: #cdd6f4;
+ color: var(--color-text);
}
.footer a {
- color: #a6e3a1;
+ color: var(--color-accent);
text-decoration: none;
}
.footer a:hover {
- color: #89d58d;
+ color: var(--color-accent-hover);
}
-/* Responsive Navbar */
-@media (max-width: 768px) {
- header nav {
- flex-direction: column;
- text-align: center;
- }
-
- header nav a {
- padding: 0.5rem;
- font-size: 1rem;
- }
+/* Filters and Project Styles */
+.filter-bar {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
}
-/* Player Icon */
-.players-icon {
- color: #89b4fa;
+.filter-bar button {
+ background: var(--color-surface1);
+ color: var(--color-text);
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+
+.filter-bar button:hover,
+.filter-bar button.active {
+ background: var(--color-accent);
+ color: var(--color-surface0);
+}
+
+.project-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+
+.project-card {
+ background: var(--color-surface1);
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.project-card h3 {
+ font-size: 1.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.project-card p {
+ font-size: 1rem;
+ margin-bottom: 1rem;
+}
+
+/* Modal Styles */
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.7);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ background: var(--color-surface1);
+ color: var(--color-text);
+ padding: 2rem;
+ border-radius: 8px;
+ max-width: 600px;
+ width: 90%;
+ text-align: center;
+ overflow-y: auto;
+}
+
+.modal-content h2 {
+ margin-bottom: 1rem;
+}
+
+.close-button {
+ background: var(--color-accent);
+ color: var(--color-surface0);
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.close-button:hover {
+ background: var(--color-accent-hover);
+ transform: scale(1.05);
+}
+
+/* Servers View */
+.servers {
+ padding: 2rem;
+}
+
+.server-section {
+ margin-bottom: 2rem;
+}
+
+.server-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+}
+
+.server-card {
+ background-color: var(--color-surface1);
+ padding: 1rem;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ cursor: pointer;
+ transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.server-card:hover {
+ transform: scale(1.05);
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
+}
+
+.server-card h3 {
+ font-size: 1.25rem;
+ margin-bottom: 0.5rem;
+}
+
+.server-card p {
+ margin: 0;
+}
+
+/* Status Icons */
+.online {
+ color: var(--color-accent);
+}
+
+.offline {
+ color: #f7768e; /* Matches Catppuccin Mocha */
+}
+
+.unknown {
+ color: #cba6f7; /* Matches Catppuccin Mocha */
+}
+
+/* Modal Overlay */
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.7);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ background: var(--color-surface1);
+ color: var(--color-text);
+ padding: 2rem;
+ border-radius: 8px;
+ max-width: 600px;
+ width: 90%;
+ text-align: center;
+ overflow-y: auto;
+}
+
+.modal-content h2 {
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+}
+
+.modal-content p {
+ margin: 1rem 0;
+}
+
+.modal-content .banner {
+ max-width: 100%;
+ border-radius: 8px;
+ margin-bottom: 1rem;
+}
+
+.ip-display {
+ display: flex;
+ align-items: center;
+ margin: 0.5rem 0;
+}
+
+.ip {
+ background: var(--color-surface2);
+ padding: 0.5rem;
+ border-radius: 5px;
margin-right: 0.5rem;
}
-/* Copy Icon */
.copy-icon {
cursor: pointer;
- color: #89b4fa;
- margin-left: 0.5rem;
+ color: #89b4fa; /* Matches Catppuccin Mocha */
transition: color 0.2s;
}
.copy-icon:hover {
- color: #74a8e0;
+ color: #74a8e0; /* Matches Catppuccin Mocha */
}
-/* Status Icons */
-.online-icon {
- color: #a6e3a1;
- margin-right: 0.5rem;
+.close-button {
+ background: var(--color-accent);
+ color: var(--color-surface0);
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s ease, transform 0.2s ease;
}
-.offline-icon {
- color: #f38ba8;
- margin-right: 0.5rem;
+.close-button:hover {
+ background: var(--color-accent-hover);
+ transform: scale(1.05);
}
-.unknown-icon {
- color: #cba6f7;
- margin-right: 0.5rem;
+.close-button:active {
+ transform: scale(0.95);
+}
+
+/* Projects View */
+.projects {
+ padding: 2rem;
+ text-align: center;
+}
+
+.overview {
+ margin-bottom: 2rem;
+ font-size: 1.2rem;
+}
+
+.faq-button {
+ background: var(--color-accent);
+ color: var(--color-surface0);
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.3s, transform 0.2s ease;
+}
+
+.faq-button:hover {
+ background: var(--color-accent-hover);
+ transform: scale(1.05);
+}
+
+.faq-button:active {
+ transform: scale(0.95);
+}
+
+/* Filter Buttons */
+.filter-bar {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.filter-bar button {
+ background: var(--color-surface1);
+ color: var(--color-text);
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+
+.filter-bar button:hover,
+.filter-bar button.active {
+ background: var(--color-accent);
+ color: var(--color-surface0);
+}
+
+/* Project Grid */
+.project-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+
+.project-card {
+ background: var(--color-surface1);
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ text-align: left;
+}
+
+.project-card h3 {
+ font-size: 1.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.project-card p {
+ font-size: 1rem;
+ margin-bottom: 1rem;
+}
+
+.tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.tag {
+ background: var(--color-surface2);
+ color: var(--color-text);
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ font-size: 0.9rem;
+}
+
+/* FAQ Modal */
+/* Modal Overlay */
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.7);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ overflow-y: auto; /* Ensure overlay scrolls if content overflows */
+}
+
+/* Modal Content */
+.modal-content {
+ background: var(--color-surface1);
+ color: var(--color-text);
+ padding: 2rem;
+ border-radius: 8px;
+ max-width: 600px;
+ width: 90%;
+ max-height: 80vh; /* Limit the modal's height to 80% of the viewport */
+ overflow-y: auto; /* Enable vertical scrolling if content overflows */
+ text-align: left;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+/* Header in Modal */
+.modal-content h2 {
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+ text-align: center;
+}
+
+.faq-list {
+ list-style: none; /* Remove default bullet points */
+ padding: 0;
+ margin: 0;
+}
+
+.faq-list li {
+ margin-bottom: 1rem;
+}
+
+.faq-list strong {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: bold;
+}
+
+.faq-list p {
+ margin: 0.5rem 0 0;
+}
+
+/* Close Button */
+.close-button {
+ background: var(--color-accent);
+ color: var(--color-surface0);
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.3s ease, transform 0.2s ease;
+ margin-top: 1rem;
+}
+
+.close-button:hover {
+ background: var(--color-accent-hover);
+ transform: scale(1.05);
+}
+
+.close-button:active {
+ transform: scale(0.95);
+}
+
+/* Links Section */
+.links {
+ margin-top: 1rem;
+ font-size: 0.9rem;
+}
+
+.links p {
+ margin: 0.25rem 0;
+}
+
+.links a {
+ color: var(--color-accent);
+ text-decoration: none;
+}
+
+.links a:hover {
+ color: var(--color-accent-hover);
+ text-decoration: underline;
+}
+
+/* Login Page Styles */
+.login {
+ max-width: 400px;
+ margin: 2rem auto;
+ padding: 2rem;
+ background: var(--color-surface1);
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+.login h1 {
+ font-size: 2rem;
+ color: var(--color-accent);
+ margin-bottom: 1.5rem;
+}
+
+.login .form-group {
+ margin-bottom: 1rem;
+}
+
+.login input {
+ width: 100%;
+ padding: 0.75rem;
+ border: 1px solid var(--color-border);
+ border-radius: 4px;
+ background: var(--color-surface0);
+ color: var(--color-text);
+ font-size: 1rem;
+}
+
+.login input:focus {
+ outline: none;
+ border-color: var(--color-accent);
+ box-shadow: 0 0 4px var(--color-accent);
+}
+
+.login .btn-login {
+ background: var(--color-accent);
+ color: var(--color-surface0);
+ padding: 0.75rem 1.5rem;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: background 0.3s, transform 0.2s;
+}
+
+.login .btn-login:hover {
+ background: var(--color-accent-hover);
+ transform: scale(1.05);
+}
+
+.login .btn-login:active {
+ transform: scale(0.95);
+}
+
+.login .error {
+ color: #f7768e;
+ margin-top: 1rem;
+ font-size: 0.9rem;
+}
+
+.login .register-link {
+ margin-top: 1.5rem;
+ font-size: 0.9rem;
+}
+
+.login .register-link a {
+ color: var(--color-accent);
+ text-decoration: none;
+}
+
+.login .register-link a:hover {
+ text-decoration: underline;
}
diff --git a/src/authService.ts b/src/authService.ts
new file mode 100644
index 0000000..b514b76
--- /dev/null
+++ b/src/authService.ts
@@ -0,0 +1,21 @@
+import axios from "axios";
+
+const API_BASE = "http://localhost:3000"; // Update with your backend address
+
+export const register = async (username: string, password: string) => {
+ return axios.post(`${API_BASE}/register`, { username, password });
+};
+
+export const login = async (username: string, password: string) => {
+ const response = await axios.post(`${API_BASE}/login`, { username, password });
+ const token = response.data.token;
+ localStorage.setItem("token", token); // Save token for authenticated requests
+ return token;
+};
+
+export const getProtectedData = async () => {
+ const token = localStorage.getItem("token");
+ return axios.get(`${API_BASE}/protected`, {
+ headers: { Authorization: `Bearer ${token}` },
+ });
+};
diff --git a/src/router/index.ts b/src/router/index.ts
index fb8dbce..28ced4a 100755
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -9,13 +9,6 @@ const router = createRouter({
name: 'home',
component: HomeView,
},
- /* Rename name to the page name to add another page
- {
- path: '/name',
- name: 'name',
- component: () => import('../views/NameView.vue'),
- },
- */
{
path: '/servers',
name: 'servers',
@@ -26,6 +19,39 @@ const router = createRouter({
name: 'projects',
component: () => import('../views/ProjectsView.vue'),
},
+ {
+ path: '/login',
+ name: 'login',
+ component: () => import('../views/LoginView.vue'),
+ },
+ {
+ path: '/register',
+ name: 'register',
+ component: () => import('../views/RegisterView.vue'),
+ },
+ {
+ path: '/gallery',
+ name: 'gallery',
+ component: () => import('../views/GalleryView.vue'),
+ },
+ {
+ path: '/calendar',
+ name: 'calendar',
+ component: () => import('../views/CalendarView.vue'),
+ },
+ {
+ path: '/recipes',
+ name: 'recipes',
+ component: () => import('../views/RecipesView.vue'),
+ },
+ // Example for adding a new page
+ /*
+ {
+ path: '/your-new-page',
+ name: 'yourNewPage',
+ component: () => import('../views/YourNewPageView.vue'),
+ },
+ */
],
})
diff --git a/src/views/CalendarView.vue b/src/views/CalendarView.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/GalleryView.vue b/src/views/GalleryView.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ecdfd9e..3535694 100755
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -14,28 +14,31 @@
Family Resources
+
Sharkey
- Twitter alternative without a flood of Nazis.
- We manually approve all members + verify them outside of the net, too.
+ Twitter alternative without a flood of Nazis.
+ We manually approve all members + verify them outside of the net, too.
Fam & friends only to make an account in our space, but you can use any Sharkey/Mastodon/etc instance to register elsewhere and talk to us.
Go to Platform
-
+
+
+
Discord
- Connect with others on our private Discord... which is by invite only!
+ Connect with others on our private Discord... which is by invite only!
Sorry, you won't actually find the link here! If you're related to Starr, ask her about it.
-
+
-
+
Recipe Collection
Browse our curated family recipes, shared across generations.
Explore Recipes
@@ -49,16 +52,12 @@
Game Servers
-
Privately hosted servers for Minecraft, Garry's Mod, TF2, Terraria, and more. Clicking each game shows instructions to get on.
+
+ Privately hosted servers for Minecraft, Garry's Mod, TF2, Terraria, and more.
+ Clicking each game shows instructions to get on.
+
See Our Game Servers
-
@@ -68,7 +67,9 @@
Forgejo Repository
-
Access our code repositories and collaborate on development with our Forgejo instance.
+
+ Access our code repositories and collaborate on development with our Forgejo instance.
+
Visit Forgejo
@@ -78,7 +79,13 @@
-
+
+
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
new file mode 100644
index 0000000..0ddaee5
--- /dev/null
+++ b/src/views/LoginView.vue
@@ -0,0 +1,44 @@
+
+
+
Login
+
+
{{ error }}
+
+ Don't have an account? Register here.
+
+
+
+
+
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index 3adb35d..22edf41 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -175,171 +175,3 @@ export default {
},
};
-
-
diff --git a/src/views/RecipesView.vue b/src/views/RecipesView.vue
new file mode 100644
index 0000000..b01f68a
--- /dev/null
+++ b/src/views/RecipesView.vue
@@ -0,0 +1,253 @@
+
+
+
Recipes
+
+
+
+
+
+
+
+
+
+
+
+
+
![Recipe Image]()
+
{{ recipe.name }}
+
Type: {{ recipe.type }}
+
Made By: {{ recipe.madeBy }}
+
{{ recipe.description }}
+
+
+
+
+
+
+
Add Recipe
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
new file mode 100644
index 0000000..ae00ba0
--- /dev/null
+++ b/src/views/RegisterView.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
diff --git a/src/views/ServersView.vue b/src/views/ServersView.vue
index 5d2388d..8a87780 100644
--- a/src/views/ServersView.vue
+++ b/src/views/ServersView.vue
@@ -313,90 +313,3 @@ export default defineComponent({
},
});
-
-
diff --git a/tsconfig.app.json b/tsconfig.app.json
index e14c754..ef07f64 100755
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -9,6 +9,12 @@
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
- }
+ },
+
+ "resolveJsonModule": true,
+ "allowJs": true,
+ "strict": true,
+ "moduleResolution": "Node",
+ "types": ["vite/client"]
}
}
diff --git a/tsconfig.json b/tsconfig.json
index 5304731..ee3e9b5 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,6 +12,7 @@
}
],
"compilerOptions": {
- "module": "NodeNext"
+ "module": "NodeNext",
+ "moduleResolution": "NodeNext"
}
}