# Goondex HTML/CSS Templates Guide **For Frontend Developers - HTML/CSS Focus** This guide provides complete, ready-to-use HTML templates with Bootstrap styling. All JavaScript is included as simple copy-paste snippets with detailed comments. ## Getting Started All you need to know: 1. Copy the HTML template you need 2. The JavaScript is already included in ` ``` --- ## Performer Import Form **File: `import-performer.html`** Simple form to search and import performers from TPDB. ```html Import Performer - Goondex

Import Performer

Search for a performer by name. All matching results from TPDB will be imported.

``` --- ## Bulk Import with Progress **File: `bulk-import.html`** Import all performers with a real-time progress bar. ```html Bulk Import - Goondex

Bulk Import Performers

Import all performers from your database. This will fetch full metadata from TPDB.

``` --- ## Simple Data Display **File: `performers-list.html`** Display a list of performers from the database. ```html Performers - Goondex

All Performers

Loading performers...

``` --- ## Bootstrap Component Reference Quick reference for Bootstrap 5 components to use in your pages. ### Buttons ```html ``` ### Alerts ```html
Success! Your action was successful.
Error! Something went wrong.
Warning! Please be careful.
Info: Here's some information.
Success message
``` ### Cards ```html
...
Card Title

Card description goes here.

Go somewhere
Featured
Special title

Card content

``` ### Forms ```html
``` ### Progress Bars ```html
50%
``` ### Spinners ```html ``` ### Lists ```html
Clickable item Active item
``` ### Grid System ```html
Column 1
Column 2
Column 3
Column 4
Left column
Right column
Sidebar
Main content
``` --- ## CSS Tips ### Spacing Utilities ```html
Margin on all sides
Margin top
Margin bottom
Margin left and right
Margin top and bottom
Padding on all sides
Padding top
Padding bottom
Padding left and right
Padding top and bottom
``` ### Text Utilities ```html
Left aligned
Center aligned
Right aligned

Primary text

Success text

Danger text

Muted text

Bold text

Normal text

Light text

Very large

Medium

``` ### Display Utilities ```html
Hidden
Shown as block
Inline block
Flexbox container
Hidden on mobile, shown on tablet+
``` --- ## Quick JavaScript Snippets ### Show/Hide Elements ```javascript // Hide element document.getElementById('myElement').style.display = 'none'; // Show element document.getElementById('myElement').style.display = 'block'; // Toggle visibility const el = document.getElementById('myElement'); el.style.display = el.style.display === 'none' ? 'block' : 'none'; ``` ### Change Text Content ```javascript document.getElementById('myElement').textContent = 'New text'; document.getElementById('myElement').innerHTML = 'HTML text'; ``` ### Add/Remove CSS Classes ```javascript // Add class document.getElementById('myElement').classList.add('active'); // Remove class document.getElementById('myElement').classList.remove('active'); // Toggle class document.getElementById('myElement').classList.toggle('active'); ``` ### Get Form Values ```javascript const inputValue = document.getElementById('myInput').value; const selectValue = document.getElementById('mySelect').value; ``` --- ## Need Help? All the JavaScript in these templates is ready to use - just copy and paste! If you need to customize something: 1. Look for comments in the JavaScript (`// like this`) 2. The `API_BASE` constant at the top controls the server URL 3. Use AI assistance to modify the JavaScript parts 4. Focus on the HTML/CSS which you're already great at! The templates are fully functional and follow Bootstrap best practices.