Skip to content

Commit e970cb8

Browse files
TombarrTombarr
committed
Redesign client
4 digit PIN codes, light color, tab layout, and more Based on Figma: https://www.figma.com/design/KxHyu4TqeX4JqoSIdcrFK5/MFA-Sync
1 parent 644dd74 commit e970cb8

7 files changed

Lines changed: 1003 additions & 547 deletions

File tree

‎public/about.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>About - Authenticator</title>
7+
<link rel="stylesheet" href="./css/cloudphone.css" type="text/css" />
8+
<link rel="stylesheet" href="./css/about.css" type="text/css" />
9+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
10+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
11+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
12+
<link rel="icon" type="image/x-icon" sizes="16x16" href="/favicon.ico" />
13+
<link rel="manifest" href="/site.webmanifest" />
14+
</head>
15+
<body>
16+
<div class="about-container">
17+
<img src="/favicon.png" alt="Authenticator" class="about-icon" />
18+
<h1 class="about-title">Authenticator</h1>
19+
<div class="about-version">Version <span id="version">1.0.0</span></div>
20+
<div class="about-copyright">© 2025 Tom Barrasso</div>
21+
</div>
22+
23+
<div class="softkey-bar">
24+
<div class="softkey-left"></div>
25+
<div class="softkey-center"></div>
26+
<div class="softkey-right">
27+
<svg width="16" height="16"><use href="#back"/></svg>
28+
</div>
29+
</div>
30+
31+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="svg-icons">
32+
<symbol id="back" viewBox="0 0 16 16">
33+
<path d="M6.00004 12.6667L6.94004 11.7267L3.88671 8.66667H14.6667V7.33334H3.88671L6.94671 4.27334L6.00004 3.33334L1.33337 8L6.00004 12.6667Z" fill="currentColor"/>
34+
</symbol>
35+
</svg>
36+
37+
<script type="text/javascript" src="./js/about.js"></script>
38+
</body>
39+
</html>

‎public/css/about.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/* About page specific styles */
2+
3+
.about-container {
4+
flex: 1;
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
justify-content: center;
9+
padding: 40px 20px;
10+
max-width: 400px;
11+
margin: 0 auto;
12+
width: 100%;
13+
}
14+
15+
.about-icon {
16+
width: 64px;
17+
height: 64px;
18+
margin-bottom: 20px;
19+
}
20+
21+
.about-title {
22+
font-size: 24px;
23+
color: var(--primary-blue);
24+
margin-bottom: 8px;
25+
font-weight: 600;
26+
text-align: center;
27+
}
28+
29+
.about-version {
30+
font-size: 14px;
31+
color: var(--secondary-text);
32+
margin-bottom: 4px;
33+
text-align: center;
34+
}
35+
36+
.about-copyright {
37+
font-size: 12px;
38+
color: var(--placeholder-gray);
39+
text-align: center;
40+
}
41+
42+
/* QVGA (240x320) optimizations */
43+
@media (max-width: 240px) {
44+
.about-container {
45+
padding: 20px 12px;
46+
}
47+
48+
.about-icon {
49+
width: 48px;
50+
height: 48px;
51+
margin-bottom: 16px;
52+
}
53+
54+
.about-title {
55+
font-size: 18px;
56+
margin-bottom: 6px;
57+
}
58+
59+
.about-version {
60+
font-size: 12px;
61+
margin-bottom: 3px;
62+
}
63+
64+
.about-copyright {
65+
font-size: 10px;
66+
}
67+
}
68+
69+
/* QQVGA (128x160) optimizations */
70+
@media (max-width: 160px) {
71+
.about-container {
72+
padding: 12px 8px;
73+
}
74+
75+
.about-icon {
76+
width: 32px;
77+
height: 32px;
78+
margin-bottom: 12px;
79+
}
80+
81+
.about-title {
82+
font-size: 14px;
83+
margin-bottom: 4px;
84+
}
85+
86+
.about-version {
87+
font-size: 10px;
88+
margin-bottom: 2px;
89+
}
90+
91+
.about-copyright {
92+
font-size: 8px;
93+
}
94+
}

0 commit comments

Comments
 (0)