OWASP · sydseter · Feb 10, 2025 · Feb 10, 2025
@@ -1,10 +1,9 @@
 <!doctype html>
 <html lang="en">
 	<head>
-		<!-- HTML Meta Tags -->
+		<meta charset="utf-8" />
 		<title>OWASP Cornucopia</title>
 		<link rel="stylesheet" href="/css/base.css" />
-		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/images/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+        <title>OWASP Cornucopia: %sveltekit.error.message%</title>
+        <link rel="stylesheet" href="/css/base.css" />
+        <link rel="icon" href="%sveltekit.assets%/images/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        %sveltekit.head%
+	</head>
+	<body>
+
+        <div class="container.desktop-left">
+            <div class="text.desktop-left">
+                <h2>Request failed. Even Cornucopia can't cope with infinity ∞</h2>
+		        <p>Status: %sveltekit.status%</p>
+		        <p>Message: %sveltekit.error.message%</p>
+            </div>
+            <div class="image">
+                <img src="/images/cornucopia_logo_in_devs_we_trust.svg" alt="OWASP Cornucopia - In devs we Trust">
+            </div>
+        </div>
+
+	</body>
+</html>
@@ -1,13 +1,17 @@
 <script lang="ts">
+    import { error } from '@sveltejs/kit';
     import {type Card} from "../../domain/card/card"
     interface Props {
-        card: Card;
+        card: string;
     }
 
     let { card }: Props = $props();
+    error(404, {
+			message: `Unknown card: ${String(card).toUpperCase()}`
+    });
 </script>
 
-<p>Unknown card: {String(card.id).toUpperCase()} {card.suit}</p>
+<p>Unknown card: {String(card).toUpperCase()}</p>
 
 <style>
     p {

@@ -20,16 +20,12 @@
     function getSuitColor(suit : string, id: string)
     {
         if (['CRM', 'CM', 'WC'].includes(id)) suit = suit + '-mobile';
-        console.log(suit);
-        console.log(id);
         return cardColor?.get(suit) ?? "";
     }
 
     function getTextColor(suit : string, id: string)
     {
         if (['CRM', 'CM', 'WC'].includes(id)) suit = suit + '-mobile';
-        console.log(suit);
-        console.log(id);
         return cardColor?.get(suit) ?? "default";
     }
 </script>

@@ -1,63 +1,19 @@
 <script lang="ts">
-    import { browser } from "$app/environment";
-    import { goto } from "$app/navigation";
-    import { onDestroy } from "svelte";
-
-    // Automatic return to homepage delay in milliseconds
-    let timer : number = $state(10000);
-
-    let timeoutId : number = -1;
-
-    start();
-
-    function start()
-    {
-        timeoutId = +setTimeout(decrementTimer,33);
-    }
-
-    function decrementTimer()
-    {
-        if(isLocalDev())
-            return;
-
-        clearTimeout(timeoutId);
-        timer -= 33;
-        timeoutId = +setTimeout(decrementTimer,33);
-        if(timer < 33)
-            goto('/');
-    }
-
-    function isLocalDev() : boolean
-    {
-        if(browser)
-            return window.location.host.toLowerCase().includes('localhost');
-        else
-            return true;
-    }
-
-    onDestroy(()=>clearTimeout(timeoutId));
+    import { page } from '$app/state';
+    import TextImage from '$lib/components/textImage.svelte';
 </script>
 
 <div class="error-message">
-    <p>Oops, something went wrong!</p>
-    {#if !isLocalDev()}
-        <p>Returning to <a href="/">landing page</a> in {Math.floor(timer/1000.0)} seconds.</p>
-    {/if}
+    <TextImage src="/images/cornucopia_logo_in_devs_we_trust.svg" align="left">
+        <h2>Request failed. Even Cornucopia can't cope with infinity ∞</h2>
+        <p>Status: {page.status}</p>
+        <p>Message: {page.error?.message}</p>
+    </TextImage>
 </div>
 
 <style>
     .error-message
     {
         min-height: 80vh;
     }
-    p,a
-    {
-        color: var(--background);
-        width : 100%;
-        margin:auto;
-        text-align: center;
-        font-family: var(--font-title);
-        font-weight: 400;
-        margin-top: 10rem;
-    }
 </style>
@@ -6,7 +6,7 @@ import type { PageServerLoad } from "./$types";
 
 export const load = (({ params }) => {
   return {
-    card: legacyCardCodeFix(params.card.toUpperCase()),
+    card: legacyCardCodeFix(params.card?.toUpperCase()),
     decks: new DeckService(request).getCardsForAllLanguages(),
     routes: new Map<string, Route[]>([
       ['ASVSRoutes', FileSystemHelper.ASVSRouteMap()]

@@ -23,7 +23,6 @@
       "AZA","AZ2","AZ3","AZ4","AZ5","AZ6","AZ7","AZ8","AZ9","AZX","AZJ","AZQ","AZK",
       "CA","C2","C3","C4","C5","C6","C7","C8","C9","CX","CJ","CQ","CK",
       "CMA","CM2","CM3","CM4","CM5","CM6","CM7","CM8","CM9","CMX","CMJ","CMQ","CMK",
-      "COMA","COM2","COM3","COM4","COM5","COM6","COM7","COM8","COM9","COMX","COMJ","COMQ","COMK",
       "CRA","CR2","CR3","CR4","CR5","CR6","CR7","CR8","CR9","CRX","CRJ","CRQ","CRK",
       "CRMA","CRM2","CRM3","CRM4","CRM5","CRM6","CRM7","CRM8","CRM9","CRMX","CRMJ","CRMQ","CRMK",
       "NSA","NS2","NS3","NS4","NS5","NS6","NS7","NS8","NS9","NSX","NSJ","NSQ","NSK",
@@ -46,14 +45,14 @@
       "network-&-storage",
       "resilience",
     ]
-    return (cards_options.includes(String(card.id).toUpperCase()) && suits_options.includes(card.suitName.toLowerCase().replaceAll(' ', '-')))
+    return (cards_options.includes(String(card?.id).toUpperCase()) && suits_options.includes(card?.suitName?.toLowerCase().replaceAll(' ', '-')))
   }
 </script>
 <div>
 {#if cardFound()}
-  <CardFound routes={data.routes} {cards} {card}  mappingData={data.mappingData.get(card.edition)} />
+  <CardFound routes={data.routes} {cards} {card} mappingData={data.mappingData.get(card.edition)} />
 {:else}
-  <CardNotFound {card} />
+  <CardNotFound card={data.card} />
 {/if}
 </div>
 <style>

@@ -35,7 +35,7 @@ a
 
 h1,h2,h3,h4
 {
-    font-weight: 400;
+    font-weight: bold;
 }
 
 h1
@@ -76,4 +76,64 @@ a:visited
     width:59vw;
     height:auto;
     aspect-ratio:16/9;
+}
+
+.container {
+    width: 90%;
+    margin: auto;
+    padding: 0rem;
+    display: flex;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    margin-top: 4rem;
+}
+
+.text {
+    outline: 1px rgb(231, 231, 231) solid;
+    height: 100%;
+    min-height: 22vw;
+    width: calc(50% - 4rem);
+    opacity: 80%;
+    border-radius: 1rem;
+    background-color: rgb(255, 255, 255);
+    padding: 1rem 2rem 1rem 1rem;
+    box-shadow: var(--box-shadow);
+}
+
+.text.desktop-left {
+    padding: 1rem 1rem 1rem 2rem;
+}
+
+.image {
+    width: 50%;
+    text-align: center;
+}
+
+img {
+    width: 80%;
+    object-fit: cover;
+    border-radius: .3rem;
+}
+
+.container.desktop-left {
+    flex-direction: row;
+}
+
+@media (max-aspect-ratio: 1/1) {
+    .container {
+        flex-direction: column;
+    }
+
+    .image {
+        width: 90%;
+        padding: 0;
+        margin: auto;
+    }
+
+    .text {
+        padding: 1rem;
+        height: 100%;
+        width: calc(100% - 2rem);
+    }
 }