Add Clippy lol

static/style.css

@@ -323,7 +323,31 @@ p {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 3rem;
-    align-items: center;
+    align-items: start;
+}
+
+.eol-main {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.eol-clippy-image {
+    text-align: center;
+    order: -1; /* Ensure Clippy appears first */
+}
+
+.eol-clippy-image img {
+    max-width: 350px;
+    max-height: 350px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    overflow: hidden;
+}
+
+.eol-text {
+    order: 1; /* Ensure text appears after Clippy */
 }
 
 .eol-text ul {

templates/index.html

@@ -147,15 +147,20 @@
             <div class="container">
                 <h2>Windows 10-ondersteuning eindigt</h2>
                 <div class="eol-content">
-                    <div class="eol-text">
-                        <p>Microsoft stopt de ondersteuning voor Windows 10 in <strong>oktober 2025</strong>. Dit betekent:</p>
-                        <ul>
-                            <li>❌ Geen beveiligingsupdates meer</li>
-                            <li>❌ Geen technische ondersteuning</li>
-                            <li>❌ Uw computer wordt kwetsbaar voor cyberaanvallen</li>
-                            <li>❌ Mogelijk niet meer compatibel met nieuwe software</li>
-                        </ul>
-                        <p class="highlight">Maar u hoeft geen nieuwe computer te kopen! Linux biedt een modern, veilig alternatief dat perfect werkt op uw huidige hardware.</p>
+                    <div class="eol-main">
+                        <div class="eol-clippy-image">
+                            <img src="/static/clippy.png" alt="Clippy advising to use Linux">
+                        </div>
+                        <div class="eol-text">
+                            <p>Microsoft stopt de ondersteuning voor Windows 10 in <strong>oktober 2025</strong>. Dit betekent:</p>
+                            <ul>
+                                <li>❌ Geen beveiligingsupdates meer</li>
+                                <li>❌ Geen technische ondersteuning</li>
+                                <li>❌ Uw computer wordt kwetsbaar voor cyberaanvallen</li>
+                                <li>❌ Mogelijk niet meer compatibel met nieuwe software</li>
+                            </ul>
+                            <p class="highlight">Maar u hoeft geen nieuwe computer te kopen! Linux biedt een modern, veilig alternatief dat perfect werkt op uw huidige hardware.</p>
+                        </div>
                     </div>
                     <div class="eol-stats">
                         <div class="stat">