From ea53a6526d9c10d7ea0267d34915a7533530a593 Mon Sep 17 00:00:00 2001
From: danisoloo <danisolo732@gmai.com>
Date: Sat, 17 Jan 2026 14:42:48 +0000
Subject: [PATCH] Revamp index.html to enhance content and structure, including
 detailed sections on README files and wireframes.

---
 index.html | 124 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 86 insertions(+), 38 deletions(-)
diff --git a/index.html b/index.html
index 80aa49666..92072a408 100644
--- a/index.html
+++ b/index.html
@@ -1,46 +1,94 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Coursework</title>
-    <style>
-      :root {
-        --paper: oklch(7 0 0);
-        --ink: color-mix(in oklab, var(--color) 5%, black);
-        --font: 100%/1.5 system-ui;
-        --space: clamp(6px, 6px + 2vw, 15px);
-        --line: 1px solid;
-      }
-      body {
-        background: var(--paper);
-        color: var(--ink);
-        font: var(--font);
-        max-width: 1280px;
-        margin: 0 auto;
-      }
-    </style>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>T-shirt Order Form</title>
+    <meta name="description" content="Accessible T-shirt order form" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
-    <header><h1>🧐 CYF Coursework Disposable Branch Previews</h1></header>
+    <header>
+      <h1>Product Pick</h1>
+      <p>Please fill in the form below to order your t-shirt.</p>
+    </header>
+
     <main>
-      <ol>
-        <li>
-          <h2><a href="/Wireframe">Project 1: Wireframe</a></h2>
-          <p>
-            Mentors:
-            <a href="Wireframe/readme.md">open the assignment in a tab</a>
-          </p>
-        </li>
-        <li>
-          <h2><a href="/Form-Controls">Project 2: Form Controls</a></h2>
-          <p>
-            Mentors:
-            <a href="Form-Controls/readme.md">open the assignment in a tab</a>
-          </p>
-        </li>
-      </ol>
+      <form aria-labelledby="order-form">
+        <h2 id="order-form">T-shirt Order Form</h2>
+
+        <!-- REQUIREMENT 1: Customer name -->
+        <div>
+          <label for="name">Full Name:</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            minlength="2"
+            autocomplete="name"
+            required
+            pattern="^(?!\s*$).+"
+            title="Name must be at least 2 characters and not just spaces."
+            style="min-height:48px; min-width:200px;"
+          />
+        </div>
+
+        <!-- REQUIREMENT 2: Customer email -->
+        <div>
+          <label for="email">Email Address:</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            autocomplete="email"
+            required
+            style="min-height:48px; min-width:200px;"
+          />
+        </div>
+
+        <!-- REQUIREMENT 3: Colour -->
+        <fieldset>
+          <legend>Choose your t-shirt colour:</legend>
+          <div>
+            <input type="radio" id="red" name="colour" value="red" required style="min-height:24px; min-width:24px;" />
+            <label for="red">Red</label>
+          </div>
+          <div>
+            <input type="radio" id="blue" name="colour" value="blue" style="min-height:24px; min-width:24px;" />
+            <label for="blue">Blue</label>
+          </div>
+          <div>
+            <input type="radio" id="black" name="colour" value="black" style="min-height:24px; min-width:24px;" />
+            <label for="black">Black</label>
+          </div>
+        </fieldset>
+
+        <!-- REQUIREMENT 4: Size -->
+        <fieldset>
+          <legend>Choose your t-shirt size:</legend>
+          <label for="size" class="visually-hidden">T-shirt size</label>
+          <select id="size" name="size" required style="min-height:48px; min-width:200px;">
+            <option value="" disabled selected>Select a size</option>
+            <option value="XS">XS</option>
+            <option value="S">S</option>
+            <option value="M">M</option>
+            <option value="L">L</option>
+            <option value="XL">XL</option>
+            <option value="XXL">XXL</option>
+          </select>
+        </fieldset>
+
+        <!-- Submit button -->
+        <div>
+          <button type="submit" aria-label="Submit your t-shirt order" style="min-height:48px; min-width:150px;">
+            Place Order
+          </button>
+        </div>
+      </form>
     </main>
-    <footer><a href="HOW_TO_REVIEW.md">HOW TO REVIEW MD</a></footer>
+
+    <footer>
+      <p>By Daniel Solomon</p>
+    </footer>
   </body>
-</html>
+</html>
\ No newline at end of file
