Skip to content

Commit 96c92c0

Browse files
ubidzzubidzz
committed
Refine website downloads and high resolution layout
1 parent 468c3bb commit 96c92c0

3 files changed

Lines changed: 61 additions & 28 deletions

File tree

‎assets/Synix_logo_Icon.ico‎

4.19 KB
Binary file not shown.

‎index.html‎

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<meta name="twitter:title" content="Synix Control Panel">
1616
<meta name="twitter:description" content="Easy personal game server hosting for Windows.">
1717
<meta name="twitter:image" content="https://ubidzz.github.io/Synix-Control-Panel/assets/screenshots/dashboard-private.png">
18-
<link rel="icon" href="./favicon.ico">
18+
<link rel="icon" type="image/x-icon" href="./assets/Synix_logo_Icon.ico">
1919
<link rel="stylesheet" href="./styles.css">
2020
</head>
2121
<body>
@@ -34,17 +34,17 @@
3434
<a href="#install">Install</a>
3535
<a href="#support">Support</a>
3636
</nav>
37-
<a class="button button-small button-outline header-download" href="https://github.com/ubidzz/Synix-Control-Panel/releases/latest">Download</a>
37+
<a class="button button-small button-primary header-download" href="https://github.com/ubidzz/Synix-Control-Panel/releases/latest/download/SynixSetup.msi" aria-label="Download the latest Synix MSI installer">Download MSI</a>
3838
</header>
3939

4040
<main id="main">
4141
<section id="top" class="hero section-shell">
4242
<div class="hero-copy">
4343
<div class="eyebrow"><span></span> Built for personal Windows servers</div>
44-
<h1>Run your game servers.<br><em>Skip the command-line headache.</em></h1>
44+
<h1><span>Run your game servers.</span><em>Skip the command-line headache.</em></h1>
4545
<p class="hero-lede">Synix brings installation, configuration, monitoring, backups, updates, and common maintenance into one clear Windows application.</p>
4646
<div class="hero-actions">
47-
<a class="button button-primary" href="https://github.com/ubidzz/Synix-Control-Panel/releases/latest">Get Synix</a>
47+
<a class="button button-primary" href="https://github.com/ubidzz/Synix-Control-Panel/releases/latest/download/SynixSetup.msi">Download the latest MSI</a>
4848
<a class="button button-secondary" href="#gallery">See it in action</a>
4949
</div>
5050
<ul class="hero-points" aria-label="Key benefits">
@@ -57,7 +57,15 @@ <h1>Run your game servers.<br><em>Skip the command-line headache.</em></h1>
5757
<div class="hero-visual">
5858
<div class="glow glow-one"></div>
5959
<div class="glow glow-two"></div>
60-
<img class="hero-screenshot" src="./assets/screenshots/dashboard-private.png" alt="Synix dashboard monitoring six game servers" width="1584" height="992">
60+
<div class="product-window hero-window">
61+
<div class="product-window-bar" aria-hidden="true">
62+
<span></span><span></span><span></span>
63+
<strong>Synix Control Panel</strong>
64+
</div>
65+
<div class="product-screen">
66+
<img class="hero-screenshot" src="./assets/screenshots/dashboard-private.png" alt="Synix dashboard monitoring six game servers" width="1584" height="992">
67+
</div>
68+
</div>
6169
<div class="floating-stat stat-profiles"><strong>210+</strong><span>server profiles</span></div>
6270
<div class="floating-stat stat-local"><strong>Local</strong><span>your data stays yours</span></div>
6371
</div>
@@ -129,8 +137,11 @@ <h2>Your servers stay on your PC.</h2>
129137
<div><span>✓</span><p><strong>Selective elevation</strong>Windows-level tasks request permission only when required.</p></div>
130138
</div>
131139
</div>
132-
<figure class="privacy-image">
133-
<img src="./assets/screenshots/settings-privacy.png" alt="Synix Privacy and Security settings" loading="lazy" width="1100" height="720">
140+
<figure class="privacy-image product-window media-window">
141+
<div class="product-window-bar" aria-hidden="true"><span></span><span></span><span></span><strong>Privacy &amp; Security</strong></div>
142+
<div class="product-screen">
143+
<img src="./assets/screenshots/settings-privacy.png" alt="Synix Privacy and Security settings" loading="lazy" width="1100" height="720">
144+
</div>
134145
<figcaption>Privacy and security controls are built into the application.</figcaption>
135146
</figure>
136147
</div>
@@ -156,8 +167,11 @@ <h2>Monitoring that stays readable.</h2>
156167
<p>The dashboard summarizes every server while the detailed monitor shows the processes and resources behind the numbers.</p>
157168
<a class="text-link" href="#gallery">Explore the complete gallery <span>→</span></a>
158169
</div>
159-
<figure class="showcase-image">
160-
<img src="./assets/screenshots/resource-monitor.png" alt="Synix Resource Monitor showing one active server" loading="lazy" width="1180" height="760">
170+
<figure class="showcase-image product-window media-window">
171+
<div class="product-window-bar" aria-hidden="true"><span></span><span></span><span></span><strong>Live Resource Monitor</strong></div>
172+
<div class="product-screen">
173+
<img src="./assets/screenshots/resource-monitor.png" alt="Synix Resource Monitor showing one active server" loading="lazy" width="1180" height="760">
174+
</div>
161175
</figure>
162176
</section>
163177

@@ -229,7 +243,8 @@ <h2>One application. Three ways to start.</h2>
229243
<span class="tag">Recommended</span>
230244
<h3>Windows Installer</h3>
231245
<p>Normal Windows installation with Start Menu and Apps list entries.</p>
232-
<a class="button button-primary" href="https://github.com/ubidzz/Synix-Control-Panel/releases/latest">Download MSI</a>
246+
<a class="button button-primary" href="https://github.com/ubidzz/Synix-Control-Panel/releases/latest/download/SynixSetup.msi">Download latest MSI</a>
247+
<small class="latest-download-note">Automatically follows the newest GitHub release.</small>
233248
</article>
234249
<article class="install-card">
235250
<h3>WinGet</h3>
@@ -239,7 +254,7 @@ <h3>WinGet</h3>
239254
<article class="install-card">
240255
<h3>Standalone</h3>
241256
<p>Download the executable and run it from a folder of your choice.</p>
242-
<a class="button button-secondary" href="https://github.com/ubidzz/Synix-Control-Panel/releases/latest">Get standalone</a>
257+
<a class="button button-secondary" href="https://github.com/ubidzz/Synix-Control-Panel/releases/latest/download/Synix.Control.Panel.exe">Get latest standalone</a>
243258
</article>
244259
</div>
245260
<aside class="notice">

‎styles.css‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
--purple: #a98cff;
1616
--warning: #ffbf3f;
1717
--radius: 22px;
18-
--shadow: 0 28px 80px rgba(0, 0, 0, .38);
18+
--shadow: 0 30px 90px rgba(0, 0, 0, .46);
19+
--max-width: 1360px;
1920
}
2021

2122
* { box-sizing: border-box; }
@@ -28,6 +29,7 @@ body {
2829
color: var(--text);
2930
font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
3031
line-height: 1.55;
32+
overflow-x: hidden;
3133
}
3234
body::before {
3335
content: "";
@@ -46,7 +48,7 @@ code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
4648

4749
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .8rem 1rem; background: var(--cyan); color: #031010; border-radius: .5rem; font-weight: 800; }
4850
.skip-link:focus { top: 1rem; }
49-
.section-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
51+
.section-shell { width: min(var(--max-width), calc(100% - 56px)); margin-inline: auto; }
5052
.section { padding-block: 110px; }
5153
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800; }
5254
.eyebrow span { width: 24px; height: 2px; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
@@ -60,7 +62,7 @@ code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
6062
align-items: center;
6163
gap: 2rem;
6264
min-height: 74px;
63-
padding: 0 max(24px, calc((100vw - 1180px) / 2));
65+
padding: 0 max(28px, calc((100vw - var(--max-width)) / 2));
6466
background: rgba(4, 11, 22, .82);
6567
backdrop-filter: blur(18px);
6668
border-bottom: 1px solid rgba(120, 148, 188, .18);
@@ -79,24 +81,35 @@ code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
7981
.button-secondary:hover, .button-outline:hover { border-color: var(--cyan); background: var(--surface-2); }
8082
.button-small { min-height: 40px; padding-inline: 1rem; font-size: .88rem; }
8183

82-
.hero { display: grid; grid-template-columns: .82fr 1.4fr; align-items: center; gap: 4rem; min-height: calc(100vh - 74px); padding-block: 92px 110px; }
84+
.hero { display: grid; grid-template-columns: minmax(420px, .9fr) minmax(0, 1.22fr); align-items: center; gap: clamp(2.5rem, 4.5vw, 5rem); min-height: min(880px, calc(100vh - 74px)); padding-block: 84px 104px; }
8385
.hero-copy { position: relative; z-index: 2; }
84-
.hero h1 { margin: 1rem 0 1.4rem; font-size: clamp(3.25rem, 5.2vw, 5.8rem); line-height: .96; letter-spacing: -.055em; }
85-
.hero h1 em { color: var(--cyan); font-style: normal; text-shadow: 0 0 42px rgba(40, 215, 207, .22); }
86+
.hero h1 { max-width: 700px; margin: 1rem 0 1.4rem; font-size: clamp(3.2rem, 4.4vw, 5.2rem); line-height: .97; letter-spacing: -.052em; text-wrap: balance; }
87+
.hero h1 span, .hero h1 em { display: block; }
88+
.hero h1 em { margin-top: .12em; color: var(--cyan); font-style: normal; text-shadow: 0 0 42px rgba(40, 215, 207, .22); }
8689
.hero-lede { max-width: 620px; color: var(--muted); font-size: 1.13rem; }
8790
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 2rem 0; }
8891
.hero-points { display: flex; flex-wrap: wrap; gap: .55rem 1.15rem; padding: 0; margin: 0; list-style: none; color: var(--muted); font-size: .88rem; font-weight: 650; }
8992
.hero-points li::before { content: "✓"; margin-right: .4rem; color: var(--green); }
9093
.hero-visual { position: relative; z-index: 1; min-width: 0; }
91-
.hero-screenshot { position: relative; z-index: 2; width: 112%; max-width: none; border: 1px solid rgba(117, 164, 213, .38); border-radius: 18px; box-shadow: var(--shadow); }
94+
.hero-screenshot { width: 100%; height: auto; }
95+
.product-window { position: relative; z-index: 2; overflow: hidden; background: #06101e; border: 1px solid rgba(117, 164, 213, .42); border-radius: 20px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.025) inset; }
96+
.product-window-bar { display: flex; align-items: center; gap: .45rem; height: 42px; padding-inline: 1rem; background: linear-gradient(180deg, rgba(23,42,67,.96), rgba(12,26,45,.96)); border-bottom: 1px solid rgba(117,164,213,.24); }
97+
.product-window-bar span { width: 9px; height: 9px; border-radius: 50%; background: #48627f; box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset; }
98+
.product-window-bar span:first-child { background: #ff6c72; }
99+
.product-window-bar span:nth-child(2) { background: #ffbf4f; }
100+
.product-window-bar span:nth-child(3) { background: #4be0a2; }
101+
.product-window-bar strong { margin-left: .55rem; color: #b9cbea; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
102+
.product-screen { overflow: hidden; background: #06101e; }
103+
.product-screen img { width: 100%; height: auto; object-fit: contain; }
104+
.hero-window { transform: perspective(1800px) rotateY(-1.2deg) rotateX(.4deg); transform-origin: center; }
92105
.glow { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; }
93106
.glow-one { width: 320px; height: 320px; right: -10%; top: -15%; background: rgba(40, 215, 207, .28); }
94107
.glow-two { width: 280px; height: 280px; left: 8%; bottom: -15%; background: rgba(169, 140, 255, .2); }
95108
.floating-stat { position: absolute; z-index: 4; display: grid; padding: .85rem 1rem; background: rgba(11, 23, 41, .9); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 38px rgba(0,0,0,.3); backdrop-filter: blur(12px); }
96109
.floating-stat strong { color: var(--cyan); font-size: 1.15rem; }
97110
.floating-stat span { color: var(--muted); font-size: .72rem; }
98-
.stat-profiles { right: -10%; top: 11%; }
99-
.stat-local { left: -4%; bottom: -8%; }
111+
.stat-profiles { right: -2%; top: 9%; }
112+
.stat-local { left: -3%; bottom: -7%; }
100113

101114
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1280px; margin: 0 auto; border-block: 1px solid rgba(120,148,188,.18); background: rgba(10, 22, 39, .72); }
102115
.trust-strip div { padding: 1.5rem 2rem; border-right: 1px solid rgba(120,148,188,.18); }
@@ -121,23 +134,23 @@ code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
121134
.feature-card ul { display: grid; gap: .4rem; padding-left: 1.1rem; }
122135

123136
.privacy-section { padding-block: 100px; background: linear-gradient(135deg, rgba(6,17,31,.96), rgba(9,34,42,.9)); border-block: 1px solid rgba(40,215,207,.16); }
124-
.privacy-layout { display: grid; grid-template-columns: .85fr 1.25fr; align-items: center; gap: 5rem; }
137+
.privacy-layout { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(3rem, 5vw, 6rem); }
125138
.privacy-list { display: grid; gap: 1rem; margin-top: 2rem; }
126139
.privacy-list > div { display: flex; gap: .9rem; align-items: flex-start; }
127140
.privacy-list > div > span { display: grid; place-items: center; flex: 0 0 28px; height: 28px; margin-top: .12rem; color: #031310; background: var(--cyan); border-radius: 50%; font-weight: 900; }
128141
.privacy-list p { margin: 0; color: var(--muted); }
129142
.privacy-list strong { display: block; color: var(--text); }
130143
.privacy-image { margin: 0; }
131-
.privacy-image img, .showcase-image img { border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
132-
.privacy-image figcaption { margin-top: .8rem; color: var(--muted-2); font-size: .8rem; text-align: center; }
144+
.media-window .product-screen img { display: block; aspect-ratio: auto; object-fit: contain; }
145+
.privacy-image figcaption { padding: .75rem 1rem .85rem; color: var(--muted-2); background: rgba(5,13,24,.9); border-top: 1px solid rgba(117,164,213,.16); font-size: .8rem; text-align: center; }
133146

134147
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 0; list-style: none; counter-reset: steps; }
135148
.steps li { min-height: 230px; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
136149
.steps li > span { display: grid; place-items: center; width: 42px; height: 42px; color: #031310; background: var(--cyan); border-radius: 12px; font-weight: 900; }
137150
.steps h3 { margin: 1.5rem 0 .5rem; }
138151
.steps p { margin: 0; color: var(--muted); font-size: .9rem; }
139152

140-
.showcase { display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 4rem; padding-block: 40px 110px; }
153+
.showcase { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(3rem, 5vw, 6rem); padding-block: 40px 110px; }
141154
.showcase-image { margin: 0; }
142155
.text-link { display: inline-flex; gap: .5rem; margin-top: 1rem; color: var(--cyan); text-decoration: none; font-weight: 800; }
143156
.text-link span { transition: transform .2s ease; }
@@ -164,6 +177,7 @@ code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
164177
.install-card.recommended { border-color: rgba(40,215,207,.55); box-shadow: inset 0 0 50px rgba(40,215,207,.05); }
165178
.install-card h3 { margin: .2rem 0 .8rem; font-size: 1.35rem; }
166179
.install-card p { min-height: 72px; color: var(--muted); }
180+
.latest-download-note { display: block; margin-top: .8rem; color: var(--muted-2); font-size: .75rem; }
167181
.tag { position: absolute; right: 1.2rem; top: 1.2rem; color: #031310; background: var(--cyan); border-radius: 999px; padding: .25rem .6rem; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
168182
.command { display: flex; align-items: stretch; overflow: hidden; background: #050b14; border: 1px solid var(--line); border-radius: 10px; }
169183
.command code { flex: 1; min-width: 0; padding: .8rem; overflow-x: auto; white-space: nowrap; font-size: .75rem; color: var(--cyan); }
@@ -176,7 +190,7 @@ code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
176190
.support-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
177191
.support-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
178192

179-
.site-footer { padding: 50px max(24px, calc((100vw - 1180px) / 2)) 24px; background: #030812; }
193+
.site-footer { padding: 50px max(28px, calc((100vw - var(--max-width)) / 2)) 24px; background: #030812; }
180194
.footer-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding-bottom: 2rem; }
181195
.footer-main p { color: var(--muted); }
182196
.footer-main nav { display: flex; flex-wrap: wrap; gap: 1rem; }
@@ -191,7 +205,8 @@ code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
191205
@media (max-width: 1080px) {
192206
.hero { grid-template-columns: 1fr; min-height: auto; }
193207
.hero-copy { max-width: 780px; }
194-
.hero-screenshot { width: 100%; }
208+
.hero h1 { max-width: 820px; }
209+
.hero-window { transform: none; }
195210
.stat-profiles { right: -1%; }
196211
.trust-strip { grid-template-columns: repeat(2, 1fr); }
197212
.trust-strip div:nth-child(2) { border-right: 0; }
@@ -206,7 +221,7 @@ code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
206221
}
207222

208223
@media (max-width: 760px) {
209-
.section-shell { width: min(100% - 28px, 1180px); }
224+
.section-shell { width: min(100% - 28px, var(--max-width)); }
210225
.section { padding-block: 76px; }
211226
.site-header { grid-template-columns: auto 1fr auto; padding-inline: 14px; gap: .75rem; }
212227
.menu-toggle { display: inline-flex; justify-self: end; padding: .5rem .75rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
@@ -215,7 +230,10 @@ code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
215230
.site-nav a { padding: .75rem; }
216231
.header-download { display: none; }
217232
.hero { gap: 2.5rem; padding-block: 60px 85px; }
218-
.hero h1 { font-size: clamp(2.8rem, 15vw, 4.6rem); }
233+
.hero h1 { font-size: clamp(2.8rem, 13vw, 4.4rem); }
234+
.product-window { border-radius: 13px; }
235+
.product-window-bar { height: 34px; padding-inline: .75rem; }
236+
.product-window-bar strong { display: none; }
219237
.floating-stat { display: none; }
220238
.trust-strip { grid-template-columns: 1fr; }
221239
.trust-strip div { border-right: 0; border-bottom: 1px solid rgba(120,148,188,.18); }

0 commit comments

Comments
 (0)