Skip to content

Commit c20d685

Browse files
DeMENIGECODeMENIGECO
authored
Create index.html
1 parent bcd1c65 commit c20d685

1 file changed

Lines changed: 388 additions & 0 deletions

File tree

‎docs/1.0.x/index.html‎

Lines changed: 388 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,388 @@
1+
<!DOCTYPE html>
2+
<html lang="it">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>Docs 1.0.x - PythonOS</title>
8+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9+
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11+
12+
<style>
13+
14+
*{
15+
margin:0;
16+
padding:0;
17+
box-sizing:border-box;
18+
}
19+
20+
body{
21+
font-family:'Poppins',sans-serif;
22+
background:#0f172a;
23+
color:white;
24+
overflow-x:hidden;
25+
}
26+
27+
/* NAVBAR */
28+
29+
nav{
30+
width:100%;
31+
padding:20px 8%;
32+
display:flex;
33+
justify-content:space-between;
34+
align-items:center;
35+
position:fixed;
36+
top:0;
37+
left:0;
38+
z-index:1000;
39+
40+
background:rgba(15,23,42,0.8);
41+
backdrop-filter:blur(10px);
42+
}
43+
44+
.logo{
45+
font-size:28px;
46+
font-weight:700;
47+
color:#4ade80;
48+
}
49+
50+
/* LINKS */
51+
52+
nav ul{
53+
display:flex;
54+
gap:30px;
55+
list-style:none;
56+
}
57+
58+
nav a{
59+
text-decoration:none;
60+
color:white;
61+
transition:0.3s;
62+
font-weight:500;
63+
}
64+
65+
nav a:hover{
66+
color:#4ade80;
67+
}
68+
69+
/* HAMBURGER */
70+
71+
.hamburger{
72+
display:none;
73+
font-size:34px;
74+
cursor:pointer;
75+
user-select:none;
76+
}
77+
78+
/* HERO */
79+
80+
.hero{
81+
min-height:100vh;
82+
83+
display:flex;
84+
justify-content:center;
85+
align-items:center;
86+
87+
text-align:center;
88+
89+
padding:120px 8%;
90+
91+
background:
92+
radial-gradient(circle at top left,#1e293b,#0f172a 60%);
93+
}
94+
95+
.hero-content{
96+
max-width:900px;
97+
}
98+
99+
.hero h1{
100+
font-size:80px;
101+
line-height:1.1;
102+
margin-bottom:20px;
103+
}
104+
105+
.hero h1 span{
106+
color:#4ade80;
107+
}
108+
109+
.hero p{
110+
font-size:22px;
111+
color:#cbd5e1;
112+
margin-bottom:40px;
113+
}
114+
115+
/* BUTTONS */
116+
117+
.buttons{
118+
display:flex;
119+
justify-content:center;
120+
gap:20px;
121+
flex-wrap:wrap;
122+
}
123+
124+
.btn{
125+
padding:15px 30px;
126+
border-radius:12px;
127+
128+
text-decoration:none;
129+
font-weight:600;
130+
131+
transition:0.3s;
132+
}
133+
134+
.btn-primary{
135+
background:#4ade80;
136+
color:#0f172a;
137+
}
138+
139+
.btn-primary:hover{
140+
transform:translateY(-3px);
141+
box-shadow:0 10px 30px rgba(74,222,128,0.4);
142+
}
143+
144+
.btn-secondary{
145+
border:2px solid #334155;
146+
color:white;
147+
}
148+
149+
.btn-secondary:hover{
150+
background:#1e293b;
151+
}
152+
153+
/* FEATURES */
154+
155+
.features{
156+
padding:100px 8%;
157+
}
158+
159+
.section-title{
160+
text-align:center;
161+
font-size:42px;
162+
margin-bottom:60px;
163+
}
164+
165+
.cards{
166+
display:grid;
167+
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
168+
gap:30px;
169+
}
170+
171+
.card{
172+
background:#1e293b;
173+
padding:30px;
174+
border-radius:20px;
175+
transition:0.3s;
176+
}
177+
178+
.card:hover{
179+
transform:translateY(-5px);
180+
background:#243247;
181+
}
182+
183+
.card h3{
184+
margin-bottom:15px;
185+
color:#4ade80;
186+
}
187+
188+
/* TERMINAL */
189+
190+
.terminal{
191+
margin:100px auto;
192+
max-width:900px;
193+
194+
background:#020617;
195+
196+
border-radius:20px;
197+
overflow:hidden;
198+
199+
border:1px solid #1e293b;
200+
}
201+
202+
.terminal-top{
203+
background:#111827;
204+
padding:12px;
205+
display:flex;
206+
gap:8px;
207+
}
208+
209+
.dot{
210+
width:12px;
211+
height:12px;
212+
border-radius:50%;
213+
}
214+
215+
.red{
216+
background:#ef4444;
217+
}
218+
219+
.yellow{
220+
background:#facc15;
221+
}
222+
223+
.green{
224+
background:#22c55e;
225+
}
226+
227+
.terminal-body{
228+
padding:30px;
229+
font-family:monospace;
230+
color:#4ade80;
231+
line-height:2;
232+
}
233+
234+
/* FOOTER */
235+
236+
footer{
237+
padding:40px;
238+
text-align:center;
239+
color:#94a3b8;
240+
}
241+
242+
/* MOBILE */
243+
244+
@media(max-width:768px){
245+
246+
.hero h1{
247+
font-size:50px;
248+
}
249+
250+
.hero p{
251+
font-size:18px;
252+
}
253+
254+
.hamburger{
255+
display:block;
256+
}
257+
258+
nav ul{
259+
260+
position:absolute;
261+
262+
top:80px;
263+
right:8%;
264+
265+
width:220px;
266+
267+
background:#1e293b;
268+
269+
flex-direction:column;
270+
271+
padding:20px;
272+
273+
border-radius:16px;
274+
275+
display:none;
276+
}
277+
278+
nav ul.active{
279+
display:flex;
280+
}
281+
282+
}
283+
284+
.btn-ot{
285+
color:#4ade80;
286+
}
287+
288+
289+
</style>
290+
</head>
291+
292+
<body>
293+
294+
<!-- NAVBAR -->
295+
296+
<nav>
297+
298+
<div class="logo">PythonOS</div>
299+
300+
<div class="hamburger" id="hamburger">
301+
☰
302+
</div>
303+
304+
<ul id="nav-links">
305+
<li><a href="https://pythonos-project.github.io/" target="_blank">Home</a></li>
306+
<li><a href="https://pythonos-project.github.io/docs/" target="_blank">Docs</a></li>
307+
<li><a href="https://pythonos-project.github.io/download" target="_blank">Download</a></li>
308+
<li><a href="https://github.com/pythonos-project/pythonos" target="_blank">GitHub</a></li>
309+
</ul>
310+
311+
</nav>
312+
313+
<!-- HERO -->
314+
315+
<section class="hero">
316+
317+
<div class="hero-content">
318+
319+
<h1>
320+
Il sistema operativo fatto in
321+
<span>Python</span>
322+
</h1>
323+
324+
<p>
325+
PythonOS è un mini sistema operativo creato in Python,
326+
moderno, veloce e open source.
327+
</p>
328+
329+
<div class="buttons">
330+
331+
<a href="https://pythonos-project.github.io/download" target="_blank" class="btn btn-primary">
332+
Scarica ora
333+
</a>
334+
335+
<a href="https://pythonos-project.github.io/docs/" target="_blank" class="btn btn-secondary">
336+
Documentazione
337+
</a>
338+
339+
</div>
340+
341+
</div>
342+
343+
</section>
344+
345+
<section class="features">
346+
<div align="center">
347+
<a class="btn btn-secondary" href="?file=md/start.md">Getting Started</a>
348+
<a class="btn btn-secondary" href="?file=md/apps.md">Usare le Apps</a>
349+
</div>
350+
</section>
351+
352+
<section class="features" id="mdc">
353+
354+
355+
356+
</section>
357+
358+
<!-- FOOTER -->
359+
360+
<footer>
361+
© 2026 PythonOS — Made with Python 🐍
362+
</footer>
363+
364+
<!-- JAVASCRIPT -->
365+
366+
<script>
367+
368+
const hamburger = document.getElementById("hamburger");
369+
const navLinks = document.getElementById("nav-links");
370+
371+
hamburger.addEventListener("click", () => {
372+
373+
navLinks.classList.toggle("active");
374+
375+
});
376+
377+
let file = getQueryElement("file")
378+
379+
fetch(file)
380+
.then(response => response.text())
381+
.then(text => {
382+
document.getElementById("mdc").innerHTML = marked.parse(text);
383+
});
384+
385+
</script>
386+
387+
</body>
388+
</html>

0 commit comments

Comments
 (0)