euler fragment

www/data/styles.css

@@ -1,10 +1,16 @@
 body {
     margin: 0;
-    background-color: #222;
+    background-color: #EEE;
     
     color: #CCC;
 }
 
+#content {
+    padding-top: 64px;
+    display: flex;
+    justify-content: center;
+}
+
 .headerdiv {
     background-color: #333;
     display: flex;
@@ -37,23 +43,29 @@ body {
     justify-content: center;
     align-items: center;
 
-    background-color: #111;
+    background-color: #222;
     color: #CCC;
-    border: 1px solid #CCC;
+    border-left:  1px solid #000;
+    border-right: 1px solid #000;
     font-weight: bold;
 
-    margin: 5px 10px;
+    margin: 0px 0px 0px 20px;
     padding: 2px 5px;
     min-width: 64px;
-    vertical-align: center;
     text-align: center;
 
     flex: initial;
 }
 
+.tab:hover {
+    cursor: pointer;
+    background-color: #555;
+}
+
 .tab_github {
     background-color: #4078c0;
-    border: 1px solid #111;
+    border-left:  1px solid #111;
+    border-right: 1px solid #111;
     color: black;
 }
 
@@ -61,17 +73,12 @@ body {
     flex: auto;
 }
 
-.tab:hover {
-    cursor: pointer;
-    background-color: #333;
-}
-
 .tab_github:hover {
     background-color: #c9510c;
     color: black;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 850px) {
 
     .headerdiv {
         position: static;
@@ -91,7 +98,98 @@ body {
         flex-direction: column;
     }
 
+    .tab {
+        border: 1px solid #000;
+        font-weight: bold;
+
+        margin: 5px 10px;
+    }
+    
+    #content {
+        padding-top: 0px;
+    }
 }
 
 
- 
+/*############################################################################*/
+
+.euler_pnl_base {
+    display: inline-flex;
+    flex-direction: column;
+    
+    border: 1px solid #AAA;
+    border-radius: 5px 5px 0 0;
+    margin: 15px;
+}
+
+.euler_pnl_header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    color: #222;
+    font-weight: bold;
+    padding: 4px;
+    background: #AAA;
+    
+    font-size: large;
+}
+
+.euler_pnl_content {
+    display: flex;
+    flex-direction: column;
+    
+    background: #DDD;
+    
+    padding: 6px;
+}
+
+.euler_pnl_row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+@media (max-width: 850px) { .euler_pnl_row { flex-direction: column; } }
+
+.euler_pnl_row2 {
+    display: flex;
+    flex-direction: row;
+}
+
+.euler_pnl_cell {
+    width: 24px;
+    height: 24px;
+    font-size: 11px;
+    
+    margin: 3px;
+    
+    border: 1px solid #333;
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.euler_pnl_cell a {
+    color: black;
+    text-decoration: none;
+}
+
+.euler_pnl_cell a:hover {
+    color: black;
+    text-decoration: none;
+}
+
+.euler_pnl_cell a:visited {
+    color: black;
+    text-decoration: none;
+}
+
+.euler_pnl_celltime_perfect { background: #98C398; }
+.euler_pnl_celltime_good    { background: #B9D89B; }
+.euler_pnl_celltime_ok      { background: #D8D898; }
+.euler_pnl_celltime_bad     { background: #D8B298; }
+.euler_pnl_celltime_fail    { background: #D89D9D; }
+.euler_pnl_cell_notexist    { background: #CCCCCC; }
+

www/fragments/euler.php

@@ -0,0 +1,81 @@
+
+<?php
+
+    $euler = $PDO->query('SELECT * FROM ms4_eulerproblem', PDO::FETCH_ASSOC);
+
+?>
+
+<div class="euler_pnl_base">
+
+    <div class="euler_pnl_header">
+        Project Euler with Befunge-93
+    </div>
+    <div class="euler_pnl_content">
+
+	<?php
+
+    $arr = [];
+
+    $max = 0;
+    foreach ($euler as $problem)
+    {
+        $max = max($max, $problem['Problemnumber']);
+
+
+		if ($problem['SolutionTime'] < 100) // < 100ms
+			$problem['timelevel'] = 'euler_pnl_celltime_perfect';
+		else if ($problem['SolutionTime'] < 15 * 1000) // < 5s
+			$problem['timelevel'] = 'euler_pnl_celltime_good';
+		else if ($problem['SolutionTime'] < 60 * 1000) // < 1min
+			$problem['timelevel'] = 'euler_pnl_celltime_ok';
+		else if ($problem['SolutionTime'] < 5 * 60 * 1000) // < 5min
+			$problem['timelevel'] = 'euler_pnl_celltime_bad';
+		else
+			$problem['timelevel'] = 'euler_pnl_celltime_fail';
+
+		$arr[$problem['Problemnumber']] = $problem;
+	}
+
+	$max = ceil($max / 20) * 20;
+
+    echo "<div class='euler_pnl_row'>\n";
+	echo "<div class='euler_pnl_row2'>\n";
+    for ($i = 1; $i <= $max; $i++)
+    {
+        $cssclass = '';
+        if (key_exists($i, $arr))
+        {
+			$cssclass = $arr[$i]['timelevel'];
+        }
+        else
+        {
+			$cssclass = 'euler_pnl_cell_notexist';
+        }
+
+		echo "  <div class=\"euler_pnl_cell $cssclass\">";
+		echo "<a href=\"/blog/1/Project_Euler_with_Befunge/problem-" . str_pad($i, 3, '0', STR_PAD_LEFT) . "\">";
+		echo "$i";
+		echo "</a>";
+		echo "</div>\n";
+
+        if (($i)%20 == 0)
+        {
+			echo "</div>\n";
+			echo "</div>\n";
+			echo "<div class='euler_pnl_row'>\n";
+			echo "<div class='euler_pnl_row2'>\n";
+        }
+		else if (($i)%10 == 0)
+		{
+			echo "</div>\n";
+			echo "<div class='euler_pnl_row2'>\n";
+		}
+    }
+	echo "</div>\n";
+	echo "</div>\n";
+
+
+    ?>
+    </div>
+
+</div>

www/internals/.gitignore

@@ -0,0 +1 @@
+config.php

www/internals/backend.php

@@ -0,0 +1,12 @@
+<?php
+
+$CONFIG = require 'config.php';
+
+$dsn = "mysql:host=" . $CONFIG['host'] . ";dbname=" . $CONFIG['database'] . ";charset=utf8";
+$opt = [
+	PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
+	PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+	PDO::ATTR_EMULATE_PREPARES   => false,
+];
+
+$PDO = new PDO($dsn, $CONFIG['user'], $CONFIG['password'], $opt);

www/pages/main.php

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+<?php require __DIR__ . '/../internals/backend.php' ?>
 <head>
     <meta charset="utf-8">
     <title>Mikescher.com</title>
@@ -11,7 +12,9 @@
 <body>
     <?php include (__DIR__ . '/../fragments/header.php');  ?>
 
-    <div class="content">
+    <div id="content">
+
+		<?php include (__DIR__ . '/../fragments/euler.php');  ?>
 
     </div>