75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
const emit = defineEmits<{
|
|
goToCreate: []
|
|
goToRecover: []
|
|
}>()
|
|
|
|
const handleGoToCreate = () => {
|
|
emit('goToCreate')
|
|
}
|
|
|
|
const handleRecover = () => {
|
|
emit('goToRecover')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="welcome-page flex-center">
|
|
<div class="welcome-card flex-center">
|
|
<div class="welcome-box">
|
|
<div class="header-section">
|
|
<h2>Welcome to the Neptune Wallet</h2>
|
|
<p>Choose the next action:</p>
|
|
</div>
|
|
<div
|
|
class="button-group"
|
|
style="display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0"
|
|
>
|
|
<ButtonCommon type="primary" size="large" @click="handleGoToCreate">
|
|
Create new wallet
|
|
</ButtonCommon>
|
|
<ButtonCommon type="default" size="large" @click="handleRecover">
|
|
Recover wallet
|
|
</ButtonCommon>
|
|
</div>
|
|
<div class="note">Thank you for being a part of the Neptune community!</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.welcome-page {
|
|
min-height: 100vh;
|
|
background-color: var(--bg-light);
|
|
position: relative;
|
|
|
|
.welcome-card {
|
|
background-color: var(--bg-white);
|
|
box-shadow: var(--shadow-md);
|
|
border-radius: var(--radius-md);
|
|
width: 100%;
|
|
max-width: 500px;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
.welcome-box {
|
|
width: 100%;
|
|
max-width: 700px;
|
|
padding: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin: 1rem;
|
|
font-size: var(--font-sm);
|
|
}
|
|
|
|
.note {
|
|
margin-top: 1rem;
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
</style>
|