Kizuren/kizuren.dev
1
0
Fork 0
mirror of https://github.com/Kizuren/kizuren.dev.git synced 2025-12-21 21:16:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changed styles. Added error page.

Browse source
This commit is contained in:
MarcUs7i 2025-05-29 00:16:04 +02:00
parent c3735e4716
commit 1969e08aa0
14 changed files with 5995 additions and 3218 deletions
Download patch file Download diff file Expand all files Collapse all files

25
pages/contact.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="flex flex-col items-center justify-center py-12 px-4">
<h1 class="text-3xl font-bold mb-12">Contact Me</h1>
<div class="flex flex-col items-center justify-center py-10 px-4">
<h1 class="text-3xl font-bold mb-9">Contact Me</h1>
<div class="w-full max-w-2xl">
<UForm
:schema="schema"
:state="state"
class="space-y-8 bg-gray-800 p-8 rounded-lg shadow-lg"
class="space-y-8 p-8 rounded-lg shadow-lg"
@submit="onSubmit"
>
<UFormField
@ -57,8 +57,7 @@
type="submit"
:loading="isSubmitting"
size="lg"
color="primary"
class="px-8 py-2"
class="green-button px-8 py-2"
>
Send Message
</UButton>
@ -69,21 +68,18 @@
</template>
<script setup lang="ts">
import { z } from 'zod'
useHead({
title: 'Contact'
})
import { z } from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'
const schema = z.object({
email: z.string().email({ message: 'Please enter a valid email address' }).min(1, { message: 'Email is required' }),
subject: z.string().min(3, { message: 'Subject must be at least 3 characters' }),
message: z.string().min(10, { message: 'Message must be at least 10 characters' })
})
type Schema = z.infer<typeof schema>
const state = reactive({
email: '',
subject: '',
@ -93,7 +89,7 @@ const state = reactive({
const isSubmitting = ref(false)
const toast = useToast()
async function onSubmit(event: FormSubmitEvent<Schema>) {
async function onSubmit() {
try {
isSubmitting.value = true
@ -123,14 +119,17 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
title: 'Message Sent!',
description: 'Your message has been sent successfully.',
icon: 'i-heroicons-check-circle',
color: 'success'
color: 'pixelgreen',
ui: {
root: '',
}
})
state.email = ''
state.subject = ''
state.message = ''
} catch (error) {
} catch {
toast.add({
title: 'Error',
description: 'Something went wrong. Please try again.',

8
pages/discord.vue
View file

@ -1,11 +1,11 @@
<template>
<div class="flex flex-col items-center justify-center min-h-screen px-4">
<div class="flex flex-col items-center justify-center min-h-[80vh] px-4">
<!-- Title -->
<h1 class="text-2xl font-bold mb-8">Redirecting to Discord...</h1>
<!-- Progress bar -->
<div class="w-full max-w-md mb-12">
<UProgress v-model="progress" color="primary" size="lg" />
<UProgress v-model="progress" color="pixelgreen" size="lg"/>
<p class="text-center mt-2 text-sm text-gray-500">
Redirecting in {{ Math.ceil(remainingTime) }} seconds...
</p>
@ -14,7 +14,7 @@
<UButton
size="xl"
:to="discordLink"
class="mt-4 text-lg px-8 py-4"
class="green-button mt-4 text-lg px-8 py-4"
icon="i-simple-icons-discord"
>
Don't wait - Join Now
@ -29,7 +29,7 @@ useHead({
const { config } = useSiteConfig()
const discordLink = ref(config.siteLinks['discord-invite'] || 'https://discord.gg/e37aq2wc66')
const discordLink = computed(() => config.siteLinks?.['discord-invite'] || '/maintenance')
// Progress state
const progress = ref(0)

48
pages/games.vue
View file

@ -1,16 +1,16 @@
<template>
<div class="flex flex-col items-center justify-center gap-8 pt-8">
<h1 class="font-bold text-5xl text-[--ui-primary] mt-10">
<h1 class="font-bold text-5xl mt-10">
Games
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl">
<div class="games-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl">
<UCard
v-for="game in games"
:key="game.title"
class="bg-gray-900 text-white shadow-lg"
class="big-button shadow-lg"
:ui="{
root: 'bg-gray-900 text-white flex flex-col h-full shadow-lg rounded-lg ring-1 ring-gray-700',
root: 'flex flex-col shadow-lg rounded-lg ring-1',
header: 'p-4 pb-0',
body: 'flex-grow p-4 pt-2',
footer: 'p-4 pt-0'
@ -34,27 +34,25 @@
</UBadge>
</div>
<!-- Game Title -->
<h2 class="text-xl font-bold mt-4">{{ game.title }}</h2>
<div class="card-content">
<h2 class="text-xl mt-4">{{ game.title }}</h2>
<p class="mt-2">{{ game.description }}</p>
</div>
<!-- Game Description -->
<p class="text-gray-400 mt-2">{{ game.description }}</p>
<!-- Separator -->
<USeparator class="my-3" />
<!-- Game Links -->
<div class="flex gap-4 mt-2">
<a
v-for="link in game.url || []"
:key="link.url"
:href="link.url"
target="_blank"
class="text-blue-400 hover:text-blue-300 flex items-center gap-2 transition-colors"
>
<UIcon :name="link.logo" class="text-lg" />
<span class="text-sm">{{ link.host }}</span>
</a>
<div class="card-footer">
<USeparator class="my-3" />
<div class="flex gap-4 mt-2">
<a
v-for="link in game.url || []"
:key="link.url"
:href="link.url"
target="_blank"
class="flex items-center gap-2 transition-colors"
>
<UIcon :name="link.logo" class="text-lg" />
<span class="text-sm">{{ link.host }}</span>
</a>
</div>
</div>
</UCard>
</div>
@ -69,7 +67,7 @@ const games = siteConfig.games
const imageCache = ref(new Map())
function getBadgeColor(status: string) {
if (status === 'Released') return 'success'
if (status === 'Released') return 'pixelgreen'
if (status === 'Abandoned') return 'error'
return 'warning'
}

28
pages/index.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="flex flex-col items-center justify-center gap-8 pt-8">
<h1 class="font-bold text-5xl text-(--ui-primary) mt-10">
<h1 class="mt-10 home-title">
MarcUs7i.Net
</h1>
@ -11,31 +11,32 @@
icon="i-simple-icons-discord"
to="/discord"
target="_blank"
class="green-button"
/>
<UButton
v-if="config.siteLinks.github"
label="GitHub"
color="neutral"
variant="outline"
icon="i-simple-icons-github"
:to="config.siteLinks.github"
target="_blank"
class="green-button"
/>
<UButton
v-if="config.siteLinks['status-page']"
label="Status"
color="neutral"
icon="i-simple-icons-statuspage"
:to="config.siteLinks['status-page']"
target="_blank"
class="green-button"
/>
</UButtonGroup>
</div>
<!-- 2x2 Grid of Smaller Buttons -->
<div class="grid grid-cols-2 gap-4 pt-16 max-w-3xl">
<!-- Responsive Grid - 1 column on mobile, 2 columns on larger screens -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-10 sm:pt-16 max-w-3xl px-4 sm:px-0">
<UButton
v-for="button in config.buttons"
:key="button.url"
@ -45,7 +46,7 @@
>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3">
<UIcon :name="button.icon" class="w-5 h-5 text-green-500" />
<UIcon :name="button.icon" class="w-5 h-5" />
<span class="label">{{ button.title }}</span>
</div>
<span v-if="button.description" class="description">
@ -75,19 +76,14 @@ const { config } = useSiteConfig()
min-height: 3.5rem; /* h-48 */
width: 100%;
text-align: left;
box-shadow: 4px 4px 0 #0f0;
border-radius: 0.5rem; /* rounded-lg */
border: 1px solid rgb(55, 65, 81); /* border border-gray-700 */
background-color: rgb(31, 41, 55); /* bg-gray-800 */
border: 2px solid #0f0;
background-color: #000;
color: white;
transition: all 0.3s;
}
.big-button:hover {
border-color: rgb(34, 197, 94); /* border-green-500 */
background-color: rgb(17, 24, 39); /* bg-gray-900 */
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
}
.label {
font-size: 1.125rem; /* text-lg */
font-weight: 600; /* font-semibold */
@ -95,7 +91,7 @@ const { config } = useSiteConfig()
}
.description {
font-size: 0.875rem; /* text-sm */
color: rgb(156, 163, 175); /* text-gray-400 */
font-size: 0.75rem;
color: rgb(156, 163, 175);
}
</style>

40
pages/maintenance.vue
View file

@ -1,17 +1,17 @@
<template>
<div class="flex flex-col items-center justify-center gap-30 pt-20">
<h1 class="font-bold text-5xl text-(--ui-primary) mt-10">
This site is in maintenance!
<h1 class="font-bold heading-title mt-10">
This page is in maintenance!
</h1>
<div class="flex items-center gap-2 mt-16">
<UButton
label="Return Home"
variant="outline"
color="neutral"
color="pixelgreen"
to="/"
size="xl"
class="px-8 text-lg"
class="green-button px-8 text-lg"
/>
</div>
</div>
@ -21,4 +21,34 @@
useHead({
title: 'Maintenance'
})
</script>
</script>
<style scoped>
.heading-title {
font-family: 'Press Start 2P', monospace;
transition: all 0.2s steps(2);
text-align: center;
font-size: 1.2rem;
line-height: 1.5;
margin: 0 auto;
}
@media (min-width: 640px) {
.heading-title {
font-size: 1.8rem;
}
}
@media (min-width: 768px) {
.heading-title {
font-size: 2.5rem;
}
}
@media (min-width: 1024px) {
.heading-title {
font-size: 3rem;
max-width: 100%;
}
}
</style>