Add custom error pages, pixel images, etc (also improve computers)

public/css/colorschemes/catppuccin-macchiato.css

@@ -1,5 +1,6 @@
 :root {
     --background: #181926;
+    --background-light: #363a4f;
     --foreground: #cad3f5;
     --links: #8aadf4;
     --warning: #ff7272;

public/css/master.css

@@ -217,9 +217,40 @@ table.computers {
     width: 100%;
 }
 
-td.computer {
+table.computers td:first-child {
-    width: 50%;
+    text-align: center;
-    border: 0;
+    font-weight: bold;
+}
+table.computers td ul {
+    margin: 0;
+    padding-left: 20px;
+}
+
+table.computers section-title {
+    text-decoration: underline;
+    font-style: italic;
+    font-weight: bold;
+}
+
+table.computers p.description {
+    font-style: italic;
+    margin: 5px 0 2px 0;
+}
+
+table.computers th {
+    background-color: var(--background-light);
+}
+
+table.computers td,
+table.computers th {
+    border: var(--foreground) solid 1px;
+    padding: 5px;
+}
+
+
+
+img.pixel {
+    image-rendering: pixelated;
 }
 
 div.footer {
@@ -227,6 +258,10 @@ div.footer {
     margin-bottom: 5px;
 }
 
+div.footer a:hover {
+    text-decoration: none;
+}
+
 table.commits tr td {
     border: none;
     padding-right: 5px;
@@ -356,23 +391,6 @@ a:hover {
     text-decoration: underline;
 }
 
-.computer {
-    width: 100%;
-}
-
-.computer td {
-    border: none;
-}
-
-.computer h1,
-.computer hr {
-    margin: 0;
-}
-
-.computer .computer-image {
-    width: 256px;
-}
-
 .spec {
     padding-left: 20px;
 }
@@ -381,8 +399,55 @@ .spec-title {
     font-weight: bold;
 }
 
-.computer-specs {
+.project-grid {
-    margin-top: 5px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(0, 1fr);
+    grid-column-gap: 0;
+    grid-row-gap: 0;
+    height: 100%;
+}
+
+.project-grid div {
+    padding: 5px;
+}
+
+.project-section-title,
+.project-grid div h1,
+.project-grid div p {
+    margin: 5px 0;
+}
+
+.project-section-title {
+    margin-top: 20px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid var(--foreground);
+}
+
+.project-grid div h1 {
+    margin-top: 10px;
+}
+
+.project-grid div a {
+    text-decoration: none;
+    padding: 2px 2px 0 2px;
+    margin: 0;
+    font-size: 10pt;
+}
+
+.project-grid .project-links a {
+    color: var(--links);
+    border: 1px solid var(--foreground);
+    border-left: none;
+}
+
+.project-grid .project-links a:first-child {
+    border: 1px solid var(--foreground);
+}
+
+.project-grid .project-links a:hover {
+    background-color: var(--foreground);
+    color: var(--background);
 }
 
 .error-box {

public/css/minimal.css

@@ -1,25 +1,12 @@
-html {
-    color-scheme: dark;
-}
-
-body {
-    font-family: sans-serif;
-    margin: 0;
-    margin-left: 10px;
-    color: #cad3f5;
-    background-color: #181926;
-}
-
-table.gb-entry_details tr td {
-    padding-right: 5px;
-}
-
 * { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
 html { color-scheme: dark; }
 body { color: #cad3f5; background-color: #181926; }
-h1, h2, ul, p { margin: 0; }
+h1, h2, h4, ul, p { margin: 0; }
 h1 { font-weight: normal; }
+h4 { margin-bottom: 5px; }
 ul { padding: 5px 30px; }
 a { color: #8aadf4; text-decoration: none; }
 a:hover { text-decoration: underline; }
-code { font-family: monospace; font-size: 24px; }
+code { font-family: monospace; }
+code.addr { font-size: 24px; }
+table { border: 1px solid #cad3f5; }

resources/views/errors/401.blade.php

@@ -0,0 +1,5 @@
+@extends('errors::minimal')
+
+@section('title', __('Unauthorized'))
+@section('code', '401')
+@section('message', __('Unauthorized'))

resources/views/errors/402.blade.php

@@ -0,0 +1,5 @@
+@extends('errors::minimal')
+
+@section('title', __('Payment Required'))
+@section('code', '402')
+@section('message', __('Payment Required'))

resources/views/errors/403.blade.php

@@ -0,0 +1,5 @@
+@extends('errors::minimal')
+
+@section('title', __('Forbidden'))
+@section('code', '403')
+@section('message', __($exception->getMessage() ?: 'Forbidden'))

resources/views/errors/404.blade.php

@@ -0,0 +1,30 @@
+@extends('errors::minimal')
+@php
+abort(503)
+@endphp
+@section('content')
+
+<h1>Error 404 | <strong>Page not found!</strong></h1>
+<hr align="left">
+<h2>The page <code class="addr">/{{ Request::path() }}/</code> doesn't exist! Did you mean...</h2>
+<ul>
+    <li><a href="//www.diskfloppy.me/">diskfloppy.me</a></li>
+    <li><a href="//git.diskfloppy.me/">git.diskfloppy.me</a></li>
+    <li><a href="//weather.diskfloppy.me">weather.diskfloppy.me</a></li>
+    <li><a href="//dl.diskfloppy.me/">dl.diskfloppy.me</a></li>
+    <li><a href="https://status.diskfloppy.me">status.diskfloppy.me</a> (HTTPS Only)</li>
+    <li><a href="gopher://diskfloppy.me">gopher://diskfloppy.me</a></li>
+</ul>
+<p>Still haven't found what you were looking for or believe this is a server error? Contact the <a href="mailto:webmaster@diskfloppy.me">webmaster</a>!</p>
+<br>
+<h4>Diagnostic Info</h4>
+<table><tr><td>
+            <code>
+                Server: &nbsp;{{ gethostname() }}<br>
+                Your IP: {{ Request::ip() }}<br>
+                Epoch: &nbsp;&nbsp;{{ now()->timestamp }}<br>
+                Agent: &nbsp;&nbsp;Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:122.0) Gecko/20100101 Firefox/122.0	</code>
+        </td></tr></table>
+<hr align="left">
+<p>&copy; floppydisk 2021-2024</p>
+@endsection

resources/views/errors/418.blade.php

@@ -0,0 +1,5 @@
+@extends('errors::minimal')
+
+@section('title', __('I\'m a teapot'))
+@section('code', '418')
+@section('message', __('I\'m a teapot'))

resources/views/errors/419.blade.php

@@ -0,0 +1,5 @@
+@extends('errors::minimal')
+
+@section('title', __('Page Expired'))
+@section('code', '419')
+@section('message', __('Page Expired'))

resources/views/errors/429.blade.php

@@ -0,0 +1,5 @@
+@extends('errors::minimal')
+
+@section('title', __('Too Many Requests'))
+@section('code', '429')
+@section('message', __('Too Many Requests'))

resources/views/errors/500.blade.php

@@ -0,0 +1,5 @@
+@extends('errors::minimal')
+
+@section('title', __('Server Error'))
+@section('code', '500')
+@section('message', __('Server Error'))

resources/views/errors/503.blade.php

@@ -0,0 +1,5 @@
+@extends('errors::minimal')
+
+@section('title', __('Service Unavailable'))
+@section('code', '503')
+@section('message', __('Service Unavailable'))

resources/views/errors/layout.blade.php

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>@yield('title')</title>
+
+        <!-- Styles -->
+        <style>
+            html, body {
+                background-color: #fff;
+                color: #636b6f;
+                font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+                font-weight: 100;
+                height: 100vh;
+                margin: 0;
+            }
+
+            .full-height {
+                height: 100vh;
+            }
+
+            .flex-center {
+                align-items: center;
+                display: flex;
+                justify-content: center;
+            }
+
+            .position-ref {
+                position: relative;
+            }
+
+            .content {
+                text-align: center;
+            }
+
+            .title {
+                font-size: 36px;
+                padding: 20px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="flex-center position-ref full-height">
+            <div class="content">
+                <div class="title">
+                    @yield('message')
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

resources/views/errors/minimal.blade.php

@@ -0,0 +1,21 @@
+@extends('layouts.minimal')
+@section('content')
+    <h1>Error @yield('code') | <strong>@yield('message')</strong></h1>
+    <hr align="left">
+    <p>Here, have a cat...</p>
+    <img src="https://http.cat/@yield('code')" width="500"><br><br>
+    <p>If you believe this is a server error, contact the <a href="mailto:webmaster@diskfloppy.me">webmaster</a></p>
+    <br>
+    <h4>Diagnostic Info</h4>
+    <table><tr><td>
+                <code>
+                    Server: &nbsp;{{ gethostname() }}<br>
+                    Your IP: {{ Request::ip() }}<br>
+                    Root: &nbsp;&nbsp;&nbsp;{!! url('') !!}<br>
+                    Path: &nbsp;&nbsp;&nbsp;/{{ Request::path() }}/<br>
+                    Epoch: &nbsp;&nbsp;{{ now()->timestamp }}<br>
+                    Agent: &nbsp;&nbsp;Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:122.0) Gecko/20100101 Firefox/122.0	</code>
+            </td></tr></table>
+    <hr align="left">
+    <p>&copy; floppydisk 2021-2024</p>
+@endsection

resources/views/includes/footer.blade.php

@@ -1,28 +1,28 @@
 <hr>
 <div class="footer" role="contentinfo">
-    <a href="https://www.debian.org/">
+    <a href="https://www.w3schools.com/html/">
-        <img src="{{ URL::asset('images/buttons/debian.gif') }}"
+        <img src="{{ URL::asset('images/buttons/html_learn_it_today.gif') }}"
-             width="88" height="31" alt="Powered by Debian">&nbsp;
+             class="pixel" width="88" height="31" alt="Learn HTML today!">&nbsp;
     </a>
     <a href="https://dimden.dev/">
         <img src="https://dimden.dev/services/images/88x31.gif" width="88" height="31"
-             alt="dimden.dev">
+             class="pixel" alt="dimden.dev">
     </a>&nbsp;
     <a href="https://www.linux.org/">
         <img src="{{ URL::asset('images/buttons/linuxnow.gif') }}" width="88"
-             height="31" alt="Linux NOW!">
+             class="pixel" height="31" alt="Linux NOW!">
     </a>&nbsp;
     <a href="https://www.vim.org/">
         <img src="{{ URL::asset('images/buttons/vim.gif') }}" width="88" height="31"
-             alt="vim">
+             class="pixel" alt="vim">
     </a>&nbsp;
     <a href="http://jigsaw.w3.org/css-validator/check/referer">
         <img src="{{ URL::asset('images/buttons/vcss-blue.gif') }}" width="88" height="31"
-            alt="Valid CSS!">
+             class="pixel" alt="Valid CSS!">
     </a>&nbsp;
     <a href="https://wiby.me/">
         <img src="{{ URL::asset('images/buttons/wiby.gif') }}" width="88" height="31"
-             alt="Wiby - Search Engine for the Classic Web">
+             class="pixel" alt="Wiby - Search Engine for the Classic Web">
     </a><br>
     This site is best viewed at 1024x768 with 16-bit color or better<br>
     &copy; floppydisk 2021-{{ date('Y') }}, v{{ config('app.version') }}, <a

resources/views/includes/header.blade.php

@@ -2,15 +2,15 @@
         <h1>diskfloppy.me | <strong>@yield('title')</strong></h1>
         <div class="nav-wrapper">
             <div>
-                <a href="/" title="Home"><img src="/images/icons/nav/home.png" alt="Home" width="32" height="32"></a>
+                <a href="/" title="Home"><img class="pixel" src="/images/icons/nav/home.png" alt="Home" width="32" height="32"></a>
-                <a href="//git.diskfloppy.me/" title="cgit"><img src="/images/icons/nav/repo.png" alt="cgit" width="32" height="32"></a>
+                <a href="//git.diskfloppy.me/" title="cgit"><img class="pixel" src="/images/icons/nav/repo.png" alt="cgit" width="32" height="32"></a>
-                <a href="/pub/" title="Public Files"><img src="/images/icons/nav/pubfiles.png" alt="Public Files" width="32" height="32"></a>
+                <a href="/pub/" title="Public Files"><img class="pixel" src="/images/icons/nav/pubfiles.png" alt="Public Files" width="32" height="32"></a>
-                <a href="/computers/" title="Computers"><img src="/images/icons/nav/computers.png" alt="Computers" width="32" height="32"></a>
+                <a href="/computers/" title="Computers"><img class="pixel" src="/images/icons/nav/computers.png" alt="Computers" width="32" height="32"></a>
-                <a href="/bookmarks/" title="Bookmarks"><img src="/images/icons/nav/bookmarks.png" alt="Bookmarks" width="32" height="32"></a>
+                <a href="/bookmarks/" title="Bookmarks"><img class="pixel" src="/images/icons/nav/bookmarks.png" alt="Bookmarks" width="32" height="32"></a>
-                <a href="/guestbook/" title="Guestbook"><img src="/images/icons/nav/guestbook.png" alt="Guestbook" width="32" height="32"></a>
+                <a href="/guestbook/" title="Guestbook"><img class="pixel" src="/images/icons/nav/guestbook.png" alt="Guestbook" width="32" height="32"></a>
-                <!--<a href="/contact/" title="Contact"><img src="/images/icons/nav/mail.png" alt="Contact" width="32" height="32"></a>-->
+                <!--<a href="/contact/" title="Contact"><img class="pixel" src="/images/icons/nav/mail.png" alt="Contact" width="32" height="32"></a>-->
-                <a href="/weather/" title="Weather"><img src="/images/icons/nav/weather.png" alt="Weather" width="32" height="32"></a>
+                <a href="/weather/" title="Weather"><img class="pixel" src="/images/icons/nav/weather.png" alt="Weather" width="32" height="32"></a>
-                <a href="/music/" title="Music"><img src="/images/icons/nav/music.png" alt="Music" width="32" height="32"></a>&nbsp;&nbsp;
+                <a href="/music/" title="Music"><img class="pixel" src="/images/icons/nav/music.png" alt="Music" width="32" height="32"></a>&nbsp;&nbsp;
             </div>
         </div>
     </nav>

resources/views/pages/computers.blade.php

@@ -2,7 +2,135 @@
 @section('title', 'Computers')
 @section('description', 'Computers I own or have owned.')
 @section('content')
-    <table class="computer" role="presentation">
+    <table class="computers">
+        <tr>
+            <th>PICTURES</th>
+            <th>SPECS &amp; DESCRIPTION</th>
+        </tr>
+        <tr>
+            <td>2023 MacBook Pro 14"</td>
+            <td>
+                <section-title>Quick Specs</section-title>
+                <ul>
+                    <li>Apple M3 Pro</li>
+                    <li>18GB RAM</li>
+                    <li>500GB SSD</li>
+                    <li>macOS Sonoma</li>
+                </ul>
+                <p class="description">WHAT</p>
+            </td>
+        </tr>
+        <tr>
+            <td>2018 MacBook Pro 13"</td>
+            <td>
+                <section-title>Quick Specs</section-title>
+                <ul>
+                    <li>Intel i5-8259U @ 2.3GHz</li>
+                    <li>Intel Iris Plus Graphics 655</li>
+                    <li>8GB RAM</li>
+                    <li>250GB SSD</li>
+                    <li>macOS Sonoma</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td>2012 Lenovo ThinkPad T430</td>
+            <td>
+                <section-title>Quick Specs</section-title>
+                <ul>
+                    <li>Intel Core i7</li>
+                    <li>16GB RAM</li>
+                    <li>Windows 7 Professional</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td>2005 IBM ThinkPad X41T</td>
+            <td>
+                <section-title>Quick Specs</section-title>
+                <ul>
+                    <li>Intel Pentium M @ 1.6GHz</li>
+                    <li>Mobile Intel Express Chipset Family (128MB)</li>
+                    <li>1.5GB RAM</li>
+                    <li>40GB HDD</li>
+                    <li>Windows XP Tablet PC Edition</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td>1999 Dell OptiPlex GX1</td>
+            <td>
+                <section-title>Quick Specs</section-title>
+                <ul>
+                    <li>Intel Pentium II (Deschutes) @ 400MHz</li>
+                    <li>ATI 3D Rage Pro (4MB)</li>
+                    <li>639MB</li>
+                    <li>40GB HDD</li>
+                    <li>MS-DOS 6.22 &amp; WFW 3.10</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td>2003 IBM ThinkPad T40</td>
+            <td>
+                <section-title>Quick Specs</section-title>
+                <ul>
+                    <li>Intel Pentium M @ 1.3GHz</li>
+                    <li>ATI Mobility Radeon 7500 (32MB)</li>
+                    <li>1GB RAM</li>
+                    <li>30GB HDD</li>
+                    <li>Windows 2000 Professional</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td>2010 HP Compaq Elite 8100</td>
+            <td>
+                <section-title>Quick Specs</section-title>
+                <ul>
+                    <li>Intel Core i7</li>
+                    <li>16GB RAM</li>
+                    <li>some SSD and an HDD</li>
+                    <li>Windows Vista Ultimate (64-bit)</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td>2014 Mac mini</td>
+            <td>
+                <section-title>Quick Specs</section-title>
+                <ul>
+                    <li>Intel Core i5-4278U @ 2.6GHz</li>
+                    <li>Intel Iris Graphics</li>
+                    <li>8GB RAM</li>
+                    <li>1TB HDD</li>
+                    <li>VMware ESXi 6.7.0u3</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td>1996 Fujitsu Milan</td>
+            <td>
+                <section-title>Quick Specs</section-title>
+                <ul>
+                    <li>Intel Pentium</li>
+                    <li>32MB RAM</li>
+                    <li>1215MB HDD</li>
+                    <li>Windows 98 SE</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td>1999 Compaq Armada M300</td>
+            <td>
+                <section-title>Quick Specs</section-title>
+                <ul>
+                    <li>Intel Pentium III</li>
+                </ul>
+            </td>
+        </tr>
+    </table>
+    <!--<table class="computer" role="presentation">
         <tr>
             <td colspan="2"><h2>Custom Build</h2><hr></td>
         </tr>
@@ -296,7 +424,7 @@
                 </table>
             </td>
         </tr>
-    </table>
+    </table>-->
     <!--<table class="computer" role="presentation">
         <tr>
             <td colspan="2"><h2>Compaq Armada M300</h2><hr></td>

resources/views/pages/home.blade.php

@@ -2,6 +2,7 @@
 @section('title', 'Home')
 @section('description', 'This is the personal homepage of floppydisk.')
 @section('content')
+
     <p>Hi! This is my personal homepage on the <strong>W</strong>orld <strong>W</strong>ide <strong>W</strong>eb.</p>
 
     <table class="info-table" role="presentation">