path: root/src/download/index.html


                
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Adélie Linux | Download</title>
        <!-- Favicon -->
        <link href="/assets/images/icons/gen_polyguin_color_favicon.ico" rel="shortcut icon">
        <!-- CSS -->
        <link href="/assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
        <link href="/assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
        <link href="/assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
        <link href="/assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
        <link href="/assets/plugins/sal/sal.min.css" rel="stylesheet">
        <link href="/assets/css/theme.css" rel="stylesheet">
        <!-- Fonts/Icons -->
        <link href="/assets/plugins/font-awesome/css/all.css" rel="stylesheet">
        <link href="/assets/plugins/themify/themify-icons.min.css" rel="stylesheet">
        <link href="/assets/plugins/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">

        <style>
        .stepwizard-step p {
            margin-top: 0px;
            color:#666;
        }
        .stepwizard-row {
            display: table-row;
        }
        .stepwizard {
            display: table;
            width: 100%;
            position: relative;
        }
        .stepwizard-step button[disabled] {
            /*opacity: 1 !important;
            filter: alpha(opacity=100) !important;*/
        }
        .stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard fieldset[disabled] .btn {
            opacity:1 !important;
            color:#bbb;
        }
        .stepwizard-row:before {
            top: 55px;
            bottom: 0;
            position: absolute;
            content:" ";
            width: 100%;
            height: 1px;
            background-color: #ccc;
            z-index: 0;
        }
        .stepwizard-step {
            display: table-cell;
            text-align: center;
            position: relative;
        }
        .btn-circle {
            width: 50px;
            height: 50px;
            text-align: center;
            padding: 6px 0;
            font-size: 36px;
            line-height: 1.2;
            border-radius: 5px;
            border: none;
        }
        .button {
            cursor: pointer;    /* hack fake button look/feel */
        }
        .button-reveal-right-dark, .button-dark, a.button-dark {
            border: 1px solid;  /* hack vertical alignment    */
            border-color: #131517;
        }
        </style>
    </head>
    <body>

        <!-- Header -->
        <div class="header right absolute-dark sticky">
__HEADER__
        </div>
        <!-- end Header -->

        <div class="section-lg">
            <div class="container">
                <div class="margin-bottom-70">
                    <div class="row text-center">
                        <div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
                            <h2 class="font-weight-light">Get Adélie</h2>
                            <div class="divider-width-50px">
                                <hr class="bg-black-07">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="stepwizard">
                    <div class="stepwizard-row setup-panel">
                        <div class="stepwizard-step col-xs-3"> 
                            <a href="#step-1" type="button" class="btn btn-dark btn-circle text-white"><span class="ti-settings"></span></a>
                            <p><small>CPU</small></p>
                        </div>
                        <div class="stepwizard-step col-xs-3"> 
                            <a href="#step-2" type="button" class="btn btn-outline-dark btn-circle text-dark" disabled="disabled"><span class="ti-palette"></span></a>
                            <p><small>Flavor</small></p>
                        </div>
                        <div class="stepwizard-step col-xs-3"> 
                            <a href="#step-3" type="button" class="btn btn-outline-dark btn-circle text-dark" disabled="disabled"><span class="ti-desktop"></span></a>
                            <p><small>Desktop</small></p>
                        </div>
                        <div class="stepwizard-step col-xs-3"> 
                            <a href="#step-4" type="button" class="btn btn-outline-dark btn-circle" disabled="disabled"><span class="ti-download"></span></a>
                            <p><small>Download</small></p>
                        </div>
                    </div>
                </div>
        
                <form>
                    <div class="panel panel-primary setup-content" id="step-1">
                        <div class="panel-heading">
                             <h3 class="panel-title">Architecture</h3>
                        </div>
                        <div class="panel-body">
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-aarch64">
                                <span>aarch64</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-armv7l">
                                <span>armv7l</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-ppc">
                                <span>ppc</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-ppc64">
                                <span>ppc64</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-x86">
                                <span>x86</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-x86_64">
                                <span>x86_64</span>
                            </span>
                            <input type="hidden" id="architecture" name="architecture" value="">
                        </div>
                    </div>
            
                    <div class="panel panel-primary setup-content" id="step-2">
                        <div class="panel-heading">
                             <h3 class="panel-title">Platform</h3>
                        </div>
                        <div class="panel-body">
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="platform-server">
                                <span>Server</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="platform-desktop">
                                <span>Desktop</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="platform-fullrootfs">
                                <span>Full Rootfs</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="platform-minirootfs">
                                <span>Mini Rootfs</span>
                            </span>
                            <input type="hidden" id="platform" name="platform" value="">
                        </div>
                    </div>
            
                    <div class="panel panel-primary setup-content" id="step-3">
                        <div class="panel-heading">
                             <h3 class="panel-title">Environment</h3>
                        </div>
                        <div class="panel-body">
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="environment-headless" style="display: none;">
                                <span>Headless</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="environment-kde">
                                <span>KDE</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="environment-lxqt">
                                <span>LXQT</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="environment-mate">
                                <span>MATE</span>
                            </span>
                            <input type="hidden" id="environment" name="environment" value="">
                        </div>
                    </div>
            
                    <div class="panel panel-primary setup-content" id="step-4">
                        <div class="panel-heading">
                             <h3 class="panel-title">Download</h3>
                        </div>
                        <div class="panel-body">
                            <a class="button button-lg button-outline-dark nextBtn" href="#" id="downloadlink">
                                <span>Download</span>
                            </a>
                            <a class="button button-lg button-outline-dark nextBtn" href="">
                                <span>Start Over</span>
                            </a>
                            <input type="hidden" id="download" name="download" value="">
                        </div>
                    </div>

                </form>

                <div class="row">
                    <div class="col-12 col-md-12">
                        <p id="breadcrumbs" style="min-height: 2em;"></p>
                    </div>
                </div><!-- end row -->
            </div>
        </div>

        <!-- About -->
        <div class="section bg-grey-lighter">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-4">
                        <h4 class="font-weight-light">Need something else?</h4>
                    </div>
                    <div class="col-12 col-md-4">
                        <h3><a href="https://distfiles.adelielinux.org/adelie/1.0-rc2/iso/rc2/">Full Directory Listing</a></h3>
                        <p><a href="https://distfiles.adelielinux.org/archive/">Historical Archives</a></p>
                    </div>
                    <div class="col-12 col-md-4">
                        <ul class="list-unstyled">
                        <!-- https://stackoverflow.com/questions/17478710/vertical-alignment-of-text-and-icon-in-button -->
                        <li><a href="#requirements"><i class="ti-info-alt" style="vertical-align: middle;"></i>&nbsp;System Requirements</a></li>
                        <li><a href="/mirrors/"><i class="ti-server" style="vertical-align: middle;"></i>&nbsp;Mirrors</a></li>
                        <li><a href="/contact/"><i class="ti-alert" style="vertical-align: middle;"></i>&nbsp;Report a Problem</a></li>
                        </ul>
                    </div>
                </div><!-- end row -->
            </div><!-- end container -->
            <div style="position:relative; top:20px;" id="requirements"><!-- this magic number compensates for the header on anchor jump --></div>
        </div>
        <!-- end About -->

        <div class="section">
            <div class="container">
                <h3 class="margin-bottom-50 text-center">System Requirements</h3>

                <div class="row">
                    <div class="col-12 col-lg-6 icon-xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fas fa-microchip"></i>
                            </div>
                            <h5 class="font-weight-medium">CPU</h5>
                            <p>
                                <strong>ARM</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;32-bit: most ARMv7 CPU implementations<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;64-bit: any ARMv8 CPU implementation<br />
                            </p>
                            <br />
                            <p>
                                <strong>PowerPC</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;32-bit: 7xx family or newer (e.g. G3/G4)<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;64-bit: 970 family or newer, tuned for POWER8/POWER9<br />
                            </p>
                            <br />
                            <p>
                                <strong>Intel x86</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;32-bit: Pentium-class w/ MMX (e.g. Intel P55C, AMD K5)<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;64-bit: any Intel or AMD CPU with 64-bit extensions<br />
                            </p>
                            <br />
                            <p>
                                <br />
                                Minimum: 100 MHz for Server, 600 MHz for Desktop<br />
                                Recommended: 800 MHz for Server, 1200 MHz for Desktop
                            </p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                    <div class="col-12 col-lg-3 icon-xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fas fa-memory"></i>
                            </div>
                            <h5 class="font-weight-medium">RAM</h5>
                            <p>
                                <strong>Minimum</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: 64 MB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 384 MB
                            </p>
                            <br />
                            <p>
                                <strong>Recommended</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: 128 MB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 1 GB
                            </p>
                            <br />
                            <p>
                                <br />
                                This will vary widely by workload and should be used as a baseline only.
                            </p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                    <div class="col-12 col-lg-3 icon-xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fas fa-hdd"></i>
                            </div>
                            <h5 class="font-weight-medium">Disk</h5>
                            <p>
                                <strong>Minimum</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: 350 MB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 6 GB
                            <br />
                            <p>
                                <strong>Recommended</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: 500 MB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 10 GB
                            </p>
                            <br />
                            <p>
                                <br />
                                This will vary widely by workload and should be used as a baseline only.
                            </p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                    <div class="col-12 col-lg-6 icon-xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fas fa-tv"></i>
                            </div>
                            <h5 class="font-weight-medium">Graphics</h5>
                            <p>
                                <strong>Minimum</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: (none)<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 4MB VGA capable of 800x600 resolution
                            </p>
                            <br />
                            <p>
                                <strong>Recommended</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: basic VGA<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 128MB VGA capable of 1024x768 resolution
                            </p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                    <div class="col-12 col-lg-3 icon-xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fas fa-sitemap"></i>
                            </div>
                            <h5 class="font-weight-medium">Network</h5>
                            <p>Optional (for updates).</p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                    <div class="col-12 col-lg-3 icon-2xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fab fa-linux"></i>
                            </div>
                            <h5 class="font-weight-medium">Installer/Media</h5>
                            <p>
                                <strong>Server</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;ISO: up to 650 MB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Rootfs: up to 80 MB
                            </p>
                            <br />
                            <p>
                                <strong>Desktop</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;ISO: up to 1.5 GB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Rootfs: (n/a)
                            </p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                </div><!-- end row -->

            </div><!-- end container -->
        </div>

__INDEPENDENT_SHADE__
__FOOTER__
    <script>

    /**
     * Current download offerings.
     */

    version = "1.0";
    release = "rc2";
    disturl = "//distfiles.adelielinux.org/adelie";

    inittext = "Adélie" + " " + version + "-" + release;
    $("#breadcrumbs").text(inittext);

    /**
     * I don't really know what I'm doing here; this is probably
     * not the canonical approach and I haven't touched web in a
     * really long time. Please submit a PR if you dislike it.
     */

    function breadcrumbs (whoami)
    {

        crumbs = inittext;

        /**
         * Prepare breadcrumbs.
         */

        have_architecture = false;
        have_platform = false;
        have_environment = false;

        if ($("#architecture").attr("human"))
        {
            crumbs += " / " + $("#architecture").attr("human");
            have_architecture = true;
        }


        if ($("#platform").attr("human"))
        {
            if ($("#platform").val() === 'live')
            {
                $("#environment").siblings().show();
                $("#environment-headless").hide();
            }
            else
            {
                $("#environment").siblings().hide();
                $("#environment-headless").show();
            }
            crumbs += " / " + $("#platform").attr("human");
            have_platform = true;
        }


        if ($("#environment").attr("human"))
        {
            crumbs += " / " + $("#environment").attr("human");
            have_environment = true;
        }

        /**
         * Update breadcrumbs and button highlighting.
         */

        $("#breadcrumbs").text(crumbs);
        $(whoami).siblings().removeClass("button-reveal-right-dark").addClass("button-reveal-right-outline-dark");
        $(whoami).removeClass("button-reveal-right-outline-dark").addClass("button-reveal-right-dark");

        /**
         * Prepare download URL.
         */

        if (have_architecture && have_platform && have_environment)
        {
            $("#downloadlink").removeClass("button-outline-dark").addClass("button-dark");

            /**
             * platform : server
             */

            if ($("#platform").val() === 'inst')
            {
                $("#downloadlink").attr("href",
                    disturl + "/"  + version + "-" + release + "/iso/" + release + "/"
                    + "adelie" + "-"
                    + $("#platform").val() + "-"
                    + $("#architecture").val() + "-"
                    + version + "-" + release + ".iso"
                );
            }

            /**
             * platform : desktop
             */

            if ($("#platform").val() === 'live')
            {
                $("#downloadlink").attr("href",
                    disturl + "/"  + version + "-" + release + "/iso/" + release + "/"
                    + "adelie" + "-"
                    + $("#platform").val() + "-"
                    + $("#environment").val() + "-"
                    + $("#architecture").val() + "-"
                    + version + "-" + release + ".iso"
                );
            }

            /**
             * platform : rootfs
             */

            if ($("#platform").val() === 'rootfs')
            {
                $("#downloadlink").attr("href",
                    disturl + "/"  + version + "-" + release + "/iso/" + release + "/"
                    + "adelie" + "-"
                    + $("#platform").val() + "-"
                    + $("#architecture").val() + "-"
                    + version + "-" + release + ".txz"
                );
            }

            /**
             * platform : rootfs-mini
             */

            if ($("#platform").val() === 'rootfs-mini')
            {
                $("#downloadlink").attr("href",
                    disturl + "/"  + version + "/iso/" + release + "/"
                    + "adelie" + "-"
                    + $("#platform").val() + "-"
                    + $("#architecture").val() + "-"
                    + version + "-" + release + ".txz"
                );
            }
        }
    }

    /**
     * select: architecture
     */

    $('#architecture-aarch64').click(function()
    {
        $('#architecture').val('aarch64');
        $("#architecture").attr("human","aarch64");
        breadcrumbs($(this));
    });
    $('#architecture-armv7l').click(function()
    {
        $('#architecture').val('armv7');
        $("#architecture").attr("human","armv7l");
        breadcrumbs($(this));
    });
    $('#architecture-ppc').click(function()
    {
        $('#architecture').val('ppc');
        $("#architecture").attr("human","ppc");
        breadcrumbs($(this));
    });
    $('#architecture-ppc64').click(function()
    {
        $('#architecture').val('ppc64');
        $("#architecture").attr("human","ppc64");
        breadcrumbs($(this));
    });
    $('#architecture-x86').click(function()
    {
        $('#architecture').val('pmmx');
        $("#architecture").attr("human","x86");
        breadcrumbs($(this));
    });
    $('#architecture-x86_64').click(function()
    {
        $('#architecture').val('x86_64');
        $("#architecture").attr("human","x86_64");
        breadcrumbs($(this));
    });

    /**
     * select: platform
     */

    $('#platform-server').click(function()
    {
        $('#platform').val('inst');
        $("#platform").attr("human","Server");
        $('#environment').val('');
        $('#environment').attr("human","");
        breadcrumbs($(this));
    });
    $('#platform-desktop').click(function()
    {
        $('#platform').val('live');
        $("#platform").attr("human","Desktop");
        $('#environment').val('');
        $('#environment').attr("human","");
        breadcrumbs($(this));
    });
    $('#platform-fullrootfs').click(function()
    {
        $('#platform').val('rootfs');
        $("#platform").attr("human","Full Rootfs");
        $('#environment').val('');
        $('#environment').attr("human","");
        breadcrumbs($(this));
    });
    $('#platform-minirootfs').click(function()
    {
        $('#platform').val('rootfs-mini');
        $("#platform").attr("human","Mini Rootfs");
        $('#environment').val('');
        $('#environment').attr("human","");
        breadcrumbs($(this));
    });

    /**
     * select: environment
     */

    $('#environment-headless').click(function()
    {
        $('#environment').val('headless');
        $("#environment").attr("human","Headless");
        breadcrumbs($(this));
    });
    $('#environment-kde').click(function()
    {
        $('#environment').val('kde');
        $("#environment").attr("human","KDE");
        breadcrumbs($(this));
    });
    $('#environment-lxqt').click(function()
    {
        $('#environment').val('lxqt');
        $("#environment").attr("human","LXQt");
        breadcrumbs($(this));
    });
    $('#environment-mate').click(function()
    {
        $('#environment').val('mate');
        $("#environment").attr("human","MATE");
        breadcrumbs($(this));
    });

    /**
     * https://bootsnipp.com/snippets/j6rkb
     */

    $(document).ready(function()
    {

        var navListItems = $('div.setup-panel div a'),
            allWells = $('.setup-content'),
            allNextBtn = $('.nextBtn');

        allWells.hide();

        navListItems.click(function(e)
        {
            e.preventDefault();
            var $target = $($(this).attr('href')),
                $item = $(this);

            if (!$item.hasClass('disabled'))
            {
                navListItems.removeClass('btn-dark').removeClass('text-white').removeClass('text-dark').addClass('btn-outline-dark');
                $item.addClass('btn-dark').addClass('text-white');
                allWells.hide();
                $target.show();
                $target.find('input:eq(0)').focus();
            }
        });

        allNextBtn.click(function()
        {
            var curStep = $(this).closest(".setup-content");
            var curStepBtn = curStep.attr("id");
            var nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a");
            var curInputs = curStep.find("input[type='hidden']");
            var isValid = true;

            $(".form-group").removeClass("has-error");
            for (var k = 0; k < curInputs.length; k++)
            {
                if (!curInputs[k].validity.valid)
                {
                    isValid = false;
                    $(curInputs[k]).closest(".form-group").addClass("has-error");
                }
            }

            if (isValid)
            {
                nextStepWizard.removeAttr('disabled').trigger('click');
            }
        });

        $('div.setup-panel div a.btn-dark').trigger('click');
    });
    </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Adélie Linux | Download</title>
        <!-- Favicon -->
        <link href="/assets/images/icons/gen_polyguin_color_favicon.ico" rel="shortcut icon">
        <!-- CSS -->
        <link href="/assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
        <link href="/assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
        <link href="/assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
        <link href="/assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
        <link href="/assets/plugins/sal/sal.min.css" rel="stylesheet">
        <link href="/assets/css/theme.css" rel="stylesheet">
        <!-- Fonts/Icons -->
        <link href="/assets/plugins/font-awesome/css/all.css" rel="stylesheet">
        <link href="/assets/plugins/themify/themify-icons.min.css" rel="stylesheet">
        <link href="/assets/plugins/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">

        <style>
        .stepwizard-step p {
            margin-top: 0px;
            color:#666;
        }
        .stepwizard-row {
            display: table-row;
        }
        .stepwizard {
            display: table;
            width: 100%;
            position: relative;
        }
        .stepwizard-step button[disabled] {
            /*opacity: 1 !important;
            filter: alpha(opacity=100) !important;*/
        }
        .stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard fieldset[disabled] .btn {
            opacity:1 !important;
            color:#bbb;
        }
        .stepwizard-row:before {
            top: 55px;
            bottom: 0;
            position: absolute;
            content:" ";
            width: 100%;
            height: 1px;
            background-color: #ccc;
            z-index: 0;
        }
        .stepwizard-step {
            display: table-cell;
            text-align: center;
            position: relative;
        }
        .btn-circle {
            width: 50px;
            height: 50px;
            text-align: center;
            padding: 6px 0;
            font-size: 36px;
            line-height: 1.2;
            border-radius: 5px;
            border: none;
        }
        .button {
            cursor: pointer;    /* hack fake button look/feel */
        }
        .button-reveal-right-dark, .button-dark, a.button-dark {
            border: 1px solid;  /* hack vertical alignment    */
            border-color: #131517;
        }
        </style>
    </head>
    <body>

        <!-- Header -->
        <div class="header right absolute-dark sticky">
__HEADER__
        </div>
        <!-- end Header -->

        <div class="section-lg">
            <div class="container">
                <div class="margin-bottom-70">
                    <div class="row text-center">
                        <div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
                            <h2 class="font-weight-light">Get Adélie</h2>
                            <div class="divider-width-50px">
                                <hr class="bg-black-07">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="stepwizard">
                    <div class="stepwizard-row setup-panel">
                        <div class="stepwizard-step col-xs-3"> 
                            <a href="#step-1" type="button" class="btn btn-dark btn-circle text-white"><span class="ti-settings"></span></a>
                            <p><small>CPU</small></p>
                        </div>
                        <div class="stepwizard-step col-xs-3"> 
                            <a href="#step-2" type="button" class="btn btn-outline-dark btn-circle text-dark" disabled="disabled"><span class="ti-palette"></span></a>
                            <p><small>Flavor</small></p>
                        </div>
                        <div class="stepwizard-step col-xs-3"> 
                            <a href="#step-3" type="button" class="btn btn-outline-dark btn-circle text-dark" disabled="disabled"><span class="ti-desktop"></span></a>
                            <p><small>Desktop</small></p>
                        </div>
                        <div class="stepwizard-step col-xs-3"> 
                            <a href="#step-4" type="button" class="btn btn-outline-dark btn-circle" disabled="disabled"><span class="ti-download"></span></a>
                            <p><small>Download</small></p>
                        </div>
                    </div>
                </div>
        
                <form>
                    <div class="panel panel-primary setup-content" id="step-1">
                        <div class="panel-heading">
                             <h3 class="panel-title">Architecture</h3>
                        </div>
                        <div class="panel-body">
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-aarch64">
                                <span>aarch64</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-armv7l">
                                <span>armv7l</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-ppc">
                                <span>ppc</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-ppc64">
                                <span>ppc64</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-x86">
                                <span>x86</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="architecture-x86_64">
                                <span>x86_64</span>
                            </span>
                            <input type="hidden" id="architecture" name="architecture" value="">
                        </div>
                    </div>
            
                    <div class="panel panel-primary setup-content" id="step-2">
                        <div class="panel-heading">
                             <h3 class="panel-title">Platform</h3>
                        </div>
                        <div class="panel-body">
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="platform-server">
                                <span>Server</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="platform-desktop">
                                <span>Desktop</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="platform-fullrootfs">
                                <span>Full Rootfs</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="platform-minirootfs">
                                <span>Mini Rootfs</span>
                            </span>
                            <input type="hidden" id="platform" name="platform" value="">
                        </div>
                    </div>
            
                    <div class="panel panel-primary setup-content" id="step-3">
                        <div class="panel-heading">
                             <h3 class="panel-title">Environment</h3>
                        </div>
                        <div class="panel-body">
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="environment-headless" style="display: none;">
                                <span>Headless</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="environment-kde">
                                <span>KDE</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="environment-lxqt">
                                <span>LXQT</span>
                            </span>
                            <span class="button button-lg button-reveal-right-outline-dark nextBtn" id="environment-mate">
                                <span>MATE</span>
                            </span>
                            <input type="hidden" id="environment" name="environment" value="">
                        </div>
                    </div>
            
                    <div class="panel panel-primary setup-content" id="step-4">
                        <div class="panel-heading">
                             <h3 class="panel-title">Download</h3>
                        </div>
                        <div class="panel-body">
                            <a class="button button-lg button-outline-dark nextBtn" href="#" id="downloadlink">
                                <span>Download</span>
                            </a>
                            <a class="button button-lg button-outline-dark nextBtn" href="">
                                <span>Start Over</span>
                            </a>
                            <input type="hidden" id="download" name="download" value="">
                        </div>
                    </div>

                </form>

                <div class="row">
                    <div class="col-12 col-md-12">
                        <p id="breadcrumbs" style="min-height: 2em;"></p>
                    </div>
                </div><!-- end row -->
            </div>
        </div>

        <!-- About -->
        <div class="section bg-grey-lighter">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-4">
                        <h4 class="font-weight-light">Need something else?</h4>
                    </div>
                    <div class="col-12 col-md-4">
                        <h3><a href="https://distfiles.adelielinux.org/adelie/1.0-rc2/iso/rc2/">Full Directory Listing</a></h3>
                        <p><a href="https://distfiles.adelielinux.org/archive/">Historical Archives</a></p>
                    </div>
                    <div class="col-12 col-md-4">
                        <ul class="list-unstyled">
                        <!-- https://stackoverflow.com/questions/17478710/vertical-alignment-of-text-and-icon-in-button -->
                        <li><a href="#requirements"><i class="ti-info-alt" style="vertical-align: middle;"></i>&nbsp;System Requirements</a></li>
                        <li><a href="/mirrors/"><i class="ti-server" style="vertical-align: middle;"></i>&nbsp;Mirrors</a></li>
                        <li><a href="/contact/"><i class="ti-alert" style="vertical-align: middle;"></i>&nbsp;Report a Problem</a></li>
                        </ul>
                    </div>
                </div><!-- end row -->
            </div><!-- end container -->
            <div style="position:relative; top:20px;" id="requirements"><!-- this magic number compensates for the header on anchor jump --></div>
        </div>
        <!-- end About -->

        <div class="section">
            <div class="container">
                <h3 class="margin-bottom-50 text-center">System Requirements</h3>

                <div class="row">
                    <div class="col-12 col-lg-6 icon-xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fas fa-microchip"></i>
                            </div>
                            <h5 class="font-weight-medium">CPU</h5>
                            <p>
                                <strong>ARM</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;32-bit: most ARMv7 CPU implementations<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;64-bit: any ARMv8 CPU implementation<br />
                            </p>
                            <br />
                            <p>
                                <strong>PowerPC</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;32-bit: 7xx family or newer (e.g. G3/G4)<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;64-bit: 970 family or newer, tuned for POWER8/POWER9<br />
                            </p>
                            <br />
                            <p>
                                <strong>Intel x86</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;32-bit: Pentium-class w/ MMX (e.g. Intel P55C, AMD K5)<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;64-bit: any Intel or AMD CPU with 64-bit extensions<br />
                            </p>
                            <br />
                            <p>
                                <br />
                                Minimum: 100 MHz for Server, 600 MHz for Desktop<br />
                                Recommended: 800 MHz for Server, 1200 MHz for Desktop
                            </p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                    <div class="col-12 col-lg-3 icon-xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fas fa-memory"></i>
                            </div>
                            <h5 class="font-weight-medium">RAM</h5>
                            <p>
                                <strong>Minimum</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: 64 MB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 384 MB
                            </p>
                            <br />
                            <p>
                                <strong>Recommended</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: 128 MB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 1 GB
                            </p>
                            <br />
                            <p>
                                <br />
                                This will vary widely by workload and should be used as a baseline only.
                            </p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                    <div class="col-12 col-lg-3 icon-xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fas fa-hdd"></i>
                            </div>
                            <h5 class="font-weight-medium">Disk</h5>
                            <p>
                                <strong>Minimum</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: 350 MB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 6 GB
                            <br />
                            <p>
                                <strong>Recommended</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: 500 MB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 10 GB
                            </p>
                            <br />
                            <p>
                                <br />
                                This will vary widely by workload and should be used as a baseline only.
                            </p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                    <div class="col-12 col-lg-6 icon-xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fas fa-tv"></i>
                            </div>
                            <h5 class="font-weight-medium">Graphics</h5>
                            <p>
                                <strong>Minimum</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: (none)<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 4MB VGA capable of 800x600 resolution
                            </p>
                            <br />
                            <p>
                                <strong>Recommended</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Server: basic VGA<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Desktop: 128MB VGA capable of 1024x768 resolution
                            </p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                    <div class="col-12 col-lg-3 icon-xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fas fa-sitemap"></i>
                            </div>
                            <h5 class="font-weight-medium">Network</h5>
                            <p>Optional (for updates).</p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                    <div class="col-12 col-lg-3 icon-2xl">
                        <!-- Snippet -->
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="fab fa-linux"></i>
                            </div>
                            <h5 class="font-weight-medium">Installer/Media</h5>
                            <p>
                                <strong>Server</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;ISO: up to 650 MB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Rootfs: up to 80 MB
                            </p>
                            <br />
                            <p>
                                <strong>Desktop</strong><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;ISO: up to 1.5 GB<br />
                                &nbsp;&nbsp;&nbsp;&nbsp;Rootfs: (n/a)
                            </p>
                        </div>
                        <!-- end Snippet -->
                    </div>
                </div><!-- end row -->

            </div><!-- end container -->
        </div>

__INDEPENDENT_SHADE__
__FOOTER__
    <script>

    /**
     * Current download offerings.
     */

    version = "1.0";
    release = "rc2";
    disturl = "//distfiles.adelielinux.org/adelie";

    inittext = "Adélie" + " " + version + "-" + release;
    $("#breadcrumbs").text(inittext);

    /**
     * I don't really know what I'm doing here; this is probably
     * not the canonical approach and I haven't touched web in a
     * really long time. Please submit a PR if you dislike it.
     */

    function breadcrumbs (whoami)
    {

        crumbs = inittext;

        /**
         * Prepare breadcrumbs.
         */

        have_architecture = false;
        have_platform = false;
        have_environment = false;

        if ($("#architecture").attr("human"))
        {
            crumbs += " / " + $("#architecture").attr("human");
            have_architecture = true;
        }


        if ($("#platform").attr("human"))
        {
            if ($("#platform").val() === 'live')
            {
                $("#environment").siblings().show();
                $("#environment-headless").hide();
            }
            else
            {
                $("#environment").siblings().hide();
                $("#environment-headless").show();
            }
            crumbs += " / " + $("#platform").attr("human");
            have_platform = true;
        }


        if ($("#environment").attr("human"))
        {
            crumbs += " / " + $("#environment").attr("human");
            have_environment = true;
        }

        /**
         * Update breadcrumbs and button highlighting.
         */

        $("#breadcrumbs").text(crumbs);
        $(whoami).siblings().removeClass("button-reveal-right-dark").addClass("button-reveal-right-outline-dark");
        $(whoami).removeClass("button-reveal-right-outline-dark").addClass("button-reveal-right-dark");

        /**
         * Prepare download URL.
         */

        if (have_architecture && have_platform && have_environment)
        {
            $("#downloadlink").removeClass("button-outline-dark").addClass("button-dark");

            /**
             * platform : server
             */

            if ($("#platform").val() === 'inst')
            {
                $("#downloadlink").attr("href",
                    disturl + "/"  + version + "-" + release + "/iso/" + release + "/"
                    + "adelie" + "-"
                    + $("#platform").val() + "-"
                    + $("#architecture").val() + "-"
                    + version + "-" + release + ".iso"
                );
            }

            /**
             * platform : desktop
             */

            if ($("#platform").val() === 'live')
            {
                $("#downloadlink").attr("href",
                    disturl + "/"  + version + "-" + release + "/iso/" + release + "/"
                    + "adelie" + "-"
                    + $("#platform").val() + "-"
                    + $("#environment").val() + "-"
                    + $("#architecture").val() + "-"
                    + version + "-" + release + ".iso"
                );
            }

            /**
             * platform : rootfs
             */

            if ($("#platform").val() === 'rootfs')
            {
                $("#downloadlink").attr("href",
                    disturl + "/"  + version + "-" + release + "/iso/" + release + "/"
                    + "adelie" + "-"
                    + $("#platform").val() + "-"
                    + $("#architecture").val() + "-"
                    + version + "-" + release + ".txz"
                );
            }

            /**
             * platform : rootfs-mini
             */

            if ($("#platform").val() === 'rootfs-mini')
            {
                $("#downloadlink").attr("href",
                    disturl + "/"  + version + "/iso/" + release + "/"
                    + "adelie" + "-"
                    + $("#platform").val() + "-"
                    + $("#architecture").val() + "-"
                    + version + "-" + release + ".txz"
                );
            }
        }
    }

    /**
     * select: architecture
     */

    $('#architecture-aarch64').click(function()
    {
        $('#architecture').val('aarch64');
        $("#architecture").attr("human","aarch64");
        breadcrumbs($(this));
    });
    $('#architecture-armv7l').click(function()
    {
        $('#architecture').val('armv7');
        $("#architecture").attr("human","armv7l");
        breadcrumbs($(this));
    });
    $('#architecture-ppc').click(function()
    {
        $('#architecture').val('ppc');
        $("#architecture").attr("human","ppc");
        breadcrumbs($(this));
    });
    $('#architecture-ppc64').click(function()
    {
        $('#architecture').val('ppc64');
        $("#architecture").attr("human","ppc64");
        breadcrumbs($(this));
    });
    $('#architecture-x86').click(function()
    {
        $('#architecture').val('pmmx');
        $("#architecture").attr("human","x86");
        breadcrumbs($(this));
    });
    $('#architecture-x86_64').click(function()
    {
        $('#architecture').val('x86_64');
        $("#architecture").attr("human","x86_64");
        breadcrumbs($(this));
    });

    /**
     * select: platform
     */

    $('#platform-server').click(function()
    {
        $('#platform').val('inst');
        $("#platform").attr("human","Server");
        $('#environment').val('');
        $('#environment').attr("human","");
        breadcrumbs($(this));
    });
    $('#platform-desktop').click(function()
    {
        $('#platform').val('live');
        $("#platform").attr("human","Desktop");
        $('#environment').val('');
        $('#environment').attr("human","");
        breadcrumbs($(this));
    });
    $('#platform-fullrootfs').click(function()
    {
        $('#platform').val('rootfs');
        $("#platform").attr("human","Full Rootfs");
        $('#environment').val('');
        $('#environment').attr("human","");
        breadcrumbs($(this));
    });
    $('#platform-minirootfs').click(function()
    {
        $('#platform').val('rootfs-mini');
        $("#platform").attr("human","Mini Rootfs");
        $('#environment').val('');
        $('#environment').attr("human","");
        breadcrumbs($(this));
    });

    /**
     * select: environment
     */

    $('#environment-headless').click(function()
    {
        $('#environment').val('headless');
        $("#environment").attr("human","Headless");
        breadcrumbs($(this));
    });
    $('#environment-kde').click(function()
    {
        $('#environment').val('kde');
        $("#environment").attr("human","KDE");
        breadcrumbs($(this));
    });
    $('#environment-lxqt').click(function()
    {
        $('#environment').val('lxqt');
        $("#environment").attr("human","LXQt");
        breadcrumbs($(this));
    });
    $('#environment-mate').click(function()
    {
        $('#environment').val('mate');
        $("#environment").attr("human","MATE");
        breadcrumbs($(this));
    });

    /**
     * https://bootsnipp.com/snippets/j6rkb
     */

    $(document).ready(function()
    {

        var navListItems = $('div.setup-panel div a'),
            allWells = $('.setup-content'),
            allNextBtn = $('.nextBtn');

        allWells.hide();

        navListItems.click(function(e)
        {
            e.preventDefault();
            var $target = $($(this).attr('href')),
                $item = $(this);

            if (!$item.hasClass('disabled'))
            {
                navListItems.removeClass('btn-dark').removeClass('text-white').removeClass('text-dark').addClass('btn-outline-dark');
                $item.addClass('btn-dark').addClass('text-white');
                allWells.hide();
                $target.show();
                $target.find('input:eq(0)').focus();
            }
        });

        allNextBtn.click(function()
        {
            var curStep = $(this).closest(".setup-content");
            var curStepBtn = curStep.attr("id");
            var nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a");
            var curInputs = curStep.find("input[type='hidden']");
            var isValid = true;

            $(".form-group").removeClass("has-error");
            for (var k = 0; k < curInputs.length; k++)
            {
                if (!curInputs[k].validity.valid)
                {
                    isValid = false;
                    $(curInputs[k]).closest(".form-group").addClass("has-error");
                }
            }

            if (isValid)
            {
                nextStepWizard.removeAttr('disabled').trigger('click');
            }
        });

        $('div.setup-panel div a.btn-dark').trigger('click');
    });
    </script>
    </body>
</html>