Skip to content

Commit edf3a30

Browse files
bajrangCoderbajrangCoder
authored
feat: improved about page (#1153)
1 parent a8aa783 commit edf3a30

File tree

3 files changed

+204
-77
lines changed

3 files changed

+204
-77
lines changed

‎src/pages/about/about.hbs

Lines changed: 74 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,75 @@
1-
<div id='about-page' class='main scroll'>
2-
<span class='logo' style='background-image: url(./res/logo/logo.png);'></span>
3-
<div class='list'>
4-
<span class='list-item'>
5-
<span class='icon no-icon'></span>
6-
<div class='container'>
7-
<h2 class='text'>Acode editor {{version}} ({{versionCode}})</h2>
8-
</div>
9-
</span>
10-
{{#webview}}
11-
<a
12-
class='list-item no-transform'
13-
href='https://play.google.com/store/apps/details?id={{packageName}}'
14-
>
15-
<span class='icon googlechrome'></span>
16-
<div class='container'>
17-
<span class='text'>Webview {{versionName}}</span>
18-
<span class='value'>{{packageName}}</span>
19-
</div>
20-
</a>
21-
{{/webview}}
22-
<a class='list-item' href='https://acode.app'>
23-
<span class='icon acode'></span>
24-
<div class='container'>
25-
<span class='text'>Official webpage</span>
26-
</div>
27-
</a>
28-
<a class='list-item' href='https://foxdebug.com'>
29-
<span class='icon foxdebug'></span>
30-
<div class='container'>
31-
<span class='text'>foxdebug.com</span>
32-
</div>
33-
</a>
34-
<a class='list-item' href='mailto:[email protected]'>
35-
<span class='icon gmail'></span>
36-
<div class='container'>
37-
<span class='text'>Mail</span>
38-
</div>
39-
</a>
40-
<a class='list-item' href='https://twitter.com/foxdebug'>
41-
<span class='icon twitter'></span>
42-
<div class='container'>
43-
<span class='text'>Twitter</span>
44-
</div>
45-
</a>
46-
<a class='list-item' href='https://www.instagram.com/foxdebug_com/'>
47-
<span class='icon instagram'></span>
48-
<div class='container'>
49-
<span class='text'>Instagram</span>
50-
</div>
51-
</a>
52-
<a class='list-item' href='https://github.com/deadlyjack/acode'>
53-
<span class='icon github'></span>
54-
<div class='container'>
55-
<span class='text'>GitHub</span>
56-
</div>
57-
</a>
1+
<main id='about-page' class='main'>
2+
<div class="logo">
3+
<img src='./res/logo/logo.png'/>
4+
</div>
585

59-
<div style='height: 30vh; width: 10vw'></div>
60-
</div>
6+
<div class="version-info">
7+
<h1 class="version-title">Acode editor</h1>
8+
<div class="version-number">Version {{version}} ({{versionCode}})</div>
9+
</div>
10+
11+
<div class="info-section">
12+
{{#webview}}
13+
<a href="https://play.google.com/store/apps/details?id={{packageName}}" class="info-item">
14+
<div class="info-item-icon">
15+
<span class="icon googlechrome"></span>
16+
</div>
17+
<div class="info-item-text">
18+
Webview {{versionName}}
19+
<div class="info-item-subtext">{{packageName}}</div>
20+
</div>
21+
</a>
22+
{{/webview}}
23+
<a href="https://acode.app" class="info-item">
24+
<div class="info-item-icon">
25+
<span class="icon acode"></span>
26+
</div>
27+
<div class="info-item-text">Official webpage</div>
28+
</a>
29+
<a href="https://foxbiz.io" class="info-item">
30+
<div class="info-item-icon">
31+
<span class='icon public'></span>
32+
</div>
33+
<div class="info-item-text">foxbiz.io</div>
34+
</a>
35+
</div>
36+
37+
<div class="social-links">
38+
<a href="mailto:[email protected]" class="social-link">
39+
<div class="social-icon">
40+
<span class="icon gmail"></span>
41+
</div>
42+
Mail
43+
</a>
44+
<a href="https://twitter.com/foxdebug" class="social-link">
45+
<div class="social-icon">
46+
<span class="icon twitter"></span>
47+
</div>
48+
Twitter
49+
</a>
50+
<a href="https://www.instagram.com/foxdebug_com/" class="social-link">
51+
<div class="social-icon">
52+
<span class="icon instagram"></span>
53+
</div>
54+
Instagram
55+
</a>
56+
<a href="https://github.com/Acode-Foundation/Acode" class="social-link">
57+
<div class="social-icon">
58+
<span class="icon github"></span>
59+
</div>
60+
GitHub
61+
</a>
62+
<a href="https://t.me/foxdebug_acode" class="social-link">
63+
<div class="social-icon">
64+
<span class="icon telegram"></span>
65+
</div>
66+
Telegram
67+
</a>
68+
<a href="https://discord.gg/V9HZeK5N" class="social-link">
69+
<div class="social-icon">
70+
<span class="icon public"></span>
71+
</div>
72+
Discord
73+
</a>
74+
</div>
75+
</main>

‎src/pages/about/about.scss

Lines changed: 125 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,132 @@
11
#about-page {
2-
overflow: auto;
2+
padding: 32px 16px;
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
gap: 24px;
37

48
.logo {
5-
display: block;
6-
height: 250px;
7-
width: 250px;
8-
border-radius: 50%;
9-
background-repeat: no-repeat;
10-
background-position: center;
11-
background-size: contain;
12-
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
13-
box-shadow: 0 0 8px 2px (--box-shadow-color);
14-
margin: 15px auto;
9+
width: 120px;
10+
height: 120px;
11+
border-radius: 24px;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
margin-bottom: 8px;
16+
background: color-mix(
17+
in srgb,
18+
var(--popup-background-color) 20%,
19+
transparent
20+
);
21+
overflow: hidden;
22+
padding: 8px;
23+
img {
24+
width: auto;
25+
max-width: 100%;
26+
height: auto;
27+
max-height: 100%;
28+
background-repeat: no-repeat;
29+
background-position: center;
30+
background-size: contain;
31+
}
32+
}
33+
.version-info {
34+
text-align: center;
35+
margin-bottom: 32px;
36+
.version-title {
37+
font-size: 24px;
38+
font-weight: 600;
39+
margin-bottom: 4px;
40+
}
41+
.version-number {
42+
color: color-mix(in srgb, var(--primary-text-color) 60%, transparent);
43+
font-size: 14px;
44+
}
45+
}
46+
.info-section {
47+
width: 100%;
48+
max-width: 400px;
49+
background: color-mix(
50+
in srgb,
51+
var(--popup-background-color) 20%,
52+
transparent
53+
);
54+
border-radius: 12px;
55+
overflow: hidden;
56+
margin-bottom: 16px;
57+
.info-item {
58+
display: flex;
59+
align-items: center;
60+
padding: 16px;
61+
color: var(--secondary-text-color);
62+
text-decoration: none;
63+
border-bottom: 1px solid var(--border-color);
64+
transition: background 0.2s ease;
65+
&:last-child {
66+
border-bottom: none;
67+
}
68+
&:hover {
69+
background: color-mix(
70+
in srgb,
71+
var(--popup-background-color) 40%,
72+
transparent
73+
);
74+
}
75+
.info-item-icon {
76+
width: 24px;
77+
height: 24px;
78+
margin-right: 12px;
79+
display: flex;
80+
align-items: center;
81+
font-size: 24px;
82+
}
83+
.info-item-text {
84+
flex: 1;
85+
font-size: 15px;
86+
.info-item-subtext {
87+
color: color-mix(in srgb, var(--primary-text-color) 60%, transparent);
88+
font-size: 13px;
89+
margin-top: 2px;
90+
}
91+
}
92+
}
1593
}
1694

17-
.file {
18-
background-position: center;
95+
.social-links {
96+
display: grid;
97+
grid-template-columns: repeat(2, 1fr);
98+
gap: 12px;
99+
width: 100%;
100+
max-width: 400px;
101+
.social-link {
102+
display: inline-flex;
103+
align-items: center;
104+
padding: 12px;
105+
background: color-mix(
106+
in srgb,
107+
var(--popup-background-color) 20%,
108+
transparent
109+
);
110+
border-radius: 12px;
111+
color: var(--secondary-text-color);
112+
text-decoration: none;
113+
transition: all 0.2s ease;
114+
&:hover {
115+
background: color-mix(
116+
in srgb,
117+
var(--popup-background-color) 40%,
118+
transparent
119+
);
120+
transform: translateY(-1px);
121+
}
122+
.social-icon {
123+
width: 24px;
124+
height: 24px;
125+
margin-right: 12px;
126+
font-size: 24px;
127+
display: flex;
128+
align-items: center;
129+
}
130+
}
19131
}
20132
}

‎www/index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -164,11 +164,11 @@
164164

165165
<title>Acode</title>
166166
<!--styles-->
167-
<link rel="stylesheet" href="./css/build/218.css">
168-
<link rel="stylesheet" href="./css/build/32.css">
169-
<link rel="stylesheet" href="./css/build/383.css">
170-
<link rel="stylesheet" href="./css/build/53.css">
171-
<link rel="stylesheet" href="./css/build/609.css">
167+
<link rel="stylesheet" href="./css/build/100.css">
168+
<link rel="stylesheet" href="./css/build/138.css">
169+
<link rel="stylesheet" href="./css/build/543.css">
170+
<link rel="stylesheet" href="./css/build/879.css">
171+
<link rel="stylesheet" href="./css/build/922.css">
172172
<link rel="stylesheet" href="./css/build/about.css">
173173
<link rel="stylesheet" href="./css/build/customTheme.css">
174174
<link rel="stylesheet" href="./css/build/donate.css">

0 commit comments

Comments
 (0)