Skip to content

Commit f205ed3

Browse files
pellux-networkpellux-network
authored
chore: add homepage
1 parent 0603f49 commit f205ed3

1 file changed

Lines changed: 344 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 344 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,344 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>EDxDC</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<style>
8+
:root {
9+
--bg: #181c20;
10+
--panel: #23272e;
11+
--accent: #4da6ff;
12+
--accent2: #ffb84d;
13+
--hover: #98ccff;
14+
--text: #e0e0e0;
15+
--muted: #888;
16+
--radius: 18px;
17+
--shadow: 0 4px 24px #000a;
18+
}
19+
html, body {
20+
background: var(--bg);
21+
color: var(--text);
22+
font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
23+
margin: 0;
24+
padding: 0;
25+
min-height: 100vh;
26+
}
27+
body {
28+
display: flex;
29+
flex-direction: column;
30+
min-height: 100vh;
31+
}
32+
.main-header {
33+
background: linear-gradient(90deg, #1e2227 60%, #23272e 100%);
34+
box-shadow: var(--shadow);
35+
padding: 2.5rem 0 1.5rem 0;
36+
text-align: center;
37+
border-radius: 0 0 var(--radius) var(--radius);
38+
}
39+
.logo-img {
40+
width: 120px;
41+
border-radius: 16px;
42+
box-shadow: 0 2px 16px #0008;
43+
margin-bottom: 1.2rem;
44+
transition: transform 0.2s;
45+
}
46+
.logo-img:hover {
47+
transform: scale(1.05) rotate(-2deg);
48+
}
49+
.main-title {
50+
font-size: 2.7rem;
51+
font-weight: 700;
52+
letter-spacing: 0.04em;
53+
margin: 0 0 0.5rem 0;
54+
color: var(--accent);
55+
text-shadow: 0 2px 12px #0007;
56+
}
57+
.subtitle {
58+
font-size: 1.18em;
59+
color: #b0cfff;
60+
margin-bottom: 0.5em;
61+
}
62+
.note {
63+
background: var(--panel);
64+
color: var(--accent2);
65+
border-left: 5px solid var(--accent2);
66+
padding: 0.85em 1.2em;
67+
margin: 2em auto 2.5em auto;
68+
font-size: 1.08em;
69+
max-width: 480px;
70+
border-radius: var(--radius);
71+
box-shadow: 0 2px 10px #0004;
72+
}
73+
.note a {
74+
color: var(--accent);
75+
text-decoration: none;
76+
font-weight: 500;
77+
transition: color 0.13s, border 0.13s;
78+
border-bottom: 2px solid transparent;
79+
}
80+
.note a:hover {
81+
color: var(--hover);
82+
border-bottom: 2px solid var(--hover);
83+
}
84+
.container {
85+
max-width: 900px;
86+
margin: 0 auto;
87+
padding: .5rem 1.5rem 3rem 1.5rem;
88+
flex: 1;
89+
}
90+
.features-grid {
91+
display: grid;
92+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
93+
gap: 1.5em;
94+
margin: 2.5em 0 2em 0;
95+
}
96+
.feature-card {
97+
background: var(--panel);
98+
border-radius: var(--radius);
99+
box-shadow: 0 2px 12px #0005;
100+
padding: 1.3em 1.2em 1.1em 1.2em;
101+
display: flex;
102+
flex-direction: column;
103+
align-items: flex-start;
104+
min-height: 120px;
105+
transition: transform 0.13s, box-shadow 0.13s;
106+
border-left: 4px solid var(--accent);
107+
}
108+
.feature-card:hover {
109+
transform: translateY(-4px) scale(1.025);
110+
box-shadow: 0 6px 24px #0007;
111+
border-left: 4px solid var(--hover);
112+
}
113+
.feature-title {
114+
font-size: 1.13em;
115+
font-weight: 600;
116+
margin-bottom: 0.4em;
117+
color: var(--accent);
118+
}
119+
.quickstart-panel {
120+
background: linear-gradient(90deg, #23272e 80%, #1e2227 100%);
121+
border-radius: var(--radius);
122+
box-shadow: 0 2px 12px #0005;
123+
padding: 1.5em 2em 1.2em 2em;
124+
margin: 2.5em 0 2.5em 0;
125+
border-left: 5px solid var(--accent);
126+
transition: box-shadow 0.13s;
127+
}
128+
.quickstart-panel:hover {
129+
box-shadow: 0 6px 24px #0007;
130+
}
131+
.quickstart-panel h2 {
132+
margin-top: 0;
133+
color: var(--accent);
134+
font-size: 1.3em;
135+
letter-spacing: 0.01em;
136+
}
137+
.quickstart-panel ol {
138+
margin: 0 0 0 1.5em;
139+
padding: 0;
140+
font-size: 1.07em;
141+
}
142+
.quickstart-panel a {
143+
color: var(--accent);
144+
text-decoration: none;
145+
font-weight: 500;
146+
transition: color 0.13s, border 0.13s;
147+
border-bottom: 2px solid transparent;
148+
}
149+
.quickstart-panel a:hover {
150+
color: var(--hover);
151+
border-bottom: 2px solid var(--hover);
152+
}
153+
.docs-section {
154+
margin: 2.5em 0 1.5em 0;
155+
}
156+
.docs-list {
157+
display: flex;
158+
flex-wrap: wrap;
159+
gap: 1.2em 2.5em;
160+
list-style: none;
161+
padding: 0;
162+
margin: 1.2em 0 2em 0;
163+
}
164+
.docs-list li {
165+
font-size: 1.08em;
166+
}
167+
.docs-list a {
168+
color: var(--accent);
169+
text-decoration: none;
170+
font-weight: 500;
171+
border-bottom: 2px solid transparent;
172+
transition: border 0.13s, color 0.13s;
173+
padding-bottom: 2px;
174+
}
175+
.docs-list a:hover {
176+
color: var(--hover);
177+
border-bottom: 2px solid var(--hover);
178+
}
179+
.footer {
180+
text-align: center;
181+
color: var(--muted);
182+
font-size: 1em;
183+
margin: 2.5em 0 1.2em 0;
184+
letter-spacing: 0.01em;
185+
}
186+
.footer a {
187+
color: var(--accent);
188+
text-decoration: none;
189+
font-weight: 500;
190+
transition: color 0.13s;
191+
}
192+
.footer a:hover {
193+
color: var(--hover);
194+
text-decoration: underline;
195+
}
196+
@media (max-width: 600px) {
197+
.container { padding: 1.2rem 0.5rem 2rem 0.5rem; }
198+
.main-header { padding: 1.5rem 0 1rem 0; }
199+
.quickstart-panel { padding: 1em 0.7em 1em 0.7em; }
200+
.features-grid { grid-template-columns: 1fr; }
201+
}
202+
</style>
203+
</head>
204+
<body>
205+
<header class="main-header">
206+
<img src="./assets/giticon.png" alt="EDxDC Logo" class="logo-img" />
207+
<div class="main-title">EDxDC</div>
208+
<div class="subtitle">
209+
Real-time Elite Dangerous journal data on your X52 Pro MFD.<br />
210+
Instantly see system, planet, and cargo info as you play.
211+
</div>
212+
<div class="note">
213+
<b>Note:</b> Only works with the X52 Pro (not the regular X52 HOTAS).
214+
</div>
215+
<div class="note">
216+
<b>Note:</b> EDxDC is currently in beta. Please report bugs on
217+
<a href="https://github.com/pellux-network/EDxDC/issues" target="_blank"
218+
>GitHub Issues</a
219+
>.
220+
</div>
221+
</header>
222+
<div class="image-section">
223+
<figure>
224+
<img src="./assets/diagrams/nextjumpexample.png" alt="Next Jump Example" class="feature-image" />
225+
<figcaption class="image-caption">
226+
<b>Example:</b> The "Next Jump" page on the X52 Pro MFD, showing the next jump of the plotted route in real time.
227+
</figcaption>
228+
</figure>
229+
</div>
230+
<style>
231+
.image-section {
232+
display: flex;
233+
justify-content: center;
234+
margin: 2.5em 0 1.5em 0;
235+
}
236+
.feature-image {
237+
max-width: 98%;
238+
width: 480px;
239+
border-radius: 2px;
240+
box-shadow: 0 2px 16px #0008;
241+
border: 8px solid var(--panel);
242+
background: var(--panel);
243+
transition: box-shadow 0.15s;
244+
}
245+
.feature-image:hover {
246+
box-shadow: 0 6px 32px #000b;
247+
}
248+
.image-caption {
249+
color: var(--muted);
250+
font-size: 1.03em;
251+
margin-top: 0.7em;
252+
text-align: center;
253+
max-width: 480px;
254+
}
255+
@media (max-width: 600px) {
256+
.feature-image { width: 99vw; max-width: 99vw; }
257+
.image-caption { max-width: 99vw; }
258+
}
259+
</style>
260+
<main class="container">
261+
<section class="features-grid">
262+
<div class="feature-card">
263+
<div class="feature-title">Station &amp; Planet Details</div>
264+
<div>See station, fleet carrier, and planet info at a glance.</div>
265+
</div>
266+
<div class="feature-card">
267+
<div class="feature-title">Real-Time Cargo Tracking</div>
268+
<div>Monitor your cargo hold and materials instantly.</div>
269+
</div>
270+
<div class="feature-card">
271+
<div class="feature-title">Surface Gravity &amp; Scan Value</div>
272+
<div>Get surface gravity and scan value indicators for planets.</div>
273+
</div>
274+
<div class="feature-card">
275+
<div class="feature-title">Context-Aware Pages</div>
276+
<div>Pages switch automatically based on your current activity.</div>
277+
</div>
278+
<div class="feature-card">
279+
<div class="feature-title">Manual EDSM Data Refresh</div>
280+
<div>
281+
Update exploration data on demand to ensure you have the latest
282+
system information.
283+
</div>
284+
</div>
285+
<div class="feature-card">
286+
<div class="feature-title">Scoopability &amp; Route Info</div>
287+
<div>See scoopable stars and jump route information.</div>
288+
</div>
289+
</section>
290+
<section class="quickstart-panel">
291+
<h2 style="color: var(--text)">Quick Start</h2>
292+
<ol>
293+
<li>
294+
Install the official
295+
<a
296+
href="https://support.logi.com/hc/en-us/articles/360024838173--Downloads-X52-Professional-Space-Flight-H-O-T-A-S"
297+
target="_blank"
298+
>
299+
Logitech X52 Pro drivers
300+
</a>
301+
</li>
302+
<li>
303+
<a
304+
href="https://github.com/pellux-network/EDxDC/releases/latest"
305+
target="_blank"
306+
>
307+
Download
308+
</a>
309+
the latest EDxDC installer from GitHub and launch it
310+
</li>
311+
<li>
312+
After installation, the app is ready to run.<br>
313+
If needed, the config file is located at: <code>%APPDATA%\EDxDC\main.conf</code>
314+
</li>
315+
</ol>
316+
<div class="note" style="margin-top: 1em">
317+
<b>Note</b>: For detailed setup, see the
318+
<a href="./1.-Getting-Started">Getting Started</a> guide.
319+
</div>
320+
</section>
321+
<section class="docs-section">
322+
<h2 style="color: var(--text); margin-bottom: 0.7em">Documentation</h2>
323+
<ul class="docs-list">
324+
<li><a href="./1.-Getting-Started">Getting Started</a></li>
325+
<li><a href="./2.-Features-and-Output">Features &amp; Output</a></li>
326+
<li><a href="./3.-Configuration">Configuration</a></li>
327+
<li><a href="./4.-Troubleshooting">Troubleshooting</a></li>
328+
<li><a href="./5.-Drivers">Drivers</a></li>
329+
<li><a href="./6.-Credits">Credits</a></li>
330+
</ul>
331+
</section>
332+
</main>
333+
<footer class="footer">
334+
<sub>
335+
EDxDC is open source and maintained for compatibility with the latest
336+
Elite Dangerous journal formats.<br />
337+
<a href="https://github.com/pellux-network/EDxDC" target="_blank"
338+
>View on GitHub</a
339+
>
340+
</sub>
341+
</footer>
342+
</body>
343+
</html>
344+
```

0 commit comments

Comments
 (0)