dynamic html table with javascript, more screenshots

This commit is contained in:
Trilarion
2021-10-15 18:06:09 +02:00
parent 8486b618e1
commit df80f70125
125 changed files with 14005 additions and 238 deletions

82
docs/table.html Normal file
View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Trilarion">
<meta name="description" content="Infos and technical information about many open source games and frameworks.">
<title>OSGL | Entries | Table</title>
<link rel="stylesheet" href="css/bulma.min.css">
<link rel="stylesheet" href="css/osgl.min.css">
<link rel="stylesheet" href="css/simple-datatables.css">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<script type="text/javascript" src="js/osgl.js"></script>
<script type="text/javascript" src="js/simple-datatables.js"></script>
</head>
<body><nav class="navbar container is-light" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.html"><span class="icon has-text-black"><i class="icon-home"></i></span><span>OSGL</span></a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a class="navbar-item" href="games/index.html"><span class="icon has-text-black"><i class="icon-dice"></i></span><span>Games</span></a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"><span class="icon has-text-black"><i class="icon-filter"></i></span><span>Filter</span></a>
<div class="navbar-dropdown">
<a class="navbar-item" href="games/genres.html"><span class="icon has-text-black"><i class="icon-price-tag"></i></span><span>By category</span></a>
<a class="navbar-item" href="games/languages.html"><span class="icon has-text-black"><i class="icon-language"></i></span><span>By code language</span></a>
<a class="navbar-item" href="games/platforms.html"><span class="icon has-text-black"><i class="icon-laptop"></i></span><span>By OS support</span></a>
<a class="navbar-item" href="games/top50.html"><span class="icon has-text-black"><i class="icon-star"></i></span><span>GitHub Stars Top 50</span></a>
</div>
</div>
<a class="navbar-item" href="frameworks/index.html"><span class="icon has-text-black"><i class="icon-wrench"></i></span><span>Frameworks/Tools</span></a>
<a class="navbar-item" href="developers/index.html"><span class="icon has-text-black"><i class="icon-users"></i></span><span>Developers</span></a>
<a class="navbar-item" href="inspirations/index.html"><span class="icon has-text-black"><i class="icon-bulb"></i></span><span>Inspirations</span></a>
<a class="navbar-item" href="statistics/index.html"><span class="icon has-text-black"><i class="icon-stats-dots"></i></span><span>Statistics</span></a>
<a class="navbar-item" href="contribute.html"><span class="icon has-text-black"><i class="icon-pencil"></i></span><span>Contribute</span></a>
<a class="navbar-item" href="https://github.com/Trilarion/opensourcegames"><span class="icon has-text-black"><i class="icon-github"></i></span><span>On GitHub</span></a>
</div>
</div>
</nav>
<div class="container">
<div class="box">
<div class="block">
<p class="title is-4">Table</p>
<p class="subtitle is-6">Sortable and searchable.</p>
</div>
</div>
<table class="table is-narrow is-hoverable"></table>
</div>
<script>
fetch("data/entries.json").then(response => response.json()).then(data => {
let table = new simpleDatatables.DataTable(".table", {
perPage: 50,
perPageSelect: [30, 50, 100],
footer: true,
data: {
headings: data["headings"],
data: data["data"]
},
});
table.on('datatable.init', function(args) {
table.columns().sort(0);
});
})
</script>
<footer class="footer container content is-size-7">
<p>The <a href="https://github.com/Trilarion/opensourcegames">Open source games list (OSGL)</a> is a collection of open source game descriptions focusing on technical aspects.
The content on this site is the result of voluntary work and may be outdated or incorrect. For giving feedback or improving the content see the
<a href="contribute.html">contribution guidelines</a> or read the <a href="https://trilarion.blogspot.com/search/label/osgames">Blog</a>.</p>
<p>The content (games descriptions) is licensed <a href="https://github.com/Trilarion/opensourcegames/blob/master/LICENSE">CC-0</a>.
Used icons are licensed under CC BY-SA 3.0 (<a href="https://github.com/somerandomdude/Iconic">Iconic</a> or <a href="http://designmodo.com/linecons-free/">Linecons</a>), CC0 1.0 (<a href="https://simpleicons.org/">Simple Icons</a>),
CC BY 4.0 (<a href="https://github.com/FortAwesome/Font-Awesome">Font Awesome</a> or <a href="https://icomoon.io/#icons-icomoon">IcoMoon Free</a>), CC BY-SA 4.0 (<a href="http://www.entypo.com/">Entypo+</a>) or Apache License 2.0 (<a href="https://material.io/resources/icons">Material Icons</a>).
This website is built using Python, Lark, Jinja2 and Bulma. Last updated: 2021-10-15 21:32</p>
</footer>
</body>
</html>