feat: redesign UI with flat design, collapsible form, and enhanced ca…

src/app/boot/page.module.css

@@ -0,0 +1,33 @@
+/* Boot Page Styles */
+.message_container {
+    padding: 3rem;
+    max-width: 600px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.08);
+}
+
+.success_title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #7c3aed;
+}
+
+.error_title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #ef4444;
+}
+
+.message_text {
+    color: #6b7280;
+    margin-bottom: 1rem;
+}
+
+.message_text:last-child {
+    margin-bottom: 0;
+}
+

src/app/boot/page.tsx

@@ -1,6 +1,7 @@
 import { Config } from "../../Config";
 import { getResourceInfoWithAcl } from "@inrupt/solid-client";
 import { getLinkedAcrUrl } from "@inrupt/solid-client/acp/acp";
+import styles from "./page.module.css";
 
 export const dynamic = "force-dynamic";
 
@@ -18,19 +19,29 @@ export default async function () {
         await updateContainerAccessControl();
 
         return (
-            <>
-                <p>
+            <div className={styles.message_container}>
+                <h1 className={styles.success_title}>
+                    Bootstrap successful
+                </h1>
+                <p className={styles.message_text}>
                     Created manifest resource and modified container access
                     control.
                 </p>
                 <p>
                     Try editing the manifest resource on the{" "}
                     <a href="admin">admin page</a>
                 </p>
-            </>
+            </div>
         );
     } catch {
-        return "Could not create manifest resource / modify container access control.";
+        return (
+            <div className={styles.message_container}>
+                <h1 className={styles.error_title}>
+                    Bootstrap failed
+                </h1>
+                <p className={styles.message_text}>Could not create manifest resource / modify container access control.</p>
+            </div>
+        );
     }
 }
 

src/app/global.css

@@ -1,4 +1,65 @@
+/* Professional Global Styles - Solid Project Inspired */
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 2rem;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    line-height: 1.6;
+    color: #1f2937;
+    background: #f5f7fa;
+    min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #1a1a2e;
+        color: #e0e0e0;
+    }
+}
+
 img {
     max-width: 100px;
     max-height: 100px;
 }
+
+/* Accessibility: Focus indicators */
+a:focus-visible,
+button:focus-visible,
+input:focus-visible {
+    outline: 2px solid #7c3aed;
+    outline-offset: 2px;
+    border-radius: 4px;
+}
+
+/* Typography improvements */
+p {
+    margin: 0.75rem 0;
+    line-height: 1.7;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    line-height: 1.2;
+}
+
+a {
+    color: #2563eb;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+a:hover {
+    color: #1d4ed8;
+    text-decoration: underline;
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}

src/app/page.module.css

@@ -0,0 +1,35 @@
+/* Page Styles */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.page_title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 2.5rem;
+    color: #7c3aed;
+    letter-spacing: -0.02em;
+}
+
+.error_container {
+    padding: 3rem;
+    max-width: 600px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.08);
+}
+
+.error_title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #ef4444;
+}
+
+.error_text {
+    color: #6b7280;
+    margin-bottom: 1rem;
+}
+

src/app/page.tsx

@@ -1,5 +1,6 @@
 import { ListViewer } from "../components/ui/ListViewer";
 import { fetchList } from "../fetchList";
+import styles from "./page.module.css";
 
 export const dynamic = "force-dynamic";
 
@@ -9,16 +10,25 @@ export const dynamic = "force-dynamic";
  */
 export default async function () {
     try {
-        return <ListViewer data={await fetchList()} />;
+        return (
+            <div className={styles.container}>
+                <h1 className={styles.page_title}>
+                    List Items
+                </h1>
+                <ListViewer data={await fetchList()} />
+            </div>
+        );
     } catch {
         return (
-            <>
-                <p>Could not load list.</p>
-                <p>Manifest resource probably does not exist.</p>
+            <div className={styles.error_container}>
+                <h1 className={styles.error_title}>
+                    Could not load list
+                </h1>
+                <p className={styles.error_text}>Manifest resource probably does not exist.</p>
                 <p>
                     Did you run the <a href="boot">bootstrap page</a>?
                 </p>
-            </>
+            </div>
         );
     }
 }