added webapps section

www/data/css/styles.css

@@ -1354,6 +1354,54 @@ html, body {
   margin: 10px; }
 
 /* 400px */
+.webapplistelem_container {
+  display: flex;
+  align-items: center;
+  flex-direction: column; }
+
+.webapplistelem {
+  width: 100%;
+  border: solid 1px #444;
+  margin: 10px 5px;
+  color: #333;
+  text-decoration: none; }
+
+.webapplistelem {
+  background-color: #BBB; }
+
+.webapplistelem .wle_date {
+  background-color: #AAA;
+  color: #333; }
+
+.webapplistelem:hover {
+  border: solid 1px black; }
+
+.webapplistelem:hover {
+  background-color: white;
+  color: black; }
+
+.webapplistelem:hover .wle_date {
+  background-color: white;
+  color: black;
+  border-bottom: 1px solid black; }
+
+.wle_date {
+  background-color: #AAA;
+  border-bottom: 1px solid transparent;
+  padding: 2px;
+  font-size: 0.8em;
+  font-style: italic; }
+
+.wle_title {
+  font-weight: bold;
+  font-size: 1.2em;
+  text-align: left;
+  margin: 2px 0 2px 10px; }
+
+@media (max-width: 767px) {
+  .wle_title {
+    font-size: 1.25em; } }
+/* 400px */
 .ev_master {
   align-self: center; }
   @media (min-width: 851px) {

www/data/css/styles.min.css

@@ -328,6 +328,16 @@ html,body{margin:0;padding:0;height:100%}
 	#bookv_header h1{font-size:18pt}
 }
 .bookv_extra{height:500px;border:1px solid #333;margin:10px}
+.webapplistelem_container{display:flex;align-items:center;flex-direction:column}
+.webapplistelem{width:100%;border:solid 1px #444;margin:10px 5px;color:#333;text-decoration:none}
+.webapplistelem{background-color:#BBB}
+.webapplistelem .wle_date{background-color:#AAA;color:#333}
+.webapplistelem:hover{border:solid 1px black}
+.webapplistelem:hover{background-color:white;color:black}
+.webapplistelem:hover .wle_date{background-color:white;color:black;border-bottom:1px solid black}
+.wle_date{background-color:#AAA;border-bottom:1px solid transparent;padding:2px;font-size:.8em;font-style:italic}
+.wle_title{font-weight:bold;font-size:1.2em;text-align:left;margin:2px 0 2px 10px}
+@media(max-width:767px){.wle_title{font-size:1.25em}}
 .ev_master{align-self:center}
 @media(min-width:851px){.ev_master{padding-bottom:80px}}
 .ev_master .ev_code{color:#000;text-align:center;font-size:150pt;font-weight:500;font-family:Consolas,Monaco,"Courier New",Menlo,monospace}

www/data/css/styles.scss

@@ -17,6 +17,8 @@
 @import 'styles_bookslist';
 @import 'styles_booksview';
 
+@import 'styles_webappslist';
+
 @import 'styles_errorview';
 
 @import 'styles_eulerpanel';

www/data/css/styles_webappslist.scss

@@ -0,0 +1,42 @@
+@import 'styles_config';
+
+.webapplistelem_container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.webapplistelem {
+  width: 100%;
+
+  border: solid 1px #444;
+  margin: 10px 5px;
+  color: $COL_TEXT_DARK;
+  text-decoration: none;
+}
+
+.webapplistelem { background-color: #BBB; }
+
+.webapplistelem .wle_date { background-color: #AAA; color: $COL_TEXT_DARK; }
+
+.webapplistelem:hover           { border: solid 1px $COL_COMPLEXHOVER_BRD; }
+.webapplistelem:hover           { background-color: $COL_COMPLEXHOVER_BG; color: $COL_COMPLEXHOVER_FG; }
+.webapplistelem:hover .wle_date { background-color: $COL_COMPLEXHOVER_BG; color: $COL_COMPLEXHOVER_FG; border-bottom: 1px solid $COL_COMPLEXHOVER_BRD; }
+
+.wle_date {
+  background-color: #AAA;
+  border-bottom: 1px solid transparent;
+  padding: 2px;
+  font-size: 0.8em;
+  font-style: italic;
+}
+
+.wle_title {
+  font-weight: bold;
+  font-size: 1.2em;
+  text-align: left;
+  margin: 2px 0 2px 10px;
+}
+
+@include rdmedia(0) { .wle_title { font-size: 1.25em; } }
+

www/fragments/header.php

@@ -8,6 +8,7 @@
 		<a class="tab <?php if ($HEADER_ACTIVE === 'euler')    echo 'tab_active'; ?>" href="/blog/1/Project_Euler_with_Befunge">Project Euler</a>
 		<a class="tab <?php if ($HEADER_ACTIVE === 'blog')     echo 'tab_active'; ?>" href="/blog">Blog</a>
         <a class="tab <?php if ($HEADER_ACTIVE === 'programs') echo 'tab_active'; ?>" href="/programs">Programs</a>
+        <a class="tab <?php if ($HEADER_ACTIVE === 'webapps')  echo 'tab_active'; ?>" href="/webapps">Tools</a>
         <?php if (isLoggedInByCookie()): ?><a class="tab tab_admin" href="/admin">Admin</a><?php endif; ?>
 		<a class="tab <?php if ($HEADER_ACTIVE === 'about')    echo 'tab_active'; ?>" href="/about">About</a>
 		<div class="tab_split" ></div>

www/index.php

@@ -63,7 +63,9 @@ $URL_RULES =
 	[ 'url' => ['log', '?{id}', '?{name}'],                  'target' => 'pages/blog_view.php',              'options' => [ 'id' => '%URL%', 'subview' => '' ],      ],
 	[ 'url' => ['log', '?{id}', '?{name}', '?{subview}'],    'target' => 'pages/blog_view.php',              'options' => [ 'id' => '%URL%', 'subview' => '%URL%' ], ],
 	[ 'url' => ['blogpost', 'view'],                         'target' => 'pages/blog_view.php',              'options' => [ 'id' => '%GET%', 'subview' => '' ],      ],
-	
+
+	[ 'url' => ['webapps'],                                  'target' => 'pages/webapps_list.php',           'options' => [],                                        ],
+
 	[ 'url' => ['highscores', 'list.php'],                   'target' => 'pages/highscores_listentries.php', 'options' => [ '_opt' => 'http', 'gameid' => '%GET%' ], ],
 	[ 'url' => ['highscores', 'list'],                       'target' => 'pages/highscores_listentries.php', 'options' => [ '_opt' => 'http', 'gameid' => '%GET%' ], ],
 	[ 'url' => ['highscores', 'listentries'],                'target' => 'pages/highscores_listentries.php', 'options' => [ '_opt' => 'http', 'gameid' => '%GET%' ], ],
@@ -209,6 +211,3 @@ try {
 //TODO support for different color schemes
 //     should be possible to change with just a few constant in config.scss
 //     a (little) bit more hue in default scheme
-//TODO Add easing cookbook
-//TODO add befunrep query
-//TODO evtl webapp section (?)

www/internals/webapp.php

@@ -0,0 +1,25 @@
+<?php
+
+class WebApps
+{
+	public static function listAll()
+	{
+		$all = require (__DIR__ . '/../statics/webapps/__all.php');
+
+		return array_map('self::readSingle', $all);
+	}
+
+	public static function readSingle($a)
+	{
+		return $a;
+	}
+
+	public static function listAllNewestFirst()
+	{
+		$data = self::listAll();
+		usort($data, function($a, $b) { return strcasecmp($b['date'], $a['date']); });
+		return $data;
+	}
+}
+
+

www/pages/webapps_list.php

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<?php
+require_once (__DIR__ . '/../internals/base.php');
+require_once (__DIR__ . '/../internals/webapp.php');
+
+$allapps = WebApps::listAllNewestFirst();
+
+?>
+<head>
+	<meta charset="utf-8">
+	<title>Mikescher.com - Tools</title>
+	<link rel="icon" type="image/png" href="/data/images/favicon.png"/>
+    <link rel="canonical" href="https://www.mikescher.com/webapps"/>
+	<?php printCSS(); ?>
+</head>
+<body>
+<div id="mastercontainer">
+
+<?php $HEADER_ACTIVE='webapps'; include (__DIR__ . '/../fragments/header.php');  ?>
+
+<div id="content" class="content-responsive">
+
+	<div class="blockcontent">
+
+		<div class="contentheader"><h1>Online tools and web apps</h1><hr/></div>
+
+		<div class='webapplistelem_container'>
+			<?php
+
+			foreach ($allapps as $post)
+			{
+				echo "<a class='webapplistelem' href='" . $post['url'] . "'>\n";
+				echo "<div class='wle_date'>"  . $post['date'] . "</div>\n";
+				echo "<div class='wle_title'>"  . $post['title'] . "</div>\n";
+				echo "</a>\n";
+			}
+
+			?>
+		</div>
+
+	</div>
+
+</div>
+
+<?php include (__DIR__ . '/../fragments/footer.php');  ?>
+
+</div>
+</body>
+</html>

www/statics/webapps/__all.php

@@ -0,0 +1,20 @@
+<?php
+
+return
+	[
+		[
+			'id'          => 'easing-cookbook',
+			'title'       => 'Easing Cookbook',
+			'date'        => '2017-05-13',
+			'repository'  => 'https://github.com/Mikescher/EasingCookbook',
+			'url'         => 'https://mikescher.github.io/EasingCookbook/',
+		],
+
+		[
+			'id'          => 'befunrep',
+			'title'       => 'BefunRep online interface',
+			'date'        => '2016-09-23',
+			'repository'  => 'https://github.com/Mikescher/Befunge_Number_Representations',
+			'url'         => 'https://mikescher.github.io/Befunge_Number_Representations/',
+		],
+	];