tHE dURT nURS' Official Website

Welcome to the official website repository for tHE dURT nURS', a rock band combining gritty authentic rock aesthetic with self-aware absurdism.

Live Site: https://www.durtnurs.com

📋 Table of Contents

Project Overview
File Structure
Design System
Local Development
How to Update Content
Deployment
Technical Details
Roadmap

🎸 Project Overview

This is a static website built with semantic HTML5, modern CSS (Grid & Flexbox), and progressive enhancement principles. The site is optimized for performance, accessibility, and mobile-first responsive design.

Design Philosophy

Aesthetic: Gritty authentic rock with aged whiskey, brass, and coal-black tones
Tone: Self-aware absurdism meets dive bar authenticity
UX: Fast, accessible, works without JavaScript

Current Status: Phase 10 Complete ✅

✅ Foundation & homepage
✅ About page with band bios
✅ News/announcements system with JSON data
✅ Releases/discography page with album grid
✅ Gallery page with photo/video lightbox
✅ Contact page with mailto integration
✅ Fan Club protected area with full gallery access (Phase 6)
✅ Client-side access code authentication (Phase 6)
✅ Member-exclusive content and direct contact (Phase 6)
✅ Dynamic featured release on homepage (Phase 7)
✅ Single source of truth for release data (Phase 7)
✅ Escalating humorous error messages on failed login (Phase 8)
✅ 3-attempt limit with "drunk redirect" to homepage (Phase 8)
✅ Graceful exit button for Fan Club authentication (Phase 8)
✅ Countdown timer and enhanced UX for authentication (Phase 8)
✅ Privacy Policy page with satirical legal content (Phase 9)
✅ Terms of Service page emphasizing parody nature (Phase 9)
✅ Footer navigation updated across all pages (Phase 9)
✅ Announcement link empty states with humorous messages (NEW - Phase 10)
✅ 7-second countdown timer and auto-redirect (NEW - Phase 10)
✅ "Get Me Out of Here" exit button on message pages (NEW - Phase 10)
✅ Dynamic content loading with JavaScript
✅ Custom lightbox implementation (no external libraries)
✅ Progressive enhancement (works without JS)
✅ Responsive design (mobile, tablet, desktop)
✅ Semantic HTML5 with ARIA labels
✅ CSS architecture (BEM methodology)
✅ Mobile-first CSS Grid layout
✅ CSS-only navigation menu
✅ Member profile cards
✅ Album/release cards with collapsible tracklists
✅ Gallery grid with lightbox functionality
✅ Keyboard navigation support (ESC, arrow keys)
✅ Session-based authentication with sessionStorage
✅ Search engine prevention (robots.txt + meta tags)
✅ Attempt tracking and state management (Phase 8)
✅ Animated drunk redirect with pulse effect (Phase 8)

📁 File Structure

durtnurs.github.io/
├── index.html                 # Main homepage
├── about.html                 # Band bio and member profiles
├── news.html                  # News archive page (Phase 3)
├── releases.html              # Releases/discography page (Phase 4)
├── gallery.html               # Photo/video gallery (Phase 5)
├── contact.html               # Contact page (Phase 5)
├── fanclub.html               # Fan Club protected area (Phase 6)
├── privacy.html               # Privacy Policy page (Phase 9)
├── terms.html                 # Terms of Service page (Phase 9)
├── message.html               # Humorous message page (NEW - Phase 10)
├── assets/
│   ├── css/
│   │   ├── reset.css          # Modern CSS reset
│   │   ├── variables.css      # Design tokens
│   │   ├── layout.css         # CSS Grid layouts
│   │   └── components.css     # UI components (updated Phase 10)
│   ├── data/
│   │   ├── announcements.json # News data (Phase 3)
│   │   ├── releases.json      # Album/release data (Phase 4)
│   │   └── gallery.json       # Gallery media data (Phase 5 & 6)
│   ├── images/
│   │   ├── logo.png           # Band logo
│   │   ├── kraken-album.png   # Album artwork
│   │   ├── deadbeat-placeholder.svg   # DeadBeat member photo
│   │   ├── snowman-placeholder.svg    # SnowMan member photo
│   │   └── gallery/           # Gallery images directory
│   │       └── README.md      # Gallery image guidelines
│   └── js/
│       ├── announcements.js   # Dynamic news loading (Phase 3, updated Phase 10)
│       ├── releases.js        # Dynamic release loading (Phase 4)
│       ├── gallery.js         # Public gallery & lightbox (Phase 5)
│       ├── fanclub-auth.js    # Access code authentication (Phase 6)
│       ├── fanclub-gallery.js # Full gallery display (Phase 6)
│       ├── featured-release.js # Homepage featured release (Phase 7)
│       └── message.js         # Message page timer & redirect (NEW - Phase 10)
├── robots.txt                 # Search engine directives (Phase 6)
├── FANCLUB_ACCESS.md          # Fan Club documentation (Phase 6)
├── README.md                  # This file
├── CNAME                      # Custom domain configuration
└── .gitignore                 # Git exclusions

CSS Architecture

The CSS is split into four logical layers (loaded in order):

reset.css - Remove browser defaults, set sensible foundations
variables.css - Design tokens (colors, typography, spacing)
layout.css - Page structure (CSS Grid, containers, sections)
components.css - UI components (navigation, buttons, cards)

Why separate files?

Easier to maintain and debug
Clear separation of concerns
Can be minified/concatenated for production

🎨 Design System

Color Palette

Color Name	Hex Code	Usage
Aged Whiskey	`#A05A24`	Primary brand color
Burnt Umber	`#5A3A27`	Dark backgrounds, surfaces
Coal Black	`#0B0B0C`	Main background
Dried Blood Red	`#5B1A1A`	Accent/danger states
Iron Gray	`#3A3F45`	Borders, muted text
Tarnished Brass	`#8B7A43`	Links, metallic accents

Accessibility: All text/background combinations meet WCAG 2.1 AA contrast ratios (4.5:1 minimum).

Typography

Headings: Oswald (Bold, condensed, rock poster vibe)
Body Text: Merriweather (Readable serif, slightly weathered)
Base Size: 16px (1rem)
Scale: Responsive sizing via CSS variables (mobile → desktop)

Spacing System

All spacing uses an 8px base unit for visual consistency:

--space-xs: 0.5rem;   /* 8px  */
--space-sm: 1rem;     /* 16px */
--space-md: 1.5rem;   /* 24px */
--space-lg: 2rem;     /* 32px */
--space-xl: 3rem;     /* 48px */
--space-2xl: 4rem;    /* 64px */

💻 Local Development

Option 1: VS Code Live Server (Recommended)

Install the Live Server extension
Open the project folder in VS Code
Right-click index.html → Open with Live Server
Site opens at http://localhost:5500 with auto-reload

Option 2: Python Simple HTTP Server

# Python 3.x
cd /path/to/durtnurs.github.io
python3 -m http.server 8000

# Open browser to http://localhost:8000

Option 3: Any Static Server

Any static file server works since this is plain HTML/CSS:

Node.js: npx serve
PHP: php -S localhost:8000
nginx, Apache, etc.

✏️ How to Update Content

Update News/Announcements (Phase 3)

NEW: News is now managed via JSON for easy updates!

Open assets/data/announcements.json

Add a new announcement object to the announcements array:

{
  "id": "007",
  "date": "2024-12-05",
  "title": "Your Announcement Title",
  "category": "news",
  "excerpt": "Brief summary (120 characters max)",
  "content": "<p>Full announcement content with HTML tags.</p>",
  "link": {
    "url": "https://example.com",
    "text": "Optional Link Text"
  },
  "featured": false
}

Required fields: id, date (ISO format: YYYY-MM-DD), title, category, excerpt, content
Optional fields: link (object with url and text), featured (boolean)
Category options: news, release, show, general
Keep announcements in reverse chronological order (newest first)
Save and commit - changes appear immediately on the site!

Tips:

Keep excerpts under 120 characters
Content supports HTML: <p>, <strong>, <em>, <a>
Set featured: true for important announcements (adds star icon)

Update Releases/Discography (Phase 4)

NEW: Releases are now managed via JSON for easy updates!

Open assets/data/releases.json

Add a new release object to the releases array:

{
  "id": "release-your-album-2025",
  "title": "Your Album Title",
  "artist": "tHE dURT nURS'",
  "releaseDate": "2025-01-15",
  "type": "album",
  "coverArt": "assets/images/your-album-cover.png",
  "coverArtAlt": "Description of album cover for screen readers",
  "description": "Brief album description with the band's humor",
  "tracklist": [
    "Track 1 Name",
    "Track 2 Name",
    "Track 3 Name"
  ],
  "streamingLinks": {
    "spotify": "https://spotify.com/your-link",
    "apple": "https://music.apple.com/your-link",
    "bandcamp": "https://bandcamp.com/your-link"
  },
  "featured": false
}

Required fields: id, title, artist, releaseDate (ISO format: YYYY-MM-DD), type, coverArt, coverArtAlt, description
Optional fields: tracklist (array), streamingLinks (object), featured (boolean)
Type options: album, ep, single, live, compilation
Use # for streaming links that aren't ready yet (they won't display)
Set featured: true for your newest/primary release (gets special styling)
Keep releases in reverse chronological order (newest first) for best organization
Add album cover image to assets/images/ folder
Save and commit - changes appear immediately on the site!

Tips:

Album covers should be square (1:1 ratio), at least 600x600px
Use descriptive alt text for accessibility
Featured releases span 2 columns on desktop and have prominent styling
Type badges are color-coded automatically based on release type
Tracklists are collapsible - no JavaScript required!

Change Colors

Open assets/css/variables.css
Edit the :root color variables (lines 13-26)
Changes apply site-wide automatically

Update Featured Release on Homepage (Phase 7)

NEW: The featured release on the homepage is now dynamically loaded from releases.json!

To change which release is featured:

Open assets/data/releases.json
Find the current featured release (has "featured": true)
Change it to "featured": false
Find the new release you want to feature
Change it to "featured": true
Save and commit - the homepage updates automatically!

How it works:

The homepage automatically displays the release marked with "featured": true
If no release has the featured flag, it displays the most recent release by date
This creates a single source of truth - update the JSON once, changes appear everywhere
No need to edit HTML manually anymore!

Example:

{
  "id": "release-kraken-2024",
  "title": "Release the Kraken!",
  "featured": true  ← Set to true for homepage display
}

Swap Placeholder Images

Replace assets/images/logo.png with your actual logo
Replace assets/images/kraken-album.png with actual album art
Keep file names the same, or update references in index.html

Image recommendations:

Logo: PNG with transparent background, ~500px wide
Album cover: Square (1:1 ratio), at least 600x600px
Use compression (TinyPNG) for faster loading

Update Member Bios

Open about.html
Find the <section class="band-members"> block
Locate the member you want to update (DeadBeat or SnowMan)
Edit the .member-bio content within that member's card:

   <div class="member-bio">
     <p>Add your bio paragraphs here...</p>
     <p>You can add multiple paragraphs...</p>
   </div>

To replace placeholder images:
- Add new images to assets/images/
- Update the <img src=""> path in the member card
- Recommended: Square images (400x400px minimum)

Update Origin Story

Open about.html
Find <section class="origin-story">
Replace the .origin-placeholder paragraph with your actual story
Remove or update the .note paragraph

🚀 Deployment

GitHub Pages Setup

This site is hosted via GitHub Pages:

Repository Settings:
- Go to Settings → Pages
- Source: Deploy from main branch
- Folder: / (root)
Custom Domain (Cloudflare):
- Domain registered via GoDaddy: durtnurs.com
- DNS managed via Cloudflare
- CNAME record: durtnurs.com → cuwilliams.github.io
- CNAME file in repo root contains: durtnurs.com
SSL/HTTPS:
- Enforced via Cloudflare (Full SSL mode)
- GitHub Pages also provides HTTPS

Deployment Workflow

Changes pushed to main branch are automatically deployed:

# Make changes locally
git add .
git commit -m "Update news section"
git push origin main

# Site updates in ~1-2 minutes

🛠️ Technical Details

Browser Support

Last 2 versions: Chrome, Firefox, Safari, Edge
iOS Safari 12+
Android Chrome 80+

Performance

Target: <2 seconds load time on 3G
Optimizations:
- Minimal CSS (no frameworks)
- Inline critical CSS (future optimization)
- SVG placeholders (lightweight)
- System font fallbacks

Accessibility (WCAG 2.1 AA)

✅ Semantic HTML5 elements
✅ ARIA labels for navigation
✅ Keyboard navigation support
✅ Sufficient color contrast
✅ Focus visible states
✅ Screen reader friendly

CSS Methodology: BEM

This project uses BEM (Block Element Modifier) naming:

.block { }                  /* Component */
.block__element { }         /* Part of component */
.block__element--modifier { }  /* Variant */

Example:

.news-card { }              /* Block */
.news-card__title { }       /* Element */
.news-card__title--featured { }  /* Modifier */

Mobile Menu: CSS-Only

The navigation uses a checkbox hack (no JavaScript required):

Hidden checkbox: <input id="nav-toggle">
Label acts as button: <label for="nav-toggle">
CSS :checked pseudo-class toggles menu visibility
Hamburger animates to X using CSS transforms

🗺️ Roadmap

Phase 1 Complete ✅

[✅] Foundation & homepage
[✅] CSS architecture (BEM, variables, grid)
[✅] Mobile-first responsive design
[✅] CSS-only navigation

Phase 2 Complete ✅

[✅] About page with band bio
[✅] Member profile cards (DeadBeat, SnowMan)
[✅] Origin story placeholder

Phase 3 Complete ✅

Note: Originally planned as Phase 5, moved forward to establish content architecture early.

[✅] JSON data structure for announcements
[✅] JavaScript module for dynamic rendering
[✅] News archive page (news.html)
[✅] Dynamic homepage news loading
[✅] Progressive enhancement fallback
[✅] Category-based styling system

Phase 4 Complete ✅

Completed: December 3, 2024

[✅] Releases page (discography/albums)
[✅] JSON data structure for album/release information (releases.json)
[✅] JavaScript module for dynamic release rendering (releases.js)
[✅] Album card components with BEM methodology
[✅] Responsive album grid (1-3 columns based on viewport)
[✅] Featured release highlighting (spans 2 columns on desktop)
[✅] Collapsible tracklists using native <details> element
[✅] Type-specific badges (album, EP, single, live, compilation)
[✅] Streaming service links (placeholder structure ready)
[✅] Progressive enhancement with static fallback
[✅] Navigation updated across all pages

Features:

Scalable album grid layout with CSS Grid
JSON-based data structure for easy content management
Dynamic rendering via JavaScript with comprehensive error handling
Progressive enhancement (works without JavaScript)
Responsive design (mobile: 1 column, tablet: 2 columns, desktop: 3 columns)
Featured releases span 2 columns on desktop with horizontal layout
Collapsible tracklists (no JavaScript required - native HTML)
Type-specific color coding for different release types
Hover effects with smooth transitions
Semantic HTML5 with proper ARIA labels
Educational inline comments throughout codebase

Phase 5 Complete ✅

Completed: December 3, 2024

[✅] Gallery page with responsive photo/video grid
[✅] JSON data structure for gallery media (gallery.json)
[✅] JavaScript module for dynamic gallery rendering (gallery.js)
[✅] Custom lightbox implementation (no external libraries)
[✅] Keyboard navigation (ESC to close, arrow keys for prev/next)
[✅] Click-outside-to-close functionality
[✅] Contact page with mailto integration
[✅] Zoho email integration (biteme@durtnurs.com)
[✅] Band's characteristic humor in contact messaging
[✅] Progressive enhancement with static fallback
[✅] Navigation updated across all pages
[✅] Public/private flag system for Phase 6 Fan Club preparation
[✅] Gallery images directory structure
[✅] Responsive grid (1-4 columns based on viewport)
[✅] Video embed support in lightbox
[✅] Play icon overlay for video thumbnails
[✅] Image counter in lightbox (e.g., "3 / 8")

Features:

Gallery Page:
- Responsive CSS Grid layout (mobile: 1 column, tablet: 2, desktop: 3, large: 4)
- JSON-based data structure with public/private filtering
- Custom lightbox with full-size image/video viewing
- Keyboard navigation (ESC, Left Arrow, Right Arrow)
- Previous/Next buttons in lightbox
- Click outside lightbox to close
- Image counter showing position (e.g., "3 / 8")
- Video embeds (YouTube) with play icon overlay
- Featured media highlighting
- Progressive enhancement (works without JavaScript)
- Loading states and error handling
Contact Page:
- Prominent mailto: button (biteme@durtnurs.com)
- Band's characteristic gruff humor
- Multiple contact context categories
- Social media integration
- Humorous spam warning section
- Fully responsive design
- Accessible keyboard navigation
Technical:
- No external JavaScript libraries (lightbox built from scratch)
- Event delegation for performance
- Focus management (trapped in lightbox when open)
- Body scroll prevention when lightbox is open
- Semantic HTML5 with proper ARIA labels
- Comprehensive error handling
- Educational inline comments throughout
- Mobile-first responsive design

Phase 6 Complete ✅

Completed: December 3, 2024

[✅] Fan Club protected area (fanclub.html)
[✅] Client-side access code authentication
[✅] Session-based authentication using sessionStorage
[✅] Full gallery access (displays ALL media items)
[✅] Direct band member contact information
[✅] Member-exclusive content and messaging
[✅] Humorous error messages for incorrect access attempts
[✅] Search engine prevention (robots.txt + meta robots tags)
[✅] Responsive member contact cards
[✅] Protected navigation link with visual indicator
[✅] Exclusive content badges for Fan Club-only items
[✅] Comprehensive documentation (FANCLUB_ACCESS.md)
[✅] Progressive enhancement with noscript fallback
[✅] Focus management and accessibility compliance
[✅] Educational inline comments throughout codebase

Features:

Access Control:
- Client-side password protection (casual gatekeeping for friends)
- Access code: KRAKEN (references "Release the Kraken!" album)
- Session-based authentication (persists until browser closes)
- Case-insensitive, whitespace-trimmed code verification
- Unlimited retry attempts with humorous error messages
- Auto-focus on password input for immediate use
Full Gallery:
- Displays ALL media items from gallery.json (no public flag filtering)
- Includes Fan Club exclusive content (public: false items)
- Exclusive content badge on non-public items
- Same lightbox and card functionality as public gallery
- Visual indicators show which content is members-only
Direct Contact:
- Individual email cards for DeadBeat and SnowMan
- Direct mailto: links (deadbeat@durtnurs.com, snowman@durtnurs.com)
- Humorous member-specific messaging
- Responsive 2-column grid (mobile: 1 column, tablet+: 2 columns)
Security & Privacy:
- robots.txt Disallow directive for fanclub.html
- Meta robots noindex tag in HTML
- Prevents search engine indexing
- Client-side only (intentionally not secure - casual gatekeeping)
- Access code visible in JavaScript source (expected behavior)
Technical Architecture:
- Separate auth and gallery JavaScript modules
- Reuses existing gallery components and lightbox
- BEM methodology for all CSS components
- Full-page overlay with centered access prompt
- Hidden content until successful authentication
- Educational comments explaining security limitations

Security Disclaimer: The Fan Club access protection is intentionally simple client-side gatekeeping. It provides casual access control suitable for a private hobby band website among close friends. This is not production-grade security and should not be used for protecting sensitive information. The access code is visible in the JavaScript source code to anyone who looks - this is expected behavior. For real security needs, use server-side authentication or services like Cloudflare Access.

See FANCLUB_ACCESS.md for complete documentation on:

How to share the access code
How to change the access code
Managing approved fans list
Adding Fan Club exclusive content
Troubleshooting common issues

Phase 7 Complete ✅

Completed: December 5, 2024

[✅] Dynamic featured release integration on homepage
[✅] Single source of truth for release data
[✅] JavaScript module for featured release rendering (featured-release.js)
[✅] Progressive enhancement with noscript fallback
[✅] Loading and error state handling
[✅] Eliminated content duplication between homepage and releases page
[✅] Featured flag system in releases.json
[✅] Fallback to most recent release if no featured flag set
[✅] CSS utility classes for loading/error states
[✅] Educational inline comments throughout codebase

Features:

Dynamic Featured Release:
- Automatically fetches and displays release marked "featured": true in releases.json
- Fallback to most recent release by date if no featured flag exists
- Progressive enhancement (works without JavaScript via noscript fallback)
- Loading state shown while fetching data
- Error state with user-friendly message if loading fails
- Same album card styling as static version
- Streaming links automatically generated from JSON data
- "View All Releases" button included in featured section
Single Source of Truth:
- Homepage featured section now pulls from releases.json
- No content duplication between index.html and releases.json
- Update JSON once, changes appear on both homepage and releases page
- Easy to change featured release (flip the JSON flag)
- Maintainable: No hunting through HTML to update release info
Technical Implementation:
- Comprehensive featured-release.js module with educational comments
- Async/await pattern for data fetching
- Error handling with try/catch blocks
- DOM manipulation for dynamic content insertion
- State management (loading, error, success)
- Date formatting with Intl.DateTimeFormat API
- Defensive programming with null checks and fallbacks
- BEM methodology for CSS classes
- Utility classes added to components.css

Benefits:

Easy content management (one JSON file controls everything)
Scalable pattern applicable to other dynamic content
No HTML editing required to update featured release
Consistent with other dynamic modules (announcements, releases, gallery)
Progressive enhancement ensures site works for everyone
Educational code helps with learning modern JavaScript patterns

Phase 8 Complete ✅

Completed: December 5, 2024

[✅] Fan Club authentication enhancements
[✅] Escalating humorous error messages on failed login attempts
[✅] 3-attempt limit with "drunk redirect" to homepage
[✅] "Get Me Out of Here" exit button for graceful exit
[✅] 5-second countdown timer before redirect
[✅] Enhanced UX with proper state management
[✅] Improved CSS for error states and button layouts
[✅] Maintained accessibility with ARIA attributes
[✅] Comprehensive error handling and timer cleanup
[✅] Educational comments throughout explaining logic

Features:

Escalating Error Messages:
- Changed from random selection to sequential escalating messages
- 6 humorous messages that build in absurdity (gentle → pointed → desperate)
- Messages create narrative tension leading to "drunk redirect" punchline
- Example progression: "Nope. That ain't it." → "Did you listen to the album?" → "Last chance before we cut you off..."
3-Attempt Limit:
- In-memory attempt counter tracks failed login attempts
- After 3 failures, triggers "drunk redirect" feature
- Counter resets on successful login or page refresh
- User can return unlimited times (not a permanent ban)
Drunk Redirect:
- Humorous message: "Alright, you're obviously drunk. Go sober up and come back later."
- Real-time countdown display (5, 4, 3, 2, 1)
- Automatic redirect to homepage after 5 seconds
- Submit button disabled during countdown
- Pulsing animation on drunk message for visual emphasis
- Timer cleanup prevents memory leaks
Exit Button:
- "Get Me Out of Here" secondary button
- Direct link to homepage for graceful exit
- Grouped with Enter button in responsive container
- Stacked on mobile, horizontal on tablet+
- Keyboard accessible (Tab navigation)
Technical Implementation:
- CONFIG object with centralized settings (maxAttempts, redirectDelay, accessCode)
- State management with attemptCount and redirectTimer variables
- New functions: showErrorMessage(), handleDrunkRedirect(), clearInput()
- Enhanced clearError() to handle all message states
- Timer cleanup in handleFormSubmit() prevents race conditions
- CSS animations: @keyframes pulse for drunk message
- Responsive button layouts with flexbox
- Educational comments explaining escalation patterns and UX decisions

Benefits:

More engaging and on-brand user experience
Escalating humor maintains band's self-aware absurdist tone
Clear exit option improves UX (no browser back button required)
Playful consequence (drunk redirect) without being punitive
Better feedback loop for users (know what's happening at each step)
Accessible implementation with proper ARIA attributes
Scalable pattern for future authentication enhancements

Phase 9 Complete ✅

Completed: December 5, 2024

[✅] Privacy Policy page (privacy.html)
[✅] Terms of Service page (terms.html)
[✅] Satirical legal content with band's humor
[✅] Real legal concepts covered appropriately
[✅] Footer navigation updated across all 7 pages
[✅] Semantic HTML5 structure with educational comments
[✅] Responsive design matching existing site aesthetic
[✅] WCAG 2.1 AA accessibility compliance
[✅] No main navigation links (footer only)
[✅] Inline CSS for legal page layout
[✅] Iron Gray callout boxes for humorous asides

Features:

Privacy Policy Page:
- 60% jokes / 40% real concepts approach
- Covers cookies, data collection, third-party services, user rights
- Self-deprecating humor throughout ("we can barely collect our thoughts")
- GDPR compliance discussion (compliant by incompetence)
- Real legal topics: data security, children's privacy, contact information
- Humorous takes: third-party services = liquor store, judging cookie usage
- Proper privacy policy structure with 10 sections
- Educational comments explaining why certain content is included
Terms of Service Page:
- 60% jokes / 40% real concepts approach
- Crystal clear parody disclaimer in prominent warning banner
- Covers acceptance, intellectual property, limitation of liability
- User conduct rules with band's characteristic humor
- Indemnification ("you agree we're idiots")
- Dispute resolution via whiskey in SnowMan's shed
- Real legal concepts: severability, governing law, entire agreement
- Maximum liability: $0.00 USD (we're broke)
- 13 comprehensive sections following standard ToS structure
Footer Updates:
- Updated footer navigation on ALL 7 HTML pages
- Fixed Privacy link from #privacy to privacy.html
- Added Terms link to footer navigation
- Consistent footer structure site-wide
- Pages updated: index.html, about.html, news.html, releases.html, gallery.html, contact.html, fanclub.html
Design Consistency:
- Matches existing site color palette (Aged Whiskey, Coal Black, Iron Gray)
- Uses existing CSS files (reset, variables, layout, components)
- Oswald font for headings, Merriweather for body text
- Responsive design with same breakpoints as other pages
- Inline styles for legal page-specific layout (narrower 800px width)
- Callout boxes use Iron Gray background with Aged Whiskey border
- Proper semantic HTML with <article> and <section> tags
Content Balance:
- Heavy satire while covering legitimate legal concepts
- Makes it abundantly clear site/band is parody
- Self-deprecating humor maintains band voice
- Real information for users who care about privacy/terms
- Educational value for learning project
- Genuinely funny while being informative

Benefits:

Legal compliance while maintaining band's humor and brand
Users can understand privacy practices in entertaining way
Clear parody disclaimer protects artistic expression
Accessible to all users (WCAG 2.1 AA compliant)
Educational comments help with learning web development
Footer navigation improves site-wide UX
Professional presentation despite satirical content

Phase 10 Complete ✅

Completed: December 5, 2024

[✅] Announcement link empty states with humorous messages
[✅] Message page with URL parameter-based message selection
[✅] 7-second countdown timer with auto-redirect
[✅] "Get Me Out of Here" exit button for immediate return
[✅] Progressive enhancement with noscript fallback
[✅] Responsive design matching existing design system
[✅] WCAG 2.1 AA accessibility compliance
[✅] Educational inline comments throughout codebase
[✅] Link type mapping system in announcements.js
[✅] CSS components for message page layout

Features:

Humorous Dead-End Experience:
- All announcement card links now navigate to message.html with type parameters
- URL parameter system: message.html?type=read-more, ?type=pre-order, etc.
- 4 unique humorous messages based on link type:
  - read-more: "Well... there's really nothing more to add so... goodbye"
  - pre-order: "Yeah, as if. But feel free to send cash anyway"
  - tour-dates: "Call us. We'll come visit"
  - spotify: "Best to do what we do. Close your eyes and just imagine what it sounds like"
- Default fallback message for unknown types
- Messages maintain band's self-aware absurdist tone
Countdown Timer & Auto-Redirect:
- 7-second countdown timer displayed prominently
- Real-time countdown updates every second (7, 6, 5, 4, 3, 2, 1)
- Automatic redirect to news.html after timer expires
- Timer cleanup prevents memory leaks
- Uses setInterval for countdown management
- Clear visual feedback with highlighted countdown number
Exit Button:
- "Get Me Out of Here" button for immediate escape
- Styled to match Fan Club exit button pattern
- Large click target for mobile accessibility
- Hover/focus states with smooth transitions
- Keyboard accessible (Tab navigation)
- Stops timer on click to prevent redirect race conditions
Message Page Design:
- Full-page centered layout with flexbox
- Large prominent message text (1.75rem mobile → 2.5rem desktop)
- Aged Whiskey color (#A05A24) for message text
- Tarnished Brass color (#8B7A43) for countdown number
- Coal Black background (#0B0B0C)
- Responsive typography across all breakpoints
- Matches existing site aesthetic perfectly
Technical Implementation:
- New message.html page with semantic HTML structure
- New message.js module with comprehensive educational comments
- Updated announcements.js with getLinkTypeFromText() mapping function
- Updated news.html noscript section with correct links
- Added 217 lines of CSS to components.css for message page components
- URL parameter parsing with URLSearchParams API
- Progressive enhancement (works without JavaScript)
- Error handling for missing/invalid parameters
- BEM methodology for all CSS classes
- ARIA live regions for timer updates

Link Type Discovery:

Examined announcements.json to identify all unique link text values
Found 4 link types in use:
1. "Pre-order Album" (Release the Kraken announcement)
2. "View Tour Dates" (Fall tour announcement)
3. "Listen on Spotify" (Brass Knuckles single announcement)
4. "Read More →" (default for announcements without specific links)
Created mapping system that converts link text to URL parameters
Smart matching with normalized text comparison (lowercase, trimmed)
Extensible pattern for future link types

Progressive Enhancement:

Page works without JavaScript via noscript fallback
Noscript message explains JavaScript is required for "full comedic timing"
Back to News button provided in noscript state
Timer hidden when JavaScript is disabled
Maintains accessibility for all users
Graceful degradation approach

Benefits:

Transforms non-functioning links into delightful user experiences
Maintains band's self-aware absurdist humor throughout
Provides clear user agency with exit button
7-second timer creates anticipation and comedic timing
Single source page (message.html) reduces maintenance overhead
URL parameters provide flexibility for future link types
Educational code helps with learning modern JavaScript patterns
Accessible implementation (WCAG 2.1 AA compliant)
No external dependencies or libraries required
Scalable pattern for future similar features

Phase 11 (Future)

Mailing list integration
Merch store

Future Enhancements

Category filtering on news archive
Dark/light mode toggle
Lazy loading images
Service worker (offline support)
Animations (Intersection Observer)
Sound effects for Fan Club errors/success
Visual shake animation on error
"Hall of shame" for repeated failures

📝 Notes for Developers

Code Quality Standards

✅ HTML validates (W3C Validator)
✅ CSS validates (CSS Validator)
✅ 2-space indentation
✅ BEM naming convention
✅ Comments explain "why" not "what"

Learning Resources

If you're new to these technologies:

CSS Grid: CSS Tricks Guide
Flexbox: CSS Tricks Guide
BEM Methodology: BEM Documentation
Accessibility: WebAIM Resources

Testing Checklist

Before deploying major changes:

Test on Chrome, Firefox, Safari
Test on mobile device (real or DevTools)
Check all breakpoints (mobile, tablet, desktop)
Validate HTML/CSS
Test keyboard navigation (Tab key)
Check color contrast ratios
Run Lighthouse audit in Chrome DevTools

🤘 Contributing

This is a personal band website, but if you spot bugs or have suggestions:

Open an issue on GitHub
Or email: deadbeat@durtnurs.com

📄 License

Built with grit, aged whiskey, and questionable decisions.

Release the Kraken! 🐙

Name		Name	Last commit message	Last commit date
Latest commit History 94 Commits
assets		assets
.gitignore		.gitignore
CNAME		CNAME
FANCLUB_ACCESS.md		FANCLUB_ACCESS.md
README.md		README.md
about.html		about.html
contact.html		contact.html
fanclub.html		fanclub.html
gallery.html		gallery.html
index.html		index.html
message.html		message.html
news.html		news.html
privacy.html		privacy.html
releases.html		releases.html
robots.txt		robots.txt
sitemap.xml		sitemap.xml
terms.html		terms.html

CuWilliams/durtnurs.github.io

Folders and files

Latest commit

History

Repository files navigation

tHE dURT nURS' Official Website

📋 Table of Contents

🎸 Project Overview

Design Philosophy

Current Status: Phase 10 Complete ✅

📁 File Structure

CSS Architecture

🎨 Design System

Color Palette

Typography

Spacing System

💻 Local Development

Option 1: VS Code Live Server (Recommended)

Option 2: Python Simple HTTP Server

Option 3: Any Static Server

✏️ How to Update Content

Update News/Announcements (Phase 3)

Update Releases/Discography (Phase 4)

Change Colors

Update Featured Release on Homepage (Phase 7)

Swap Placeholder Images

Update Member Bios

Update Origin Story

🚀 Deployment

GitHub Pages Setup

Deployment Workflow

🛠️ Technical Details

Browser Support

Performance

Accessibility (WCAG 2.1 AA)

CSS Methodology: BEM

Mobile Menu: CSS-Only

🗺️ Roadmap

Phase 1 Complete ✅

Phase 2 Complete ✅

Phase 3 Complete ✅

Phase 4 Complete ✅

Phase 5 Complete ✅

Phase 6 Complete ✅

Phase 7 Complete ✅

Phase 8 Complete ✅

Phase 9 Complete ✅

Phase 10 Complete ✅

Phase 11 (Future)

Future Enhancements

📝 Notes for Developers

Code Quality Standards

Learning Resources

Testing Checklist

🤘 Contributing

📄 License

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Contributors 2

Uh oh!

Languages

Packages