It's just the beginning.
This commit is contained in:
parent
b23e6f8434
commit
2f586a91ff
13 changed files with 965 additions and 426 deletions
|
|
@ -4,9 +4,11 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Vite App</title>
|
<title>Landing Tower</title>
|
||||||
|
<script src="https://kit.fontawesome.com/8ba170aa81.js" crossorigin="anonymous"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- The app will be rendered here. See src/App.vue -->
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
81
src/App.vue
81
src/App.vue
|
|
@ -1,85 +1,22 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { RouterLink, RouterView } from 'vue-router'
|
import { RouterLink, RouterView } from 'vue-router'
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<div id="app">
|
||||||
<header>
|
<header>
|
||||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
|
||||||
|
|
||||||
<div class="wrapper">
|
|
||||||
<HelloWorld msg="You did it!" />
|
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<RouterLink to="/">Home</RouterLink>
|
<RouterLink to="/">Home</RouterLink>
|
||||||
<RouterLink to="/about">About</RouterLink>
|
<RouterLink to="/servers">Servers</RouterLink>
|
||||||
|
<RouterLink to="/projects">Projects</RouterLink>
|
||||||
|
<a href="" target="_blank">Foundry VTT</a>
|
||||||
|
<a href="https://social.smgames.club/" target="_blank">Social</a>
|
||||||
|
<a href="https://madstar.studio" target="_blank">Shop</a>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
<RouterView />
|
<RouterView />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
header {
|
|
||||||
line-height: 1.5;
|
|
||||||
max-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a.router-link-exact-active {
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a.router-link-exact-active:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 1rem;
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:first-of-type {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
padding-right: calc(var(--section-gap) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
margin: 0 2rem 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header .wrapper {
|
|
||||||
display: flex;
|
|
||||||
place-items: flex-start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
text-align: left;
|
|
||||||
margin-left: -1rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
padding: 1rem 0;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,86 +1,11 @@
|
||||||
/* 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) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--color-background: var(--vt-c-black);
|
--color-surface0: #1e1e2e;
|
||||||
--color-background-soft: var(--vt-c-black-soft);
|
--color-surface1: #313244;
|
||||||
--color-background-mute: var(--vt-c-black-mute);
|
--color-surface2: #45475a;
|
||||||
|
--color-text: #cdd6f4;
|
||||||
--color-border: var(--vt-c-divider-dark-2);
|
--color-accent: #a6e3a1;
|
||||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
--color-accent-hover: #89d58d;
|
||||||
|
--color-border: #585b70;
|
||||||
--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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,215 @@
|
||||||
@import './base.css';
|
@import './base.css';
|
||||||
|
|
||||||
|
/* General Body Styles */
|
||||||
|
body {
|
||||||
|
background: var(--color-surface0);
|
||||||
|
color: var(--color-text);
|
||||||
|
font-family: Inter, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* App Container */
|
||||||
#app {
|
#app {
|
||||||
max-width: 1280px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem;
|
padding: 1rem;
|
||||||
font-weight: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
/* Links */
|
||||||
.green {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: hsla(160, 100%, 37%, 1);
|
color: var(--color-accent);
|
||||||
transition: 0.4s;
|
transition: color 0.3s, background-color 0.3s;
|
||||||
padding: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (hover: hover) {
|
a:hover {
|
||||||
a:hover {
|
color: var(--color-accent-hover);
|
||||||
background-color: hsla(160, 100%, 37%, 0.2);
|
background-color: var(--color-surface1);
|
||||||
}
|
border-radius: 4px;
|
||||||
|
text-decoration: underline overline;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
/* Header */
|
||||||
body {
|
header {
|
||||||
|
background: var(--color-surface1);
|
||||||
|
padding: 1rem;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
place-items: center;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav a {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--color-accent);
|
||||||
|
transition: color 0.3s, background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav a:hover {
|
||||||
|
color: var(--color-accent-hover);
|
||||||
|
background-color: var(--color-surface1);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav a.router-link-exact-active {
|
||||||
|
color: var(--color-text);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Content */
|
||||||
|
main {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.hero {
|
||||||
|
background: linear-gradient(135deg, #313244, #45475a); /* Catppuccin Mocha colors */
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem 0.5rem; /* Reduced padding for smaller height */
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 2rem; /* Smaller font size for the heading */
|
||||||
|
margin-bottom: 0.5rem; /* Reduced bottom margin */
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 1.25rem; /* Smaller font size for the paragraph */
|
||||||
|
margin: 0; /* No extra margin */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections */
|
||||||
|
.sections {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-box {
|
||||||
|
margin-bottom: 2rem; /* Reduced bottom margin for sections */
|
||||||
|
padding: 1rem; /* Reduced padding inside the section box */
|
||||||
|
background-color: #313244;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: #45475a;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card p {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card ul li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
color: #a6e3a1;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background-color: #313244;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
background-color: #89d58d;
|
||||||
|
color: #1e1e2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
background-color: #1e1e2e;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem;
|
||||||
|
color: #cdd6f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: #a6e3a1;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a:hover {
|
||||||
|
color: #89d58d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Navbar */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
header nav {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
header nav a {
|
||||||
display: grid;
|
padding: 0.5rem;
|
||||||
grid-template-columns: 1fr 1fr;
|
font-size: 1rem;
|
||||||
padding: 0 2rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Player Icon */
|
||||||
|
.players-icon {
|
||||||
|
color: #89b4fa;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Copy Icon */
|
||||||
|
.copy-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #89b4fa;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon:hover {
|
||||||
|
color: #74a8e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status Icons */
|
||||||
|
.online-icon {
|
||||||
|
color: #a6e3a1;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offline-icon {
|
||||||
|
color: #f38ba8;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unknown-icon {
|
||||||
|
color: #cba6f7;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
defineProps<{
|
|
||||||
msg: string
|
|
||||||
}>()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="greetings">
|
|
||||||
<h1 class="green">{{ msg }}</h1>
|
|
||||||
<h3>
|
|
||||||
You’ve successfully created a project with
|
|
||||||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
|
||||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
h1 {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 2.6rem;
|
|
||||||
position: relative;
|
|
||||||
top: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.greetings h1,
|
|
||||||
.greetings h3 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.greetings h1,
|
|
||||||
.greetings h3 {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import WelcomeItem from './WelcomeItem.vue'
|
|
||||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
|
||||||
import ToolingIcon from './icons/IconTooling.vue'
|
|
||||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
|
||||||
import CommunityIcon from './icons/IconCommunity.vue'
|
|
||||||
import SupportIcon from './icons/IconSupport.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<DocumentationIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Documentation</template>
|
|
||||||
|
|
||||||
Vue’s
|
|
||||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
|
||||||
provides you with all information you need to get started.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<ToolingIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Tooling</template>
|
|
||||||
|
|
||||||
This project is served and bundled with
|
|
||||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
|
||||||
recommended IDE setup is
|
|
||||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
|
||||||
+
|
|
||||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
|
|
||||||
you need to test your components and web pages, check out
|
|
||||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
|
||||||
and
|
|
||||||
<a href="https://on.cypress.io/component" target="_blank" rel="noopener"
|
|
||||||
>Cypress Component Testing</a
|
|
||||||
>.
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
More instructions are available in <code>README.md</code>.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<EcosystemIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Ecosystem</template>
|
|
||||||
|
|
||||||
Get official tools and libraries for your project:
|
|
||||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
|
||||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
|
||||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
|
||||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
|
||||||
you need more resources, we suggest paying
|
|
||||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
|
||||||
a visit.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<CommunityIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Community</template>
|
|
||||||
|
|
||||||
Got stuck? Ask your question on
|
|
||||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
|
|
||||||
Discord server, or
|
|
||||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
|
||||||
>StackOverflow</a
|
|
||||||
>. You should also subscribe to
|
|
||||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a>
|
|
||||||
and follow the official
|
|
||||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
|
||||||
twitter account for latest news in the Vue world.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<SupportIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Support Vue</template>
|
|
||||||
|
|
||||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
|
||||||
us by
|
|
||||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
|
||||||
</WelcomeItem>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="item">
|
|
||||||
<i>
|
|
||||||
<slot name="icon"></slot>
|
|
||||||
</i>
|
|
||||||
<div class="details">
|
|
||||||
<h3>
|
|
||||||
<slot name="heading"></slot>
|
|
||||||
</h3>
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.item {
|
|
||||||
margin-top: 2rem;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
place-content: center;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
color: var(--color-heading);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.item {
|
|
||||||
margin-top: 0;
|
|
||||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
top: calc(50% - 25px);
|
|
||||||
left: -26px;
|
|
||||||
position: absolute;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
background: var(--color-background);
|
|
||||||
border-radius: 8px;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:before {
|
|
||||||
content: ' ';
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: calc(50% + 25px);
|
|
||||||
height: calc(50% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:after {
|
|
||||||
content: ' ';
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: calc(50% + 25px);
|
|
||||||
height: calc(50% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:first-of-type:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:last-of-type:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -9,13 +9,22 @@ const router = createRouter({
|
||||||
name: 'home',
|
name: 'home',
|
||||||
component: HomeView,
|
component: HomeView,
|
||||||
},
|
},
|
||||||
|
/* Rename name to the page name to add another page
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/name',
|
||||||
name: 'about',
|
name: 'name',
|
||||||
// route level code-splitting
|
component: () => import('../views/NameView.vue'),
|
||||||
// this generates a separate chunk (About.[hash].js) for this route
|
},
|
||||||
// which is lazy-loaded when the route is visited.
|
*/
|
||||||
component: () => import('../views/AboutView.vue'),
|
{
|
||||||
|
path: '/servers',
|
||||||
|
name: 'servers',
|
||||||
|
component: () => import('../views/ServersView.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/projects',
|
||||||
|
name: 'projects',
|
||||||
|
component: () => import('../views/ProjectsView.vue'),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="about">
|
|
||||||
<h1>This is an about page</h1>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.about {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,9 +1,84 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import TheWelcome from '../components/TheWelcome.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<div class="landing-page">
|
||||||
<TheWelcome />
|
<header class="hero">
|
||||||
</main>
|
<div class="hero-content">
|
||||||
|
<h1>Welcome to the Server Tower</h1>
|
||||||
|
<p>
|
||||||
|
Explore our hosted tools, services, and projects for personal use, family, and creative endeavors.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="sections">
|
||||||
|
<!-- Family Content -->
|
||||||
|
<div class="section-box">
|
||||||
|
<h2>Family Resources</h2>
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="card">
|
||||||
|
<h3>Sharkey</h3>
|
||||||
|
<p>
|
||||||
|
Twitter alternative without a flood of Nazis.<br><br>
|
||||||
|
We manually approve all members + verify them outside of the net, too.<br><br>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<a href="https://social.smgames.club/" class="link">Go to Platform</a>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Discord</h3>
|
||||||
|
<p>
|
||||||
|
Connect with others on our private Discord... which is by invite only!<br><br>
|
||||||
|
Sorry, you won't actually find the link here! If you're related to Starr, ask her about it.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Photo Gallery</h3>
|
||||||
|
<p>Explore our collection of family photos, preserved for generations.</p>
|
||||||
|
<a href="/photos" class="link">View Photos</a>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Recipe Collection</h3>
|
||||||
|
<p>Browse our curated family recipes, shared across generations.</p>
|
||||||
|
<a href="/recipes" class="link">Explore Recipes</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Gaming Content -->
|
||||||
|
<div class="section-box">
|
||||||
|
<h2>Gaming</h2>
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="card">
|
||||||
|
<h3>Game Servers</h3>
|
||||||
|
<p>Privately hosted servers for Minecraft, Garry's Mod, TF2, Terraria, and more. Clicking each game shows instructions to get on.</p>
|
||||||
|
<a href="/servers" class="link">See Our Game Servers</a>
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
|
<div class="card">
|
||||||
|
<h3>Server Dashboard</h3>
|
||||||
|
<p>Manage and monitor our hosted game servers in one place.</p>
|
||||||
|
<a href="/server-dashboard" class="link">Open Dashboard</a>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Projects -->
|
||||||
|
<div class="section-box">
|
||||||
|
<h2>Development Projects</h2>
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="card">
|
||||||
|
<h3>Forgejo Repository</h3>
|
||||||
|
<p>Access our code repositories and collaborate on development with our Forgejo instance.</p>
|
||||||
|
<a href="https://git.smgames.club/" class="link" target="_blank">Visit Forgejo</a>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Game Development</h3>
|
||||||
|
<p>Explore the games and tools actively being developed by our team.</p>
|
||||||
|
<a href="/projects" class="link">View Projects</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
317
src/views/ProjectsView.vue
Normal file
317
src/views/ProjectsView.vue
Normal file
|
|
@ -0,0 +1,317 @@
|
||||||
|
<template>
|
||||||
|
<div class="projects">
|
||||||
|
<h1>Our Projects</h1>
|
||||||
|
|
||||||
|
<!-- Overview Section -->
|
||||||
|
<div class="overview">
|
||||||
|
<p>
|
||||||
|
Welcome to our projects page! We create <strong>websites</strong>, <strong>video games</strong>,
|
||||||
|
<strong>addons for games</strong>, <strong>avatars and worlds for VRChat</strong>, and
|
||||||
|
<strong>game assets</strong>. Explore our ongoing projects below.
|
||||||
|
</p>
|
||||||
|
<button @click="showFaqModal = true" class="faq-button">FAQ</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filter Buttons -->
|
||||||
|
<div class="filter-bar">
|
||||||
|
<button v-for="tag in tags" :key="tag" @click="filterByTag(tag)" :class="{ active: selectedTag === tag }">
|
||||||
|
{{ tag }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Projects Grid -->
|
||||||
|
<div class="project-grid">
|
||||||
|
<div
|
||||||
|
v-for="project in filteredProjects"
|
||||||
|
:key="project.name"
|
||||||
|
class="project-card"
|
||||||
|
>
|
||||||
|
<h3>{{ project.name }}</h3>
|
||||||
|
<p>{{ project.description }}</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li v-for="tag in project.tags" :key="tag" class="tag">{{ tag }}</li>
|
||||||
|
</ul>
|
||||||
|
<div class="links">
|
||||||
|
<p v-if="project.links.public"><strong>Public:</strong> <a :href="project.links.public" target="_blank">{{ project.links.public }}</a></p>
|
||||||
|
<p v-if="project.links.local"><strong>Local:</strong> <a :href="project.links.local" target="_blank">{{ project.links.local }}</a></p>
|
||||||
|
<p v-if="project.links.testing"><strong>Testing:</strong> <a :href="project.links.testing" target="_blank">{{ project.links.testing }}</a></p>
|
||||||
|
<p v-if="project.links.wiki"><strong>Wiki:</strong> <a :href="project.links.wiki" target="_blank">{{ project.links.wiki }}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FAQ Modal -->
|
||||||
|
<div v-if="showFaqModal" class="modal-overlay" @click="closeFaqModal">
|
||||||
|
<div class="modal-content" @click.stop>
|
||||||
|
<h2>Frequently Asked Questions</h2>
|
||||||
|
<ul class="faq-list">
|
||||||
|
<li>
|
||||||
|
<strong>Do you need an idea person?</strong>
|
||||||
|
<p>No. Not now, likely not ever.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Do you need an asset creator? What would you pay me?</strong>
|
||||||
|
<p>
|
||||||
|
This applies to graphics, models, sounds, music, etc. Racing to tell us random ideas and demanding payment isn't how this works.
|
||||||
|
Provide a portfolio and your price sheets. We offer indie rates based on quality. If all you can offer is low-quality work, others will carry the load for you.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>If I'm hired to work on sound effects, that means I'm the sound director, right?</strong>
|
||||||
|
<p>No, it doesn't. Roles like "director" require experience, leadership, and proven track records. Don't expect a salary or profit share from a freelance role.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Well, how much WOULD you pay me?</strong>
|
||||||
|
<p>Provide your portfolio and rates. If you don’t have one, we'll assess based on <i>your</i> quality against indie standards.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>(Discussion that includes:) "My idea, COPYRIGHT!"</strong>
|
||||||
|
<p>In no fucking world does this work, my dude. Ideas aren't copyrightable - tangible things like art, sound effects, full games, etc <i>are</i>. If you seriously believe otherwise... grow up, seriously.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button @click="closeFaqModal" class="close-button">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showFaqModal: false,
|
||||||
|
selectedTag: "All",
|
||||||
|
tags: ["All", "Website", "PC", "Singleplayer", "Multiplayer", "ALPHA", "Horror", "Relaxing", "Sim", "RPG"],
|
||||||
|
projects: [
|
||||||
|
{
|
||||||
|
name: "Wildspace",
|
||||||
|
description: "A browser pet game.",
|
||||||
|
tags: ["Website", "Multiplayer", "ALPHA"],
|
||||||
|
links: {
|
||||||
|
public: "https://thewild.space",
|
||||||
|
local: null,
|
||||||
|
testing: null,
|
||||||
|
wiki: "wiki.smgames.club/wildspace",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Ghostbound",
|
||||||
|
description: "A ghost hunting game.",
|
||||||
|
tags: ["PC", "Singleplayer", "Multiplayer", "ALPHA", "Horror", "Team"],
|
||||||
|
links: {
|
||||||
|
public: null,
|
||||||
|
local: null,
|
||||||
|
testing: null,
|
||||||
|
wiki: "wiki.smgames.club/ghostbound",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '"Island"',
|
||||||
|
description: "A cozy play-at-your-pace game.",
|
||||||
|
tags: ["PC", "Singleplayer", "Multiplayer", "ALPHA", "Relaxing", "Sim"],
|
||||||
|
links: {
|
||||||
|
public: null,
|
||||||
|
local: null,
|
||||||
|
testing: null,
|
||||||
|
wiki: "wiki.smgames.club/island",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '"Random RPG"',
|
||||||
|
description: "An RPG game with actions and consequences.",
|
||||||
|
tags: ["PC", "Singleplayer", "ALPHA", "RPG"],
|
||||||
|
links: {
|
||||||
|
public: null,
|
||||||
|
local: null,
|
||||||
|
testing: null,
|
||||||
|
wiki: "wiki.smgames.club/randomrpg",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
filteredProjects() {
|
||||||
|
if (this.selectedTag === "All") return this.projects;
|
||||||
|
return this.projects.filter((project) =>
|
||||||
|
project.tags.includes(this.selectedTag)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
filterByTag(tag) {
|
||||||
|
this.selectedTag = tag;
|
||||||
|
},
|
||||||
|
closeFaqModal() {
|
||||||
|
this.showFaqModal = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.links {
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links p {
|
||||||
|
margin: 0.25rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links a {
|
||||||
|
color: #89b4fa;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links a:hover {
|
||||||
|
color: #b4befe;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects {
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar button {
|
||||||
|
background: #313244;
|
||||||
|
color: #cdd6f4;
|
||||||
|
border: none;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar button:hover,
|
||||||
|
.filter-bar button.active {
|
||||||
|
background: #89b4fa;
|
||||||
|
color: #1e1e2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card {
|
||||||
|
background: #313244;
|
||||||
|
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: #45475a;
|
||||||
|
color: #cdd6f4;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #1e1e2e;
|
||||||
|
color: #cdd6f4;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
max-width: 600px;
|
||||||
|
width: 90%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content h2 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-list li {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-list strong {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button {
|
||||||
|
background: #f7768e;
|
||||||
|
color: #1e1e2e;
|
||||||
|
border: none;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button:hover {
|
||||||
|
background: #f38ba8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-button {
|
||||||
|
background: #89b4fa;
|
||||||
|
color: #1e1e2e;
|
||||||
|
border: none;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-button:hover {
|
||||||
|
background: #74a8e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
289
src/views/ServersView.vue
Normal file
289
src/views/ServersView.vue
Normal file
|
|
@ -0,0 +1,289 @@
|
||||||
|
<template>
|
||||||
|
<div class="servers">
|
||||||
|
<h1>Game Servers</h1>
|
||||||
|
|
||||||
|
<!-- Always On Section -->
|
||||||
|
<section class="server-section">
|
||||||
|
<h2>Always On</h2>
|
||||||
|
<div class="server-grid">
|
||||||
|
<div
|
||||||
|
v-for="(server, name) in alwaysOnServers"
|
||||||
|
:key="name"
|
||||||
|
class="server-card"
|
||||||
|
@click="openModal(name)"
|
||||||
|
>
|
||||||
|
<h3>{{ name }}</h3>
|
||||||
|
<p>Status: <span :class="server.status">{{ server.status }}</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Toggled Section -->
|
||||||
|
<section class="server-section">
|
||||||
|
<h2>Toggled On/Off As Needed</h2>
|
||||||
|
<div class="server-grid">
|
||||||
|
<div
|
||||||
|
v-for="(server, name) in toggledServers"
|
||||||
|
:key="name"
|
||||||
|
class="server-card"
|
||||||
|
@click="openModal(name)"
|
||||||
|
>
|
||||||
|
<h3>{{ name }}</h3>
|
||||||
|
<p>Status: <span :class="server.status">{{ server.status }}</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Modal -->
|
||||||
|
<div v-if="showModal" class="modal-overlay" @click="closeModal">
|
||||||
|
<div class="modal-content" @click.stop>
|
||||||
|
<img v-if="modalData.banner" :src="modalData.banner" alt="Server Banner" class="banner" />
|
||||||
|
<h2>{{ modalData.name || 'No Server Selected' }}</h2>
|
||||||
|
<p>Status:
|
||||||
|
<span :class="modalData.status">
|
||||||
|
<i v-if="modalData.status === 'online'" class="fas fa-check-circle online-icon"></i>
|
||||||
|
<i v-else-if="modalData.status === 'offline'" class="fas fa-times-circle offline-icon"></i>
|
||||||
|
<i v-else class="fas fa-question-circle unknown-icon"></i>
|
||||||
|
{{ modalData.status || 'unknown' }}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<i class="fas fa-users players-icon"></i>
|
||||||
|
Players Online: {{ modalData.playersOnline || 0 }} / {{ modalData.maxPlayers || 0 }}
|
||||||
|
</p>
|
||||||
|
<h3>About</h3>
|
||||||
|
<p v-if="modalData.about" v-html="modalData.about"></p>
|
||||||
|
<p v-else>No description available.</p>
|
||||||
|
<h3>Connection Instructions</h3>
|
||||||
|
<div v-if="modalData.instructions">
|
||||||
|
<p class="ip-display" v-if="modalData.instructions.public">
|
||||||
|
Public:
|
||||||
|
<span class="ip">{{ modalData.instructions.public }}</span>
|
||||||
|
</p>
|
||||||
|
<p class="ip-display" v-if="modalData.instructions.local">
|
||||||
|
Local:
|
||||||
|
<span class="ip">{{ modalData.instructions.local }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a v-if="modalData.link" :href="modalData.link" target="_blank" class="link">
|
||||||
|
Download Modpack
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button @click="closeModal" class="close-button">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false,
|
||||||
|
modalData: {},
|
||||||
|
alwaysOnServers: {
|
||||||
|
"Minecraft Java Modern": {
|
||||||
|
banner: "minecraft-modern-banner.jpg",
|
||||||
|
status: "unknown",
|
||||||
|
playersOnline: 0,
|
||||||
|
maxPlayers: 20,
|
||||||
|
about: "This is the modern Minecraft Java server.",
|
||||||
|
instructions: {
|
||||||
|
public: "",
|
||||||
|
local: "192.168.1.201",
|
||||||
|
},
|
||||||
|
queryIP: "",
|
||||||
|
link: "",
|
||||||
|
},
|
||||||
|
"Minecraft Java 1.12.2": {
|
||||||
|
banner: "minecraft-1-12-banner.jpg",
|
||||||
|
status: "unknown",
|
||||||
|
playersOnline: 0,
|
||||||
|
maxPlayers: 10,
|
||||||
|
about: "This is the Minecraft Java 1.12.2 server with mods.",
|
||||||
|
instructions: {
|
||||||
|
public: "",
|
||||||
|
local: "192.168.1.3",
|
||||||
|
},
|
||||||
|
queryIP: "",
|
||||||
|
link: "",
|
||||||
|
},
|
||||||
|
Terraria: {
|
||||||
|
banner: "terraria-banner.jpg",
|
||||||
|
status: "unknown",
|
||||||
|
playersOnline: 0,
|
||||||
|
maxPlayers: 8,
|
||||||
|
about: "Our modded Terraria instance for friends and family.",
|
||||||
|
instructions: {
|
||||||
|
public: "",
|
||||||
|
local: "192.168.1.121",
|
||||||
|
},
|
||||||
|
queryIP: "",
|
||||||
|
link: "",
|
||||||
|
},
|
||||||
|
"Team Fortress 2": {
|
||||||
|
banner: "tf2-banner.jpg",
|
||||||
|
status: "unknown",
|
||||||
|
playersOnline: 0,
|
||||||
|
maxPlayers: 16,
|
||||||
|
about: "Classic Team Fortress 2 fun with friends.",
|
||||||
|
instructions: {
|
||||||
|
public: "",
|
||||||
|
local: "192.168.1.203",
|
||||||
|
},
|
||||||
|
queryIP: "",
|
||||||
|
link: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
toggledServers: {
|
||||||
|
"Core Keeper": {
|
||||||
|
banner: "tf2-banner.jpg",
|
||||||
|
status: "unknown",
|
||||||
|
playersOnline: 0,
|
||||||
|
maxPlayers: 16,
|
||||||
|
about: "...",
|
||||||
|
instructions: {
|
||||||
|
public: "",
|
||||||
|
local: "192.168.1.204",
|
||||||
|
},
|
||||||
|
queryIP: "",
|
||||||
|
link: null,
|
||||||
|
},
|
||||||
|
ECO: { status: "unknown", queryIP: "http://eco.example.com/status" },
|
||||||
|
Enshrouded: { status: "unknown", queryIP: "http://enshrouded.example.com/status" },
|
||||||
|
Empyrion: { status: "unknown", queryIP: "http://empyrion.example.com/status" },
|
||||||
|
Palworld: { status: "unknown", queryIP: "http://palworld.example.com/status" },
|
||||||
|
"Survive The Nights": { status: "unknown", queryIP: "http://survivethenights.example.com/status" },
|
||||||
|
Valheim: { status: "unknown", queryIP: "http://valheim.example.com/status" },
|
||||||
|
"V Rising": { status: "unknown", queryIP: "http://vrising.example.com/status" },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
openModal(serverName) {
|
||||||
|
console.log("Opening modal for:", serverName); // Debugging log
|
||||||
|
this.modalData = this.alwaysOnServers[serverName] || this.toggledServers[serverName] || {};
|
||||||
|
console.log("Modal data:", this.modalData); // Debugging log
|
||||||
|
this.modalData.name = serverName;
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
closeModal() {
|
||||||
|
this.showModal = false;
|
||||||
|
},
|
||||||
|
async queryServerStatus(serverName, queryIP) {
|
||||||
|
try {
|
||||||
|
console.log(`Querying status for ${serverName} at ${queryIP}...`);
|
||||||
|
const response = await fetch(queryIP);
|
||||||
|
const data = await response.json();
|
||||||
|
const server = this.alwaysOnServers[serverName] || this.toggledServers[serverName];
|
||||||
|
server.status = data.status || "unknown";
|
||||||
|
server.playersOnline = data.playersOnline || 0;
|
||||||
|
server.maxPlayers = data.maxPlayers || server.maxPlayers || 0;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Failed to fetch status for ${serverName}:`, error);
|
||||||
|
const server = this.alwaysOnServers[serverName] || this.toggledServers[serverName];
|
||||||
|
server.status = "unknown";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
queryAllServerStatuses() {
|
||||||
|
for (const [serverName, server] of Object.entries(this.alwaysOnServers)) {
|
||||||
|
if (server.queryIP) this.queryServerStatus(serverName, server.queryIP);
|
||||||
|
}
|
||||||
|
for (const [serverName, server] of Object.entries(this.toggledServers)) {
|
||||||
|
if (server.queryIP) this.queryServerStatus(serverName, server.queryIP);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.queryAllServerStatuses();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.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: #313244;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.server-card:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.online {
|
||||||
|
color: #a6e3a1;
|
||||||
|
}
|
||||||
|
.offline {
|
||||||
|
color: #f38ba8;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
background: #1e1e2e;
|
||||||
|
color: #cdd6f4;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 500px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ip-display {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ip {
|
||||||
|
background: #313244;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
.copy-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #89b4fa;
|
||||||
|
}
|
||||||
|
.copy-icon:hover {
|
||||||
|
color: #74a8e0;
|
||||||
|
}
|
||||||
|
.close-button {
|
||||||
|
background: #89b4fa; /* Blue tone for the primary button */
|
||||||
|
color: #1e1e2e; /* Text color matches the modal content background */
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s ease, transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button:hover {
|
||||||
|
background: #74a8e0; /* Slightly lighter blue for hover effect */
|
||||||
|
transform: scale(1.05); /* Subtle hover animation for interaction */
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button:active {
|
||||||
|
background: #89b4fa; /* Restore original color for active state */
|
||||||
|
transform: scale(0.95); /* Slight press-down effect */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
38
vitest.config.ts.timestamp-1731731774511-56c1b00b4b5b7.mjs
Normal file
38
vitest.config.ts.timestamp-1731731774511-56c1b00b4b5b7.mjs
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
// vitest.config.ts
|
||||||
|
import { fileURLToPath as fileURLToPath2 } from "node:url";
|
||||||
|
import { mergeConfig, defineConfig as defineConfig2, configDefaults } from "file:///D:/Projects/hub-site/node_modules/vitest/dist/config.js";
|
||||||
|
|
||||||
|
// vite.config.ts
|
||||||
|
import { fileURLToPath, URL as URL2 } from "node:url";
|
||||||
|
import { defineConfig } from "file:///D:/Projects/hub-site/node_modules/vite/dist/node/index.js";
|
||||||
|
import vue from "file:///D:/Projects/hub-site/node_modules/@vitejs/plugin-vue/dist/index.mjs";
|
||||||
|
import vueDevTools from "file:///D:/Projects/hub-site/node_modules/vite-plugin-vue-devtools/dist/vite.mjs";
|
||||||
|
var __vite_injected_original_import_meta_url = "file:///D:/Projects/hub-site/vite.config.ts";
|
||||||
|
var vite_config_default = defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
vueDevTools()
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": fileURLToPath(new URL2("./src", __vite_injected_original_import_meta_url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// vitest.config.ts
|
||||||
|
var __vite_injected_original_import_meta_url2 = "file:///D:/Projects/hub-site/vitest.config.ts";
|
||||||
|
var vitest_config_default = mergeConfig(
|
||||||
|
vite_config_default,
|
||||||
|
defineConfig2({
|
||||||
|
test: {
|
||||||
|
environment: "jsdom",
|
||||||
|
exclude: [...configDefaults.exclude, "e2e/**"],
|
||||||
|
root: fileURLToPath2(new URL("./", __vite_injected_original_import_meta_url2))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
export {
|
||||||
|
vitest_config_default as default
|
||||||
|
};
|
||||||
|
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZXN0LmNvbmZpZy50cyIsICJ2aXRlLmNvbmZpZy50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIkQ6XFxcXFByb2plY3RzXFxcXGh1Yi1zaXRlXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJEOlxcXFxQcm9qZWN0c1xcXFxodWItc2l0ZVxcXFx2aXRlc3QuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9EOi9Qcm9qZWN0cy9odWItc2l0ZS92aXRlc3QuY29uZmlnLnRzXCI7aW1wb3J0IHsgZmlsZVVSTFRvUGF0aCB9IGZyb20gJ25vZGU6dXJsJ1xyXG5pbXBvcnQgeyBtZXJnZUNvbmZpZywgZGVmaW5lQ29uZmlnLCBjb25maWdEZWZhdWx0cyB9IGZyb20gJ3ZpdGVzdC9jb25maWcnXHJcbmltcG9ydCB2aXRlQ29uZmlnIGZyb20gJy4vdml0ZS5jb25maWcnXHJcblxyXG5leHBvcnQgZGVmYXVsdCBtZXJnZUNvbmZpZyhcclxuICB2aXRlQ29uZmlnLFxyXG4gIGRlZmluZUNvbmZpZyh7XHJcbiAgICB0ZXN0OiB7XHJcbiAgICAgIGVudmlyb25tZW50OiAnanNkb20nLFxyXG4gICAgICBleGNsdWRlOiBbLi4uY29uZmlnRGVmYXVsdHMuZXhjbHVkZSwgJ2UyZS8qKiddLFxyXG4gICAgICByb290OiBmaWxlVVJMVG9QYXRoKG5ldyBVUkwoJy4vJywgaW1wb3J0Lm1ldGEudXJsKSksXHJcbiAgICB9LFxyXG4gIH0pLFxyXG4pXHJcbiIsICJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiRDpcXFxcUHJvamVjdHNcXFxcaHViLXNpdGVcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkQ6XFxcXFByb2plY3RzXFxcXGh1Yi1zaXRlXFxcXHZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9EOi9Qcm9qZWN0cy9odWItc2l0ZS92aXRlLmNvbmZpZy50c1wiO2ltcG9ydCB7IGZpbGVVUkxUb1BhdGgsIFVSTCB9IGZyb20gJ25vZGU6dXJsJ1xyXG5cclxuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHZ1ZSBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUnXHJcbmltcG9ydCB2dWVEZXZUb29scyBmcm9tICd2aXRlLXBsdWdpbi12dWUtZGV2dG9vbHMnXHJcblxyXG4vLyBodHRwczovL3ZpdGUuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbXHJcbiAgICB2dWUoKSxcclxuICAgIHZ1ZURldlRvb2xzKCksXHJcbiAgXSxcclxuICByZXNvbHZlOiB7XHJcbiAgICBhbGlhczoge1xyXG4gICAgICAnQCc6IGZpbGVVUkxUb1BhdGgobmV3IFVSTCgnLi9zcmMnLCBpbXBvcnQubWV0YS51cmwpKVxyXG4gICAgfSxcclxuICB9LFxyXG59KVxyXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXdQLFNBQVMsaUJBQUFBLHNCQUFxQjtBQUN0UixTQUFTLGFBQWEsZ0JBQUFDLGVBQWMsc0JBQXNCOzs7QUNEMEwsU0FBUyxlQUFlLE9BQUFDLFlBQVc7QUFFdlIsU0FBUyxvQkFBb0I7QUFDN0IsT0FBTyxTQUFTO0FBQ2hCLE9BQU8saUJBQWlCO0FBSjZILElBQU0sMkNBQTJDO0FBT3RNLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVM7QUFBQSxJQUNQLElBQUk7QUFBQSxJQUNKLFlBQVk7QUFBQSxFQUNkO0FBQUEsRUFDQSxTQUFTO0FBQUEsSUFDUCxPQUFPO0FBQUEsTUFDTCxLQUFLLGNBQWMsSUFBSUMsS0FBSSxTQUFTLHdDQUFlLENBQUM7QUFBQSxJQUN0RDtBQUFBLEVBQ0Y7QUFDRixDQUFDOzs7QURqQnNKLElBQU1DLDRDQUEyQztBQUl4TSxJQUFPLHdCQUFRO0FBQUEsRUFDYjtBQUFBLEVBQ0FDLGNBQWE7QUFBQSxJQUNYLE1BQU07QUFBQSxNQUNKLGFBQWE7QUFBQSxNQUNiLFNBQVMsQ0FBQyxHQUFHLGVBQWUsU0FBUyxRQUFRO0FBQUEsTUFDN0MsTUFBTUMsZUFBYyxJQUFJLElBQUksTUFBTUYseUNBQWUsQ0FBQztBQUFBLElBQ3BEO0FBQUEsRUFDRixDQUFDO0FBQ0g7IiwKICAibmFtZXMiOiBbImZpbGVVUkxUb1BhdGgiLCAiZGVmaW5lQ29uZmlnIiwgIlVSTCIsICJVUkwiLCAiX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCIsICJkZWZpbmVDb25maWciLCAiZmlsZVVSTFRvUGF0aCJdCn0K
|
||||||
Loading…
Add table
Reference in a new issue