Skip to content

Commit 534309d

Browse files
committed
Add privacy page
1 parent 40076ba commit 534309d

6 files changed

Lines changed: 313 additions & 10 deletions

File tree

bin/data.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,8 @@ export default {
291291
videos: videos.videos,
292292
pages: [
293293
'sponsor-electerm',
294-
'deb'
294+
'deb',
295+
'privacy-policy'
295296
],
296297
langs: createLocaleData(),
297298
...createReleaseData(),

src/css/modern.styl

Lines changed: 150 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@ a:hover
298298
text-align center
299299

300300
.hero-logo
301-
width 240px
301+
max-height 100%
302302
height auto
303303
margin-bottom 5px
304304
margin-top -10px
@@ -400,8 +400,6 @@ a:hover
400400
padding 60px 0 70px
401401
.hero h1
402402
font-size 1.8rem
403-
.hero-logo
404-
width 80px
405403
.hero-tagline
406404
font-size 1rem
407405

@@ -1191,3 +1189,152 @@ a:hover
11911189
flex-direction column
11921190
align-items center
11931191
text-align center
1192+
1193+
/* ===== Privacy Policy ===== */
1194+
.privacy-page
1195+
padding 80px 0 100px
1196+
background var(--color-bg)
1197+
1198+
.privacy-content
1199+
max-width 800px
1200+
margin 0 auto
1201+
1202+
.privacy-content h1
1203+
font-size 2rem
1204+
font-weight 700
1205+
margin-bottom 8px
1206+
1207+
.privacy-content .last-updated
1208+
color var(--color-text-secondary)
1209+
font-size .9rem
1210+
margin-bottom 40px
1211+
1212+
.privacy-content h2
1213+
font-size 1.3rem
1214+
font-weight 600
1215+
margin-top 36px
1216+
margin-bottom 16px
1217+
padding-bottom 8px
1218+
border-bottom 2px solid var(--color-primary)
1219+
display inline-block
1220+
1221+
.privacy-content h3
1222+
font-size 1.05rem
1223+
font-weight 600
1224+
margin-top 24px
1225+
margin-bottom 10px
1226+
1227+
.privacy-content p
1228+
margin-bottom 14px
1229+
line-height 1.75
1230+
color var(--color-text-secondary)
1231+
font-size .95rem
1232+
1233+
.privacy-content ul
1234+
margin-bottom 14px
1235+
padding-left 24px
1236+
1237+
.privacy-content li
1238+
margin-bottom 8px
1239+
line-height 1.7
1240+
color var(--color-text-secondary)
1241+
font-size .95rem
1242+
1243+
.privacy-content a
1244+
color var(--color-primary)
1245+
1246+
.privacy-content a:hover
1247+
color var(--color-primary-dark)
1248+
1249+
.privacy-content table
1250+
width 100%
1251+
border-collapse collapse
1252+
margin 16px 0 24px
1253+
font-size .9rem
1254+
1255+
.privacy-content th,
1256+
.privacy-content td
1257+
padding 12px 16px
1258+
text-align left
1259+
border 1px solid var(--color-border)
1260+
1261+
.privacy-content th
1262+
background var(--color-bg-alt)
1263+
font-weight 600
1264+
color var(--color-text)
1265+
1266+
.privacy-content td
1267+
color var(--color-text-secondary)
1268+
1269+
/* ===== Cookie Consent ===== */
1270+
#cookie-consent
1271+
background #fff
1272+
border-top 1px solid var(--color-border)
1273+
box-shadow 0 -2px 10px rgba(0, 0, 0, .06)
1274+
padding 20px
1275+
1276+
.cookie-consent-inner
1277+
max-width 1200px
1278+
margin 0 auto
1279+
display flex
1280+
flex-wrap wrap
1281+
align-items center
1282+
justify-content space-between
1283+
gap 16px
1284+
1285+
.cookie-consent-text
1286+
flex 1
1287+
min-width 280px
1288+
font-size .9rem
1289+
color var(--color-text-secondary)
1290+
line-height 1.6
1291+
margin 0
1292+
1293+
.cookie-consent-text a
1294+
color var(--color-primary)
1295+
text-decoration underline
1296+
1297+
.cookie-consent-actions
1298+
display flex
1299+
gap 10px
1300+
flex-shrink 0
1301+
1302+
#cookie-reject
1303+
padding 10px 20px
1304+
border 1px solid var(--color-border)
1305+
border-radius var(--radius-sm)
1306+
background var(--color-bg)
1307+
color var(--color-text-secondary)
1308+
font-size .88rem
1309+
font-weight 500
1310+
cursor pointer
1311+
transition all .15s
1312+
1313+
#cookie-reject:hover
1314+
border-color var(--color-primary)
1315+
color var(--color-primary)
1316+
1317+
#cookie-accept
1318+
padding 10px 20px
1319+
border none
1320+
border-radius var(--radius-sm)
1321+
background var(--color-primary)
1322+
color #fff
1323+
font-size .88rem
1324+
font-weight 600
1325+
cursor pointer
1326+
transition all .15s
1327+
1328+
#cookie-accept:hover
1329+
background var(--color-primary-dark)
1330+
1331+
@media (max-width: 600px)
1332+
#cookie-consent
1333+
padding 16px
1334+
.cookie-consent-inner
1335+
flex-direction column
1336+
align-items stretch
1337+
.cookie-consent-text
1338+
min-width auto
1339+
.cookie-consent-actions
1340+
justify-content flex-end
-546 Bytes
Loading

src/views/parts/footer.pug

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ footer.site-footer
2929
.footer-bottom
3030
p © 2024 ZHAO Xudong. MIT License.
3131
.footer-bottom-links
32+
a(href='/privacy-policy/') Privacy Policy
3233
a(href='https://html5beta.com', target='_blank', rel='noreferrer') Author
3334
a(href='http://github.com/zxdong262', target='_blank', rel='noreferrer') GitHub
3435
a(href='https://html5beta.com/page/timeline.html', target='_blank', rel='noreferrer') Resume

src/views/parts/react-footer.pug

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,45 @@ script(type='module').
1313
var heroEl = document.getElementById('hero-anim')
1414
if (heroEl) new HeroAnimate(heroEl)
1515

16-
script(async=true, src='https://www.googletagmanager.com/gtag/js?id=G-0FRVEJZ2Z2')
17-
script(async=true, src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3871790631789822' crossorigin='anonymous')
16+
#cookie-consent(style='display:none')
17+
.cookie-consent-inner
18+
p.cookie-consent-text This website uses cookies for analytics and personalized ads. By clicking "Accept", you consent to the use of cookies for analytics and advertising purposes, including Google's use of IP-based solutions as described in our #[a(href='/privacy-policy/') Privacy Policy].
19+
.cookie-consent-actions
20+
button#cookie-reject Reject
21+
button#cookie-accept Accept
22+
1823
script.
19-
window.dataLayer = window.dataLayer || [];
20-
function gtag(){dataLayer.push(arguments);}
21-
gtag('js', new Date());
22-
gtag('config', 'G-0FRVEJZ2Z2');
24+
(function(){
25+
var consent = localStorage.getItem('cookie-consent');
26+
if (!consent) {
27+
document.getElementById('cookie-consent').style.display = 'block';
28+
} else if (consent === 'accepted') {
29+
loadGoogleScripts();
30+
}
31+
document.getElementById('cookie-accept').addEventListener('click', function() {
32+
localStorage.setItem('cookie-consent', 'accepted');
33+
document.getElementById('cookie-consent').style.display = 'none';
34+
document.body.style.paddingBottom = '';
35+
loadGoogleScripts();
36+
});
37+
document.getElementById('cookie-reject').addEventListener('click', function() {
38+
localStorage.setItem('cookie-consent', 'rejected');
39+
document.getElementById('cookie-consent').style.display = 'none';
40+
document.body.style.paddingBottom = '';
41+
});
42+
function loadGoogleScripts() {
43+
var s1 = document.createElement('script');
44+
s1.async = true;
45+
s1.src = 'https://www.googletagmanager.com/gtag/js?id=G-0FRVEJZ2Z2';
46+
document.head.appendChild(s1);
47+
var s2 = document.createElement('script');
48+
s2.async = true;
49+
s2.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3871790631789822';
50+
s2.crossOrigin = 'anonymous';
51+
document.head.appendChild(s2);
52+
window.dataLayer = window.dataLayer || [];
53+
function gtag(){dataLayer.push(arguments);}
54+
gtag('js', new Date());
55+
gtag('config', 'G-0FRVEJZ2Z2');
56+
}
57+
})();

src/views/privacy-policy.pug

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
doctype html
2+
html(lang=langCode)
3+
head
4+
title #{siteName} - Privacy Policy
5+
meta(name='description', content='Privacy Policy for electerm website and services')
6+
meta(name='keywords', content=keywords)
7+
meta(property='og:title' content='electerm - Privacy Policy')
8+
meta(property='og:description' content='Privacy Policy for electerm website and services')
9+
meta(name='twitter:title' content='electerm - Privacy Policy')
10+
meta(name='twitter:description' content='Privacy Policy for electerm website and services')
11+
include ./parts/react-header
12+
body
13+
include ./parts/header
14+
main.privacy-page
15+
.container
16+
.privacy-content
17+
h1 Privacy Policy
18+
p.last-updated Last updated: June 18, 2026
19+
p This Privacy Policy describes how electerm ("we", "us", or "our") collects, uses, and shares information when you visit #[a(href='https://electerm.html5beta.com') electerm.html5beta.com] (the "Website").
20+
21+
h2 1. Information We Collect
22+
h3 1.1 Automatically Collected Information
23+
p When you visit our Website, we automatically collect certain information through cookies and similar technologies, including:
24+
ul
25+
li IP address
26+
li Browser type and version
27+
li Operating system
28+
li Pages visited and time spent on pages
29+
li Referring website addresses
30+
li Device identifiers
31+
32+
h3 1.2 Cookies and Similar Technologies
33+
p We use the following types of cookies:
34+
table
35+
tr
36+
th Type
37+
th Purpose
38+
th Duration
39+
tr
40+
td Essential Cookies
41+
td Required for the Website to function properly
42+
td Session
43+
tr
44+
td Analytics Cookies (Google Analytics)
45+
td To understand how visitors use our Website
46+
td Up to 2 years
47+
tr
48+
td Advertising Cookies (Google AdSense)
49+
td To serve relevant advertisements
50+
td Up to 2 years
51+
52+
h2 2. How We Use Your Information
53+
p We use the collected information to:
54+
ul
55+
li Operate and maintain the Website
56+
li Analyze Website traffic and usage patterns
57+
li Serve relevant advertisements through Google AdSense
58+
li Improve user experience
59+
li Comply with legal obligations
60+
61+
h2 3. Google Services
62+
h3 3.1 Google Analytics
63+
p We use Google Analytics to analyze the use of our Website. Google Analytics gathers information about Website use by means of cookies. The information gathered is used to create reports about the use of our Website.
64+
p Google's privacy policy is available at: #[a(href='https://policies.google.com/privacy', target='_blank', rel='noreferrer') https://policies.google.com/privacy]
65+
66+
h3 3.2 Google AdSense
67+
p We use Google AdSense to serve advertisements on our Website. Google AdSense uses cookies to serve ads based on your prior visits to our Website or other websites.
68+
p Google uses advertising technologies (such as cookies) to serve ads on our Website. Google may use your IP address and other identifiers to:
69+
ul
70+
li Serve personalized or non-personalized ads
71+
li Measure ad effectiveness
72+
li Prevent fraud and abuse
73+
p Starting August 3, 2026, Google will use IP addresses for ad measurement and personalization in the European Economic Area (EEA), United Kingdom, and Switzerland, utilizing privacy-enhancing technologies (PETs) such as on-device processing, trusted execution environments, and secure multi-party computation.
74+
p For more information about how Google uses data when you use our Website, visit: #[a(href='https://policies.google.com/technologies/partner-sites', target='_blank', rel='noreferrer') https://policies.google.com/technologies/partner-sites]
75+
76+
h2 4. Your Rights (EEA, UK, and Switzerland)
77+
p If you are located in the EEA, UK, or Switzerland, you have the following rights under applicable data protection laws:
78+
ul
79+
li #[strong Right to Access:] You can request a copy of your personal data
80+
li #[strong Right to Rectification:] You can request correction of inaccurate data
81+
li #[strong Right to Erasure:] You can request deletion of your personal data
82+
li #[strong Right to Restrict Processing:] You can request that we limit how we use your data
83+
li #[strong Right to Data Portability:] You can request a copy of your data in a machine-readable format
84+
li #[strong Right to Object:] You can object to the processing of your personal data
85+
li #[strong Right to Withdraw Consent:] You can withdraw your consent at any time
86+
87+
h2 5. Consent and Cookie Choices
88+
p When you first visit our Website, you will be presented with a cookie consent banner. You can:
89+
ul
90+
li #[strong Accept all cookies:] Enable all cookies including analytics and advertising
91+
li #[strong Reject non-essential cookies:] Only essential cookies will be used; personalized ads will be disabled
92+
p You can change your preferences at any time by clearing your browser cookies and revisiting the Website.
93+
94+
h2 6. Legal Basis for Processing (EEA, UK, and Switzerland)
95+
p We process your personal data based on:
96+
ul
97+
li #[strong Consent:] For analytics and advertising cookies (you can withdraw consent at any time)
98+
li #[strong Legitimate Interests:] For operating and securing our Website
99+
100+
h2 7. Data Retention
101+
p Analytics data collected by Google Analytics is retained for 26 months. Cookie consent preferences are stored locally in your browser.
102+
103+
h2 8. Third-Party Links
104+
p Our Website contains links to third-party websites (e.g., GitHub, SourceForge). We are not responsible for the privacy practices of these websites.
105+
106+
h2 9. Children's Privacy
107+
p Our Website is not directed to children under 16. We do not knowingly collect personal information from children.
108+
109+
h2 10. Changes to This Policy
110+
p We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the "Last updated" date.
111+
112+
h2 11. Contact Us
113+
p If you have any questions about this Privacy Policy, please contact us:
114+
ul
115+
li Email: #[a(href='mailto:zxdong@gmail.com') zxdong@gmail.com]
116+
li Website: #[a(href='https://electerm.html5beta.com') electerm.html5beta.com]
117+
li GitHub: #[a(href='https://github.com/electerm/electerm', target='_blank', rel='noreferrer') github.com/electerm/electerm]
118+
include ./parts/footer
119+
include ./parts/react-footer

0 commit comments

Comments
 (0)