Hello from MCP server
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>Welcome</ion-title>
<ion-buttons slot="end">
<ion-button fill="clear">
<ion-icon :icon="notificationsOutline" />
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Welcome</ion-title>
</ion-toolbar>
</ion-header>
<!-- Hero Section -->
<div class="hero-section">
<div class="hero-content">
<h1>Get Started</h1>
<p>Choose an option below to continue</p>
</div>
</div>
<!-- Quick Actions Grid -->
<div class="section-container">
<h2 class="section-title">Quick Actions</h2>
<ion-grid>
<ion-row>
<ion-col size="6">
<ion-card
class="action-card"
button
@click="navigateTo('/login')"
>
<div class="card-content">
<div class="icon-container login-icon">
<ion-icon :icon="logInOutline" />
</div>
<h3>Login</h3>
<p>Access your account</p>
</div>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-card
class="action-card"
button
@click="navigateTo('/register')"
>
<div class="card-content">
<div class="icon-container register-icon">
<ion-icon :icon="personAddOutline" />
</div>
<h3>Register</h3>
<p>Create new account</p>
</div>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6">
<ion-card
class="action-card"
button
@click="navigateTo('/org/create')"
>
<div class="card-content">
<div class="icon-container org-icon">
<ion-icon :icon="businessOutline" />
</div>
<h3>Organization</h3>
<p>Create your org</p>
</div>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-card
class="action-card"
button
@click="navigateTo('/profile')"
>
<div class="card-content">
<div class="icon-container profile-icon">
<ion-icon :icon="personCircleOutline" />
</div>
<h3>Profile</h3>
<p>Manage settings</p>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
<!-- Feature Highlights -->
<div class="section-container">
<h2 class="section-title">Features</h2>
<ion-list class="feature-list">
<ion-item class="feature-item">
<div class="feature-icon-container" slot="start">
<ion-icon :icon="shieldCheckmarkOutline" class="feature-icon" />
</div>
<ion-label>
<h3>Secure & Private</h3>
<p>Your data is protected with enterprise-grade security</p>
</ion-label>
</ion-item>
<ion-item class="feature-item">
<div class="feature-icon-container" slot="start">
<ion-icon :icon="flashOutline" class="feature-icon" />
</div>
<ion-label>
<h3>Fast & Reliable</h3>
<p>Lightning-fast performance you can count on</p>
</ion-label>
</ion-item>
<ion-item class="feature-item">
<div class="feature-icon-container" slot="start">
<ion-icon :icon="peopleOutline" class="feature-icon" />
</div>
<ion-label>
<h3>Team Collaboration</h3>
<p>Work together seamlessly with your team</p>
</ion-label>
</ion-item>
</ion-list>
</div>
<!-- Call to Action -->
<div class="cta-section">
<ion-button
expand="block"
size="large"
@click="navigateTo('/register')"
class="cta-button"
>
Get Started Now
<ion-icon :icon="arrowForwardOutline" slot="end" />
</ion-button>
</div>
</ion-content>
</ion-page>
</template>
<script setup lang="ts">
import { ref } from "vue";
import {
IonButton,
IonButtons,
IonCard,
IonCol,
IonContent,
IonGrid,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonPage,
IonRow,
IonTitle,
IonToolbar,
} from "@ionic/vue";
import {
logInOutline,
personAddOutline,
businessOutline,
personCircleOutline,
notificationsOutline,
shieldCheckmarkOutline,
flashOutline,
peopleOutline,
arrowForwardOutline,
} from "ionicons/icons";
import { useRouter } from "vue-router";
import PocketBase from "pocketbase";
const router = useRouter();
const navigateTo = (path: string) => {
router.push(path);
};
async function ping() {
const API_HOST = "http://127.0.0.1:8090";
const pb = new PocketBase(API_HOST);
const records = await pb.collection("ping").getFullList();
}
const email = ref("");
const password = ref("");
const confirm = ref("");
async function onSubmit() {
if (
password.value == confirm.value &&
email.value.length > 2 &&
password.value.length > 9
) {
const API_HOST = "http://127.0.0.1:8090";
const pb = new PocketBase(API_HOST);
const data = {
email: email.value,
emailVisibility: true,
password: password.value,
passwordConfirm: confirm.value,
};
const record = await pb.collection("users").create(data);
}
}
// ping();
</script>
<style scoped>
.hero-section {
background: linear-gradient(
135deg,
var(--ion-color-primary) 0%,
var(--ion-color-secondary) 100%
);
padding: 2rem 1rem;
text-align: center;
color: white;
margin-bottom: 1rem;
}
.hero-content h1 {
font-size: 2rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.hero-content p {
font-size: 1.1rem;
opacity: 0.9;
margin: 0;
}
.section-container {
padding: 0 1rem 2rem 1rem;
}
.section-title {
font-size: 1.4rem;
font-weight: 600;
margin: 0 0 1rem 0;
color: var(--ion-color-dark);
}
.action-card {
margin: 0;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 140px;
}
.action-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.card-content {
padding: 1rem;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.icon-container {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
}
.icon-container ion-icon {
font-size: 24px;
color: white;
}
.login-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.register-icon {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.org-icon {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.profile-icon {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.card-content h3 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.25rem 0;
color: var(--ion-color-dark);
}
.card-content p {
font-size: 0.8rem;
margin: 0;
color: var(--ion-color-medium);
}
.feature-list {
background: transparent;
}
.feature-item {
--padding-start: 0;
--inner-padding-end: 0;
margin-bottom: 1rem;
border-radius: 12px;
background: var(--ion-color-light);
}
.feature-icon-container {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--ion-color-primary);
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
}
.feature-icon {
color: white;
font-size: 20px;
}
.feature-item h3 {
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--ion-color-dark);
}
.feature-item p {
color: var(--ion-color-medium);
font-size: 0.9rem;
}
.cta-section {
padding: 1rem;
margin-bottom: 2rem;
}
.cta-button {
--border-radius: 12px;
height: 56px;
font-weight: 600;
font-size: 1.1rem;
}
ion-content {
--background: #f8f9fa;
}
@media (max-width: 768px) {
.hero-content h1 {
font-size: 1.6rem;
}
.action-card {
height: 120px;
}
.icon-container {
width: 40px;
height: 40px;
}
.icon-container ion-icon {
font-size: 20px;
}
}
</style>