.gitignore

@@ -0,0 +1,179 @@
+# ---> Python
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# UV
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#uv.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
+.pdm.toml
+.pdm-python
+.pdm-build/
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+
+
+# Doxygen output
+docs/doxygen/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "framework"]
+	path = framework
+	url = ssh://git@git.tirsystem.com:10022/TirSystem/SQA-QC-Framework.git

README.md

@@ -1,2 +1,42 @@
 # 043-web-colour-vocab
 
+A small flashcard website that teaches the colours in Spanish. Each card shows
+the Spanish word, coloured to match its meaning, above a swatch of that colour.
+Built with plain HTML and CSS for Udemy's *100 Days of Code*, lesson 5.4
+(Color Vocab Project).
+
+![The finished page: Rojo, Azul, Anaranjado, Verde and Amarillo, each above a 200px colour swatch](wiki/images/colour-vocab.png)
+
+## Vocabulary
+
+| Spanish | English | Dansk | Bahasa Malaysia |
+| --- | --- | --- | --- |
+| Rojo | red | rød | merah |
+| Azul | blue | blå | biru |
+| Anaranjado | orange | orange | oren |
+| Verde | green | grøn | hijau |
+| Amarillo | yellow | gul | kuning |
+
+## Run it
+
+No build step and no dependencies. Open `index.html` in a browser.
+
+## Files
+
+| Path | Purpose |
+| --- | --- |
+| `index.html` | The page. Given by the exercise and left unchanged. |
+| `style.css` | All styling: 200px × 200px images, normal-weight titles, one text colour per colour word. |
+| `assets/images/` | The five colour swatches. |
+
+## Wiki
+
+Documentation in three languages lives in [`wiki/`](wiki/):
+
+- [English](wiki/Home.md)
+- [Dansk](wiki/Home-da.md)
+- [Bahasa Malaysia](wiki/Home-ms.md)
+
+## Licence
+
+See [LICENSE](LICENSE).

docs/artifact-registry.md

@@ -0,0 +1,56 @@
+# Artifact Registry
+
+This project's artifact state. Types, short names and `CrossReference
+Candidates` come from the framework catalog
+(`framework/registry/artifact-catalog.md`); this file only records where
+each document lives in *this* project and the next version to use.
+
+Delete rows for types you don't use. Add a row the first time you create a
+document of a type. `Primary File` may contain a glob (e.g.
+`docs/use-cases/uc-*/uc.md`); `framework/scripts/find-crossreferences.sh` reads it.
+
+| Short Name | Artifact Type | Primary File | Next Available Version |
+| --- | --- | --- | --- |
+| BC | Business Case | docs/business-case.md | 001 |
+| SA | Stakeholder Analysis | docs/stakeholder-analysis.md | 001 |
+
+## Languages
+
+Set the PO language when the project starts; `project-planning` asks for it
+if it is missing. An artifact of a type marked "Written in the PO language"
+exists once, in that language, under its normal name (`business-case.md`); the
+`artifact` skill ("One file per artifact") has the rule.
+
+| Setting | Value |
+| --- | --- |
+| PO language | <language code, e.g. da> |
+| PO domain | <value from the domain list below, e.g. it> |
+| High-level register | IT Executive English |
+| Technical register | IT Professional English |
+| Wiki languages | en and the PO language, at least (`framework/process/wiki.md`) |
+
+Every artifact of a type marked "Yes" below states its language and domain in
+its `Language` and `Domain` Metadata rows; `new-artifact.sh` fills them from
+`PO language` and `PO domain`. `Language` is a BCP 47 code (`da`, `en`).
+`Domain` is a value from this list; add a row to introduce a domain, so a
+reviewer can see at once which professional vocabulary a document uses.
+
+| Domain | Meaning |
+| --- | --- |
+| it | Software and IT |
+| medical | Healthcare and medical devices |
+| construction | Construction and civil engineering |
+
+| Artifact types | Register | Written in the PO language |
+| --- | --- | --- |
+| BC, KPI, PP, MIL | IT Executive English | Yes |
+| SA, BMC, BPMN, UCD, US, UC, SSD, DM, RA, GOV, DICT | IT Professional English | Yes |
+| OC, SD, DCD, ERD, TP, AD, ADR, TM, RC, QC, source code | IT Professional English | No |
+
+## Notes
+
+- "Next Available Version" is the zero-padded (3-digit) version to use the
+  *next* time a new document of that type is created. Increment it only when
+  a brand-new document is created, not when an existing document's
+  `## Version History` gets a row.
+- `ADR` uses 4 digits (`0001`); `RC` is sequential across all artifact types.

index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Spanish Vocabulary</title>
+  <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+  <h1>Colors</h1>
+  <h2>Learn the colors in Spanish!</h2>
+  <h2 class="color-title" id="red">Rojo</h2>
+  <img class="color" src="./assets/images/red.png" alt="red" />
+
+  <h2 class="color-title" id="blue">Azul</h2>
+  <img src="./assets/images/blue.png" alt="blue" />
+
+  <h2 class="color-title" id="orange">Anaranjado</h2>
+  <img src="./assets/images/orange.png" alt="orange" />
+
+  <h2 class="color-title" id="green">Verde</h2>
+  <img src="./assets/images/green.png" alt="green" />
+
+  <h2 class="color-title" id="yellow">Amarillo</h2>
+  <img src="./assets/images/yellow.png" alt="yellow" />
+</body>
+
+</html>
+
+<!-- 
+TODOs
+IMPORTANT: You should not need to make ANY CHANGES to index.html
+All code should be written in your CSS file.
+
+1. Create a CSS file and incorporate it as an external stylesheet.
+2. Use CSS to style each of the color titles to meaning. 
+Hint: Use the id to help if you don't know the words in spanish.
+3. Use CSS to change all the color titles to have "font-weight: normal;"
+4. Use CSS (not HTML) to make all the images 200px heigh and 200px wide. 
+Hint: 
+https://developer.mozilla.org/en-US/docs/Web/CSS/height
+https://developer.mozilla.org/en-US/docs/Web/CSS/width
+-->

style.css

@@ -0,0 +1,29 @@
+img {
+  height: 200px;
+  width: 200px;
+}
+
+.color-title {
+  font-weight: normal;
+}
+
+#red {
+  color: red;
+}
+
+#blue {
+  color: blue;
+}
+
+#orange {
+  color: orange;
+}
+
+#green {
+  color: green;
+}
+
+/* Plain "yellow" is unreadable on white, so a darker yellow is used. */
+#yellow {
+  color: #d4a900;
+}

wiki/Home-da.md

@@ -0,0 +1,53 @@
+[English](Home) · **Dansk** · [Bahasa Malaysia](Home-ms)
+
+# Colour Vocab
+
+En flashcard-side til at lære farverne på spansk, lavet kun med HTML og CSS.
+
+![Den færdige side](images/colour-vocab.png)
+
+## Gloser
+
+| Spansk | English | Dansk | Bahasa Malaysia |
+| --- | --- | --- | --- |
+| Rojo | red | rød | merah |
+| Azul | blue | blå | biru |
+| Anaranjado | orange | orange | oren |
+| Verde | green | grøn | hijau |
+| Amarillo | yellow | gul | kuning |
+
+## Sådan kører du den
+
+Åbn `index.html` i en vilkårlig browser. Der er intet at installere.
+
+## Sådan virker den
+
+`index.html` linker til et eksternt stylesheet, `style.css`. Opgavens regel er,
+at alle ændringer sker i CSS og ingen i HTML.
+
+1. **Link stylesheetet.** `<link rel="stylesheet" href="./style.css" />`.
+   Test linket ved midlertidigt at sætte `body { background-color: pink; }` og
+   se, at siden ændrer sig.
+2. **Farv hver titel efter dens betydning.** Hver titel har et `id` (`red`,
+   `blue`, `orange`, `green`, `yellow`), så `#red { color: red; }` rammer kun
+   *Rojo*. `id`'et er et hint, hvis du ikke kender det spanske ord.
+3. **Gør titlerne normale i vægt.** Alle titler har klassen `color-title`, så
+   én regel dækker dem: `.color-title { font-weight: normal; }`.
+4. **Størrelse på billederne.** `img { height: 200px; width: 200px; }` gør alle
+   farvefelter lige store.
+
+Se et preview efter hvert trin, så en fejl opdages, mens den er lille.
+
+### Bemærkning om gul
+
+Almindelig `yellow` er svær at læse på hvid baggrund, så *Amarillo* bruger
+`#d4a900`.
+
+## Skærmbillede
+
+Skærmbilledet er taget med headless Chrome i et 480 px bredt vindue:
+
+```bash
+chrome --headless=new --hide-scrollbars --window-size=480,1490 \
+  --screenshot=wiki/images/colour-vocab.png file:///sti/til/index.html
+```

wiki/Home-ms.md

@@ -0,0 +1,55 @@
+[English](Home) · [Dansk](Home-da) · **Bahasa Malaysia**
+
+# Colour Vocab
+
+Laman kad imbas satu halaman untuk belajar warna dalam bahasa Sepanyol,
+dibina dengan HTML dan CSS sahaja.
+
+![Halaman siap](images/colour-vocab.png)
+
+## Kosa kata
+
+| Sepanyol | English | Dansk | Bahasa Malaysia |
+| --- | --- | --- | --- |
+| Rojo | red | rød | merah |
+| Azul | blue | blå | biru |
+| Anaranjado | orange | orange | oren |
+| Verde | green | grøn | hijau |
+| Amarillo | yellow | gul | kuning |
+
+## Cara menjalankan
+
+Buka `index.html` dalam mana-mana pelayar. Tiada apa-apa untuk dipasang.
+
+## Cara ia berfungsi
+
+`index.html` memaut helaian gaya luaran, `style.css`. Peraturan latihan ini
+ialah semua perubahan dibuat dalam CSS dan tiada dalam HTML.
+
+1. **Pautkan helaian gaya.** `<link rel="stylesheet" href="./style.css" />`.
+   Untuk menguji pautan, tetapkan sementara `body { background-color: pink; }`
+   dan semak bahawa halaman berubah.
+2. **Warnakan setiap tajuk mengikut maksudnya.** Setiap tajuk mempunyai `id`
+   (`red`, `blue`, `orange`, `green`, `yellow`), jadi `#red { color: red; }`
+   hanya menggayakan *Rojo*. `id` ialah petunjuk jika anda tidak tahu
+   perkataan Sepanyolnya.
+3. **Jadikan tajuk berat biasa.** Semua tajuk berkongsi kelas `color-title`,
+   jadi satu peraturan meliputi semuanya: `.color-title { font-weight: normal; }`.
+4. **Saiz imej.** `img { height: 200px; width: 200px; }` menjadikan setiap
+   petak warna sama saiz.
+
+Pratonton selepas setiap langkah supaya kesilapan dikesan semasa masih kecil.
+
+### Nota tentang kuning
+
+`yellow` biasa sukar dibaca pada latar putih, jadi *Amarillo* menggunakan
+`#d4a900`.
+
+## Tangkapan skrin
+
+Tangkapan skrin diambil dengan Chrome headless dalam tetingkap lebar 480 px:
+
+```bash
+chrome --headless=new --hide-scrollbars --window-size=480,1490 \
+  --screenshot=wiki/images/colour-vocab.png file:///laluan/ke/index.html
+```

wiki/Home.md

@@ -0,0 +1,53 @@
+**English** · [Dansk](Home-da) · [Bahasa Malaysia](Home-ms)
+
+# Colour Vocab
+
+A one-page flashcard site for learning the colours in Spanish, built with HTML
+and CSS only.
+
+![The finished page](images/colour-vocab.png)
+
+## Vocabulary
+
+| Spanish | English | Dansk | Bahasa Malaysia |
+| --- | --- | --- | --- |
+| Rojo | red | rød | merah |
+| Azul | blue | blå | biru |
+| Anaranjado | orange | orange | oren |
+| Verde | green | grøn | hijau |
+| Amarillo | yellow | gul | kuning |
+
+## How to run
+
+Open `index.html` in any browser. There is nothing to install.
+
+## How it works
+
+`index.html` links an external stylesheet, `style.css`. The exercise rule is
+that all changes are made in the CSS and none in the HTML.
+
+1. **Link the stylesheet.** `<link rel="stylesheet" href="./style.css" />`.
+   To test the link, temporarily set `body { background-color: pink; }` and
+   check that the page changes.
+2. **Colour each title by its meaning.** Every title has an `id` (`red`,
+   `blue`, `orange`, `green`, `yellow`), so `#red { color: red; }` styles only
+   *Rojo*. The `id` is a hint if you do not know the Spanish word.
+3. **Make the titles normal weight.** All titles share the class
+   `color-title`, so one rule covers them: `.color-title { font-weight: normal; }`.
+4. **Size the images.** `img { height: 200px; width: 200px; }` makes every
+   swatch the same size.
+
+Preview after each step so a mistake is caught while it is still small.
+
+### Note on yellow
+
+Plain `yellow` is hard to read on a white page, so *Amarillo* uses `#d4a900`.
+
+## Screenshot
+
+The screenshot was taken with headless Chrome at a 480 px wide window:
+
+```bash
+chrome --headless=new --hide-scrollbars --window-size=480,1490 \
+  --screenshot=wiki/images/colour-vocab.png file:///path/to/index.html
+```

wiki/_Sidebar.md

@@ -0,0 +1,5 @@
+**Colour Vocab**
+
+- [English](Home)
+- [Dansk](Home-da)
+- [Bahasa Malaysia](Home-ms)