mad-star-studio/hub-site
2
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

It's just the beginning.

Browse source
This commit is contained in:
DesertMermaid 2024-11-15 20:36:25 -08:00
parent b23e6f8434
commit 2f586a91ff
13 changed files with 965 additions and 426 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -4,9 +4,11 @@
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<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>
<body>
<!-- The app will be rendered here. See src/App.vue -->
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

87
src/App.vue
View file

@ -1,85 +1,22 @@
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
<div id="app">
<header>
<nav>
<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>
</div>
</header>
</header>
<RouterView />
<main>
<RouterView />
</main>
</div>
</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>

89
src/assets/base.css
View file

@ -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) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
--color-surface0: #1e1e2e;
--color-surface1: #313244;
--color-surface2: #45475a;
--color-text: #cdd6f4;
--color-accent: #a6e3a1;
--color-accent-hover: #89d58d;
--color-border: #585b70;
}
}
*,
*::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;
}

224
src/assets/main.css
View file

@ -1,35 +1,215 @@
@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 {
max-width: 1280px;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
padding: 1rem;
}
a,
.green {
/* Links */
a {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
color: var(--color-accent);
transition: color 0.3s, background-color 0.3s;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
a:hover {
color: var(--color-accent-hover);
background-color: var(--color-surface1);
border-radius: 4px;
text-decoration: underline overline;
}
/* Header */
header {
background: var(--color-surface1);
padding: 1rem;
border-bottom: 1px solid var(--color-border);
}
header nav {
display: flex;
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;
}
header nav a {
padding: 0.5rem;
font-size: 1rem;
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
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;
}

41
src/components/HelloWorld.vue
View file

@ -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>

90
src/components/TheWelcome.vue
View file

@ -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>

87
src/components/WelcomeItem.vue
View file

@ -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>

21
src/router/index.ts
View file

@ -9,13 +9,22 @@ const router = createRouter({
name: 'home',
component: HomeView,
},
/* Rename name to the page name to add another page
{
path: '/about',
name: 'about',
// route level code-splitting
// 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: '/name',
name: 'name',
component: () => import('../views/NameView.vue'),
},
*/
{
path: '/servers',
name: 'servers',
component: () => import('../views/ServersView.vue'),
},
{
path: '/projects',
name: 'projects',
component: () => import('../views/ProjectsView.vue'),
},
],
})

15
src/views/AboutView.vue
View file

@ -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>

89
src/views/HomeView.vue
View file

@ -1,9 +1,84 @@
<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'
</script>
<template>
<main>
<TheWelcome />
</main>
<div class="landing-page">
<header class="hero">
<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>

317
src/views/ProjectsView.vue Normal file
View 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
View 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:&nbsp;&nbsp;
<span class="ip">{{ modalData.instructions.public }}</span>
</p>
<p class="ip-display" v-if="modalData.instructions.local">
Local:&nbsp;&nbsp;
<span class="ip">{{ modalData.instructions.local }}</span>
</p>
</div>
<a v-if="modalData.link" :href="modalData.link" target="_blank" class="link">
Download Modpack
</a>
&nbsp;
<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
View 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