KFA-Z Project Overview

        
========================================
=== KFA-Z PROJECT OVERVIEW ===
========================================

========================================
=== KFA-Z PROJECT: A SHORT OVERVIEW ===
========================================

The KFA-Z Project is an interactive fan-built encyclopedia dedicated to the Kniteforce Records universe, with the **A-Z: Artist Explorer** as its definitive centerpiece. This core feature is a comprehensive and dynamic database of over 150 artists, designed to be the ultimate resource for fans.

The Artist Explorer allows users to visually browse artists, using a powerful filtering system to narrow down the selection by labels, brands, or music genres. Users can switch between a high-density **Grid**, a detailed **List**, or a cinematic **Carousel** view. Clicking on any artist opens a detailed profile pop-up containing their biography, "Top Trumps" style stats, and a full list of their associated labels and genres. A key feature is the integrated search function, which lets users instantly look up any artist on the **Kniteforce Store, Discogs, and Google**.

Supporting the main Artist Explorer are several complementary sections:

*   A **Wallpaper Gallery** for creative and fan-made artwork.
*   A proof-of-concept **Music Database** and **Wiki** (Knowledge Base).
*   The **Kniteforce Super Search**, a specialized tool that uses the artist database for quick store searches.
*   An **Arcade** of playable, Kniteforce-themed mini-games.

---

**Technical Design**

Technically, the project is built on a **data-driven architecture**. The project functions as a single-page application, using URL hashes (e.g., `#wiki-history`) for navigation. This allows users to directly link to any section and use their browser's back and forward buttons. All content is stored in simple JavaScript data files (like `data-artists.js`), which are then rendered by a core set of logic files. This smart design separates the content from the code, making the encyclopedia easy to maintain and update. The entire experience is wrapped in a highly customizable interface with four distinct visual themes (Dark, Light, B&W, and Retro Rave Blue), allowing users to tailor the site to their preference.


========================================
=== Part One: Project Files ===
========================================

========================================
=== Core Application Files ===
========================================

### New Files
index.html
kfa-z.css
kfa-z.js

### Data Files
analytics-consent.js
analytics-outbound.js
data-artists.js
data-genre.js
data-labels.js
data-mini-games.js
data-music.js
data-not-music.js
data-wallpaper.js
favicon.png
trumps.html
trumps.js


These are the central files that build the main application shell and provide its core functionality. **They contain the project's core logic and structure and should not be modified for routine content updates.** Changes to these files affect how the entire application works.

### HTML
*   **`index.html` (root folder)**
    *   The main application file. It contains the structure for all sections and loads all necessary CSS and JavaScript.

### CSS
*   **`kfa-z.css` (root folder)**
    *   The primary stylesheet. Defines the global design, color themes, fonts, and layout.

### JavaScript (Logic)
*   **`kfa-z.js` (root folder)**
    *   The main script for `index.html`. This file handles theme switching, section navigation, and all logic for the admin "Manager" pages.

---

========================================
=== Feature-Specific Files ===
========================================

These files provide the structure and data for the standalone Top Trumps game feature.

### Top Trumps Game
*   **`trumps.html` (root folder)**
    *   The standalone HTML page for the Top Trumps game.
*   **`trumps.js` (root folder)**
    *   A special data file containing the narrative for the 1-Player Top Trumps adventure.

---

========================================
=== Data Files (JavaScript) ===
========================================

These files contain the raw data arrays and objects that populate the interactive sections of the website. They are designed to be the primary files modified for content updates.

*   **`data-artists.js`**: Contains the array of all artist profiles.
*   **`data-labels.js`**: Contains data for all primary and secondary filter tags/labels.
*   **`data-genre.js`**: Contains data for all music genre tags.
*   **`data-music.js`**: Contains the tracks and mixes for the Music Database.
*   **`data-not-music.js`**: Contains all the articles for the Wiki/Knowledge Base.
*   **`data-wallpaper.js`**: Contains the image data for the Wallpaper Gallery.
*   **`data-mini-games.js`**: Contains descriptive data for the Mini-Games Arcade.

---

========================================
=== Analytics Scripts ===
========================================

These files handle user tracking and consent management.

*   **`analytics-consent.js`**: Manages the user consent banner and loads the main Google Analytics script.
*   **`analytics-outbound.js`**: Tracks user clicks on links that lead to external websites.

---

========================================
=== Image Asset ===
========================================

This is the primary image asset for the site's branding in the browser.

*   **`favicon.png`**: The browser icon for the website.

---

========================================
=== Data Files (JavaScript) ===
========================================

These files contain the raw data arrays and objects that populate the interactive sections of the website.

*   **`data-artists.js`**: Contains the array of all artist profiles.
*   **`data-labels.js`**: Contains data for all primary and secondary filter tags/labels.
*   **`data-genre.js`**: Contains data for all music genre tags.
*   **`data-music.js`**: Contains the tracks and mixes for the Music Database.
*   **`data-not-music.js`**: Contains all the articles for the Wiki/Knowledge Base.
*   **`data-wallpaper.js`**: Contains the image data for the Wallpaper Gallery.
*   **`data-mini-games.js`**: Contains descriptive data for the Mini-Games Arcade.

---

========================================
=== Analytics Scripts ===
========================================

These files handle user tracking and consent management.

*   **`analytics-consent.js`**: Manages the user consent banner and loads the main Google Analytics script.
*   **`analytics-outbound.js`**: Tracks user clicks on links that lead to external websites.

---

========================================
=== Image & Asset Locations ===
========================================

All visual assets are organized into the following directories.

*   **`/` (root folder)**
    *   `favicon.png`: The browser icon for the website.

*   **`images/artists/`**
    *   `images/`: Contains full-size (1000x667px) JPG images for each artist.
    *   `thumbs/`: Contains smaller (300x200px) JPG thumbnail images for each artist.

*   **`images/banners/`**
    *   Contains all large JPG banner images used at the top and bottom of each section.

*   **`images/genres/`**
    *   Contains the square, black, transparent PNG icons for every music genre.

*   **`images/kf-image-gallery/`**
    *   `images/`: Contains the full-resolution JPG images for the Wallpaper Gallery.
    *   `thumbs/`: Contains the smaller JPG thumbnails for the Wallpaper Gallery.

*   **`images/labels/`**
    *   `icons/`: Contains the square, black, transparent PNG icons for every label and brand.
    *   `images/`: Contains the larger JPG banners used for the primary filters.

*   **`images/mini-games/`**
    *   Contains the JPG preview images for each game in the Mini-Games Arcade.

*   **`images/music/`**
    *   Contains the square JPG artwork for all tracks and mixes in the Music Database.

*   **`images/not-music/`**
    *   Contains the JPG banner and gallery images for the Wiki/Knowledge Base articles.

---

========================================
=== External Resources ===
========================================

The project relies on these external services.

*   **Google Fonts**: The 'Oswald' and 'Inter' fonts are loaded dynamically from `https://fonts.googleapis.com`.
*   **Google Analytics**: The main analytics library (`gtag.js`) is loaded from `https://www.googletagmanager.com`.

========================================
=== Part Two: KFA-Z - SECTIONS ===
========================================

========================================
=== 1. A-Z: Artist Explorer ===
========================================
Section Name: A-Z: Artist Explorer
Section ID: az-explorer-content

Data Files Used:
  data-labels.js
  data-genre.js
  data-artists.js

Banner Information:
  Top Banner: images/banners/a-z-top-banner.jpg
  Bottom Banner: images/banners/a-z-bottom-banner.jpg

Title: Kniteforce A to Z: Artist Explorer
Description: Explore the Kniteforce universe with this A to Z Artist Explorer. Featuring over 150 artists, profiles, filters, tags and a visual way to search the Kniteforce site.
Note: Profiles, stats, tags, music database, genres, and wiki are AI generated with minimal human input — expect some errors! All content will be reviewed and corrected once the code is fully tested.

Additional Info:
  This is the core feature of the project, serving as a detailed encyclopedia of artists.
  *   **Views**: Content can be displayed in a Grid, List, or Carousel.
  *   **Interaction**: Clicking an artist opens a detailed modal pop-up.
  *   **Modal Content**: The modal shows a full artist profile, Top Trumps-style stats, and lists all associated labels and genres with their icons and descriptions. It also includes buttons to search for the artist on the Kniteforce Store, Discogs, and Google.
  *   **Filtering**: Features a powerful filtering system with primary filters (e.g., "Kniteforce Records") that show a large banner, and secondary filters ("Labels / Brands" and "Genre") that open a compact grid of icons for more specific filtering.

  **How the Data Files Are Used:**
  *   **`data-artists.js`**: This is the main database for this section. It provides all the core content for each artist displayed in the grid (image, title, description) and within the modal pop-up (profile, stats). It acts as the central file that connects the other data sources.
  *   **`data-labels.js`**: This file serves two purposes:
      1.  **Filtering**: It populates all the filter buttons. The "Primary Filters" (like "Knite Club") are used for the main buttons, while the secondary labels are used to build the "Labels / Brands" icon grid for more specific filtering.
      2.  **Display**: When an artist's modal is opened, the `tags` array in that artist's object (from `data-artists.js`) is used to look up the corresponding label's `name`, `iconPath`, and `description` from this file to display them in a list.
  *   **`data-genre.js`**: This file works similarly to the labels file:
      1.  **Filtering**: It is used to build the "Genre" filter, which displays a grid of genre icons.
      2.  **Display**: When an artist's modal is opened, the `genreTags` array in that artist's object is used to look up the corresponding genre's `name`, `iconPath`, and `description` from this file to display them.

---

========================================
=== 2. Wallpaper and Fan Art Gallery ===
========================================
Section Name: Wallpaper and Fan Art Gallery
Section ID: wallpaper-gallery-content

Data Files Used:
  data-wallpaper.js

Banner Information:
  Top Banner: images/banners/gal-top-banner.jpg
  Bottom Banner: images/banners/gal-bottom-banner.jpg

Title: Wallpaper and Fan Art Gallery
Description: Browse a collection of wallpapers and creative fan art.
Note: None

Additional Info:
  A visual gallery for desktop/mobile wallpapers and other creative artwork.
  *   **Views**: Content can be displayed in a Grid, List, or Carousel.
  *   **Interaction**: Clicking an image opens a modal pop-up.
  *   **Modal Content**: The modal shows a larger preview of the image, its name, description, and tags, along with a direct link to download the high-resolution version.
  *   **Filtering**: Uses a simple, tag-based filtering system (e.g., "desktop", "mobile", "ai-generated").

  **How the Data Files Are Used:**
  *   **`data-wallpaper.js`**: This is the sole data source for the gallery. The `kfa-z.js` script reads this file to get the `filename` for each image, its `name` for the title, and the `description`. The `tags` array within each object is used to create the simple filter buttons at the top of the section.

---

================================================
=== 3. Kniteforce and Friends Music Browser ===
================================================
Section Name: Kniteforce and Friends Music Browser
Section ID: music-database-content

Data Files Used:
  data-music.js

Banner Information:
  Top Banner: images/banners/music-top-banner.jpg
  Bottom Banner: images/banners/music-bottom-banner.jpg

Title: Kniteforce and Friends Music Browser
Description: (Work in Progress / Proof of Concept / Test Project) An archive of made-up Kniteforce-related tracks and DJ mixes. Click an artist name to search the Kniteforce store.
Note: Profiles, stats, tags, music database, genres, and wiki are AI generated with minimal human input — expect some errors! All content will be reviewed and corrected once the code is fully tested.

Additional Info:
  A proof-of-concept music database showcasing fictional tracks and mixes from the Kniteforce universe.
  *   **Views**: Content can be displayed in a Grid, List, or Carousel.
  *   **Interaction**: Clicking a track opens a modal pop-up.
  *   **Modal Content**: The modal displays the track's artwork, title, artist, label, catalogue number, genre, year, and a full description.
  *   **Filtering**: Features a simple filtering system based on music genre.

  **How the Data Files Are Used:**
  *   **`data-music.js`**: This file is the database for this section. The `kfa-z.js` script specifically uses the `tracks` array within the `musicData` object. For each track, it uses the `artwork`, `title`, and `artist` for the grid display. All other properties (`label`, `catalogue`, `year`, `description`, etc.) are used to populate the content of the modal pop-up. The `genre` property is used to create the simple filter buttons.

---

=========================================
=== 4. The Kniteforce Knowledge Base ===
=========================================
Section Name: The Kniteforce Knowledge Base
Section ID: wiki-history-content

Data Files Used:
  data-not-music.js

Banner Information:
  Top Banner: images/banners/wiki-top-banner.jpg
  Bottom Banner: images/banners/wiki-bottom-banner.jpg

Title: The Kniteforce Knowledge Base
Description: (Work in Progress / Proof of Concept / Test Project) An unofficial encyclopedia of the labels, artists, and history of the Kniteforce universe.
Note: Profiles, stats, tags, music database, genres, and wiki are AI generated with minimal human input — expect some errors! All content will be reviewed and corrected once the code is fully tested.

Additional Info:
  An unofficial encyclopedia that functions like a blog, containing articles about the history, technology, people, and events of the rave scene.
  *   **Views**: Content can be displayed in a Grid, List, or Carousel, and is sorted by date (newest first).
  *   **Interaction**: Clicking an article preview opens a modal pop-up.
  *   **Modal Content**: The modal displays the full article, including its main banner, an image gallery (if available), and the formatted HTML content.
  *   **Filtering**: Uses a simple filter system based on the primary category of each article.

  **How the Data Files Are Used:**
  *   **`data-not-music.js`**: This file provides all content for the section. The script reads the `wikiData` array to display the `banner`, `title`, and `description` for each article in the main grid. The `date` property is used to sort the articles. The first item in the `category` array is used to create the filter buttons. When an article is clicked, the `content` and `gallery_images` properties are used to build the full article view in the modal.

---

==========================================
=== 5. Kniteforce Mini-Games Arcade ===
==========================================
Section Name: Kniteforce Mini-Games Arcade
Section ID: mini-games-content

Data Files Used:
  data-mini-games.js

Banner Information:
  Top Banner: images/banners/games-top-banner.jpg
  Bottom Banner: images/banners/games-bottom-banner.jpg

Title: Kniteforce Mini-Games Arcade
Description: Take a break and play some classic games with a Kniteforce twist.
Note: None

Additional Info:
  A simple, static section that links to a variety of playable, Kniteforce-themed mini-games.
  *   **Views**: This section uses a static, hard-coded grid layout in the `index.html` file and is not controlled by the dynamic `kfa-z.js` script.
  *   **Interaction**: Clicking a game's image or "PLAY" button opens the game in a new browser tab.
  *   **Filtering**: There is no filtering functionality for this section.

  **How the Data Files Are Used:**
  *   **`data-mini-games.js`**: Currently, this file serves as a data-only backup and is not actively used to render this section. The HTML is written directly in `index.html`. However, the file is structured to allow for a dynamic version in the future, where it would provide the `image`, `title`, `status`, `compatibility`, and `url` for each game in the grid.

---

=====================================
=== 6. Kniteforce Super Search ===
=====================================
Section Name: Kniteforce Super Search
Section ID: super-search-content

Data Files Used:
  data-labels.js
  data-genre.js
  data-artists.js

Banner Information:
  Top Banner: images/banners/ss-top-banner.jpg
  Bottom Banner: images/banners/ss-bottom-banner.jpg

Title: Kniteforce Super Search
Description: Welcome to the Kniteforce Super Search. Explore the artists below, and click any artist's name to search for them on the Kniteforce store!
Note: Profiles, stats, tags, music database, genres, and wiki are AI generated with minimal human input — expect some errors! All content will be reviewed and corrected once the code is fully tested.

Additional Info:
  A visual tool designed to help users quickly find and search for artists on the Kniteforce online store.
  *   **Views**: Content can be displayed in a Grid, List, or Carousel, often with unique styling like round images.
  *   **Interaction**: Crucially, clicking an artist does **not** open a modal pop-up. Instead, it immediately opens a new browser tab with the search results for that artist on `kniteforcerevolution.com`.
  *   **Filtering**: It uses the same powerful primary and secondary filtering system as the A-Z Explorer to help users narrow down the artists before they click to search.

  **How the Data Files Are Used:**
  *   **`data-artists.js`**: This file provides the two most critical pieces of information for this section: the `filename` for the artist's image and the `title`, which is used to construct the search URL (e.g., `...store?search=Artist+Name`). The profile, stats, and other detailed information are ignored in this section.
  *   **`data-labels.js`** and **`data-genre.js`**: These files are used in exactly the same way as in the A-Z Explorer: to build the comprehensive filtering system of primary buttons and secondary icon grids, allowing users to find the artist they want to search for.

---

========================================
=== Part Three: Project Files Overviews ===
========================================

========================================
=== data-labels.js ===
========================================

**How to Add a New Label/Tag (admin only):**
1.  Create a new icon for the label (e.g., `newlabel.png`) and place it in `images/labels/icons/`.
2.  If it's a Primary Filter and needs a banner, place that image in `images/labels/images/`.
3.  Copy the appropriate template below and fill in the details.
4.  Add the new label object to the `allLabelsData` array.
5.  The `id` must be unique, lowercase, and use underscores for spaces (e.g., 'my_new_label').

**Data Structure & Usage:**
*   `id`: A unique, lowercase string with underscores. This is the key used to link artists to this label in `data-artists.js`.
*   `name`: The display name of the label or category.
*   `iconPath`: The file path to the icon.
*   `description`: A string of text that describes the label or category.
*   `isPrimaryFilter`: A boolean (`true`/`false`) to determine if it's a main category or a secondary tag.
*   `bannerImagePath`: (Primary filters only) The file path to the banner image.
*   `isDefaultFilter`: (Optional) A boolean that marks the default filter.
*   **Functional Usage**: This file's data is used to **filter** artists. The PNG icons are displayed in a **grid layout** as filter buttons.
*   **Image Specs**: Icons (`iconPath`) are **PNG** files in `images/labels/icons/` (square, black, transparent background). Banners (`bannerImagePath`) are **JPG** files in `images/labels/images/`.

**Blank Templates:**
// --- Blank Primary Filter Template ---
/*
    {
        id: 'new_primary_filter_id',
        name: 'New Primary Filter Name',
        bannerImagePath: 'images/labels/images/NewPrimaryBanner.jpg',
        iconPath: 'images/labels/icons/new_primary_icon.png',
        description: 'Detailed description of this primary filter category.',
        isPrimaryFilter: true,
        isDefaultFilter: false
    },
*/

// --- Blank Secondary Tag/Label Template ---
/*
    {
        id: 'new_secondary_tag_id',
        name: 'New Secondary Tag Name',
        iconPath: 'images/labels/icons/new_secondary_icon.png',
        description: 'Description of this tag/label, shown when its icon is clicked.',
        isPrimaryFilter: false
    },
*/

**Example Data:**
const allLabelsData = [
    {
        id: 'all_artists',
        name: 'All Artists',
        bannerImagePath: 'images/labels/images/All.jpg',
        iconPath: 'images/labels/icons/All.png',
        description: 'Explore all artists featured in the Kniteforce A-Z.',
        isDefaultFilter: true,
        isPrimaryFilter: true
    },
    // ... more labels
];

---

========================================
=== data-genre.js ===
========================================

**How to Add a New Genre (admin only):**
1.  Create a new icon for the genre (e.g., `my-genre.png`) and place it in `images/genres/`.
2.  Copy the template below and fill in the details.
3.  Add the new genre object to the `genreData` array, keeping it alphabetized by `name`.
4.  The `id` and `name` should typically be the same.

**Data Structure & Usage:**
*   `id`: A unique string that exactly matches the `name` (e.g., `Breakbeat Hardcore`).
*   `name`: The display name of the music genre.
*   `iconPath`: The file path to the icon representing the genre.
*   `description`: A short string of text that defines the genre.
*   **Functional Usage**: This file is used to **filter** artists. The PNG icons are displayed in a **grid layout** as filter options.
*   **Image Specs**: Icons (`iconPath`) are **PNG** files in `images/genres/` (square, black, transparent background).

**Blank Template:**
// --- Blank Genre Template ---
/*
    {
        id: 'Genre Name',
        name: 'Genre Name',
        iconPath: 'images/genres/genre-name.png',
        description: 'A brief but informative description of the genre.'
    },
*/

**Example Data:**
const genreData = Object.freeze([
    {
        id: 'Acid House',
        name: 'Acid House',
        iconPath: 'images/genres/acid-house.png',
        description: 'A subgenre of house defined by the squelchy, hypnotic, and resonant sound of the Roland TB-303 bass synthesizer.'
    },
    // ... more genres
]);

---

========================================
=== data-artists.js ===
========================================

**How to Add a New Artist (admin only):**
1.  Create two new images for the artist (e.g., `ArtistName.jpg`).
2.  Place the full-size image in `images/artists/images/` and the thumbnail in `images/artists/thumbs/`.
3.  Copy the template below and fill in the details.
4.  Add the new artist object to the `originalImagesData` array, keeping it alphabetized by `filename`.

**Data Structure & Usage:**
*   `filename`: The name of the artist's image file (e.g., `Luna-C.jpg`).
*   `title`: The artist's display name.
*   `description`: A short, catchy summary.
*   `profile`: HTML string for the artist's biography.
*   `stats`: An object with six numerical ratings.
*   `tags`: An array of strings linking to `id`s from `data-labels.js`.
*   `genreTags`: An array of strings linking to `id`s from `data-genre.js`.
*   **Functional Usage**: The `title` tag is used to generate search links for the Kniteforce store, Discogs, and Google. When a search button is generated, the JavaScript takes the artist's `title` string (e.g., "Luna-C"), makes it URL-safe, and appends it to a base search URL. For the Kniteforce store, this creates a link like `https://kniteforcerevolution.com/store?search=Luna-C`. For Discogs, it creates `https://www.discogs.com/search/?q=Luna-C&type=artist`, and for Google, it creates `https://www.google.com/search?q=Luna-C`.
*   **Image Specs**: All images have a **3:2 aspect ratio**. Main images are **JPG** (1000x667px) in `images/artists/images/`. Thumbs are **JPG** (300x200px) in `images/artists/thumbs/`.

**Blank Template:**
// --- Blank Artist Template ---
/*
    {
        filename: 'ArtistName.jpg',
        title: 'Artist Name',
        description: 'Short, catchy description.',
        profile: '
First paragraph of the artist biography.
Second paragraph. (profile status: unchecked)
',
        stats: {
            "LEGENDARY STATUS": 5, "PRODUCTIVITY": 5, "DIVERSITY": 5,
            "POPULARITY": 5, "RAVEABILITY": 5, "DANCE MOVES": 5
        },
        tags: ['all_artists', 'relevant_label_id_1'],
        genreTags: ['Genre 1', 'Genre 2']
    },
*/

**Example Data:**
const originalImagesData = Object.freeze([
    {
        filename: '0 Kniteforce.jpg',
        title: 'Kniteforce Records',
        description: 'Making today worse so tomorrow seems better.',
        profile: '
Founded by Luna-C in 1992, Kniteforce Records became a cornerstone of UK hardcore and jungle...
',
        stats: { "LEGENDARY STATUS": 10, "PRODUCTIVITY": 10, "DIVERSITY": 10, "POPULARITY": 10, "RAVEABILITY": 10, "DANCE MOVES": 10 },
        tags: ['all_artists', 'kniteforce_records_crew', 'kfa'],
        genreTags: ['Breakbeat Hardcore', 'Happy Hardcore', 'Jungle', 'UK Hardcore', 'Old Skool Rave']
    },
    // ... more artists
]);

---

========================================
=== data-wallpaper.js ===
========================================

**How to Add a New Wallpaper (admin only):**
1.  Place the new image in the appropriate image directory.
2.  Copy the template below and fill in the details.
3.  Add the new object to the `wallpaperData` array, keeping it alphabetized by `filename`.

**Data Structure & Usage:**
*   `filename`: The exact filename of the image.
*   `name`: The display name for the wallpaper.
*   `description`: A brief description of the image.
*   `tags`: An array of strings for filtering.
*   **Image Specs**: Images are high-resolution **JPG** files (up to 4K) and are not cropped. Full-res images are in `images/kf-image-gallery/images/`. Thumbs are in `images/kf-image-gallery/thumbs/`.

**Blank Template:**
// --- Blank Wallpaper Template ---
/*
    {
        filename: "new-image-filename.jpg",
        name: "Display Name for Wallpaper",
        description: "A brief description of the wallpaper.",
        tags: ["tag1", "tag2"]
    },
*/

**Example Data:**
const wallpaperData = [
    {
        filename: "4K-Desktop-KF-Logo-1.jpg",
        name: "4K Kniteforce Desktop Wallpaper 1",
        description: "4K Desktop Wallpaper",
        tags: ["desktop", "photoshop"]
    },
    // ... more wallpapers
];

---

========================================
=== data-not-music.js (Wiki/History) ===
========================================

**How to Add a New Article (admin only):**
1.  Copy the template below and paste it into the `wikiData` array.
2.  The first `category` tag is the Primary Tag.
3.  Place images in the `images/not-music/` folder.

**Data Structure & Usage:**
*   `id`: A unique string identifier for the article.
*   `title`: The display title of the article.
*   `category`: An array of strings for category tags.
*   `banner`: The filename of the banner image.
*   `date`: An optional "YYYY-MM" string for sorting.
*   `description`: A concise one-sentence summary.
*   `content`: An HTML string with the full article content.
*   `gallery_images`: An array of filenames for the article's gallery.
*   **Image Specs**: All images are **JPG** in `images/not-music/`. Banners have a **4:1 aspect ratio**. Gallery images are **square**. Placeholders (`placeholder-banner.jpg`, `placeholder.jpg`) are used if no image is available.

**Blank Template:**
// --- Blank Article Template ---
/*
    {
        id: "unique-article-id",
        title: "Title of The Article",
        category: ["Primary Tag", "Secondary Tag 1"], 
        banner: "banner-image-filename.jpg",
        date: "YYYY-MM",
        description: "A concise, one-sentence summary for previews.",
        content: `
Start writing the main content of the article here.
`,
        gallery_images: ["gallery-image-1.jpg"]
    },
*/

**Example Data:**
const wikiData = [
    {
        id: "chris-howell",
        title: "Chris Howell (Luna-C)",
        category: ["People", "History"],
        banner: "banner-chris-howell.jpg",
        date: "1973-05",
        description: "Kniteforce founder, owner, producer, and DJ, born May 1973.",
        content: `
Christopher Howell, born in May 1973, is known professionally as Luna-C...
`,
        gallery_images: ["gallery-kf-luna-c.jpg", "gallery-kf-studio.jpg"]
    },
    // ... more articles
];

---

========================================
=== data-music.js ===
========================================

**How to Add New Music (admin only):**
1.  For tracks, add a new object to the `tracks` array. For mixes, add to the `mixes` array.
2.  Place artwork in `images/music/`.
3.  The `labelId` and `genreId` must match an `id` from `labels.js` and `genre.js`.

**Data Structure & Usage:**
*   This file contains `tracks` and `mixes` arrays.
*   `artwork`: The filename of the associated image.
*   **Image Specs**: All artwork images are **square JPG** files in `images/music/`. A **placeholder** (`placeholder.jpg`) is used if no artwork is available.

**Blank Templates:**
// --- Blank Track Template ---
/*
    {
        title: "Track Title",
        artist: "Artist Name",
        label: "Display Label Name",
        labelId: "label_id_from_labels_js",
        catalogue: "CAT001",
        artwork: "artwork-filename.jpg",
        genre: "Display Genre Name",
        genreId: "Genre ID From genre.js",
        year: 2024,
        description: "A full description of the track."
    },
*/

// --- Blank Mix Template ---
/*
    {
        title: "Title of The Mix",
        dj: "DJ Name",
        artwork: "mix-artwork.jpg",
        genre: "Primary Genre of Mix",
        link: "https://example.com/mix-url",
        description: "A full description of the mix."
    },
*/

**Example Data:**
const musicData = {
    tracks: [
        {
            title: "Celestial Mechanics",
            artist: "Luna-C",
            label: "Kniteforce Records",
            labelId: "kniteforce_records_crew",
            catalogue: "KF201",
            artwork: "celestial-mechanics.jpg",
            genre: "Breakbeat Hardcore",
            genreId: "Breakbeat Hardcore",
            year: 2023,
            description: "A signature Kniteforce track from the label boss..."
        },
        // ... more tracks
    ],
    mixes: [ /* ... mixes */ ]
};

---

========================================
=== data-mini-games.js ===
========================================

**How to Add a New Mini-Game (admin only):**
1.  Create a preview image for the game and place it in `images/mini-games/`.
2.  Ensure the game itself is uploaded to the `/mini-games/` directory.
3.  Copy the blank template below and fill in the details.

**Data Structure & Usage:**
*   `title`: The display name of the game.
*   `image`: The file path to the game's preview image.
*   `alt`: The alternative text for the image.
*   `status`: A string describing the game's development status.
*   `compatibility`: A string indicating device compatibility.
*   `url`: The relative file path to the game's main HTML file.
*   **Image Specs**: Preview images (`image`) are **JPG** files in `images/mini-games/`.
*   **HTML File Locations**: Game files (`url`) are **HTML** files located in subdirectories within `mini-games/` or the root folder.

**Blank Template:**
// --- Blank Mini-Game Template ---
/*
    {
        "title": "New Game Title",
        "image": "images/mini-games/game-new-game.jpg",
        "alt": "Alt text describing the new game",
        "status": "Development Status (e.g., Work in Progress)",
        "compatibility": "( device / compatibility )",
        "url": "mini-games/new-game-folder/index.html"
    },
*/

**Example Data:**
const miniGamesData = [
    {
        "title": "Kniteforce Tic Tac Toe",
        "image": "images/mini-games/game-tic-tac-toe.jpg",
        "alt": "Kniteforce Tic Tac Toe Game",
        "status": "Completed Mini-Game",
        "compatibility": "( mobile / computer / tablet )",
        "url": "mini-games/tic-tac-toe/index.html"
    },
    // ... more games
];

========================================
=== Part Four: Analytics and Tracking ===
========================================

The project uses Google Analytics to track user interaction, focusing on page views and clicks on external links. The entire system is built around a privacy-first approach using Google's Consent Mode v2, ensuring that tracking is only performed when a user has given their permission.

**Functionality Overview:**
*   **Consent Management**: For new visitors, a consent banner is dynamically displayed at the bottom of the page, asking for permission to use cookies for analytics. The user's choice ("Accept" or "Reject") is saved in their browser's `localStorage` and is respected on all subsequent visits. Tracking is **disabled by default** until the user accepts.
*   **Page View Tracking**: The system tracks which pages or sections users visit. This includes "virtual page views" for navigation within the single-page application (e.g., when switching from the A-Z section to the Wiki section), ensuring that user journeys are accurately recorded.
*   **Outbound Click Tracking**: The system specifically tracks when a user clicks on a link that leads to an external website, such as the Kniteforce store, Discogs, or Google. This tracking is only active if the user has consented to analytics.

---

### File 1: analytics-consent.js

**Purpose:**
This is the primary analytics script. Its main job is to manage user consent for Google Analytics, load the Google Analytics library, display a consent banner to new visitors, and track page views.

**Key Functionality:**

*   **Consent Management (Google Consent Mode v2):**
    1.  **On every page load**, it immediately checks the browser's `localStorage` for a previously saved consent choice (`'granted'` or `'denied'`).
    2.  If a choice is found, it instantly updates Google's consent state *before* any tracking occurs. This ensures returning visitors' choices are always respected.
    3.  If no choice is found (i.e., a new visitor), it sets the default consent state for all tracking to `'denied'`. This is a privacy-first approach.
    4.  It then loads the main Google Analytics script (`gtag.js`).

*   **Consent Banner Logic:**
    *   It only shows the cookie consent banner at the bottom of the screen if no choice has been saved in `localStorage`.
    *   When the user clicks "Accept" or "Reject", the script does two things:
        1.  It saves the choice (`'granted'` or `'denied'`) to `localStorage` to prevent the banner from appearing on subsequent page loads.
        2.  It updates Google's consent state for the *current* page view.
    *   After a choice is made, it fires a custom browser event named `analytics:consent`. This acts as a signal to other scripts (specifically `analytics-outbound.js`) that the user's consent status is now known.

*   **Virtual Pageview Tracking:**
    *   The script listens for changes to the URL's hash (the part after the `#`).
    *   When the hash changes (e.g., when a user navigates from the A-Z Explorer to the Wiki section), it manually sends a new "page view" to Google Analytics with the updated URL. This allows for accurate analytics on a single-page application where the page isn't fully reloaded during navigation.

---

### File 2: analytics-outbound.js

**Purpose:**
This is a specialized helper script. Its only job is to track when a user clicks on a link that leads to an external website (e.g., Discogs, Google, Kniteforce Revolution), but *only if the user has consented to analytics*.

**Key Functionality:**

*   **Link Detection:**
    *   It attaches a single click listener to the entire document.
    *   Whenever a click occurs, it checks if the click was on a link (`` tag).
    *   It then uses a helper function (`isExternalLink`) to determine if the link's destination is on a different domain than the current website. It intelligently ignores internal links, mail links (`mailto:`), and anchor links (`#`).

*   **Consent-Aware Tracking:**
    *   The script maintains an internal variable for the user's consent status.
    *   When it detects a click on an outbound link, it first checks this variable.
    *   If the consent status is `'granted'`, it sends a custom `click` event to Google Analytics, recording which external URL was clicked.
    *   If the consent status is `'denied'` or unknown, it does nothing.

---

### How the Files Interact

The two scripts communicate elegantly through a custom browser event:
1.  When `analytics-consent.js` determines the user's consent status (either on page load from `localStorage` or when the user clicks a button on the banner), it **broadcasts** the `analytics:consent` event with the status ('granted' or 'denied').
2.  `analytics-outbound.js` is **listening** for this event. When it hears it, it updates its internal consent status variable.
3.  This ensures that `analytics-outbound.js` always knows whether it has permission to track clicks, allowing it to function independently while still respecting the user's choice managed by the main consent script.

========================================
=== Part Five: Top Trumps Game ===
========================================

The Top Trumps game is a standalone, interactive feature contained within `trumps.html`. It uses data from `data-artists.js` to provide three distinct modes of play: a narrative-driven 1-Player Adventure, a companion 2-4 Player Local Scoreboard, and a simple Random Card Viewer.

---

### File 1: trumps.html

*   **File Type**: HTML and inline JavaScript.
*   **Simple Overview**: This is the main file for the game, containing both the user interface and the core logic. It includes the HTML structure for all game modes (main menu, adventure screen, scoreboard) and a large block of inline JavaScript. This script acts as the game engine, handling user input, managing game state (like scores and rounds), and dynamically updating what the player sees on screen.

---

### File 2: trumps.js

*   **File Type**: JavaScript (Data).
*   **Simple Overview**: This is a dedicated **data file** containing the narrative for the 1-Player Adventure. It consists of a single `story` object where each entry represents a different stage or "page" of the game. Each page defines the title, story text, and player choices (buttons). The logic in `trumps.html` reads this file to guide the player through the adventure.

---

### Dependency: data-artists.js

*   **File Type**: JavaScript (Data).
*   **Simple Overview**: This file is a crucial dependency, providing all the content for the game's cards. The game reads the `originalImagesData` array for all artist information (names, images, stats) to create the cards used in every mode. It also uses the `gameSettings` object to know the names of the stat categories for battles.

---

### How They Interact

In short: `data-artists.js` provides the cards, `trumps.js` provides the story, and `trumps.html` contains the engine that brings them all together into a playable game.

========================================
=== Part Six: CSS and Styling Overview ===
========================================

The project's entire visual presentation is controlled by two stylesheets: `kfa-z.css`, which establishes the foundational design and theming and the dynamic, interactive components.

---

### Quick Overview: Fonts & Colours

*   **Fonts**: The project uses a modern typographic pairing to create a clear visual hierarchy.
    *   **Oswald**: A bold, condensed, uppercase font for all major headings, titles, and buttons.
    *   **Inter**: A clean and highly readable sans-serif font for all standard body text and descriptions.
    *   **Google Fonts Link**: `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Oswald:wght@700&display=swap');`

*   **Colour Modes**: The site features four distinct, user-selectable themes:
    *   **Dark (Default)**: A classic dark mode with a black background and white text.
    *   **Light**: A clean and bright mode with a white background and black text.
    *   **B&W**: A high-contrast, artistic theme that renders the entire site in grayscale.
    *   **Retro Rave Blue**: A stylish dark theme that uses an electric cyan as its primary accent colour.

---

### Favicon (Browser Icon)

*   **File**: The project uses a single `favicon.png` file for its browser icon.
*   **Purpose**: This is the small icon that appears in the browser tab, bookmarks bar, and other browser interface elements, providing a recognizable visual identity for the site.
*   **Implementation**: It is a standard **PNG** image file, which allows for a transparent background. It is linked directly in the `` of the `index.html` file using the line: ``.

---

### Theming System

The project's theming is powered by modern CSS Custom Properties (variables), making it highly flexible and efficient.

*   **How It Works**: The default theme (Dark) is defined in the `:root` selector, which sets the values for variables like `--bg-color`, `--text-color`, and `--accent-color`.
*   **Applying Themes**: When a user clicks a theme button, a class (e.g., `.light-theme`) is added to the `` element. This class contains rules that redefine the values of the root variables, instantly changing the color of every element on the page that uses them.
*   **Image and Icon Filters**: The B&W and Retro Rave themes also utilize the CSS `filter` property to alter the appearance of images and icons, ensuring they match the theme's aesthetic (e.g., `filter: grayscale(100%)`).

---

### Detailed Layouts by Section

Below is a detailed breakdown of the layout options and content display for each of the main interactive sections found in `index.html`.

**1. A-Z: Artist Explorer**
This section is a dynamic, filterable encyclopedia of artists. Its layout is highly flexible and controlled by the `kfa-z.js` script.
*   **Main Page Display (Grid/List Item):**
    *   Artist's thumbnail image.
    *   Artist's name (title).
    *   A short, one-line description.
*   **Modal (Pop-up) Display:**
    *   A large main image of the artist.
    *   Artist's name and short description.
    *   A full, detailed profile/biography.
    *   A "Top Trumps" style grid displaying six key stats.
    *   A list of all associated Labels/Brands, each with its name, icon, and description.
    *   A list of all associated Music Genres, each with its name, icon, and description.
    *   A set of search buttons to find the artist on the Kniteforce Store, Discogs, and Google.
*   **Layout Options:**
    *   **Grid**: A multi-column grid. The number of columns can be changed by the user (Auto, 2, 3, 4, 5, 6, 10).
    *   **List**: A multi-column list (1, 2, or 3 columns) with a custom layout where the description appears on a new line below the image and title.
    *   **Carousel**: A single, horizontally-scrolling row of artist cards.
    *   **Thumb Strip**: A compact, horizontally-scrolling strip of thumbnails, often used for quick navigation.
*   **Filter Options:**
    *   This section uses a powerful, two-tiered filtering system.
    *   **Primary Filters**: A row of text-based buttons for broad categories (e.g., "ALL ARTISTS", "KNITEFORCE RECORDS", "KNITE CLUB").
    *   **Secondary Filters**: Two additional buttons ("LABELS / BRANDS" and "GENRE") that each open a compact grid of icons, allowing users to filter by specific record labels or music genres.

---

**2. Wallpaper and Fan Art Gallery**
This section is a dynamic, filterable gallery of images.
*   **Main Page Display (Grid/List Item):**
    *   Image thumbnail.
    *   The name of the wallpaper.
    *   A short description (e.g., "4K Desktop Wallpaper").
*   **Modal (Pop-up) Display:**
    *   A larger preview of the wallpaper thumbnail.
    *   The wallpaper's name and full description.
    *   A list of associated tags.
    *   A prominent button to Download the High-Resolution version of the image.
*   **Layout Options:**
    *   **Grid**: A standard multi-column grid (Auto, 2, 3, 4, 5, 6, 10 columns).
    *   **List**: A standard list view (1, 2, or 3 columns) with the image on the left and text on the right.
    *   **Carousel**: A single, horizontally-scrolling row of images.
    *   **Thumb Strip**: A compact, horizontally-scrolling strip of thumbnails.
*   **Filter Options:**
    *   This section uses a simple, single-row filtering system.
    *   The filter consists of text-based buttons that are dynamically generated from the `tags` in the `data-wallpaper.js` file (e.g., "ALL", "DESKTOP", "MOBILE", "FAN-ART").

---

**3. Kniteforce and Friends Music Browser**
This section is a dynamic, filterable database of fictional music tracks.
*   **Main Page Display (Grid/List Item):**
    *   The track's artwork (thumbnail).
    *   The track's title.
    *   The artist's name.
*   **Modal (Pop-up) Display:**
    *   A larger version of the track's artwork.
    *   All track details: Title, Artist, Label, Catalogue Number, Genre, and Year.
    *   A full, detailed description of the track.
*   **Layout Options:**
    *   **Grid**: A standard multi-column grid (Auto, 2, 3, 4, 5, 6, 10 columns).
    *   **List**: A standard list view (1, 2, or 3 columns) with the image on the left and text on the right.
    *   **Carousel**: A single, horizontally-scrolling row of tracks.
    *   **Thumb Strip**: A compact, horizontally-scrolling strip of thumbnails.
*   **Filter Options:**
    *   This section uses a simple, single-row filtering system.
    *   The filter consists of text-based buttons that are dynamically generated from the unique `genre` properties of the tracks in the `data-music.js` file.

---

**4. The Kniteforce Knowledge Base (Wiki)**
This section is a dynamic, filterable encyclopedia that functions like a blog.
*   **Main Page Display (Grid/List Item):**
    *   The article's banner image.
    *   The article's title.
    *   The article's short description.
*   **Modal (Pop-up) Display:**
    *   The full-width article banner image.
    *   A gallery of additional square images associated with the article (if any).
    *   The article's title and short description.
    *   Key details like the article's date and categories.
    *   The full, formatted HTML content of the article.
*   **Layout Options:**
    *   **Grid**: A standard multi-column grid (Auto, 2, 3, 4, 5, 6, 10 columns).
    *   **List**: A custom list view (1, 2, or 3 columns) where each item is displayed as a block with the banner image on top, followed by the title, date, and description.
    *   **Carousel**: A single, horizontally-scrolling row of articles.
    *   **Thumb Strip**: A compact, horizontally-scrolling strip of thumbnails.
*   **Filter Options:**
    *   The articles are primarily organized chronologically, **sorted from newest to oldest** based on the `date` property in `data-not-music.js`. This provides a natural timeline for browsing.
    *   In addition, a simple, single-row filtering system allows users to filter the articles by their primary category (e.g., "ALL CATEGORIES", "HISTORY", "LABELS", "TECHNOLOGY").

---

**5. Kniteforce Mini-Games Arcade**
This section has a fixed, non-dynamic layout.
*   **Main Page Display:**
    *   The layout is a static, hard-coded grid defined directly in the CSS.
    *   It is responsive, automatically changing from 4 columns on desktop, to 2 on tablets, and stacking to 1 on mobile.
    *   Each grid item contains a square image, the game's title, its development status, device compatibility, and a "PLAY" or "VIEW" button.
*   **Modal (Pop-up) Display:**
    *   There is no pop-up modal. Clicking a game's image or button opens the game directly in a new browser tab.
*   **Layout Options:**
    *   None. The layout is fixed and not controlled by the view switcher.
*   **Filter Options:**
    *   None. There are no filtering options for this section.

---

**6. Kniteforce Super Search**
This section is a specialized, dynamic artist browser designed for quick searching.
*   **Main Page Display (Grid/List Item):**
    *   In Grid view, it is designed to be highly visual, showing **only the artist's image** by default.
*   **Modal (Pop-up) Display:**
    *   There is no pop-up modal. Clicking on any artist immediately opens a new browser tab with the search results for that artist on the Kniteforce Revolution store.
*   **Layout Options:**
    *   **Grid, List, Carousel**: Standard options are available. The List view is customized to show a larger, centered image.
    *   **Thumb Strip**: A compact, horizontally-scrolling strip of thumbnails.
    *   **Shape Controls**: This section has unique controls to change the shape of the artist images in the grid: Normal (square), Rounded (rounded corners), or Round (circular).
*   **Filter Options:**
    *   This section uses the same powerful, two-tiered filtering system as the A-Z Explorer.
    *   **Primary Filters**: A row of text-based buttons for broad categories.
    *   **Secondary Filters**: "LABELS / BRANDS" and "GENRE" buttons that open a compact grid of icons for more specific filtering.

---

### Overview of Colours and Buttons

#### Colour Palette by Theme

The color of text and buttons changes dynamically depending on the active theme.

*   **Dark Theme (Default)**
    *   **Main Text**: White (`#ffffff`)
    *   **Secondary Text**: Light Grey (`#cccccc`)
    *   **Standard Buttons**: White background (`#ffffff`) with Black text (`#000000`).

*   **Light Theme**
    *   **Main Text**: Black (`#000000`)
    *   **Secondary Text**: Dark Grey (`#333333`)
    *   **Standard Buttons**: Black background (`#000000`) with White text (`#ffffff`).

*   **B&W Theme**
    *   **Main Text**: White (`#ffffff`)
    *   **Standard Buttons**: White background (`#ffffff`) with Black text (`#000000`).

*   **Retro Rave Blue Theme**
    *   **Main Text**: White (`#ffffff`)
    *   **Accent Colour**: Electric Cyan (`#00ffff`)
    *   **Standard Buttons**: Cyan background (`#00ffff`) with Black text (`#000000`).

*   **Active State Colour**
    *   Across all themes, buttons representing an "active" state (like the current navigation tab or a selected filter) use a distinct **Blue** (`#007bff`) background with White text.

#### Button Overview

All buttons across the project share a consistent design language: they use the bold, uppercase **'Oswald'** font and feature a subtle visual change on hover.

*   **THEME SWITCHER BUTTONS** (`.theme-button`)
    *   **Purpose**: To select a visual theme for the website.
    *   **Location**: Found at the very top of the page.
    *   **Examples**: `LIGHT`, `DARK`, `B&W`, `RETRO RAVE BLUE`.

*   **MAIN NAVIGATION BUTTONS** (`.nav-btn`)
    *   **Purpose**: To switch between the main content sections of the page.
    *   **Location**: Grouped in rows below the Development Notes area.
    *   **Examples**: `A-Z: ARTIST EXPLORER`, `WALLPAPER GALLERY`, `ARTIST MANAGER`.

*   **VIEWER CONTROL BUTTONS** (`.filter-btn`, etc.)
    *   **Purpose**: To control the layout and filtering of the dynamic content viewers.
    *   **Location**: Inside the control bar above sections like the A-Z Explorer.
    *   **Examples**: `GRID`, `LIST`, `CAROUSEL`, `ALL ARTISTS`, `LABELS / BRANDS`.

*   **LARGE LAUNCH BUTTONS** (`.big-launch-btn`)
    *   **Purpose**: Large, prominent call-to-action buttons that link to standalone pages.
    *   **Location**: Found at the bottom of the preview sections.
    *   **Example**: `OPEN A-Z: ARTIST EXPLORER`.

*   **SEARCH & ACTION BUTTONS** (`.search-buttons a`, `.button`)
    *   **Purpose**: Smaller, versatile buttons used for specific actions like external searches or playing games.
    *   **Location**: Found within modals, the Mini-Games grid, and other components.
    *   **Examples**: `SEARCH KNITEFORCE STORE`, `PLAY`, `DOWNLOAD HIGH RES`.

*   **ADMIN BUTTONS** (`.button-group button`)
    *   **Purpose**: Small utility buttons used exclusively within the Manager pages.
    *   **Location**: Found next to the raw data text areas in the admin sections.
    *   **Examples**: `COPY TEXT`, `RESET`, `COPY TEMPLATE`.

========================================
=== Part Seven: Admin Area Overview ===
========================================

The Admin Area, referred to as the "Management Console" in the UI, is a suite of six powerful tools designed for the website administrator. It is now accessed via a single 'ADMIN' button located in the main navigation area. Clicking this button reveals the full Management Console, which contains a dedicated row of six new buttons (e.g., 'Artist Manager', 'Labels Manager'). Selecting one of these manager buttons will then display the corresponding tool's interface.

Its primary purpose is not to edit content live on the site, but to provide a clear and organized way to **view, verify, and prepare data** for manual updates to the project's core JavaScript data files.

Each "Manager" page serves as a visual interface for one of the project's data files (e.g., `data-artists.js`, `data-labels.js`), helping to streamline the process of adding new content and ensuring data consistency.

---

### Common Features Across All Managers

All six manager pages share a consistent layout and a core set of features, making them intuitive to use:

*   **Dropdown Selector**: Each page begins with a dropdown menu, populated with a sorted list of all items from its corresponding data file, allowing the admin to easily select an item to inspect.
*   **Formatted Data Display**: Once an item is selected, its data is presented in a human-readable format. This includes displaying images, titles, descriptions, and lists of associated tags, making it easy to review the content as it would appear on the live site.
*   **Raw Data Viewer**: A "textarea" is prominently displayed, showing the complete JavaScript object for the selected item, perfectly formatted. This is the main tool for copying existing data for modification.
*   **"How to Add" Section**: Each manager includes a dedicated section with step-by-step instructions detailing the workflow for adding a new item, including where to place image files and which `.js` file to edit.
*   **Template System**: To ensure new content is added correctly, a separate "textarea" provides a blank, pre-formatted template object for a new entry. This can be copied and filled out, eliminating structural errors.
*   **Utility Buttons**: Each textarea is accompanied by buttons for `COPY TEXT` and `RESET`, allowing for quick and easy data handling.

---

### Specific Manager Pages

While they share a common structure, each manager is tailored to handle its specific type of data.

*   **1. Artist Manager**
    *   **Purpose**: To view and manage artist profiles from `data-artists.js`.
    *   **Displays**: The most comprehensive data set, including the artist's main image, title, description, full profile text, a grid of their "Top Trumps" stats, and lists of their associated labels and genres (complete with icons). It also includes a section with **search buttons** to look up the artist on the Kniteforce Store, Discogs, and Google.

*   **2. Labels and Brands Manager**
    *   **Purpose**: To view and manage the label/brand tags from `data-labels.js`.
    *   **Displays**: The label's icon, name, and description. It also includes **search buttons** to look up the label on the Kniteforce Store and Discogs.

*   **3. Genre Manager**
    *   **Purpose**: To view and manage the music genre tags from `data-genre.js`.
    *   **Displays**: The genre's icon, name, and description.

*   **4. Music Manager**
    *   **Purpose**: To view and manage the track data from the `tracks` array in `data-music.js`.
    *   **Displays**: The track's artwork, title, artist, label, catalogue number, genre, year, and a full description. It also includes **search buttons** to search for the release.

*   **5. Gallery Manager**
    *   **Purpose**: To view and manage the image data for the Wallpaper Gallery from `data-wallpaper.js`.
    *   **Displays**: The full-size gallery image, its name, description, and a list of its associated filter tags.

*   **6. Wiki Manager**
    *   **Purpose**: To view and manage the article data for the Knowledge Base from `data-not-music.js`.
    *   **Displays**: A full preview of a wiki article, including its banner, a preview of its gallery images, its title, description, date, categories, and the fully formatted article content.

---

### Typical Admin Workflow for Adding Content

The design of the Admin Area facilitates a clear and consistent workflow for the developer/administrator:

1.  **Navigate** to the appropriate manager page (e.g., "Artist Manager" to add a new artist).
2.  **Prepare Assets**: Create and place the required image files in their correct folders as specified in the "How to Add" instructions.
3.  **Copy Template**: Click the `COPY TEMPLATE` button to get a clean, structured object for the new content.
4.  **Fill Data**: Paste the template into a text editor and fill in all the required information (title, description, tags, etc.).
5.  **Open Project File**: Open the corresponding JavaScript data file (e.g., `data-artists.js`) in a code editor.
6.  **Insert and Save**: Paste the newly completed object into the correct array within the file and save it.
7.  **Verify**: Refresh the website. The new content will now appear in the relevant section and can be viewed in the Admin Area for final verification.

========================================
=== Part Eight: Project Recreation Overview ===
========================================

This guide outlines a two-phase process for recreating the KFA-Z project. Phase One focuses on building the complete public-facing website. Phase Two integrates the admin-level "Management Console" as an enhancement.

---

### Phase One: Recreating the Main Project

The goal of this phase is to build a fully functional, interactive encyclopedia for the end-user, excluding all admin-specific functionality.

**Step 1: Create `index.html` (The Skeleton)**
*   Build the main HTML structure for the public-facing site.
*   **Include**: Theme switcher, a single navigation row for the six public sections (A-Z Explorer, Wallpaper, etc.), top and bottom banners, and the empty `section` containers for these six areas.
*   **Include**: The HTML for the pop-up modal.
*   **Exclude**: The navigation row and `section` containers for the Management Console.
*   Link `kfa-z.css` and all necessary JavaScript files at the end of the body.

**Step 2: Create `kfa-z.css` (The Skin)**
*   Develop the complete styling for the user-facing experience.
*   **Include**:
    *   Google Font imports ('Oswald' and 'Inter').
    *   The four-theme system (Dark, Light, B&W, Retro Rave) using CSS Custom Properties.
    *   Styles for all dynamic viewer components: control bars, filter buttons, item grids/lists, and the modal pop-up.
    *   Responsive `@media` queries to ensure the layout is optimized for desktop, tablet, and mobile.
*   **Exclude**: Any styles specifically for the Admin Area manager pages.

**Step 3: Create `kfa-z.js` (The Brains)**
*   Write the core JavaScript logic that powers the interactive user experience.
*   **Include**:
    *   **Global Logic**: Theme switcher with `localStorage`, and navigation for the six public sections with URL hash updates.
    *   **Dynamic Viewer Engine**: A reusable function that builds the interactive viewers for the A-Z, Wallpaper, Music, Wiki, and Super Search sections. This engine must handle view switching (Grid/List/Carousel), dynamic filter creation, and the logic for displaying content in the pop-up modal.
*   **Exclude**: All code related to the Management Console (populating admin dropdowns, showing raw data, etc.).

**Step 4: End of Phase One and Testing**
*   At this point, the main project should be fully functional for a public user.
*   **Test all features**:
    *   Verify that all six public sections load correctly.
    *   Test the theme switcher and ensure all four themes apply correctly.
    *   Check that all dynamic viewers can switch between Grid, List, and Carousel views.
    *   Thoroughly test the filtering functionality in the A-Z Explorer and other sections.
    *   Confirm that clicking items in each section opens the modal with the correct content.
    *   Test the Super Search to ensure it links out to the Kniteforce store correctly.
    *   Verify that the layout is responsive and looks correct on desktop and mobile.

---

### Phase Two: Adding the Admin Area

Once the main project is complete and verified, the "Management Console" can be integrated. This adds the suite of tools for the website administrator.

**Step 1: Update `index.html` to Add Admin Structure**
*   Add the second navigation button row for the "Management Console," containing the six manager buttons (Artist Manager, Labels Manager, etc.).
*   Add the six empty `section` containers for the manager pages (e.g., `section id="artist-manager-content"`).

**Step 2: Update `kfa-z.css` to Style the Admin Area**
*   Add the CSS required to style the new manager sections.
*   **Include**: Styles for the two-column layouts, info cards, dropdown menus (`select`), raw data text areas (`textarea`), and the utility button groups (`COPY`, `RESET`).

**Step 3: Update `kfa-z.js` to Power the Admin Logic**
*   Enhance the main script to add the functionality for the Management Console.
*   **Include**:
    *   Update the main navigation logic to handle the new admin section buttons.
    *   Write the functions to populate the dropdown selectors on each manager page with data from the corresponding `.js` files.
    *   Write the "display" functions (e.g., `displayArtistInfo`) that show the formatted data when an item is selected.
    *   Implement the logic to display the raw data object and the blank template in the text areas.
    *   Add the event listeners and functions for the `COPY` and `RESET` utility buttons.