diff --git a/block-01/week-02-html_and_the_dom/demo/avatar.svg b/block-01/week-02-html_and_the_dom/demo/avatar.svg deleted file mode 100644 index 5ab5153..0000000 --- a/block-01/week-02-html_and_the_dom/demo/avatar.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/block-01/week-02-html_and_the_dom/demo/bylaw-182.html b/block-01/week-02-html_and_the_dom/demo/bylaw-182.html deleted file mode 100644 index 937f464..0000000 --- a/block-01/week-02-html_and_the_dom/demo/bylaw-182.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - ICC By-law 182.32 - - -

ICC By-law 182.32

-

- All personnel must be cleared for deep-space operations before being - assigned to any vessel or station beyond the Sol system. -

- - diff --git a/block-01/week-02-html_and_the_dom/demo/form.html b/block-01/week-02-html_and_the_dom/demo/form.html deleted file mode 100644 index 602ab20..0000000 --- a/block-01/week-02-html_and_the_dom/demo/form.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - - - Enlistment - - - -
-

Personnel Enlistment

-
-
- Biological Identity - -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - - - - - - - - - -
- -
- - -
-
- -
- Operational Preferences - -
- - -
- -
- - -
- -
- - -
- -
- Preferred dispatch channel - - - -
- -
- Mission specialisations - - - - - -
- -
- - 3 - -
-
- -
- Access Credentials - -
- - -
- -
- - -
- -
- - - 32% - -
-
- -
- - -
- -
- How is my data processed? -

- All personnel data is logged to MU-TH-UR 6000 and retained for the - duration of active service. Records may be accessed by - W-Y command under - standing Order 937. Crew are advised: all other priorities are - rescinded. -

-
- -
- - -
-
-
- - diff --git a/block-01/week-02-html_and_the_dom/demo/index.html b/block-01/week-02-html_and_the_dom/demo/index.html index 1e3ef22..75edfba 100644 --- a/block-01/week-02-html_and_the_dom/demo/index.html +++ b/block-01/week-02-html_and_the_dom/demo/index.html @@ -4,440 +4,25 @@ - Eternum Sanguinius | MU-TH-UR 6000 + Login Form - - -
-
-

MU-TH-UR 6000

-
- Weyland-Yutani Corporation — Deep Space Relay Node - USCSS-NOSTROMO-180924609
- comms@weyland-yutani.com -
-

- Uplink established: - -

-
- -
- - -
-

Incoming Transmission

-
- -
- Encrypted burst from LV-426 // ACHERON — origin - timestamp unknown. Signal classified non-natural by MU-TH-UR 6000. -
-
- - -
- -
- - -
-

Sector Chart — Zeta II Reticuli

-
- Zeta II Reticuli sector map showing LV-426 and surrounding bodies - - - Derelict vessel - - - LV-426 Acheron - - - LV-223 - - - Zeta II Reticuli A - - - Zeta II Reticuli B - - - Uncharted sector - -
- Interactive sector chart. Select a body for operational data. - Coordinates expressed in - GSRF. -
-
-
- -
- - -
-

Terminal Output

-

- To query MU-TH-UR directly, press - Ctrl + Alt + M. Last command issued: -

- 
MU-TH-UR 6000 // QUERY INTERFACE v4.1
-> STATUS ALL
-LIFE SUPPORT......OK
-HYPERSLEEP........OK
-REACTOR CORE......WARN — output at 29%
-SPECIMEN HOLD.....CLASSIFIED
-> DECRYPT ORDER-937
-ACCESS DENIED — SCIENCE OFFICER EYES ONLY
- -

- Error code returned: - ERR_MODULE_CLEARANCE_INSUFFICIENT. - Replace MODULE and CLEARANCE with your assigned - values before resubmitting. -

-
- -
- - -
-

Crew Manifest

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- USCSS Nostromo — Active Personnel - (authenticated - ) -
CallsignRoleClearanceVitalsStatus
RipleyWarrant OfficerLVL-4 - - 97% - - ACTIVE
DallasCaptainLVL-5 - - 94% - - ACTIVE
- AshHDS-0X1 - Science OfficerLVL-6 - - 100% - - SYNTHETIC
KaneExecutive OfficerLVL-4 - - 14% - - CRITICAL
- Manifest sealed under MU-TH-UR authority — unauthorised - amendments constitute breach of - ICC - statute 12.7-ALPHA. -
-
- -
- - -
-

Mission Debrief — Completion

-
-
Section A — Incident report
-
- 100% -
-
Section B — Specimen data
-
- 30% -
-
Section C — Crew psychological assessment
-
- Not started -
-
- -

- Complete all sections before - or your service contract - will be suspended. -

-
- -
- - -
-

- ICC - Regulation Reference -

-

- Regulation ISCC By-law 182.32 requires all commercial vessels to - investigate signals of potential intelligent origin. Full text - rendered below via secure relay: -

- -
- -
- - -
-

Emergency Protocols

-

- Initiate shipwide alert or open the emergency channel below. All - actions are logged to MU-TH-UR. -

- - - -

Confirm Shipwide Alert

-

- This will broadcast a General Alert to all crew - stations and log the event under your operative - ID. This action - cannot be undone. -

- -
  • - -
    • -
  • - -
    • -     -     -
    - -
    - - -
    -

    Reactor Output — Live Readout

    - - Canvas readout unavailable. Reactor at - 29% output. - - -
    - -
    - - - -
    - - -
    +
    +

    Login Form

    + + + + +

    Don't have an account? Sign up

    +
    diff --git a/block-01/week-02-html_and_the_dom/demo/profile.html b/block-01/week-02-html_and_the_dom/demo/profile.html deleted file mode 100644 index 965f9a7..0000000 --- a/block-01/week-02-html_and_the_dom/demo/profile.html +++ /dev/null @@ -1,222 +0,0 @@ - - - - - - - Eternum Sanguinius | Profile - - - - -
    -

    Profile

    - -
    -
    - Profile picture of Eternum Sanguinius -
    Unit ID: ES-7741
    -
    - -
    -

    Eternum Sanguinius

    -

    - Email: - eternum@sanguinius.com -

    -

    - Status: Active — - Cleared for deep-space operations -

    -

    Designation: ES-7741-ALPHA

    -

    - Last sync: - -

    -
    -
    - -
    - -
    -

    Clearance & Ratings

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SystemAccess LevelIntegrityStatus
    MU-TH-UR 6000ADMIN - - 91% - - NOMINAL
    Atmospheric ProcessorWRITE - - 58% - - DEGRADED
    Hypersleep ChamberREAD - - 22% - - CRITICAL
    Last audit: Stardate 2183.326
    -
    - -
    - -
    -

    Mission Log

    -
      -
    1. -
      -
      -

      LV-426 Survey — Sector 7G

      -

      -
      -

      - Anomalous biosignature detected at grid reference - 7G-NW-04. Sample extraction aborted per - W-Y directive - Order 937. -

      -
      -
      - Classified addendum -

      - Secondary objective: retrieve specimen. Crew expendable. All - other priorities rescinded. -

      -
      -
      -
      -
      2. -
    2. -
      -
      -

      - Derelict Vessel Boarding — Ref. JUGGERNAUT-01 -

      -

      -
      -

      - Hull breach at FR-9. Structural integrity - within acceptable parameters - below minimum threshold. Recommend immediate - evacuation. -

      -
      -
      3. -
    -
    - -
    - -
    -

    Biometric Snapshot

    -
    -
    Heart rate
    -
    62 bpm
    - -
    Core temperature
    -
    36.8 °C
    - -
    O2 saturation
    -
    98%
    - -
    Neural load
    -
    - - 74% - -
    - -
    Radiation exposure
    -
    0.4 mSv [1]
    -
    - -

    - - [1] Cumulative dose since last decontamination cycle. - Acceptable limit: 20 mSv/year per - ICRP. - -

    -
    - -
    - - -
    - - diff --git a/block-01/week-02-html_and_the_dom/demo/register.html b/block-01/week-02-html_and_the_dom/demo/register.html new file mode 100644 index 0000000..bf8a0bb --- /dev/null +++ b/block-01/week-02-html_and_the_dom/demo/register.html @@ -0,0 +1,36 @@ + + + + + + + Register Form + + +
    +

    Register Form

    + + + + + + +

    Already have an account? Sign in

    +
    + + diff --git a/block-01/week-02-html_and_the_dom/demo/sector-map.svg b/block-01/week-02-html_and_the_dom/demo/sector-map.svg deleted file mode 100644 index 7220a51..0000000 --- a/block-01/week-02-html_and_the_dom/demo/sector-map.svg +++ /dev/null @@ -1,151 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ζ² RET-A - - - - - - ζ² RET-B - - - - - - - - - - - - LV-223 - [RESTRICTED] - - - - - - - - - - - - - - LV-426 - ACHERON - - - - - - - - - - - - DERELICT - - - - DEEP SPACE - [UNCHARTED] - - - - - - WEYLAND-YUTANI // NAVCOM // ZETA II RETICULI - - - REF: GSRF-ZR2 // SCALE 1:4.2×10¹² km - SYS:NOMINAL - - \ No newline at end of file diff --git a/block-01/week-02-html_and_the_dom/demo/style.css b/block-01/week-02-html_and_the_dom/demo/style.css index 8632a99..a9caafd 100644 --- a/block-01/week-02-html_and_the_dom/demo/style.css +++ b/block-01/week-02-html_and_the_dom/demo/style.css @@ -1,758 +1,76 @@ -:root { - --font-mono: "Share Tech Mono", "Courier New", monospace; - --color-primary: #5abf00; - --color-bright: #a8ff40; - --color-brighter: #d4ff80; - --color-brightest: #c4ff00; - --color-red: #ff4040; - --color-dark: #0a0a00; - --color-border: #4a7a00; - --color-border-dark: #2a4a00; - --color-border-bright: #7dff40; - --color-border-medium: #8abf00; - --shadow-text: 0 0 5px rgba(90, 191, 0, 0.3); - --shadow-text-bright: 0 0 6px rgba(140, 255, 60, 0.4); - --shadow-text-h1: - 0 0 10px rgba(140, 255, 60, 0.55), 0 0 22px rgba(140, 255, 60, 0.2); - --shadow-glow-light: 0 0 6px rgba(140, 255, 60, 0.6); - --shadow-glow-optimum: 0 0 6px rgba(140, 255, 60, 0.5); - --shadow-glow-suboptimum: 0 0 6px rgba(196, 255, 0, 0.5); - --shadow-glow-bad: 0 0 6px rgba(255, 64, 64, 0.5); - --shadow-input-text: 0 0 4px rgba(120, 255, 60, 0.3); - --shadow-button-inset-rest: - inset 0 0 8px rgba(100, 200, 0, 0.05), 0 0 6px rgba(100, 200, 0, 0.1); - --shadow-button-inset-hover: - inset 0 0 12px rgba(100, 200, 0, 0.1), 0 0 10px rgba(100, 200, 0, 0.2); - --color-placeholder: #315b00; - --color-bg-button-hover: rgba(100, 200, 0, 0.08); -} - -* { - font-family: var(--font-mono); - color: var(--color-primary); - text-shadow: var(--shadow-text); - margin: 0; - padding: 0; - box-sizing: border-box; - line-height: 1.85; -} - -/* scanlines */ -body::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 9999; - background: repeating-linear-gradient( - 0deg, - transparent 0px, - transparent 2px, - rgba(0, 0, 0, 0.18) 2px, - rgba(0, 0, 0, 0.18) 4px - ); - - animation: scanline 2s linear infinite; -} - -/* vignette */ -body::after { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 9998; - background: radial-gradient( - ellipse at center, - transparent 55%, - rgba(0, 0, 0, 0.65) 100% - ); -} - -nav { - border-bottom: 1px solid #2a4a00; - padding: 0.5rem; - margin-bottom: 1rem; - width: 100%; - display: flex; - justify-content: center; - position: fixed; - top: 0; - left: 0; - background-color: var(--color-dark); - z-index: 1000; -} - -nav ul { - list-style: none; - display: flex; - gap: 1.5rem; -} - -nav a { - text-transform: uppercase; - font-size: 0.8rem; - border-bottom: none; -} - -nav a:hover { - color: var(--color-brighter); - text-shadow: var(--shadow-text-bright); - text-decoration: underline; -} - -h1 { - font: 2rem; - color: var(--color-bright); - text-shadow: var(--shadow-text-h1); - animation: flicker 8s infinite; -} - body { + background-color: #111; + color: #eee; + min-height: 100vh; display: flex; flex-direction: column; - justify-content: center; align-items: center; - background-color: var(--color-dark); - padding: 2rem 0; - margin-top: 3rem; + justify-content: center; } form { display: flex; flex-direction: column; - gap: 0.5rem; + align-items: center; + gap: 1rem; + width: 400px; + background-color: #222; + padding: 1rem 2rem; + border-radius: 1rem; + box-shadow: 0 0 1rem #000; } -fieldset { - padding: 0.5rem; - padding-top: 0; +label { display: flex; flex-direction: column; - gap: 0.5rem; - border: 1px solid var(--color-border); + gap: 0.25rem; + width: 100%; + font-weight: 600; + + &:has(input[type="checkbox"]) { + flex-direction: row; + font-weight: unset; + font-size: 0.8rem; + align-items: center; + cursor: pointer; + accent-color: #444; + } } -legend { - font: 0.6rem; - text-transform: uppercase; - color: var(--color-bright); - text-shadow: var(--shadow-text-bright); -} - -a { - border-bottom: 1px solid var(--color-border); - text-decoration: none; - color: var(--color-bright); - text-shadow: var(--shadow-text-bright); -} - -a:hover { - border-color: var(--color-border-medium); - color: var(--color-brighter); +input { + padding: 0.5rem; + border-radius: 0.5rem; + border: none; + outline: none; + font-size: 1rem; } button { - background-color: transparent; - border: 1px solid var(--color-border); - padding: 1.25rem 0.5rem; - font: 0.6rem; - text-transform: uppercase; - cursor: pointer; - font-family: var(--font-mono); - color: var(--color-bright); - text-shadow: var(--shadow-text-bright); - box-shadow: var(--shadow-button-inset-rest); -} - -button::before { - content: "▶\00a0"; - font: 0.7rem; - color: var(--color-border); -} - -button:hover { - box-shadow: var(--shadow-button-inset-hover); - background: var(--color-bg-button-hover); - border-color: var(--color-border-bright); -} - -button[type="reset"]::before { - content: "↺\00a0"; -} - -.actions { - display: flex; - gap: 0.5rem; -} - -.actions button { - flex: 1; -} - -input, -textarea { - background-color: transparent; + width: 100%; + padding: 0.5rem 1rem; + border-radius: 0.5rem; border: none; - border-bottom: 1px solid var(--color-border-dark); - padding: 0.24rem 0; - font: 0.6rem; outline: none; - font-family: var(--font-mono); - color: var(--color-border-bright); - caret-color: var(--color-bright); - text-shadow: var(--shadow-input-text); - width: 100%; -} - -input:focus, -textarea:focus, -select:focus { - border-color: var(--color-border-bright); -} - -input::placeholder, -textarea::placeholder { - color: var(--color-placeholder); -} - -textarea { - border: 1px solid var(--color-border-dark); - padding: 0.5rem; - resize: vertical; -} - -select { - border: 1px solid var(--color-border); - padding: 0.25rem; - background-color: transparent; -} - -select option { - background-color: var(--color-dark); -} - -/* checkboxes & radios */ -input[type="checkbox"], -input[type="radio"] { - background-color: transparent; - border: 1px solid var(--color-border-bright); - accent-color: var(--color-bright); - width: auto; + font-size: 1rem; + background-color: #444; + color: #eee; cursor: pointer; + + &:hover { + background-color: #555; + } } -.field label:has(input[type="radio"]), -.field label:has(input[type="checkbox"]) { - display: flex; - align-items: center; - gap: 0.4rem; +p { font-size: 0.8rem; + color: #aaa; } -input[type="number"]::-webkit-outer-spin-button, -input[type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -input[type="number"] { - -moz-appearance: textfield; -} - -/* range slider */ -input[type="range"] { - -webkit-appearance: none; - appearance: none; - height: 2px; - background: var(--color-border-dark); - border: none; - padding: 0; -} - -input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - width: 10px; - height: 10px; - background: var(--color-bright); - box-shadow: var(--shadow-glow-light); - cursor: pointer; - border-radius: 0; -} - -input[type="range"]::-moz-range-thumb { - width: 10px; - height: 10px; - background: var(--color-bright); - box-shadow: var(--shadow-glow-light); - cursor: pointer; - border: none; - border-radius: 0; -} - -/* color swatch */ -input[type="color"] { - border: 1px solid var(--color-border); - padding: 0.15rem; - height: 1.6rem; - width: 3rem; - cursor: pointer; -} - -/* file input */ -input[type="file"] { - border: 1px dashed var(--color-border); - padding: 0.4rem; - font-size: 0.7rem; -} - -input[type="file"]::file-selector-button { - background-color: transparent; - border: 1px solid var(--color-border); - color: var(--color-bright); - font-family: var(--font-mono); - text-transform: uppercase; - font-size: 0.7rem; - padding: 0.3rem 0.5rem; - margin-right: 0.5rem; - cursor: pointer; -} - -input[type="file"]::file-selector-button:hover { - background: var(--color-bg-button-hover); - border-color: var(--color-border-bright); -} - -/* datalist-backed input keeps default text styling, no change needed */ - -meter { - -webkit-appearance: none; - appearance: none; - width: 100%; - height: 0.6rem; - border: 1px solid var(--color-border); - background: transparent; -} - -meter::-webkit-meter-bar { - background: transparent; - border: none; -} - -meter::-webkit-meter-optimum-value { - background: var(--color-bright); - box-shadow: var(--shadow-glow-optimum); -} - -meter::-webkit-meter-suboptimum-value { - background: var(--color-brightest); - box-shadow: var(--shadow-glow-suboptimum); -} - -meter::-webkit-meter-even-less-good-value { - background: var(--color-red); - box-shadow: var(--shadow-glow-bad); -} - -/* Firefox: color applied via pseudo-class on the meter itself */ -meter:-moz-meter-optimum::-moz-meter-bar { - background: var(--color-bright); - box-shadow: var(--shadow-glow-optimum); -} - -meter:-moz-meter-sub-optimum::-moz-meter-bar { - background: var(--color-brightest); - box-shadow: var(--shadow-glow-suboptimum); -} - -meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { - background: var(--color-red); - box-shadow: var(--shadow-glow-bad); -} - -/* output element */ -output { - font-size: 0.6rem; - color: var(--color-bright); - text-shadow: var(--shadow-text-bright); -} - -/* details/summary */ -details { - border: 1px solid var(--color-border-dark); - padding: 0.4rem 0.5rem; - font-size: 0.6rem; -} - -summary { - cursor: pointer; - color: var(--color-bright); - text-transform: uppercase; - text-shadow: var(--shadow-text-bright); -} - -summary:hover { - color: var(--color-brighter); -} - -details p { - margin-top: 0.5rem; - font-size: 0.6rem; - line-height: 1.6; -} - -.container { - min-width: 400px; -} - -.field { - display: flex; - flex-direction: column; - gap: 0.15rem; -} - -/* ── Profile header ─────────────────────────────────────── */ - -.profile { - display: flex; - align-items: flex-start; - gap: 1.5rem; - margin-bottom: 1rem; -} - -figure { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.25rem; - flex-shrink: 0; -} - -figcaption { - font-size: 0.55rem; - text-transform: uppercase; - color: var(--color-border); - text-shadow: none; -} - -img { - border: 1px solid var(--color-border); - padding: 0.25rem; - box-shadow: - 0 0 8px rgba(90, 191, 0, 0.2), - 0 0 20px rgba(90, 191, 0, 0.07); - display: block; -} - -.profile-info { - display: flex; - flex-direction: column; - gap: 0.1rem; -} - -.profile-info h2 { - color: var(--color-bright); - text-shadow: var(--shadow-text-bright); - font-size: 1.1rem; - margin-bottom: 0.25rem; -} - -/* ── Shared section headings ────────────────────────────── */ - -section > h2, -aside > h2 { - color: var(--color-bright); - text-shadow: var(--shadow-text-bright); - text-transform: uppercase; - font-size: 0.9rem; - margin-bottom: 0.5rem; - letter-spacing: 0.1em; -} - -/* ── HR divider ─────────────────────────────────────────── */ - -hr { - border: none; - border-top: 1px solid var(--color-border-dark); - margin: 1rem 0; -} - -/* ── Table ──────────────────────────────────────────────── */ - -table { - width: 100%; - border-collapse: collapse; - font-size: 0.7rem; -} - -th, -td { - border: 1px solid var(--color-border-dark); - padding: 0.3rem 0.5rem; - text-align: left; -} - -thead th { - color: var(--color-bright); - text-shadow: var(--shadow-text-bright); - text-transform: uppercase; - letter-spacing: 0.08em; - border-color: var(--color-border); -} - -tfoot td { - color: var(--color-border); - text-shadow: none; - font-size: 0.7rem; - border-color: var(--color-border-dark); -} - -tbody tr:hover { - background: rgba(90, 191, 0, 0.04); -} - -/* ── Badges ─────────────────────────────────────────────── */ - -.badge { - font-size: 0.6rem; - text-transform: uppercase; - letter-spacing: 0.1em; - padding: 0.1rem 0.35rem; - border: 1px solid; -} - -.badge--ok { - color: var(--color-bright); - border-color: var(--color-border); - text-shadow: var(--shadow-glow-optimum); -} - -.badge--warn { - color: var(--color-brightest); - border-color: #6a7a00; - text-shadow: var(--shadow-glow-suboptimum); -} - -.badge--crit { - color: var(--color-red); - border-color: #7a2000; - text-shadow: var(--shadow-glow-bad); - animation: flicker 3s infinite; -} - -/* ── Mission log ────────────────────────────────────────── */ - -ol { - list-style: none; - display: flex; - flex-direction: column; - gap: 0.75rem; - padding: 0; -} - -article { - border: 1px solid var(--color-border-dark); - padding: 0.5rem; -} - -article header { - display: flex; - justify-content: space-between; - align-items: baseline; - border-bottom: 1px solid var(--color-border-dark); - margin-bottom: 0.4rem; - padding-bottom: 0.2rem; -} - -article header h3 { - font-size: 0.7rem; - color: var(--color-bright); - text-shadow: var(--shadow-text-bright); - text-transform: uppercase; -} - -article header p { - font-size: 0.6rem; - color: var(--color-border); - text-shadow: none; -} - -article > p { - font-size: 0.7rem; - line-height: 1.6; -} - -article footer { - margin-top: 0.5rem; -} - -mark { - background: rgba(168, 255, 64, 0.15); - color: var(--color-bright); - text-shadow: var(--shadow-glow-optimum); - padding: 0 0.2rem; -} - -del { - color: var(--color-border); - text-shadow: none; - text-decoration-color: var(--color-border); -} - -ins { - color: var(--color-red); - text-shadow: var(--shadow-glow-bad); +a { + color: #eee; text-decoration: none; -} -ins::before { - content: "→ "; - opacity: 0.6; -} - -/* ── Definition list ────────────────────────────────────── */ - -dl { - display: grid; - grid-template-columns: max-content 1fr; - gap: 0.15rem 1rem; - font-size: 0.7rem; -} - -dt { - color: var(--color-border-medium); - text-shadow: none; - text-transform: uppercase; - font-size: 0.7rem; - letter-spacing: 0.05em; - align-self: center; -} - -dd { - color: var(--color-primary); -} - -dd meter { - margin-top: 0.3rem; -} - -/* ── Aside / blockquote ─────────────────────────────────── */ - -aside { - border: 1px solid var(--color-border); - padding: 0.5rem; - box-shadow: - inset 0 0 12px rgba(90, 191, 0, 0.04), - 0 0 8px rgba(90, 191, 0, 0.08); -} - -blockquote { - border-left: 2px solid var(--color-border); - padding-left: 0.75rem; -} - -blockquote p { - font-size: 0.7rem; - line-height: 1.6; -} - -blockquote footer { - margin-top: 0.35rem; - font-size: 0.7rem; - color: var(--color-border); - text-shadow: none; - text-transform: uppercase; - letter-spacing: 0.08em; -} - -/* ── Inline semantics ───────────────────────────────────── */ - -strong { - color: var(--color-bright); - text-shadow: var(--shadow-text-bright); -} - -em { - color: var(--color-primary); - font-style: normal; - opacity: 0.75; -} - -small { - font-size: 0.7rem; - color: var(--color-border); - text-shadow: none; - display: block; - margin-top: 0.5rem; - line-height: 1.5; -} - -abbr { - text-decoration: underline dotted var(--color-border); - cursor: help; -} - -code { - color: var(--color-brightest); - text-shadow: var(--shadow-glow-suboptimum); - font-size: 0.7rem; -} - -time { - color: var(--color-border-medium); - text-shadow: none; - font-size: 0.7rem; -} - -sup, -sub { - font-size: 0.7rem; - color: var(--color-border-medium); - text-shadow: none; -} - -/* ── Section spacing ────────────────────────────────────── */ - -section, -aside { - margin-bottom: 0.25rem; -} - -@keyframes flicker { - 0%, - 95%, - 100% { - opacity: 1; - } - 96% { - opacity: 0.85; - } - 97% { - opacity: 1; - } - 98% { - opacity: 0.9; - } - 99% { - opacity: 1; - } -} - -@keyframes scanline { - from { - background-position: 0 0; - } - to { - background-position: 0 -10px; - } -} - -@keyframes blink { - 0%, - 100% { - opacity: 1; - } - 50% { - opacity: 0; + &:hover { + text-decoration: underline; } } diff --git a/block-01/week-02-html_and_the_dom/demo/style.css.disabled b/block-01/week-02-html_and_the_dom/demo/style.css.disabled new file mode 100644 index 0000000..8632a99 --- /dev/null +++ b/block-01/week-02-html_and_the_dom/demo/style.css.disabled @@ -0,0 +1,758 @@ +:root { + --font-mono: "Share Tech Mono", "Courier New", monospace; + --color-primary: #5abf00; + --color-bright: #a8ff40; + --color-brighter: #d4ff80; + --color-brightest: #c4ff00; + --color-red: #ff4040; + --color-dark: #0a0a00; + --color-border: #4a7a00; + --color-border-dark: #2a4a00; + --color-border-bright: #7dff40; + --color-border-medium: #8abf00; + --shadow-text: 0 0 5px rgba(90, 191, 0, 0.3); + --shadow-text-bright: 0 0 6px rgba(140, 255, 60, 0.4); + --shadow-text-h1: + 0 0 10px rgba(140, 255, 60, 0.55), 0 0 22px rgba(140, 255, 60, 0.2); + --shadow-glow-light: 0 0 6px rgba(140, 255, 60, 0.6); + --shadow-glow-optimum: 0 0 6px rgba(140, 255, 60, 0.5); + --shadow-glow-suboptimum: 0 0 6px rgba(196, 255, 0, 0.5); + --shadow-glow-bad: 0 0 6px rgba(255, 64, 64, 0.5); + --shadow-input-text: 0 0 4px rgba(120, 255, 60, 0.3); + --shadow-button-inset-rest: + inset 0 0 8px rgba(100, 200, 0, 0.05), 0 0 6px rgba(100, 200, 0, 0.1); + --shadow-button-inset-hover: + inset 0 0 12px rgba(100, 200, 0, 0.1), 0 0 10px rgba(100, 200, 0, 0.2); + --color-placeholder: #315b00; + --color-bg-button-hover: rgba(100, 200, 0, 0.08); +} + +* { + font-family: var(--font-mono); + color: var(--color-primary); + text-shadow: var(--shadow-text); + margin: 0; + padding: 0; + box-sizing: border-box; + line-height: 1.85; +} + +/* scanlines */ +body::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: 9999; + background: repeating-linear-gradient( + 0deg, + transparent 0px, + transparent 2px, + rgba(0, 0, 0, 0.18) 2px, + rgba(0, 0, 0, 0.18) 4px + ); + + animation: scanline 2s linear infinite; +} + +/* vignette */ +body::after { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: 9998; + background: radial-gradient( + ellipse at center, + transparent 55%, + rgba(0, 0, 0, 0.65) 100% + ); +} + +nav { + border-bottom: 1px solid #2a4a00; + padding: 0.5rem; + margin-bottom: 1rem; + width: 100%; + display: flex; + justify-content: center; + position: fixed; + top: 0; + left: 0; + background-color: var(--color-dark); + z-index: 1000; +} + +nav ul { + list-style: none; + display: flex; + gap: 1.5rem; +} + +nav a { + text-transform: uppercase; + font-size: 0.8rem; + border-bottom: none; +} + +nav a:hover { + color: var(--color-brighter); + text-shadow: var(--shadow-text-bright); + text-decoration: underline; +} + +h1 { + font: 2rem; + color: var(--color-bright); + text-shadow: var(--shadow-text-h1); + animation: flicker 8s infinite; +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: var(--color-dark); + padding: 2rem 0; + margin-top: 3rem; +} + +form { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +fieldset { + padding: 0.5rem; + padding-top: 0; + display: flex; + flex-direction: column; + gap: 0.5rem; + border: 1px solid var(--color-border); +} + +legend { + font: 0.6rem; + text-transform: uppercase; + color: var(--color-bright); + text-shadow: var(--shadow-text-bright); +} + +a { + border-bottom: 1px solid var(--color-border); + text-decoration: none; + color: var(--color-bright); + text-shadow: var(--shadow-text-bright); +} + +a:hover { + border-color: var(--color-border-medium); + color: var(--color-brighter); +} + +button { + background-color: transparent; + border: 1px solid var(--color-border); + padding: 1.25rem 0.5rem; + font: 0.6rem; + text-transform: uppercase; + cursor: pointer; + font-family: var(--font-mono); + color: var(--color-bright); + text-shadow: var(--shadow-text-bright); + box-shadow: var(--shadow-button-inset-rest); +} + +button::before { + content: "▶\00a0"; + font: 0.7rem; + color: var(--color-border); +} + +button:hover { + box-shadow: var(--shadow-button-inset-hover); + background: var(--color-bg-button-hover); + border-color: var(--color-border-bright); +} + +button[type="reset"]::before { + content: "↺\00a0"; +} + +.actions { + display: flex; + gap: 0.5rem; +} + +.actions button { + flex: 1; +} + +input, +textarea { + background-color: transparent; + border: none; + border-bottom: 1px solid var(--color-border-dark); + padding: 0.24rem 0; + font: 0.6rem; + outline: none; + font-family: var(--font-mono); + color: var(--color-border-bright); + caret-color: var(--color-bright); + text-shadow: var(--shadow-input-text); + width: 100%; +} + +input:focus, +textarea:focus, +select:focus { + border-color: var(--color-border-bright); +} + +input::placeholder, +textarea::placeholder { + color: var(--color-placeholder); +} + +textarea { + border: 1px solid var(--color-border-dark); + padding: 0.5rem; + resize: vertical; +} + +select { + border: 1px solid var(--color-border); + padding: 0.25rem; + background-color: transparent; +} + +select option { + background-color: var(--color-dark); +} + +/* checkboxes & radios */ +input[type="checkbox"], +input[type="radio"] { + background-color: transparent; + border: 1px solid var(--color-border-bright); + accent-color: var(--color-bright); + width: auto; + cursor: pointer; +} + +.field label:has(input[type="radio"]), +.field label:has(input[type="checkbox"]) { + display: flex; + align-items: center; + gap: 0.4rem; + font-size: 0.8rem; +} + +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type="number"] { + -moz-appearance: textfield; +} + +/* range slider */ +input[type="range"] { + -webkit-appearance: none; + appearance: none; + height: 2px; + background: var(--color-border-dark); + border: none; + padding: 0; +} + +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 10px; + height: 10px; + background: var(--color-bright); + box-shadow: var(--shadow-glow-light); + cursor: pointer; + border-radius: 0; +} + +input[type="range"]::-moz-range-thumb { + width: 10px; + height: 10px; + background: var(--color-bright); + box-shadow: var(--shadow-glow-light); + cursor: pointer; + border: none; + border-radius: 0; +} + +/* color swatch */ +input[type="color"] { + border: 1px solid var(--color-border); + padding: 0.15rem; + height: 1.6rem; + width: 3rem; + cursor: pointer; +} + +/* file input */ +input[type="file"] { + border: 1px dashed var(--color-border); + padding: 0.4rem; + font-size: 0.7rem; +} + +input[type="file"]::file-selector-button { + background-color: transparent; + border: 1px solid var(--color-border); + color: var(--color-bright); + font-family: var(--font-mono); + text-transform: uppercase; + font-size: 0.7rem; + padding: 0.3rem 0.5rem; + margin-right: 0.5rem; + cursor: pointer; +} + +input[type="file"]::file-selector-button:hover { + background: var(--color-bg-button-hover); + border-color: var(--color-border-bright); +} + +/* datalist-backed input keeps default text styling, no change needed */ + +meter { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 0.6rem; + border: 1px solid var(--color-border); + background: transparent; +} + +meter::-webkit-meter-bar { + background: transparent; + border: none; +} + +meter::-webkit-meter-optimum-value { + background: var(--color-bright); + box-shadow: var(--shadow-glow-optimum); +} + +meter::-webkit-meter-suboptimum-value { + background: var(--color-brightest); + box-shadow: var(--shadow-glow-suboptimum); +} + +meter::-webkit-meter-even-less-good-value { + background: var(--color-red); + box-shadow: var(--shadow-glow-bad); +} + +/* Firefox: color applied via pseudo-class on the meter itself */ +meter:-moz-meter-optimum::-moz-meter-bar { + background: var(--color-bright); + box-shadow: var(--shadow-glow-optimum); +} + +meter:-moz-meter-sub-optimum::-moz-meter-bar { + background: var(--color-brightest); + box-shadow: var(--shadow-glow-suboptimum); +} + +meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { + background: var(--color-red); + box-shadow: var(--shadow-glow-bad); +} + +/* output element */ +output { + font-size: 0.6rem; + color: var(--color-bright); + text-shadow: var(--shadow-text-bright); +} + +/* details/summary */ +details { + border: 1px solid var(--color-border-dark); + padding: 0.4rem 0.5rem; + font-size: 0.6rem; +} + +summary { + cursor: pointer; + color: var(--color-bright); + text-transform: uppercase; + text-shadow: var(--shadow-text-bright); +} + +summary:hover { + color: var(--color-brighter); +} + +details p { + margin-top: 0.5rem; + font-size: 0.6rem; + line-height: 1.6; +} + +.container { + min-width: 400px; +} + +.field { + display: flex; + flex-direction: column; + gap: 0.15rem; +} + +/* ── Profile header ─────────────────────────────────────── */ + +.profile { + display: flex; + align-items: flex-start; + gap: 1.5rem; + margin-bottom: 1rem; +} + +figure { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.25rem; + flex-shrink: 0; +} + +figcaption { + font-size: 0.55rem; + text-transform: uppercase; + color: var(--color-border); + text-shadow: none; +} + +img { + border: 1px solid var(--color-border); + padding: 0.25rem; + box-shadow: + 0 0 8px rgba(90, 191, 0, 0.2), + 0 0 20px rgba(90, 191, 0, 0.07); + display: block; +} + +.profile-info { + display: flex; + flex-direction: column; + gap: 0.1rem; +} + +.profile-info h2 { + color: var(--color-bright); + text-shadow: var(--shadow-text-bright); + font-size: 1.1rem; + margin-bottom: 0.25rem; +} + +/* ── Shared section headings ────────────────────────────── */ + +section > h2, +aside > h2 { + color: var(--color-bright); + text-shadow: var(--shadow-text-bright); + text-transform: uppercase; + font-size: 0.9rem; + margin-bottom: 0.5rem; + letter-spacing: 0.1em; +} + +/* ── HR divider ─────────────────────────────────────────── */ + +hr { + border: none; + border-top: 1px solid var(--color-border-dark); + margin: 1rem 0; +} + +/* ── Table ──────────────────────────────────────────────── */ + +table { + width: 100%; + border-collapse: collapse; + font-size: 0.7rem; +} + +th, +td { + border: 1px solid var(--color-border-dark); + padding: 0.3rem 0.5rem; + text-align: left; +} + +thead th { + color: var(--color-bright); + text-shadow: var(--shadow-text-bright); + text-transform: uppercase; + letter-spacing: 0.08em; + border-color: var(--color-border); +} + +tfoot td { + color: var(--color-border); + text-shadow: none; + font-size: 0.7rem; + border-color: var(--color-border-dark); +} + +tbody tr:hover { + background: rgba(90, 191, 0, 0.04); +} + +/* ── Badges ─────────────────────────────────────────────── */ + +.badge { + font-size: 0.6rem; + text-transform: uppercase; + letter-spacing: 0.1em; + padding: 0.1rem 0.35rem; + border: 1px solid; +} + +.badge--ok { + color: var(--color-bright); + border-color: var(--color-border); + text-shadow: var(--shadow-glow-optimum); +} + +.badge--warn { + color: var(--color-brightest); + border-color: #6a7a00; + text-shadow: var(--shadow-glow-suboptimum); +} + +.badge--crit { + color: var(--color-red); + border-color: #7a2000; + text-shadow: var(--shadow-glow-bad); + animation: flicker 3s infinite; +} + +/* ── Mission log ────────────────────────────────────────── */ + +ol { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.75rem; + padding: 0; +} + +article { + border: 1px solid var(--color-border-dark); + padding: 0.5rem; +} + +article header { + display: flex; + justify-content: space-between; + align-items: baseline; + border-bottom: 1px solid var(--color-border-dark); + margin-bottom: 0.4rem; + padding-bottom: 0.2rem; +} + +article header h3 { + font-size: 0.7rem; + color: var(--color-bright); + text-shadow: var(--shadow-text-bright); + text-transform: uppercase; +} + +article header p { + font-size: 0.6rem; + color: var(--color-border); + text-shadow: none; +} + +article > p { + font-size: 0.7rem; + line-height: 1.6; +} + +article footer { + margin-top: 0.5rem; +} + +mark { + background: rgba(168, 255, 64, 0.15); + color: var(--color-bright); + text-shadow: var(--shadow-glow-optimum); + padding: 0 0.2rem; +} + +del { + color: var(--color-border); + text-shadow: none; + text-decoration-color: var(--color-border); +} + +ins { + color: var(--color-red); + text-shadow: var(--shadow-glow-bad); + text-decoration: none; +} + +ins::before { + content: "→ "; + opacity: 0.6; +} + +/* ── Definition list ────────────────────────────────────── */ + +dl { + display: grid; + grid-template-columns: max-content 1fr; + gap: 0.15rem 1rem; + font-size: 0.7rem; +} + +dt { + color: var(--color-border-medium); + text-shadow: none; + text-transform: uppercase; + font-size: 0.7rem; + letter-spacing: 0.05em; + align-self: center; +} + +dd { + color: var(--color-primary); +} + +dd meter { + margin-top: 0.3rem; +} + +/* ── Aside / blockquote ─────────────────────────────────── */ + +aside { + border: 1px solid var(--color-border); + padding: 0.5rem; + box-shadow: + inset 0 0 12px rgba(90, 191, 0, 0.04), + 0 0 8px rgba(90, 191, 0, 0.08); +} + +blockquote { + border-left: 2px solid var(--color-border); + padding-left: 0.75rem; +} + +blockquote p { + font-size: 0.7rem; + line-height: 1.6; +} + +blockquote footer { + margin-top: 0.35rem; + font-size: 0.7rem; + color: var(--color-border); + text-shadow: none; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +/* ── Inline semantics ───────────────────────────────────── */ + +strong { + color: var(--color-bright); + text-shadow: var(--shadow-text-bright); +} + +em { + color: var(--color-primary); + font-style: normal; + opacity: 0.75; +} + +small { + font-size: 0.7rem; + color: var(--color-border); + text-shadow: none; + display: block; + margin-top: 0.5rem; + line-height: 1.5; +} + +abbr { + text-decoration: underline dotted var(--color-border); + cursor: help; +} + +code { + color: var(--color-brightest); + text-shadow: var(--shadow-glow-suboptimum); + font-size: 0.7rem; +} + +time { + color: var(--color-border-medium); + text-shadow: none; + font-size: 0.7rem; +} + +sup, +sub { + font-size: 0.7rem; + color: var(--color-border-medium); + text-shadow: none; +} + +/* ── Section spacing ────────────────────────────────────── */ + +section, +aside { + margin-bottom: 0.25rem; +} + +@keyframes flicker { + 0%, + 95%, + 100% { + opacity: 1; + } + 96% { + opacity: 0.85; + } + 97% { + opacity: 1; + } + 98% { + opacity: 0.9; + } + 99% { + opacity: 1; + } +} + +@keyframes scanline { + from { + background-position: 0 0; + } + to { + background-position: 0 -10px; + } +} + +@keyframes blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0; + } +} diff --git a/block-01/week-02-html_and_the_dom/demo/transmission-poster.svg b/block-01/week-02-html_and_the_dom/demo/transmission-poster.svg deleted file mode 100644 index 37fbc5b..0000000 --- a/block-01/week-02-html_and_the_dom/demo/transmission-poster.svg +++ /dev/null @@ -1,111 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - WEYLAND-YUTANI CORP // ENCRYPTED BURST TRANSMISSION // ORIGIN: LV-426 - - - - ● REC - - - - - SIGNAL ORIGIN: NON-NATURAL // STARDATE 2183.326 // DECRYPTION: PENDING - - - - FREQ: 3.72 GHz - - - - TRANSMISSION RECEIVED - AWAITING DECRYPTION - PRESS PLAY TO INITIATE PLAYBACK - - - - - - - - - - - - - \ No newline at end of file