download.html

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Download - PythonOS</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0f172a;
    color:white;
    overflow-x:hidden;
}

/* NAVBAR */

nav{
    width:100%;
    padding:20px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;

    background:rgba(15,23,42,0.8);
    backdrop-filter:blur(10px);
}

.logo{
    font-size:28px;
    font-weight:700;
    color:#4ade80;
}

/* LINKS */

nav ul{
    display:flex;
    gap:30px;
    list-style:none;
}

nav a{
    text-decoration:none;
    color:white;
    transition:0.3s;
    font-weight:500;
}

nav a:hover{
    color:#4ade80;
}

/* HAMBURGER */

.hamburger{
    display:none;
    font-size:34px;
    cursor:pointer;
    user-select:none;
}

/* HERO */

.hero{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:120px 8%;

    background:
    radial-gradient(circle at top left,#1e293b,#0f172a 60%);
}

.hero-content{
    max-width:900px;
}

.hero h1{
    font-size:80px;
    line-height:1.1;
    margin-bottom:20px;
}

.hero h1 span{
    color:#4ade80;
}

.hero p{
    font-size:22px;
    color:#cbd5e1;
    margin-bottom:40px;
}

/* BUTTONS */

.buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.btn{
    padding:15px 30px;
    border-radius:12px;

    text-decoration:none;
    font-weight:600;

    transition:0.3s;
}

.btn-primary{
    background:#4ade80;
    color:#0f172a;
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(74,222,128,0.4);
}

.btn-secondary{
    border:2px solid #334155;
    color:white;
}

.btn-secondary:hover{
    background:#1e293b;
}

/* FEATURES */

.features{
    padding:100px 8%;
}

.section-title{
    text-align:center;
    font-size:42px;
    margin-bottom:60px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.card{
    background:#1e293b;
    padding:30px;
    border-radius:20px;
    transition:0.3s;
}

.card:hover{
    transform:translateY(-5px);
    background:#243247;
}

.card h3{
    margin-bottom:15px;
    color:#4ade80;
}

/* TERMINAL */

.terminal{
    margin:100px auto;
    max-width:900px;

    background:#020617;

    border-radius:20px;
    overflow:hidden;

    border:1px solid #1e293b;
}

.terminal-top{
    background:#111827;
    padding:12px;
    display:flex;
    gap:8px;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
}

.red{
    background:#ef4444;
}

.yellow{
    background:#facc15;
}

.green{
    background:#22c55e;
}

.terminal-body{
    padding:30px;
    font-family:monospace;
    color:#4ade80;
    line-height:2;
}

/* FOOTER */

footer{
    padding:40px;
    text-align:center;
    color:#94a3b8;
}

/* MOBILE */

@media(max-width:768px){

    .hero h1{
        font-size:50px;
    }

    .hero p{
        font-size:18px;
    }

    .hamburger{
        display:block;
    }

    nav ul{

        position:absolute;

        top:80px;
        right:8%;

        width:220px;

        background:#1e293b;

        flex-direction:column;

        padding:20px;

        border-radius:16px;

        display:none;
    }

    nav ul.active{
        display:flex;
    }

}

.btn-ot{
    color:#4ade80;
}


</style>
</head>

<body>

<!-- NAVBAR -->

<nav>

    <div class="logo">PythonOS</div>

    <div class="hamburger" id="hamburger">
        ☰
    </div>

    <ul id="nav-links">
        <li><a href="https://pythonos-project.github.io/" target="_blank">Home</a></li>
        <li><a href="https://pythonos-project.github.io/docs/" target="_blank">Docs</a></li>
        <li><a href="https://pythonos-project.github.io/download" target="_blank">Download</a></li>
        <li><a href="https://github.com/pythonos-project/pythonos" target="_blank">GitHub</a></li>
    </ul>

</nav>

<!-- HERO -->

<section class="hero">

    <div class="hero-content">

        <h1>
            Il sistema operativo fatto in
            <span>Python</span>
        </h1>

        <p>
            PythonOS è un mini sistema operativo creato in Python,
            moderno, veloce e open source.
        </p>

        <div class="buttons">

            <a href="https://pythonos-project.github.io/download" target="_blank" class="btn btn-primary">
                Scarica ora
            </a>

            <a href="https://pythonos-project.github.io/docs/" target="_blank" class="btn btn-secondary">
                Documentazione
            </a>

        </div>

    </div>

</section>

<section class="features">
    <div align="center">
        <h2>Scarica PythonOS</h2>
        <p>Digita nel terminale i seguenti comandi:</p>
    </div>

    <!-- TERMINAL -->

    <div class="terminal">

        <div class="terminal-top">

            <div class="dot red"></div>
            <div class="dot yellow"></div>
            <div class="dot green"></div>

        </div>

        <div class="terminal-body">

            > git clone https://github.com/pythonos-project/pythonos.git<br>
            > python -m venv venv<br>
            > source venv/bin/activate<br>
              <em>  # Su Windows: venv\Scripts\activate, PowerShell: venv\Scripts\Activate</em><br>
            > pip install -r requirements.txt<br>
            > python main.py <br>
              <em>  # Si avvia PythonOS</em>

        </div>

    </div>

    <p>Se non vuoi usare il terminale, puoi scaricare l'ultima versione di PythonOS con <a class="btn-ot" href="https://pythonos-project.github.io/download.py" target="_blank">l'installatore guidato</a>.</p>
    <p>Se non vuoi l'ultima versione, vedi il <a class="btn-ot" href="https://pythonos-project.github.io/download-history/">Download History</a>.</p>

</section>

<!-- FOOTER -->

<footer>
    © 2026 PythonOS — Made with Python 🐍
</footer>

<!-- JAVASCRIPT -->

<script>

const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("nav-links");

hamburger.addEventListener("click", () => {

    navLinks.classList.toggle("active");

});

</script>

</body>
</html>