Skip to content

Add download options, update readme to add building and running instr… #3920

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
barunespadhy wants to merge 3 commits into from
Closed

Add download options, update readme to add building and running instr… #3920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
34865a7
Add download options, update readme to add building and running instr…
barunespadhy Dec 13, 2025
d26b1db
restructure to use the dialog instead of div
barunespadhy Dec 14, 2025
03c6efb
Merge branch 'master' into master
barunespadhy Dec 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,29 @@ Architecture/Philosophies
* Graceful degradation (don't be held back by crappy browsers)
* Mobile-first

Building and Running
====================

You'll need the following dependencies:

* node v18
* php
* php8.3-xml
* composer

Run `npm install`, and then `npm run build` to install required dependencies and build the assets:

````
npm install
npm run build
````

Start PHP’s development web-server:
````
php -S localhost:8000 router.php
````

The website should be up and running at `http://localhost:8000/`

Templating System
=================
Expand Down
56 changes: 56 additions & 0 deletions _styles/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,66 @@ input:focus + .focus-reveal {
transition: 250ms all;
}

/********************
* OS Download Modal *
********************/

#download {
margin: 3px auto 6px;
}

.download-modal {
display: grid;
grid-template-columns: 48px 1fr;
column-gap: 18px;
align-items: start;
padding: 2em;
}

.download-modal .dialog-icon {
margin-bottom: 1em;
}

.download-modal .dialog-body {
grid-column: 2;
}

.download-modal .content-area {
width: auto;
display: block;
}

.download-modal .download-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
text-align: left;
}

.download-modal .download-meta {
flex: 1 1 auto;
min-width: 0;
}

.download-modal .linked {
display: inline-flex;
margin: 0;
white-space: nowrap;
}

.download-modal hr.modal-separator {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.15);
margin: 12px 0;
}

.sub {
font-size: 12px;
}


.cta {
padding: 64px 1em;
text-align: center;
Expand Down
90 changes: 78 additions & 12 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -467,21 +467,87 @@

<span id="translate-download" style="display:none;" hidden>Download elementary OS</span>
<span id="translate-purchase" style="display:none;" hidden>Purchase elementary OS</span>
<dialog id="download-modal" class="dialog" aria-labelledby="download-modal-title">
<img src="images/icons/apps/48/system-os-installer.svg" alt=""/>
<div class="content-area">
<h2 id="download-modal-title" class="dialog-title">Choose a Download</h2>
<p>Download from a localized server or by magnet link. For help and more info, see the <a class="read-more" href="docs/installation" target="_blank" rel="noopener">installation guide</a></p>
</div>
<div class="action-area">
<button class="js-close-button button clickable close-modal">Close</button>
<div class="linked">
<a class="button suggested-action download-link http" href="<?php echo $download_link.$config['release_filename']; ?>">Download</a>
<a class="button suggested-action download-link magnet" title="Torrent Magnet Link" href="<?php echo 'magnet:?xt=urn:btih:'.$config['release_magnet'].'&dn='.$config['release_filename']; ?>&tr=https%3A%2F%2Fashrise.com%3A443%2Fphoenix%2Fannounce&tr=udp%3A%2F%2Fopen.demonii.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&ws=http%3A<?php echo urlencode($download_link.$config['release_filename']); ?>"><i class="fa fa-magnet"></i></a>
<dialog id="download-modal"
class="dialog download-modal"
aria-labelledby="download-modal-title">

<img class="dialog-icon"
src="images/icons/apps/48/system-os-installer.svg"
alt=""/>

<div class="dialog-body">
<div class="content-area">
<h2 id="download-modal-title" class="dialog-title">
Download elementary OS 8
</h2>
<p>
Choose the variant of elementary OS based on your computer's processor architecture.
For help and more info, see the
<a class="read-more" href="docs/installation" target="_blank" rel="noopener">
installation guide
</a>.
</p>
</div>

<hr class="modal-separator">

<div class="download-options">
<div class="download-row">
<div class="download-meta">
<div class="arch">Intel or AMD 64-bit</div>
<div class="sub">
OS <?php echo $config['release_version']; ?> •
<?php echo $config['release_size']; ?>
</div>
<div class="sub">(Most PCs and older Macs)</div>
</div>

<div class="linked">
<a class="button suggested-action download-link http"
href="<?php echo $download_link.$config['release_filename']; ?>">
Download
</a>
<a class="button suggested-action download-link magnet"
title="Torrent Magnet Link"
href="<?php echo 'magnet:?xt=urn:btih:'.$config['release_magnet'].'&dn='.$config['release_filename']; ?>&tr=https%3A%2F%2Fashrise.com%3A443%2Fphoenix%2Fannounce&tr=udp%3A%2F%2Fopen.demonii.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&ws=http%3A<?php echo urlencode($download_link.$config['release_filename']); ?>">
<i class="fa fa-magnet" aria-hidden="true"></i>
<span class="sr-only">Download via torrent magnet link</span>
</a>
</div>
</div>

<div class="download-row">
<div class="download-meta">
<div class="arch">ARM 64-bit</div>
<div class="sub">
OS <?php echo $config['release_version']; ?> •
<?php echo $config['release_size']; ?>
</div>
<div class="sub">(Apple Silicon, Raspberry Pi, etc.)</div>
</div>

<div class="linked">
<a class="button suggested-action download-link http"
href="<?php echo $download_link.$config['release_filename']; ?>">
Download
</a>
<a class="button suggested-action download-link magnet"
title="Torrent Magnet Link"
href="<?php echo 'magnet:?xt=urn:btih:'.$config['release_magnet'].'&dn='.$config['release_filename']; ?>&tr=https%3A%2F%2Fashrise.com%3A443%2Fphoenix%2Fannounce&tr=udp%3A%2F%2Fopen.demonii.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&ws=http%3A<?php echo urlencode($download_link.$config['release_filename']); ?>">
<i class="fa fa-magnet" aria-hidden="true"></i>
<span class="sr-only">Download via torrent magnet link</span>
</a>
</div>
</div>
</div>

<div class="action-area">
<button class="js-close-button button clickable close-modal">
Close
</button>
</div>
</div>
</dialog>

<!--[if lt IE 10]><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/eligrey/classList.js@1.1.20170427/classList.min.js"></script><![endif]-->
<?php
include $template['footer'];
Expand Down