distinctioncoding · Anny523925 · Nov 18, 2025 · Gary-Distinctioncoding · Nov 25, 2025
diff --git a/W1/bg.png b/W1/bg.png
diff --git a/W1/index.html b/W1/index.html
@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Sign Up • Paint Quote System</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body class="bg-photo">
+  <main class="shell">
+    <section class="hero" aria-labelledby="welcome-title">
+      <h1 id="welcome-title" class="hero-title">Welcome to Paint Quote System</h1>
+      <p class="hero-desc">
+        Consequat adipisicing ea do labore irure adipisicing occaecat cupidatat
+        excepteur duis mo
+      </p>
+    </section>
+
+    <section class="card" aria-labelledby="signup-title">
+      <div class="card-inner">
+        <h2 id="signup-title" class="card-title">Sign Up</h2>
+        <p class="card-subtitle">Enter details to create your account</p>
+
+        <form id="signup-form" class="form" novalidate>
+          <div class="field">
+            <label for="name">Your name</label>
+            <input id="name" name="name" type="text" autocomplete="name" placeholder="Enter your name" required />
+            <small id="err-name" class="error" role="alert" aria-live="polite"></small>
+          </div>
+
+          <div class="field">
+            <label for="phone">Phone number</label>
+            <input id="phone" name="phone" type="tel" inputmode="tel" autocomplete="tel"
+                   placeholder="Enter your phone number" required />
+            <small id="err-phone" class="error" role="alert" aria-live="polite"></small>
+          </div>
+
+          <div class="field">
+            <label for="dulux">Dulux account</label>
+            <input id="dulux" name="dulux" type="text" placeholder="Enter your Dulux account" />
+            <small id="err-dulux" class="error" role="alert" aria-live="polite"></small>
+          </div>
+
+          <button class="btn btn-primary" type="submit">Sign up</button>
+
+          <p class="footnote">
+            Already have an account?
+            <a href="#" class="link">Sign in</a>
+          </p>
+        </form>
+      </div>
+    </section>
+  </main>
+
+    <script>
+  /* File: app.js (inlined for demo) */
+  const PHONE_RE = /^\+?\d[\d\s()-]{7,}$/;
+
+  const form = document.getElementById('signup-form');
+  const fields = {
+    name: {
+      el: document.getElementById('name'),
+      err: document.getElementById('err-name'),
+      validate: (v) => v.trim() ? null : 'Name is required.',
+    },
+    phone: {
+      el: document.getElementById('phone'),
+      err: document.getElementById('err-phone'),
+      validate: (v) => {
+        const t = v.trim();
+        if (!t) return 'Phone number is required.';
+        if (!PHONE_RE.test(t)) return 'Enter a valid phone number (e.g. +61 123 456 789).';
+        return null;
+      },
+    },
+    dulux: {
+      el: document.getElementById('dulux'),
+      err: document.getElementById('err-dulux'),
+      validate: () => null,
+    },
+  };
+
+  function setError(el, errEl, message){
+    const bad = Boolean(message);
+    el.classList.toggle('is-error', bad);
+    el.setAttribute('aria-invalid', bad ? 'true' : 'false');
+
+    if (bad) {
+      el.setAttribute('aria-describedby', errEl.id);
+      errEl.textContent = message; 
+      errEl.classList.add('is-visible');
+    } else {
+      el.removeAttribute('aria-describedby');
+      errEl.classList.remove('is-visible');
+      errEl.textContent = '';
+    }
+  }
+
+  function validateField(key){
+    const { el, err, validate } = fields[key];
+    const msg = validate(el.value);
+    setError(el, err, msg);
+    return !msg;
+  }
+
+  function validateAll(){
+    let firstInvalid = null;
+    const ok = Object.keys(fields).every((k) => {
+      const valid = validateField(k);
+      if (!valid && !firstInvalid) firstInvalid = fields[k].el;
+      return valid;
+    });
+    return { ok, firstInvalid };
+  }
+
+  Object.values(fields).forEach(({ el }) => {
+    el.addEventListener('blur', () => validateField(el.id));
+    el.addEventListener('input', () => {
+      if (el.classList.contains('is-error')) validateField(el.id);
+    });
+  });
+
+  form.addEventListener('submit', (e) => {
+    const { ok, firstInvalid } = validateAll();
+    if (!ok) {
+      e.preventDefault();
+      firstInvalid?.focus();
+    } else {
+      e.preventDefault();
+      alert('Form valid! (simulate submit)');
+    }
+  });
+  </script>
+</body>
+</html>
+
diff --git a/W1/styles.css b/W1/styles.css
@@ -0,0 +1,170 @@
+:root{
+  --bg: #f5f3ef;
+  --ink: #0f172a;
+  --muted: #64748b;
+  --brand: #0d6ea8;
+  --brand-weak: #e0f2ff;
+  --panel: #ffffff;
+  --border: #e5e7eb;
+  --danger: #dc2626;
+  --danger-weak: #fee2e2;
+  --radius: 16px;
+  --shadow: 0 14px 40px rgba(2, 8, 23, .15);
+}
+
+*,
+*::before,
+*::after{ box-sizing: border-box; }
+
+html, body{
+  height: 100%;
+  margin: 0;
+  color: var(--ink);
+  background: var(--bg);
+  font: 16px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
+        Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
+        "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.bg-photo{
+  background-image: url("bg.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.shell{
+  min-height: 100dvh;
+  display: grid;
+  grid-template-columns: 1.15fr 0.8fr;
+  align-items: center;
+  gap: 5px;
+  padding: 48px clamp(30px, 6vw, 64px);
+  backdrop-filter: saturate(1.05);
+}
+
+.hero{
+  max-width: 620px;
+  justify-self: start;
+}
+.hero-title{
+  font-weight: 600;
+  font-size: clamp(28px, 2.2vw, 42px);
+  letter-spacing: .2px;
+  position: relative;
+  margin: 0;
+  display: inline-block;
+  color: #173b47;
+}
+.hero-title::after {
+  content: "";
+  display: block;
+  height: 1.8px;
+  margin: 15px 0 15px;
+  width: 100%;
+  background: currentColor;
+  opacity: .35;
+  border-radius: 2px;
+}
+.hero-desc{
+  margin: 0;
+  color: #173b47;
+  max-width: 46ch;
+}
+
+.card{
+  justify-self: end;
+  width: min(560px, 100%);
+  background: var(--panel);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  border: 1px solid rgba(15,23,42,.05);
+  margin-right: 6vw;
+}
+.card-inner{
+  padding: 36px clamp(24px, 4vw, 44px);
+}
+.card-title{
+  margin: 0 0 6px;
+  text-align: center;
+  font-size: clamp(22px, 2.2vw, 30px);
+  font-weight: 600;
+}
+.card-subtitle{
+  margin: 0 0 24px;
+  text-align: center;
+  color: var(--muted);
+}
+
+.form{ display: grid; gap: 16px; }
+.field{ display: grid; gap: 8px; }
+.field label{ font-size: 14px; color: #374151; }
+
+.field input{
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  outline: none;
+  background: #fff;
+  font-size: 15px;
+  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
+}
+.field input::placeholder{ color: #9aa4b2; }
+.field input:focus-visible{
+  border-color: var(--brand);
+  box-shadow: 0 0 0 3px var(--brand-weak);
+}
+
+.error{
+  display: none;
+  margin-top: 6px;
+  font-size: 13px;
+  color: var(--danger);
+}
+.error.is-visible{ display: block; }
+
+.field input.is-error{
+  border-color: var(--danger);
+  box-shadow: 0 0 0 3px var(--danger-weak);
+}
+
+.btn{
+  appearance: none;
+  border: 0;
+  border-radius: 10px;
+  padding: 14px 18px;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  margin-top: 2vh;
+}
+.btn-primary{
+  background: var(--brand);
+  color: #fff;
+  box-shadow: 0 10px 22px rgba(13,110,168,.25);
+  transition: filter .15s ease, transform .02s ease, box-shadow .15s ease;
+}
+.btn-primary:hover{ filter: brightness(1.03); }
+.btn-primary:active{ transform: translateY(1px); }
+
+.footnote{
+  margin: 12px 0 0;
+  text-align: center;
+  color: var(--muted);
+  font-size: 14px;
+}
+.link{ color: var(--brand); text-decoration: none; }
+.link:hover{ text-decoration: underline; }
+
+/* 响应式 */
+@media (max-width: 900px){
+  .shell{
+    grid-template-columns: 1fr;
+    gap: 24px;
+    padding: 28px 18px 40px;
+    backdrop-filter: none;
+  }
+  .hero{ order: 1; max-width: 680px; justify-self: center; }
+  .card{ order: 2; justify-self: center; }
+}