Skip to content

Commit 593b193

Browse files
aboseabose
committed
index html changes
1 parent 3b59814 commit 593b193

3 files changed

Lines changed: 82 additions & 41 deletions

File tree

‎docs/download-graphs.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,29 @@ a:hover { text-decoration: underline; }
109109
}
110110
.icon-btn:hover { background: var(--surface-2); border-color: var(--brand-amber); transform: translateY(-1px); }
111111

112+
.btn-download {
113+
display: inline-flex;
114+
align-items: center;
115+
gap: 8px;
116+
height: 38px;
117+
padding: 0 16px;
118+
border-radius: 10px;
119+
background: var(--brand-gradient);
120+
color: #fff;
121+
font-weight: 600;
122+
font-size: 0.9rem;
123+
border: none;
124+
box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-red) 30%, transparent);
125+
transition: transform 0.15s ease, box-shadow 0.15s ease;
126+
white-space: nowrap;
127+
}
128+
.btn-download:hover { transform: translateY(-1px); text-decoration: none; color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-red) 42%, transparent); }
129+
130+
@media (max-width: 560px) {
131+
.btn-download .btn-text { display: none; }
132+
.btn-download { padding: 0 12px; }
133+
}
134+
112135
/* ---------- Layout ---------- */
113136
main {
114137
max-width: 1200px;

‎docs/download-graphs.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<h1>Phoenix Code <span class="accent">Download Stats</span></h1>
4141
<div class="header-spacer"></div>
4242
<div class="header-actions">
43-
<a class="icon-btn" href="https://phcode.io" target="_blank" rel="noopener" title="Get Phoenix Code" aria-label="Get Phoenix Code"><i class="fa-solid fa-download"></i></a>
43+
<a class="btn-download" href="https://phcode.io" target="_blank" rel="noopener" title="Download Phoenix Code"><i class="fa-solid fa-download"></i> <span class="btn-text">Download Phoenix Code</span></a>
4444
<a class="icon-btn" href="https://github.com/phcode-dev/public-stats" target="_blank" rel="noopener" title="Data source on GitHub" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>
4545
<button class="icon-btn" id="themeToggle" title="Toggle theme" aria-label="Toggle theme"><i class="fa-solid fa-moon"></i></button>
4646
</div>
@@ -185,9 +185,9 @@ <h3><i class="fa-solid fa-arrow-trend-up ic"></i> Growth — all versions combin
185185
</main>
186186

187187
<footer class="site-footer">
188-
<span><i class="fa-solid fa-database ic"></i> Sourced hourly from the GitHub Releases API.</span>
188+
<a href="https://github.com/phcode-dev/public-stats" target="_blank" rel="noopener"><i class="fa-brands fa-github ic"></i> View source</a>
189189
<span class="spacer"></span>
190-
<a id="proofLink" href="https://github.com/phcode-dev/public-stats" target="_blank" rel="noopener"><i class="fa-solid fa-shield-halved"></i> Download proof &amp; source</a>
190+
<span>Made with <i class="fa-solid fa-heart" style="color:var(--brand-red)"></i> by <a href="https://phcode.io" target="_blank" rel="noopener">phcode.io</a></span>
191191
</footer>
192192

193193
<script>

‎docs/index.html‎

Lines changed: 56 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>phcode.io Public Stats</title>
6+
<title>Phoenix Code — Public Stats</title>
7+
8+
<!-- Microsoft Clarity -->
79
<script type="text/javascript">
810
(function(c,l,a,r,i,t,y){
911
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
@@ -17,51 +19,67 @@
1719
window.dataLayer = window.dataLayer || [];
1820
function gtag(){dataLayer.push(arguments);}
1921
gtag('js', new Date());
20-
2122
gtag('config', 'G-0TD6PVRN4L');
2223
</script>
24+
25+
<link rel="preconnect" href="https://fonts.googleapis.com">
26+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
27+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
28+
<link rel="stylesheet" href="download-graphs.css">
2329
<style>
24-
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f4f4f4; }
25-
.navbar { background: #333; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
26-
.navbar a, .navbar a img { color: #fff; text-decoration: none; }
27-
.navbar img.logo { height: 40px; }
28-
.content { display: flex; justify-content: center; margin-top: 20px; padding: 20px; }
29-
.card { background: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 20px; width: 30%; text-align: center; }
30-
.card img { max-width: 100%; height: auto; }
31-
.card a { text-decoration: none; color: #333; }
32-
.card-title { font-size: 18px; font-weight: bold; margin-top: 15px; }
33-
.card-description { font-size: 14px; margin-top: 5px; }
34-
.get-code:hover {text-decoration: underline;}
30+
.landing { max-width: 1200px; margin: 0 auto; padding: 48px 24px 80px; }
31+
.landing-hero { text-align: center; margin-bottom: 40px; }
32+
.landing-hero h2 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
33+
.landing-hero h2 .accent { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
34+
.landing-hero p { color: var(--muted); font-size: 1rem; margin: 0; }
35+
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 760px; margin: 0 auto; }
36+
.stat-card { text-decoration: none; color: inherit; display: block; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
37+
.stat-card:hover { transform: translateY(-3px); border-color: var(--brand-amber); text-decoration: none; box-shadow: 0 8px 28px rgba(16,24,40,0.10); }
38+
.stat-card .stat-icon { width: 52px; height: 52px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; background: var(--brand-gradient); margin-bottom: 14px; }
39+
.stat-card h3 { margin: 0 0 6px; font-size: 1.12rem; font-weight: 700; }
40+
.stat-card p { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; }
41+
.stat-card .go { color: var(--brand-amber); font-weight: 600; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 6px; }
3542
</style>
3643
</head>
3744
<body>
38-
<div class="navbar">
39-
<div class="navbar-left" style="display: flex; justify-content: center; align-items: center;">
40-
<img
41-
width="20px" src="images/phoenix-logo.svg" alt="phcode logo" class="logo">
42-
Phoenix Code Public Stats
43-
</div>
44-
<div class="navbar-right" style="display: flex; justify-content: center; align-items: center;">
45-
<img
46-
width="20px" src="images/download-svgrepo-com.svg" alt="phcode logo" class="logo">
47-
<div class="get-code" style="padding-right: 25px;">
48-
<a href="https://phcode.io" target="_blank">Get Phoenix Code</a>
49-
</div>
50-
<div>
51-
<a href="https://github.com/phcode-dev/public-stats" target="_blank">
52-
<img width="20px" src="images/github-white.svg" alt="GitHub">
53-
</a>
54-
</div>
45+
<header class="site-header">
46+
<img class="logo" src="images/phoenix-logo.svg" alt="Phoenix Code logo">
47+
<h1>Phoenix Code <span class="accent">Public Stats</span></h1>
48+
<div class="header-spacer"></div>
49+
<div class="header-actions">
50+
<a class="btn-download" href="https://phcode.io" target="_blank" rel="noopener" title="Download Phoenix Code"><i class="fa-solid fa-download"></i> <span class="btn-text">Download Phoenix Code</span></a>
51+
<a class="icon-btn" href="https://github.com/phcode-dev/public-stats" target="_blank" rel="noopener" title="Data source on GitHub" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>
52+
<button class="icon-btn" id="themeToggle" title="Toggle theme" aria-label="Toggle theme"><i class="fa-solid fa-moon"></i></button>
5553
</div>
56-
</div>
57-
<div class="content">
58-
<div class="card">
59-
<a href="download-graphs.html">
60-
<img width="50%" src="images/chart-line-svgrepo-com.svg" alt="Download Stats Graph">
61-
<div class="card-title">Download Stats</div>
62-
<div class="card-description">Explore detailed download statistics of Phoenix Code Editor.</div>
54+
</header>
55+
56+
<div class="landing">
57+
<div class="card-grid">
58+
<a class="card stat-card" href="download-graphs.html">
59+
<div class="stat-icon"><i class="fa-solid fa-chart-line"></i></div>
60+
<h3>Download Stats</h3>
61+
<p>Explore detailed download statistics of Phoenix Code Editor.</p>
6362
</a>
6463
</div>
6564
</div>
65+
66+
<footer class="site-footer">
67+
<a href="https://github.com/phcode-dev/public-stats" target="_blank" rel="noopener"><i class="fa-brands fa-github ic"></i> View source</a>
68+
<span class="spacer"></span>
69+
<span>Made with <i class="fa-solid fa-heart" style="color:var(--brand-red)"></i> by <a href="https://phcode.io" target="_blank" rel="noopener">phcode.io</a></span>
70+
</footer>
71+
72+
<script>
73+
(function () {
74+
const tgl = document.getElementById("themeToggle");
75+
function setTheme(t) {
76+
document.documentElement.setAttribute("data-theme", t);
77+
localStorage.setItem("dashTheme", t);
78+
tgl.innerHTML = '<i class="fa-solid fa-' + (t === "dark" ? "sun" : "moon") + '"></i>';
79+
}
80+
setTheme(localStorage.getItem("dashTheme") || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"));
81+
tgl.addEventListener("click", () => setTheme(document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark"));
82+
})();
83+
</script>
6684
</body>
6785
</html>

0 commit comments

Comments
 (0)