Skip to content

Commit 6fd1466

Browse files
SWXDCSWXDC
committed
main
1 parent ea040a7 commit 6fd1466

6 files changed

Lines changed: 317 additions & 36 deletions

File tree

‎src/assets/css/globle.css‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22

33
:root {
44
color-scheme: dark;
5+
--bg-deep: #0b1020;
6+
--bg-mid: #11182e;
7+
--text-main: #f3f6ff;
8+
--text-muted: #b8c0d8;
9+
--brand-accent: #f2c94c;
510
}
611

712
*,
@@ -20,16 +25,18 @@ body,
2025

2126
body {
2227
font-family: 'Outfit', 'Noto Sans TC', sans-serif;
23-
background: #121212;
24-
color: #ffffff;
25-
line-height: 1.5;
28+
background: #000;
29+
color: var(--text-main);
30+
line-height: 1.6;
31+
letter-spacing: 0.01em;
2632
-webkit-font-smoothing: antialiased;
2733
text-rendering: optimizeLegibility;
2834
overflow-x: hidden;
2935
}
3036

3137
a {
3238
color: inherit;
39+
transition: color 0.22s ease, opacity 0.22s ease;
3340
}
3441

3542
button,
@@ -38,3 +45,16 @@ textarea,
3845
select {
3946
font: inherit;
4047
}
48+
49+
button {
50+
transition: transform 0.2s ease, box-shadow 0.22s ease;
51+
}
52+
53+
button:active {
54+
transform: translateY(1px);
55+
}
56+
57+
::selection {
58+
background: rgba(242, 201, 76, 0.34);
59+
color: #10131e;
60+
}

‎src/router/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
22
import HomeView from '../views/home.vue'
33
import TermsView from '../views/terms.vue'
44
import PrivacyView from '../views/privacy.vue'
5+
import PreviewView from '../views/preview.vue'
56

67
const router = createRouter({
78
history: createWebHistory(import.meta.env.BASE_URL),
@@ -21,6 +22,11 @@ const router = createRouter({
2122
name: 'privacy',
2223
component: PrivacyView,
2324
},
25+
{
26+
path: '/preview',
27+
name: 'preview',
28+
component: PreviewView,
29+
},
2430
{
2531
path: '/:pathMatch(.*)*',
2632
redirect: '/',

‎src/views/home.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
>
4747
下載 Android 版本
4848
</a>
49+
<RouterLink to="/preview" class="btn btn-primary">填寫預先體驗版</RouterLink>
4950
<a href="#features" class="btn btn-secondary">觀看 30 秒功能演示</a>
5051
</div>
5152

@@ -203,6 +204,7 @@
203204
<a href="#hero">用戶指南</a>
204205
<a href="#features">常見問題</a>
205206
<a href="mailto:hello@strawmoneybook.app">聯繫開發者</a>
207+
<RouterLink to="/preview">預先體驗版</RouterLink>
206208
<RouterLink to="/terms-of-service">服務條款</RouterLink>
207209
<RouterLink to="/privacy-policy">隱私權政策</RouterLink>
208210
</div>
@@ -466,7 +468,7 @@ onBeforeUnmount(() => {
466468
467469
<style scoped>
468470
.landing {
469-
--bg-primary: #121212;
471+
--bg-primary: #000000;
470472
--bg-secondary: rgba(30, 30, 30, 0.92);
471473
--bg-card: #1b1b1b;
472474
--bg-card-soft: #202020;

‎src/views/preview.vue‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<template>
2+
<main class="preview-page">
3+
<div class="preview-container">
4+
<h1>StrawMoneyBook 預先體驗版</h1>
5+
<p class="intro">
6+
歡迎搶先填寫預先體驗版表單，我們會依照填寫資訊通知你最新測試名額與版本消息。
7+
</p>
8+
9+
<div class="form-wrap" role="region" aria-label="預先體驗版申請表單">
10+
<iframe
11+
class="google-form"
12+
src="https://docs.google.com/forms/d/e/1FAIpQLSdlkCgRn8R_MxfJpyyp90JogSxoFERLr3wGnrF_i_5AnfAaGw/viewform?embedded=true"
13+
title="StrawMoneyBook 預先體驗版表單"
14+
loading="lazy"
15+
referrerpolicy="no-referrer-when-downgrade"
16+
>
17+
載入中…
18+
</iframe>
19+
</div>
20+
21+
<div class="actions">
22+
<a
23+
class="open-link"
24+
href="https://docs.google.com/forms/d/e/1FAIpQLSdlkCgRn8R_MxfJpyyp90JogSxoFERLr3wGnrF_i_5AnfAaGw/viewform?usp=sharing&ouid=108951777470887788719"
25+
target="_blank"
26+
rel="noreferrer"
27+
>
28+
無法顯示？改用新分頁填寫
29+
</a>
30+
<RouterLink class="back-link" to="/">返回首頁</RouterLink>
31+
</div>
32+
</div>
33+
</main>
34+
</template>
35+
36+
<style scoped>
37+
.preview-page {
38+
min-height: 100vh;
39+
background: #000;
40+
color: #f3f6ff;
41+
padding: clamp(1.5rem, 3vw, 2.8rem) 1rem 3.2rem;
42+
}
43+
44+
.preview-container {
45+
width: min(980px, 100%);
46+
margin: 0 auto;
47+
padding: clamp(1rem, 2.8vw, 1.8rem);
48+
border-radius: 24px;
49+
background: rgba(10, 15, 30, 0.54);
50+
border: 1px solid rgba(255, 255, 255, 0.08);
51+
backdrop-filter: blur(12px);
52+
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
53+
}
54+
55+
h1 {
56+
font-size: clamp(1.55rem, 3.8vw, 2.4rem);
57+
margin-bottom: 0.85rem;
58+
letter-spacing: 0.015em;
59+
}
60+
61+
.intro {
62+
color: #d3dbf2;
63+
margin-bottom: 1.3rem;
64+
line-height: 1.75;
65+
max-width: 760px;
66+
}
67+
68+
.form-wrap {
69+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
70+
border: 1px solid rgba(255, 255, 255, 0.12);
71+
border-radius: 20px;
72+
overflow: hidden;
73+
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
74+
}
75+
76+
.google-form {
77+
width: 100%;
78+
min-height: 1100px;
79+
border: none;
80+
background: #fff;
81+
}
82+
83+
.actions {
84+
margin-top: 1.15rem;
85+
display: flex;
86+
gap: 1rem;
87+
flex-wrap: wrap;
88+
}
89+
90+
.open-link,
91+
.back-link {
92+
display: inline-flex;
93+
align-items: center;
94+
justify-content: center;
95+
padding: 0.58rem 1rem;
96+
border-radius: 999px;
97+
border: 1px solid rgba(255, 255, 255, 0.16);
98+
background: rgba(255, 255, 255, 0.06);
99+
color: #f8df8f;
100+
text-decoration: none;
101+
transition: transform 0.2s ease, border-color 0.22s ease, background 0.22s ease;
102+
}
103+
104+
.open-link:hover,
105+
.back-link:hover {
106+
transform: translateY(-1px);
107+
border-color: rgba(248, 223, 143, 0.62);
108+
background: rgba(248, 223, 143, 0.08);
109+
}
110+
111+
@media (max-width: 640px) {
112+
.preview-container {
113+
padding: 0.95rem;
114+
}
115+
116+
.google-form {
117+
min-height: 1180px;
118+
}
119+
}
120+
</style>

‎src/views/privacy.vue‎

Lines changed: 84 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -86,56 +86,123 @@
8686
<p>Email：service@strawmb.com</p>
8787
</section>
8888

89-
<RouterLink class="back-link" to="/">返回首頁</RouterLink>
89+
<div class="link-group">
90+
<RouterLink class="back-link" to="/preview">預先體驗版</RouterLink>
91+
<RouterLink class="back-link" to="/">返回首頁</RouterLink>
92+
</div>
9093
</div>
9194
</main>
9295
</template>
9396

9497
<style scoped>
9598
.legal-page {
9699
min-height: 100vh;
97-
background: #0f1220;
98-
color: #f3f4f8;
99-
padding: 2rem 1rem 3rem;
100+
background: #000;
101+
color: #f3f6ff;
102+
padding: clamp(1.5rem, 3vw, 2.6rem) 1rem 3rem;
100103
}
101104
102105
.legal-container {
103-
width: min(860px, 100%);
106+
width: min(940px, 100%);
104107
margin: 0 auto;
108+
padding: clamp(1rem, 2.5vw, 1.6rem);
109+
border-radius: 22px;
110+
background: rgba(10, 15, 30, 0.52);
111+
border: 1px solid rgba(255, 255, 255, 0.08);
112+
backdrop-filter: blur(12px);
113+
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
105114
line-height: 1.72;
106115
}
107116
108117
h1 {
109-
font-size: clamp(1.4rem, 3.8vw, 2rem);
110-
margin-bottom: 1rem;
118+
font-size: clamp(1.45rem, 3.8vw, 2.2rem);
119+
margin-bottom: 1.1rem;
120+
letter-spacing: 0.015em;
121+
}
122+
123+
.legal-container > p {
124+
color: #d8def0;
125+
margin: 0.42rem 0;
126+
}
127+
128+
.legal-container > p:nth-of-type(-n + 4) {
129+
display: inline-flex;
130+
margin-right: 0.6rem;
131+
margin-bottom: 0.55rem;
132+
padding: 0.33rem 0.72rem;
133+
border-radius: 999px;
134+
background: rgba(255, 255, 255, 0.06);
135+
border: 1px solid rgba(255, 255, 255, 0.1);
136+
color: #c9d1ea;
137+
font-size: 0.86rem;
111138
}
112139
113140
h2 {
114-
margin-top: 1.2rem;
115-
margin-bottom: 0.5rem;
116-
font-size: 1.08rem;
141+
margin-top: 0;
142+
margin-bottom: 0.65rem;
143+
font-size: clamp(1.05rem, 2.2vw, 1.2rem);
144+
color: #f7d77a;
117145
}
118146
119147
h3 {
120-
margin-top: 0.9rem;
121-
margin-bottom: 0.35rem;
148+
margin-top: 0.75rem;
149+
margin-bottom: 0.45rem;
122150
font-size: 0.98rem;
151+
color: #e7ebf9;
123152
}
124153
125154
p,
126155
li {
127-
color: #d4d9e5;
156+
color: #d6dcef;
128157
}
129158
130159
ul {
131160
margin: 0;
132-
padding-left: 1.2rem;
161+
padding-left: 1.15rem;
162+
}
163+
164+
section {
165+
margin-top: 1rem;
166+
padding: 1rem 1.05rem;
167+
border-radius: 14px;
168+
background: rgba(255, 255, 255, 0.03);
169+
border: 1px solid rgba(255, 255, 255, 0.07);
133170
}
134171
135172
.back-link {
136-
display: inline-block;
137-
margin-top: 1.6rem;
138-
color: #f2c94c;
173+
display: inline-flex;
174+
align-items: center;
175+
justify-content: center;
176+
margin-top: 0.2rem;
177+
padding: 0.52rem 1rem;
178+
border-radius: 999px;
179+
background: rgba(255, 255, 255, 0.06);
180+
border: 1px solid rgba(255, 255, 255, 0.14);
181+
color: #f8df8f;
139182
text-decoration: none;
183+
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
184+
}
185+
186+
.back-link:hover {
187+
transform: translateY(-1px);
188+
border-color: rgba(248, 223, 143, 0.6);
189+
background: rgba(248, 223, 143, 0.08);
190+
}
191+
192+
.link-group {
193+
display: flex;
194+
gap: 1rem;
195+
flex-wrap: wrap;
196+
margin-top: 1.6rem;
197+
}
198+
199+
@media (max-width: 640px) {
200+
.legal-container {
201+
padding: 0.95rem;
202+
}
203+
204+
section {
205+
padding: 0.85rem 0.88rem;
206+
}
140207
}
141208
</style>

0 commit comments

Comments
 (0)