94 lines
2.2 KiB
HTML
94 lines
2.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html lang="en">
|
||
|
<head>
|
||
|
<link rel="stylesheet" href="style.css">
|
||
|
<title>distro depot</title>
|
||
|
</head>
|
||
|
<body>
|
||
|
{% for distro in distros %}
|
||
|
<div class="operating-system-card">
|
||
|
<div class="distro-header">
|
||
|
<div><h2>{{ distro.name }}</h2></div>
|
||
|
<div><img class="distro-icon" src="{{ distro.icon_url }}"></div>
|
||
|
</div>
|
||
|
<div class="distro-links">
|
||
|
<a href="{{ distro.wiki }}">wiki</a>
|
||
|
<a href="{{ distro.download}}">download</a>
|
||
|
<a href="{{ distro.website }}">website</a>
|
||
|
</div>
|
||
|
<p class="distro-summary">
|
||
|
{{ distro.summary }}
|
||
|
</p>
|
||
|
<div class="distro-columns">
|
||
|
<span>
|
||
|
<h3>Freedom</h3>
|
||
|
<ul>
|
||
|
{% for item in distro.freedom_positives %}
|
||
|
<li p>{{ item }}</li>
|
||
|
{% endfor %}
|
||
|
<br>
|
||
|
{% for item in distro.freedom_negatives %}
|
||
|
<li n>{{ item }}</li>
|
||
|
{% endfor %}
|
||
|
</ul>
|
||
|
</span>
|
||
|
<span>
|
||
|
<h3>Usability</h3>
|
||
|
<ul>
|
||
|
{% for item in distro.usability_positives %}
|
||
|
<li p>{{ item }}</li>
|
||
|
{% endfor %}
|
||
|
<br>
|
||
|
{% for item in distro.usability_negatives %}
|
||
|
<li n>{{ item }}</li>
|
||
|
{% endfor %}
|
||
|
</ul>
|
||
|
</span>
|
||
|
<span>
|
||
|
<h3>Privacy</h3>
|
||
|
<ul>
|
||
|
{% for item in distro.usability_positives %}
|
||
|
<li p>{{ item }}</li>
|
||
|
{% endfor %}
|
||
|
<br>
|
||
|
{% for item in distro.usability_negatives %}
|
||
|
<li n>{{ item }}</li>
|
||
|
{% endfor %}
|
||
|
</ul>
|
||
|
</span>
|
||
|
</div>
|
||
|
<div class="star-columns">
|
||
|
<span>
|
||
|
{% for i in [1,2,3,4,5,] %}
|
||
|
{% if i < distro.freedom_stars %}
|
||
|
<img class="star" src="assets/icons_star.svg">
|
||
|
{% else %}
|
||
|
<img class="star" src="assets/icons_star-empty.svg">
|
||
|
{% endif %}
|
||
|
{% endfor %}
|
||
|
</span>
|
||
|
<span>
|
||
|
{% for i in [1,2,3,4,5,] %}
|
||
|
{% if i < distro.usability_stars %}
|
||
|
<img class="star" src="assets/icons_star.svg">
|
||
|
{% else %}
|
||
|
<img class="star" src="assets/icons_star-empty.svg">
|
||
|
{% endif %}
|
||
|
{% endfor %}
|
||
|
</span>
|
||
|
<span>
|
||
|
{% for i in [1,2,3,4,5,] %}
|
||
|
{% if i < distro.privacy_stars %}
|
||
|
<img class="star" src="assets/icons_star.svg">
|
||
|
{% else %}
|
||
|
<img class="star" src="assets/icons_star-empty.svg">
|
||
|
{% endif %}
|
||
|
{% endfor %}
|
||
|
</span>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
{% endfor %}
|
||
|
</body>
|
||
|
</html>
|