This commit is contained in:
350
frontend/app/pages/admin/index.vue
Normal file
350
frontend/app/pages/admin/index.vue
Normal file
@@ -0,0 +1,350 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({ middleware: 'admin-auth' });
|
||||
|
||||
useHead({
|
||||
title: 'Admin Dashboard',
|
||||
meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
|
||||
});
|
||||
|
||||
const { getAuth } = useApi();
|
||||
const auth = useAuth();
|
||||
|
||||
const stats = ref<any>(null);
|
||||
const orders = ref<any[]>([]);
|
||||
const loading = ref(true);
|
||||
const errorMsg = ref('');
|
||||
|
||||
const COLOR_HEX: Record<string, string> = {
|
||||
red: '#d64545',
|
||||
gold: '#d4af37',
|
||||
silver: '#c0c0c0',
|
||||
orange: '#e0823c',
|
||||
yellow: '#e2cf3c',
|
||||
green: '#5fae4e',
|
||||
blue: '#4c8be0',
|
||||
purple: '#9b59d0'
|
||||
};
|
||||
|
||||
const formatUptime = (seconds: number) => {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = seconds % 60;
|
||||
return `${h}h ${m}m ${s}s`;
|
||||
};
|
||||
|
||||
const formatMB = (bytes: number) => `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
||||
|
||||
const redirectToLogin = () => {
|
||||
auth.logout();
|
||||
navigateTo('/admin/login');
|
||||
};
|
||||
|
||||
const loadStats = async () => {
|
||||
errorMsg.value = '';
|
||||
try {
|
||||
const res = await getAuth('/admin/stats');
|
||||
stats.value = res;
|
||||
} catch (e: any) {
|
||||
if (e?.status === 401) {
|
||||
redirectToLogin();
|
||||
return;
|
||||
}
|
||||
errorMsg.value = $t('admin.dashboard.load_error');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadOrders = async () => {
|
||||
try {
|
||||
orders.value = await getAuth('/hibolia/orders');
|
||||
} catch (e: any) {
|
||||
if (e?.status === 401) {
|
||||
redirectToLogin();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (value: string) => new Date(value).toLocaleString();
|
||||
|
||||
onMounted(async () => {
|
||||
const me = await auth.fetchMe();
|
||||
if (!me) {
|
||||
redirectToLogin();
|
||||
return;
|
||||
}
|
||||
await Promise.all([loadStats(), loadOrders()]);
|
||||
intervalId = setInterval(() => {
|
||||
loadStats();
|
||||
loadOrders();
|
||||
}, 30000);
|
||||
});
|
||||
|
||||
let intervalId: ReturnType<typeof setInterval> | null = null;
|
||||
onBeforeUnmount(() => {
|
||||
if (intervalId) clearInterval(intervalId);
|
||||
});
|
||||
|
||||
const onLogout = () => redirectToLogin();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dash-screen">
|
||||
<Container class="dash-frame">
|
||||
<div class="dash-top">
|
||||
<h1 class="dash-title">> {{ $t('admin.dashboard.title') }}</h1>
|
||||
<button class="logout-btn" @click="onLogout">>_ {{ $t('admin.dashboard.logout') }}</button>
|
||||
</div>
|
||||
|
||||
<p v-if="auth.user.value" class="dash-welcome">
|
||||
{{ $t('admin.dashboard.welcome') }} <span class="hl">{{ auth.user.value.username }}</span>
|
||||
</p>
|
||||
|
||||
<p v-if="errorMsg" class="dash-error">✗ {{ errorMsg }}</p>
|
||||
<p v-if="loading" class="dash-loading blink">{{ $t('admin.dashboard.loading') }}</p>
|
||||
|
||||
<template v-if="stats && !loading">
|
||||
<h2 class="dash-section">{{ $t('admin.dashboard.section_status') }}</h2>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.status') }}</span>
|
||||
<span class="stat-value ok">{{ stats.status }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.mongo') }}</span>
|
||||
<span class="stat-value" :class="stats.mongo === 'connected' ? 'ok' : 'bad'">{{ stats.mongo }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.uptime') }}</span>
|
||||
<span class="stat-value">{{ formatUptime(stats.uptime) }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.memory_rss') }}</span>
|
||||
<span class="stat-value">{{ formatMB(stats.memory.rss) }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.memory_heap') }}</span>
|
||||
<span class="stat-value">{{ formatMB(stats.memory.heapUsed) }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.total_cells') }}</span>
|
||||
<span class="stat-value">{{ stats.grid.totalCells }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="dash-section">{{ $t('admin.dashboard.section_orders') }} <span class="hl">[{{ orders.length }}]</span></h2>
|
||||
<p v-if="!orders.length" class="dash-loading">{{ $t('admin.dashboard.orders_empty') }}</p>
|
||||
<table v-else class="orders-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('admin.dashboard.col_date') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_name') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_email') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_message') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_color') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_shipping') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="order in orders" :key="order._id">
|
||||
<td class="nowrap">{{ formatDate(order.createdAt) }}</td>
|
||||
<td>{{ order.name }} {{ order.surname }}</td>
|
||||
<td>{{ order.email }}</td>
|
||||
<td class="msg-cell">{{ order.message }}</td>
|
||||
<td>
|
||||
<span class="color-chip">
|
||||
<span class="swatch" :style="{ background: COLOR_HEX[order.color] || 'transparent' }" aria-hidden="true"></span>
|
||||
{{ $t(`order.hibolia.colors.${order.color}`) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="msg-cell">{{ order.shipping }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dash-screen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
background: var(--color-background);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dash-frame {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
:deep(.tui-inner) {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dash-title {
|
||||
font-family: 'Hurmit', monospace;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text);
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 6px 14px;
|
||||
cursor: pointer;
|
||||
transition: all 120ms steps(3);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link);
|
||||
border-color: var(--color-link);
|
||||
}
|
||||
}
|
||||
|
||||
.dash-welcome {
|
||||
font-size: 0.92rem;
|
||||
color: var(--color-text);
|
||||
opacity: 0.75;
|
||||
|
||||
.hl {
|
||||
color: var(--color-link);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-loading {
|
||||
font-family: 'Hurmit', monospace;
|
||||
color: var(--color-link);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.dash-error {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #e05c5c;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.dash-section {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 1rem;
|
||||
color: var(--color-link);
|
||||
margin: 28px 0 12px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 16px;
|
||||
|
||||
.hl {
|
||||
color: var(--color-text);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.orders-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.85rem;
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 6px 10px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--color-link);
|
||||
background: var(--color-background-line);
|
||||
}
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.msg-cell {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.color-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid var(--color-border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 1.05rem;
|
||||
|
||||
&.ok {
|
||||
color: #62ac4c;
|
||||
}
|
||||
|
||||
&.bad {
|
||||
color: #e05c5c;
|
||||
}
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 50%, 100% { opacity: 1; }
|
||||
25%, 75% { opacity: 0; }
|
||||
}
|
||||
</style>
|
||||
195
frontend/app/pages/admin/login.vue
Normal file
195
frontend/app/pages/admin/login.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<script setup lang="ts">
|
||||
import TableHeader from '~/components/parts/TableHeader.vue';
|
||||
import FixedLayout from '~/components/layouts/FixedLayout.vue';
|
||||
|
||||
definePageMeta({ middleware: 'admin-auth' });
|
||||
|
||||
useHead({
|
||||
title: 'Admin — Login',
|
||||
meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
|
||||
});
|
||||
|
||||
const auth = useAuth();
|
||||
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const error = ref('');
|
||||
const loading = ref(false);
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (loading.value) return;
|
||||
error.value = '';
|
||||
loading.value = true;
|
||||
try {
|
||||
await auth.login(username.value, password.value);
|
||||
await navigateTo('/admin');
|
||||
} catch (e: any) {
|
||||
error.value = e?.status === 401
|
||||
? $t('admin.login.error_invalid')
|
||||
: $t('admin.login.error_generic');
|
||||
password.value = '';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="no-sprite">
|
||||
<TableHeader />
|
||||
</div>
|
||||
|
||||
<FixedLayout>
|
||||
<Container>
|
||||
<h1 class="admin-title">> {{ $t('admin.login.title') }}</h1>
|
||||
<p class="admin-prompt">{{ $t('admin.login.prompt') }}</p>
|
||||
|
||||
<form class="login-form" @submit.prevent="onSubmit">
|
||||
<div class="field">
|
||||
<label for="admin-user">{{ $t('admin.login.username_label') }}:</label>
|
||||
<input
|
||||
id="admin-user"
|
||||
v-model="username"
|
||||
type="text"
|
||||
name="username"
|
||||
autocomplete="username"
|
||||
spellcheck="false"
|
||||
:disabled="loading"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="admin-pass">{{ $t('admin.login.password_label') }}:</label>
|
||||
<input
|
||||
id="admin-pass"
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="password"
|
||||
autocomplete="current-password"
|
||||
:disabled="loading"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="login-error" role="alert">✗ {{ error }}</p>
|
||||
|
||||
<button type="submit" class="login-btn" :disabled="loading">
|
||||
<span v-if="!loading">> {{ $t('admin.login.submit') }}</span>
|
||||
<span v-else class="blink">{{ $t('admin.login.submitting') }}</span>
|
||||
</button>
|
||||
</form>
|
||||
</Container>
|
||||
</FixedLayout>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.admin-title {
|
||||
font-family: 'Hurmit', monospace;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.admin-prompt {
|
||||
font-size: 0.92rem;
|
||||
color: var(--color-text);
|
||||
opacity: 0.75;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
|
||||
label {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-link);
|
||||
min-width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 8px 10px;
|
||||
outline: none;
|
||||
min-width: 0;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-link);
|
||||
box-shadow: 2px -2px 0 0 var(--color-frame-glow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-error {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #e05c5c;
|
||||
margin: 4px 0 12px 90px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-left: 90px;
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-background);
|
||||
background: var(--color-link);
|
||||
border: none;
|
||||
padding: 8px 18px;
|
||||
cursor: pointer;
|
||||
transition: all 120ms steps(3);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--color-text);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: wait;
|
||||
}
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 50%, 100% { opacity: 1; }
|
||||
25%, 75% { opacity: 0; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.field {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
|
||||
label {
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-error,
|
||||
.login-btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -165,118 +165,118 @@ const sectionTargets = {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TableHeader></TableHeader>
|
||||
|
||||
<h1 style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;">Aran Roig — Developer, Artist & Designer</h1>
|
||||
<div id="top" style="scroll-margin-top: 60px;"> </div>
|
||||
<TableHeader></TableHeader>
|
||||
|
||||
<h1 style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;">Aran Roig — Developer, Artist & Designer</h1>
|
||||
<div id="top" style="scroll-margin-top: 60px;"> </div>
|
||||
|
||||
<FixedLayout>
|
||||
<section class="intro-section">
|
||||
<div class="intro-layout">
|
||||
<div class="intro-content">
|
||||
<Container>
|
||||
<ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
|
||||
</Container>
|
||||
<FixedLayout>
|
||||
<section class="intro-section">
|
||||
<div class="intro-layout">
|
||||
<div class="intro-content">
|
||||
<Container>
|
||||
<ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
|
||||
</Container>
|
||||
</div>
|
||||
<div class="intro-sidebar">
|
||||
<ServerStatus />
|
||||
</div>
|
||||
</div>
|
||||
<div class="intro-sidebar">
|
||||
<ServerStatus />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="normal-section" id="place">
|
||||
<Container>
|
||||
<h2 class="section-title">{{ t('pages.place_heading') }}</h2>
|
||||
<Place></Place>
|
||||
</Container>
|
||||
</section>
|
||||
<section class="normal-section" id="place">
|
||||
<Container>
|
||||
<h2 class="section-title">{{ t('pages.place_heading') }}</h2>
|
||||
<Place></Place>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section class="normal-section projects-section" id="scroll-projects" v-if="projects && projects.length > 0">
|
||||
<Container>
|
||||
<h2 class="section-title">{{ t('pages.projects_heading') }}</h2>
|
||||
|
||||
<div class="projects-grid">
|
||||
<div
|
||||
v-for="project in projects"
|
||||
|
||||
:key="project.slug"
|
||||
class="project-card-wrapper"
|
||||
>
|
||||
<section class="normal-section projects-section" id="scroll-projects" v-if="projects && projects.length > 0">
|
||||
<Container>
|
||||
<h2 class="section-title">{{ t('pages.projects_heading') }}</h2>
|
||||
|
||||
<div class="projects-grid">
|
||||
<div
|
||||
class="project-card"
|
||||
@click="navigateToProject(project)"
|
||||
v-for="project in projects"
|
||||
|
||||
:key="project.slug"
|
||||
class="project-card-wrapper"
|
||||
>
|
||||
<div class="project-layout">
|
||||
<img
|
||||
v-if="project.preview"
|
||||
:src="project.preview"
|
||||
:alt="`Preview of ${project.title}`"
|
||||
class="project-preview"
|
||||
/>
|
||||
<div class="project-info">
|
||||
<p class="project-title">{{ project.title }}</p>
|
||||
<p class="project-description">{{ project.description }}</p>
|
||||
<div class="project-tech">
|
||||
<span v-for="tech in project.tech" :key="tech" class="tech-tag">{{ tech }}</span>
|
||||
<div
|
||||
class="project-card"
|
||||
@click="navigateToProject(project)"
|
||||
>
|
||||
<div class="project-layout">
|
||||
<img
|
||||
v-if="project.preview"
|
||||
:src="project.preview"
|
||||
:alt="`Preview of ${project.title}`"
|
||||
class="project-preview"
|
||||
/>
|
||||
<div class="project-info">
|
||||
<p class="project-title">{{ project.title }}</p>
|
||||
<p class="project-description">{{ project.description }}</p>
|
||||
<div class="project-tech">
|
||||
<span v-for="tech in project.tech" :key="tech" class="tech-tag">{{ tech }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Container>
|
||||
</section>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section class="normal-section" id="scroll-blog">
|
||||
<Container>
|
||||
<h2 class="section-title">{{ t('pages.blog_heading') }}</h2>
|
||||
<ul class="tui-list">
|
||||
<li v-for="post in displayedBlogPosts" :key="post.slug" class="blog-entry">
|
||||
<NuxtLink :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })" class="entry-link">
|
||||
<span class="entry-title">{{ post.title }}</span>
|
||||
<section class="normal-section" id="scroll-blog">
|
||||
<Container>
|
||||
<h2 class="section-title">{{ t('pages.blog_heading') }}</h2>
|
||||
<ul class="tui-list">
|
||||
<li v-for="post in displayedBlogPosts" :key="post.slug" class="blog-entry">
|
||||
<NuxtLink :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })" class="entry-link">
|
||||
<span class="entry-title">{{ post.title }}</span>
|
||||
</NuxtLink>
|
||||
<span class="entry-meta">[{{ post.date }}] {{ post.description }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-if="posts && posts.length > 0" class="show-more-link">
|
||||
<NuxtLink :to="localePath('/blog')" class="tui-link">{{ t('pages.show_more') }}</NuxtLink>
|
||||
</p>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section class="normal-section" id="scroll-art">
|
||||
<Container>
|
||||
<h2 class="section-title">{{ t('pages.art_heading') }}</h2>
|
||||
<div class="grid">
|
||||
<NuxtLink v-for="art in displayedArtPosts" :key="art.slug"
|
||||
class="selector"
|
||||
:to="localePath(`/art/${art.slug}`)">
|
||||
<span class="selector-border-top" aria-hidden="true">────────</span>
|
||||
<img
|
||||
:src="art.thumb"
|
||||
:alt="art.title"
|
||||
class="selector-img"
|
||||
/>
|
||||
<span class="selector-border-bottom" aria-hidden="true">────────</span>
|
||||
<div class="overlay-label">{{ art.title }}</div>
|
||||
</NuxtLink>
|
||||
<span class="entry-meta">[{{ post.date }}] {{ post.description }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-if="posts && posts.length > 0" class="show-more-link">
|
||||
<NuxtLink :to="localePath('/blog')" class="tui-link">{{ t('pages.show_more') }}</NuxtLink>
|
||||
</p>
|
||||
</Container>
|
||||
</section>
|
||||
</div>
|
||||
<p v-if="artPosts && artPosts.length > 0" class="show-more-link">
|
||||
<NuxtLink :to="localePath('/art')" class="tui-link">{{ t('pages.show_more') }}</NuxtLink>
|
||||
</p>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section class="normal-section" id="scroll-art">
|
||||
<Container>
|
||||
<h2 class="section-title">{{ t('pages.art_heading') }}</h2>
|
||||
<div class="grid">
|
||||
<NuxtLink v-for="art in displayedArtPosts" :key="art.slug"
|
||||
class="selector"
|
||||
:to="localePath(`/art/${art.slug}`)">
|
||||
<span class="selector-border-top" aria-hidden="true">────────</span>
|
||||
<img
|
||||
:src="art.thumb"
|
||||
:alt="art.title"
|
||||
class="selector-img"
|
||||
/>
|
||||
<span class="selector-border-bottom" aria-hidden="true">────────</span>
|
||||
<div class="overlay-label">{{ art.title }}</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<p v-if="artPosts && artPosts.length > 0" class="show-more-link">
|
||||
<NuxtLink :to="localePath('/art')" class="tui-link">{{ t('pages.show_more') }}</NuxtLink>
|
||||
</p>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section class="normal-section" id="scroll-contact">
|
||||
<Container>
|
||||
<h2 class="section-title">{{ t('pages.contact_heading') }}</h2>
|
||||
<ContentRenderer v-if="contactMarkdown" :value="contactMarkdown"></ContentRenderer>
|
||||
<ContactLinks />
|
||||
</Container>
|
||||
</section>
|
||||
</FixedLayout>
|
||||
<Footer></Footer>
|
||||
<section class="normal-section" id="scroll-contact">
|
||||
<Container>
|
||||
<h2 class="section-title">{{ t('pages.contact_heading') }}</h2>
|
||||
<ContentRenderer v-if="contactMarkdown" :value="contactMarkdown"></ContentRenderer>
|
||||
<ContactLinks />
|
||||
</Container>
|
||||
</section>
|
||||
</FixedLayout>
|
||||
<Footer></Footer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
506
frontend/app/pages/projects/hibolia/order.vue
Normal file
506
frontend/app/pages/projects/hibolia/order.vue
Normal file
@@ -0,0 +1,506 @@
|
||||
<script setup lang="ts">
|
||||
import FullscreenLayout from '~/components/layouts/FullscreenLayout.vue';
|
||||
import StickyHeader from '~/components/parts/StickyHeader.vue';
|
||||
import HiboliaScene from '~/components/widgets/HiboliaScene.vue';
|
||||
import HiboliaDeckPreview from '~/components/widgets/HiboliaDeckPreview.vue';
|
||||
|
||||
useHead({
|
||||
title: 'Deck Request | Aran Roig',
|
||||
meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
|
||||
});
|
||||
|
||||
const { post } = useApi();
|
||||
|
||||
const COLOR_OPTIONS = [
|
||||
{ value: 'red', hex: '#d64545' },
|
||||
{ value: 'gold', hex: '#d4af37' },
|
||||
{ value: 'silver', hex: '#c0c0c0' },
|
||||
{ value: 'orange', hex: '#e0823c' },
|
||||
{ value: 'yellow', hex: '#e2cf3c' },
|
||||
{ value: 'green', hex: '#5fae4e' },
|
||||
{ value: 'blue', hex: '#4c8be0' },
|
||||
{ value: 'purple', hex: '#9b59d0' },
|
||||
{ value: 'black', hex: '#1a1a1a' },
|
||||
{ value: 'white', hex: '#f2f2f2' },
|
||||
{ value: 'pink', hex: '#e88fb3' },
|
||||
{ value: 'none', hex: '#9e9e9e' }
|
||||
];
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
surname: '',
|
||||
email: '',
|
||||
message: '',
|
||||
color: '',
|
||||
shipping: ''
|
||||
});
|
||||
|
||||
const DEFAULT_EDGE_COLOR = '#d8d2c6';
|
||||
|
||||
const selectedColorHex = computed(
|
||||
() => COLOR_OPTIONS.find((o) => o.value === form.color)?.hex ?? DEFAULT_EDGE_COLOR
|
||||
);
|
||||
|
||||
const submitting = ref(false);
|
||||
const errorMsg = ref('');
|
||||
|
||||
const localePath = useLocalePath();
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (submitting.value) return;
|
||||
errorMsg.value = '';
|
||||
|
||||
if (
|
||||
!form.name.trim() ||
|
||||
!form.surname.trim() ||
|
||||
!form.email.trim() ||
|
||||
!form.message.trim() ||
|
||||
!form.color ||
|
||||
!form.shipping.trim()
|
||||
) {
|
||||
errorMsg.value = $t('order.hibolia.error_required');
|
||||
return;
|
||||
}
|
||||
|
||||
submitting.value = true;
|
||||
try {
|
||||
await post('/hibolia/orders', {
|
||||
name: form.name.trim(),
|
||||
surname: form.surname.trim(),
|
||||
email: form.email.trim(),
|
||||
message: form.message.trim(),
|
||||
color: form.color,
|
||||
shipping: form.shipping.trim()
|
||||
});
|
||||
form.name = '';
|
||||
form.surname = '';
|
||||
form.email = '';
|
||||
form.message = '';
|
||||
form.color = '';
|
||||
form.shipping = '';
|
||||
await navigateTo(localePath('/projects/hibolia/thanks'));
|
||||
} catch (e: any) {
|
||||
errorMsg.value = e?.status === 400
|
||||
? $t('order.hibolia.error_invalid')
|
||||
: $t('order.hibolia.error_generic');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FullscreenLayout>
|
||||
<HiboliaScene class="order-scene" aria-hidden="true" />
|
||||
|
||||
<Container class="full-bg">
|
||||
<div class="order-layout">
|
||||
<form class="order-form" @submit.prevent="onSubmit">
|
||||
<h1 class="order-title">{{ $t('order.hibolia.form_title') }}</h1>
|
||||
|
||||
<p>{{ $t('order.hibolia.intro') }}</p>
|
||||
<p>{{ $t('order.hibolia.includes') }}</p>
|
||||
<ul>
|
||||
<li>{{ $t('order.hibolia.includes_box') }}</li>
|
||||
<li>
|
||||
{{ $t('order.hibolia.includes_cards') }}
|
||||
<ul>
|
||||
<li>{{ $t('order.hibolia.includes_suits') }}</li>
|
||||
<li>{{ $t('order.hibolia.includes_jokers') }}</li>
|
||||
<li>{{ $t('order.hibolia.includes_extra') }}</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>{{ $t('order.hibolia.basics_intro') }}</p>
|
||||
|
||||
<div class="field">
|
||||
<label for="order-name">{{ $t('order.hibolia.name_label') }}:</label>
|
||||
<input
|
||||
id="order-name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
name="name"
|
||||
autocomplete="given-name"
|
||||
:disabled="submitting"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="order-surname">{{ $t('order.hibolia.surname_label') }}:</label>
|
||||
<input
|
||||
id="order-surname"
|
||||
v-model="form.surname"
|
||||
type="text"
|
||||
name="surname"
|
||||
autocomplete="family-name"
|
||||
:disabled="submitting"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="order-email">{{ $t('order.hibolia.email_label') }}:</label>
|
||||
<input
|
||||
id="order-email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
name="email"
|
||||
autocomplete="email"
|
||||
spellcheck="false"
|
||||
:disabled="submitting"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<p>{{ $t('order.hibolia.dragon_intro') }}</p>
|
||||
<div class="field field-block">
|
||||
<label for="order-message">{{ $t('order.hibolia.message_label') }}:</label>
|
||||
<textarea
|
||||
id="order-message"
|
||||
v-model="form.message"
|
||||
name="message"
|
||||
rows="6"
|
||||
maxlength="2000"
|
||||
:disabled="submitting"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<p>{{ $t('order.hibolia.edges_intro') }}</p>
|
||||
<p>{{ $t('order.hibolia.edges_color_prompt') }}</p>
|
||||
<fieldset class="field field-block color-field">
|
||||
<legend>{{ $t('order.hibolia.color_label') }}:</legend>
|
||||
<div class="color-grid">
|
||||
<label
|
||||
v-for="option in COLOR_OPTIONS"
|
||||
:key="option.value"
|
||||
class="color-option"
|
||||
:class="{ selected: form.color === option.value }"
|
||||
>
|
||||
<input
|
||||
v-model="form.color"
|
||||
type="radio"
|
||||
name="color"
|
||||
:value="option.value"
|
||||
:disabled="submitting"
|
||||
:id="`order-color-${option.value}`"
|
||||
/>
|
||||
<span class="swatch" :style="{ background: option.hex }" aria-hidden="true"></span>
|
||||
<span class="color-name">{{ $t(`order.hibolia.colors.${option.value}`) }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<p>{{ $t('order.hibolia.preview_note') }}</p>
|
||||
|
||||
<HiboliaDeckPreview class="deck-preview" :color="selectedColorHex" />
|
||||
|
||||
<i18n-t keypath="order.hibolia.edges_advice" tag="p">
|
||||
<template #please><b>{{ $t('order.hibolia.please') }}</b></template>
|
||||
</i18n-t>
|
||||
|
||||
<p>{{ $t('order.hibolia.final_intro') }}</p>
|
||||
<ul>
|
||||
<li>{{ $t('order.hibolia.final_design') }}</li>
|
||||
<li>{{ $t('order.hibolia.final_delivery_time') }}</li>
|
||||
<li>{{ $t('order.hibolia.final_delivery_inperson') }}</li>
|
||||
<li>{{ $t('order.hibolia.final_price') }}</li>
|
||||
<li>{{ $t('order.hibolia.final_payment_methods') }}</li>
|
||||
<li>{{ $t('order.hibolia.final_payment_deadline') }}</li>
|
||||
<li>{{ $t('order.hibolia.final_tip') }}</li>
|
||||
</ul>
|
||||
<p>{{ $t('order.hibolia.comments_prompt') }}</p>
|
||||
<div class="field field-block">
|
||||
<label for="order-shipping">{{ $t('order.hibolia.comments_label') }}:</label>
|
||||
<textarea
|
||||
id="order-shipping"
|
||||
v-model="form.shipping"
|
||||
name="shipping"
|
||||
rows="6"
|
||||
maxlength="2000"
|
||||
:disabled="submitting"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p v-if="errorMsg" class="order-error" role="alert">✗ {{ errorMsg }}</p>
|
||||
|
||||
<button type="submit" class="order-btn" :disabled="submitting">
|
||||
<span v-if="!submitting">> {{ $t('order.hibolia.submit') }}</span>
|
||||
<span v-else class="blink">{{ $t('order.hibolia.submitting') }}</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Container>
|
||||
</FullscreenLayout>
|
||||
<StickyHeader always-visible />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tui-frame.full-bg {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: transparent;
|
||||
|
||||
:deep(.tui-inner) {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-top: 52px;
|
||||
background: var(--color-background-fore);
|
||||
}
|
||||
|
||||
:deep(.frame-corner-tr),
|
||||
:deep(.frame-corner-br) {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.order-title {
|
||||
font-family: 'Hurmit', monospace;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.order-prompt {
|
||||
font-size: 0.92rem;
|
||||
color: var(--color-text);
|
||||
opacity: 0.75;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.order-layout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order-form {
|
||||
flex: 1;
|
||||
max-width: 860px;
|
||||
min-width: 0;
|
||||
margin: 0 auto;
|
||||
padding: 100px 0;
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
padding-left: 28px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 2px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.order-scene {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
|
||||
label {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-link);
|
||||
min-width: 90px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
flex: 1;
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 8px 10px;
|
||||
outline: none;
|
||||
min-width: 0;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-link);
|
||||
box-shadow: 2px -2px 0 0 var(--color-frame-glow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-block {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
|
||||
label {
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.color-field {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0 0 14px;
|
||||
|
||||
legend {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-link);
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.deck-preview {
|
||||
height: 300px;
|
||||
margin: 0 0 14px;
|
||||
border: 1px solid var(--color-border-color);
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
.color-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
transition: all 120ms steps(3);
|
||||
min-width: 0;
|
||||
|
||||
input[type='radio'] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--color-border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.color-name {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: var(--color-link);
|
||||
box-shadow: 2px -2px 0 0 var(--color-frame-glow);
|
||||
background: var(--color-hover);
|
||||
|
||||
.color-name {
|
||||
color: var(--color-link);
|
||||
}
|
||||
}
|
||||
|
||||
input[type='radio']:focus-visible ~ .swatch {
|
||||
outline: 1px dashed var(--color-link);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.order-error {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #e05c5c;
|
||||
margin: 4px 0 12px;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
display: block;
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 1.05rem;
|
||||
color: #d4d4d4;
|
||||
background: #000;
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 14px 42px;
|
||||
cursor: pointer;
|
||||
transition: all 120ms steps(3);
|
||||
margin: 0 auto;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: var(--color-link);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: wait;
|
||||
}
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 50%, 100% { opacity: 1; }
|
||||
25%, 75% { opacity: 0; }
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.field {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
|
||||
label {
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.color-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
121
frontend/app/pages/projects/hibolia/thanks.vue
Normal file
121
frontend/app/pages/projects/hibolia/thanks.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<script setup lang="ts">
|
||||
import FullscreenLayout from '~/components/layouts/FullscreenLayout.vue';
|
||||
import StickyHeader from '~/components/parts/StickyHeader.vue';
|
||||
import HiboliaScene from '~/components/widgets/HiboliaScene.vue';
|
||||
|
||||
useHead({
|
||||
title: 'Thanks | Aran Roig',
|
||||
meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
|
||||
});
|
||||
|
||||
const localePath = useLocalePath();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FullscreenLayout>
|
||||
<HiboliaScene class="thanks-scene" aria-hidden="true" />
|
||||
|
||||
<Container class="full-bg">
|
||||
<div class="thanks-layout">
|
||||
<div class="thanks-panel">
|
||||
<h1 class="thanks-title">✓ {{ $t('order.hibolia.thanks.title') }}</h1>
|
||||
<p class="thanks-message">{{ $t('order.hibolia.thanks.message') }}</p>
|
||||
<p class="thanks-next">{{ $t('order.hibolia.thanks.next') }}</p>
|
||||
<NuxtLink class="thanks-back" :to="localePath('/')">
|
||||
> {{ $t('order.hibolia.thanks.back_home') }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</FullscreenLayout>
|
||||
<StickyHeader always-visible />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tui-frame.full-bg {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: transparent;
|
||||
|
||||
:deep(.tui-inner) {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-top: 52px;
|
||||
background: var(--color-background-fore);
|
||||
}
|
||||
|
||||
:deep(.frame-corner-tr),
|
||||
:deep(.frame-corner-br) {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.thanks-layout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.thanks-panel {
|
||||
flex: 1;
|
||||
max-width: 720px;
|
||||
min-width: 0;
|
||||
margin: 0 auto;
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thanks-title {
|
||||
font-family: 'Hurmit', monospace;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.thanks-message {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 1.05rem;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.thanks-next {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.75;
|
||||
margin: 12px 0 32px;
|
||||
}
|
||||
|
||||
.thanks-back {
|
||||
display: inline-block;
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 1.05rem;
|
||||
color: #d4d4d4;
|
||||
background: #000;
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 14px 42px;
|
||||
text-decoration: none;
|
||||
transition: all 120ms steps(3);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-link);
|
||||
}
|
||||
}
|
||||
|
||||
.thanks-scene {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
275
frontend/app/pages/projects/index.vue
Normal file
275
frontend/app/pages/projects/index.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<script setup lang="ts">
|
||||
import FixedLayout from '~/components/layouts/FixedLayout.vue';
|
||||
import TableHeader from '~/components/parts/TableHeader.vue';
|
||||
import { useSeo } from '~/composables/seo';
|
||||
|
||||
const { locale, t } = useI18n();
|
||||
|
||||
useSeo({
|
||||
title: 'Projects',
|
||||
description: 'Explore the projects of Aran Roig. Software engineering, tools, games and creative experiments.',
|
||||
canonicalUrl: '/projects'
|
||||
});
|
||||
|
||||
useHead({
|
||||
script: [{
|
||||
type: 'application/ld+json',
|
||||
innerHTML: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'CollectionPage',
|
||||
headline: 'Projects by Aran Roig',
|
||||
description: 'Explore the projects of Aran Roig. Software engineering, tools, games and creative experiments.',
|
||||
url: 'https://aranroig.com/projects',
|
||||
author: {
|
||||
'@type': 'Person',
|
||||
name: 'Aran Roig'
|
||||
},
|
||||
inLanguage: ['en', 'es', 'ca', 'zh']
|
||||
})
|
||||
}]
|
||||
});
|
||||
|
||||
const { data: projects } = useAsyncData('projects-list', async () => {
|
||||
const currentLocale = locale.value;
|
||||
|
||||
const enProjects = await queryCollection('projects')
|
||||
.where('path', 'LIKE', `/projects/en/%`)
|
||||
.all();
|
||||
|
||||
if (currentLocale === 'en') return enProjects;
|
||||
|
||||
const localeProjects = await queryCollection('projects')
|
||||
.where('path', 'LIKE', `/projects/${currentLocale}/%`)
|
||||
.all();
|
||||
|
||||
const translatedSlugs = new Set(
|
||||
localeProjects.map((p) => p.path.replace(`/projects/${currentLocale}/`, ''))
|
||||
);
|
||||
|
||||
const enFallbacks = enProjects.filter(
|
||||
(p) => !translatedSlugs.has(p.path.replace('/projects/en/', ''))
|
||||
);
|
||||
|
||||
return [...localeProjects, ...enFallbacks];
|
||||
}, { watch: [locale, () => useRoute().path] });
|
||||
|
||||
function resolveProjectLink(project) {
|
||||
if (project.link) return project.link;
|
||||
const slugToProjectMap = {
|
||||
'dragonroll': 'https://dragonroll.aranroig.com',
|
||||
};
|
||||
return slugToProjectMap[project.slug] || null;
|
||||
}
|
||||
|
||||
function navigateToProject(project) {
|
||||
const link = resolveProjectLink(project);
|
||||
if (link) window.open(link, '_blank', 'noopener,noreferrer');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="no-sprite">
|
||||
<TableHeader></TableHeader>
|
||||
</div>
|
||||
<FixedLayout>
|
||||
<Container class="top-margin">
|
||||
<h1 class="section-title">{{ t('pages.projects_heading') }}</h1>
|
||||
<div class="projects-grid">
|
||||
<div
|
||||
v-for="project in projects"
|
||||
:key="project.slug"
|
||||
class="project-card-wrapper"
|
||||
>
|
||||
<div class="project-card" @click="navigateToProject(project)">
|
||||
<div class="project-layout">
|
||||
<img
|
||||
v-if="project.preview"
|
||||
:src="project.preview"
|
||||
:alt="`Preview of ${project.title}`"
|
||||
class="project-preview"
|
||||
/>
|
||||
<div class="project-info">
|
||||
<p class="project-title">{{ project.title }}</p>
|
||||
<p class="project-description">{{ project.description }}</p>
|
||||
<div class="project-tech">
|
||||
<span v-for="tech in project.tech" :key="tech" class="tech-tag">{{ tech }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</FixedLayout>
|
||||
<Footer></Footer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section-title {
|
||||
font-family: 'Hurmit', monospace;
|
||||
color: var(--color-text);
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.5px;
|
||||
margin: 28px 0 16px 0;
|
||||
padding-left: 12px;
|
||||
line-height: 1.3;
|
||||
|
||||
&::before {
|
||||
content: "├";
|
||||
color: var(--color-link);
|
||||
margin-right: 8px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: var(--color-link);
|
||||
margin-left: 10px;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 4px var(--color-link);
|
||||
animation: blink-cursor 1s steps(1) infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink-cursor {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
position: relative;
|
||||
background: var(--color-background-fore);
|
||||
border: 1px solid var(--color-border-color);
|
||||
box-shadow: 4px -4px 0px 0px var(--color-container-shadow);
|
||||
padding: 12px 16px;
|
||||
transition: all 0.1s steps(2, end);
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
content: "[ PROJECT ]";
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
left: 12px;
|
||||
background-color: var(--color-background-fore);
|
||||
padding: 0 6px;
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-link);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.project-layout {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.project-preview {
|
||||
width: 140px;
|
||||
min-width: 140px;
|
||||
height: 85px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--color-border-color);
|
||||
image-rendering: auto;
|
||||
transition: border-color 0.1s steps(2, end);
|
||||
}
|
||||
|
||||
.project-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.project-card-wrapper:hover .project-card {
|
||||
border-color: var(--color-link);
|
||||
box-shadow: 4px -4px 0px 0px var(--color-link);
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-family: 'Hurmit', monospace;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.05rem;
|
||||
text-shadow: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link);
|
||||
}
|
||||
}
|
||||
|
||||
.project-description {
|
||||
font-family: 'Hurmit', monospace;
|
||||
color: var(--color-text);
|
||||
margin: 8px 0 12px 0;
|
||||
line-height: 1.5;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.project-tech {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tech-tag {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-background-fore);
|
||||
background-color: var(--color-link);
|
||||
padding: 1px 6px;
|
||||
box-shadow: 2px -2px 0px 0px rgba(0, 0, 0, 0.3);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.section-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.project-layout {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.project-preview {
|
||||
width: 100% !important;
|
||||
min-width: auto !important;
|
||||
height: 160px !important;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.section-title {
|
||||
font-size: 1rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user