working companion prototype
This commit is contained in:
113
resources/mock-fixtures/README.md
Normal file
113
resources/mock-fixtures/README.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# Mock HTML Fixtures
|
||||
|
||||
Simplified HTML fixtures for E2E testing of the iRacing hosted session automation workflow.
|
||||
|
||||
## Purpose
|
||||
|
||||
These fixtures replace full-page iRacing dumps with lightweight, testable HTML pages that simulate the iRacing hosted session wizard. They are designed for use with the `FixtureServer` to test browser automation adapters in isolation.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Step | Description |
|
||||
|------|------|-------------|
|
||||
| `step-02-hosted-racing.html` | 2 | Landing page with "Create a Race" button |
|
||||
| `step-03-create-race.html` | 3 | Race Information - session name, password, description |
|
||||
| `step-04-race-information.html` | 4 | Server Details - region, start time |
|
||||
| `step-05-server-details.html` | 5 | Set Admins - admin list management |
|
||||
| `step-06-set-admins.html` | 7 | Time Limits - practice, qualify, race durations |
|
||||
| `step-07-add-admin.html` | 6 | Add Admin Modal - search and select admin |
|
||||
| `step-08-time-limits.html` | 8 | Set Cars - car list management |
|
||||
| `step-09-set-cars.html` | 10 | Set Car Classes - multi-class configuration |
|
||||
| `step-10-add-car.html` | 9 | Add Car Modal - search and select cars |
|
||||
| `step-11-set-car-classes.html` | 11 | Set Track - track selection |
|
||||
| `step-12-set-track.html` | 13 | Track Options - configuration, dynamic track |
|
||||
| `step-13-add-track.html` | 12 | Add Track Modal - search and select track |
|
||||
| `step-14-track-options.html` | 14 | Time of Day - time slider, date, simulated time |
|
||||
| `step-15-time-of-day.html` | 15 | Weather - type, temperature, humidity |
|
||||
| `step-16-weather.html` | 16 | Race Options - max drivers, start type, cautions |
|
||||
| `step-17-race-options.html` | 17 | Team Driving - enable teams, min/max drivers |
|
||||
| `step-18-track-conditions.html` | 18 | Track Conditions - track state, marbles, rubber |
|
||||
| `common.css` | - | Shared styles for all fixtures |
|
||||
|
||||
## Data Attributes
|
||||
|
||||
All fixtures use consistent `data-*` attributes for reliable automation:
|
||||
|
||||
### Navigation
|
||||
- `data-action="create"` - Create a Race button (step 2)
|
||||
- `data-action="next"` - Next step button
|
||||
- `data-action="back"` - Previous step button
|
||||
- `data-action="confirm"` - Confirm modal action
|
||||
- `data-action="cancel"` - Cancel modal action
|
||||
- `data-action="select"` - Select item from list
|
||||
|
||||
### Step Identification
|
||||
- `data-step="N"` - Step number on body element
|
||||
- `data-indicator="name"` - Step indicator element
|
||||
|
||||
### Form Fields
|
||||
- `data-field="name"` - Text/number inputs and textareas
|
||||
- `data-dropdown="name"` - Select dropdowns
|
||||
- `data-toggle="name"` - Checkbox toggles
|
||||
- `data-slider="name"` - Range slider inputs
|
||||
|
||||
### Modals
|
||||
- `data-modal="true"` - Modal container (on body)
|
||||
- `data-modal-trigger="type"` - Button that opens a modal
|
||||
|
||||
### Lists
|
||||
- `data-list="name"` - List container
|
||||
- `data-item="id"` - Selectable list item
|
||||
|
||||
## Usage with FixtureServer
|
||||
|
||||
```typescript
|
||||
import { FixtureServer } from '@infrastructure/adapters/automation/FixtureServer';
|
||||
|
||||
const server = new FixtureServer({ fixturesPath: 'resources/mock-fixtures' });
|
||||
await server.start();
|
||||
|
||||
// Navigate to step 2
|
||||
await page.goto(`${server.baseUrl}/step-02-hosted-racing.html`);
|
||||
|
||||
// Use data attributes for automation
|
||||
await page.click('[data-action="create"]');
|
||||
await page.fill('[data-field="sessionName"]', 'My Race');
|
||||
await page.click('[data-action="next"]');
|
||||
```
|
||||
|
||||
## Selector Strategy
|
||||
|
||||
Use attribute selectors for reliable automation:
|
||||
|
||||
```typescript
|
||||
const SELECTORS = {
|
||||
stepContainer: (step: number) => `[data-step="${step}"]`,
|
||||
nextButton: '[data-action="next"]',
|
||||
backButton: '[data-action="back"]',
|
||||
field: (name: string) => `[data-field="${name}"]`,
|
||||
dropdown: (name: string) => `[data-dropdown="${name}"]`,
|
||||
toggle: (name: string) => `[data-toggle="${name}"]`,
|
||||
slider: (name: string) => `[data-slider="${name}"]`,
|
||||
modal: '[data-modal="true"]',
|
||||
modalTrigger: (type: string) => `[data-modal-trigger="${type}"]`,
|
||||
};
|
||||
```
|
||||
|
||||
## Design Principles
|
||||
|
||||
1. **Explicit Test Attributes**: Every interactive element has stable `data-*` attributes
|
||||
2. **Minimal HTML**: Only essential structure, no framework artifacts
|
||||
3. **Self-Contained**: Each fixture includes shared CSS via `common.css`
|
||||
4. **Navigation-Aware**: Buttons link to appropriate next/previous fixtures
|
||||
5. **Form Fields Match Domain**: Field names align with `HostedSessionConfig` entity
|
||||
|
||||
## Testing Verification
|
||||
|
||||
For each fixture, verify:
|
||||
- [ ] `data-step` attribute present on body
|
||||
- [ ] `data-indicator` present for step identification
|
||||
- [ ] All navigation buttons have `data-action`
|
||||
- [ ] All form fields have appropriate `data-*` attributes
|
||||
- [ ] Modal fixtures have `data-modal="true"`
|
||||
- [ ] Navigation links point to correct fixtures
|
||||
354
resources/mock-fixtures/common.css
Normal file
354
resources/mock-fixtures/common.css
Normal file
@@ -0,0 +1,354 @@
|
||||
/* Common styles for mock fixtures */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
|
||||
background: #1a1a2e;
|
||||
color: #eee;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #16213e;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #0f3460;
|
||||
}
|
||||
|
||||
.step-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.step-indicator .current {
|
||||
color: #e94560;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
padding: 32px 24px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #aaa;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-label.required::after {
|
||||
content: " *";
|
||||
color: #e94560;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: #16213e;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 4px;
|
||||
color: #eee;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
border-color: #e94560;
|
||||
}
|
||||
|
||||
textarea.form-input {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #16213e;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #0f3460;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #e94560;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #ff6b6b;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: #aaa;
|
||||
border: 1px solid #0f3460;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #0f3460;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
/* Toggle/Checkbox styles */
|
||||
.toggle-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.toggle-input {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 14px;
|
||||
color: #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Slider styles */
|
||||
.slider-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.slider-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.slider-label {
|
||||
font-size: 14px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.slider-value {
|
||||
font-size: 14px;
|
||||
color: #e94560;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.slider-input {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #0f3460;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.slider-input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #e94560;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* List styles */
|
||||
.list-container {
|
||||
background: #16213e;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 4px;
|
||||
min-height: 120px;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.list-empty {
|
||||
color: #666;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
background: #1a1a2e;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: #0f3460;
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list-item.selected {
|
||||
border: 2px solid #e94560;
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #1a1a2e;
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #0f3460;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #0f3460;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #0f3460;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Search input */
|
||||
.search-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: #16213e;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 4px;
|
||||
color: #eee;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #e94560;
|
||||
}
|
||||
|
||||
/* Grid layout for cars/tracks */
|
||||
.grid-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
padding: 16px;
|
||||
background: #16213e;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.grid-item:hover {
|
||||
border-color: #e94560;
|
||||
}
|
||||
|
||||
.grid-item.selected {
|
||||
border-color: #e94560;
|
||||
background: #0f3460;
|
||||
}
|
||||
|
||||
/* Center layout for landing page */
|
||||
.center-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 16px 48px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Display field (read-only) */
|
||||
.display-field {
|
||||
padding: 12px 16px;
|
||||
background: #0f3460;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 4px;
|
||||
color: #aaa;
|
||||
font-size: 16px;
|
||||
}
|
||||
37
resources/mock-fixtures/step-02-hosted-racing.html
Normal file
37
resources/mock-fixtures/step-02-hosted-racing.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Hosted Racing</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="2">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="hosted-racing">
|
||||
<span>Step</span>
|
||||
<span class="current">2</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Hosted Racing</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="center-content">
|
||||
<h1 class="hero-title">Hosted Racing</h1>
|
||||
<p class="hero-subtitle">Create and manage your own racing sessions</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-large"
|
||||
data-action="create"
|
||||
onclick="window.location.href='step-03-create-race.html'"
|
||||
>
|
||||
Create a Race
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
80
resources/mock-fixtures/step-03-create-race.html
Normal file
80
resources/mock-fixtures/step-03-create-race.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Race Information</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="3">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="race-information">
|
||||
<span>Step</span>
|
||||
<span class="current">3</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Race Information</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Race Information</h1>
|
||||
|
||||
<form id="race-info-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label required" for="sessionName">Session Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="sessionName"
|
||||
class="form-input"
|
||||
data-field="sessionName"
|
||||
placeholder="Enter session name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
class="form-input"
|
||||
data-field="password"
|
||||
placeholder="Optional password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
class="form-input"
|
||||
data-field="description"
|
||||
placeholder="Optional session description"
|
||||
></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-02-hosted-racing.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-04-race-information.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
73
resources/mock-fixtures/step-04-race-information.html
Normal file
73
resources/mock-fixtures/step-04-race-information.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Server Details</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="4">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="server-details">
|
||||
<span>Step</span>
|
||||
<span class="current">4</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Server Details</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Server Details</h1>
|
||||
|
||||
<form id="server-details-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="region">Server Region</label>
|
||||
<select
|
||||
id="region"
|
||||
class="form-select"
|
||||
data-dropdown="region"
|
||||
>
|
||||
<option value="us-east">US East</option>
|
||||
<option value="us-west">US West</option>
|
||||
<option value="eu-central">EU Central</option>
|
||||
<option value="eu-west">EU West</option>
|
||||
<option value="asia">Asia</option>
|
||||
<option value="oceania">Oceania</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="startNow"
|
||||
class="toggle-input"
|
||||
data-toggle="startNow"
|
||||
/>
|
||||
<label class="toggle-label" for="startNow">Start session immediately</label>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-03-create-race.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-05-server-details.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
60
resources/mock-fixtures/step-05-server-details.html
Normal file
60
resources/mock-fixtures/step-05-server-details.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Set Admins</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="5">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="set-admins">
|
||||
<span>Step</span>
|
||||
<span class="current">5</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Set Admins</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Set Admins</h1>
|
||||
|
||||
<p style="color: #888; margin-bottom: 16px;">Add administrators who can manage this session.</p>
|
||||
|
||||
<div class="list-container" data-list="admins">
|
||||
<div class="list-empty">No admins added yet</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-modal-trigger="admin"
|
||||
onclick="window.location.href='step-07-add-admin.html'"
|
||||
>
|
||||
Add Admin
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-04-race-information.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-06-set-admins.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
102
resources/mock-fixtures/step-06-set-admins.html
Normal file
102
resources/mock-fixtures/step-06-set-admins.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Time Limits</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="7">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="time-limits">
|
||||
<span>Step</span>
|
||||
<span class="current">7</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Time Limits</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Time Limits</h1>
|
||||
|
||||
<form id="time-limits-form">
|
||||
<div class="slider-group">
|
||||
<div class="slider-header">
|
||||
<span class="slider-label">Practice Length</span>
|
||||
<span class="slider-value">15 min</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
class="slider-input"
|
||||
data-slider="practice"
|
||||
min="0"
|
||||
max="120"
|
||||
value="15"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="slider-group">
|
||||
<div class="slider-header">
|
||||
<span class="slider-label">Qualify Length</span>
|
||||
<span class="slider-value">10 min</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
class="slider-input"
|
||||
data-slider="qualify"
|
||||
min="0"
|
||||
max="60"
|
||||
value="10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="slider-group">
|
||||
<div class="slider-header">
|
||||
<span class="slider-label">Race Length</span>
|
||||
<span class="slider-value">20 laps</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
class="slider-input"
|
||||
data-slider="race"
|
||||
min="1"
|
||||
max="500"
|
||||
value="20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="unlimitedTime"
|
||||
class="toggle-input"
|
||||
data-toggle="unlimitedTime"
|
||||
/>
|
||||
<label class="toggle-label" for="unlimitedTime">Unlimited time</label>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-05-server-details.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-08-time-limits.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
65
resources/mock-fixtures/step-07-add-admin.html
Normal file
65
resources/mock-fixtures/step-07-add-admin.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Add Admin</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="6" data-modal="true">
|
||||
|
||||
<div class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<header class="modal-header">
|
||||
<h2 class="modal-title" data-indicator="add-admin">Add an Admin</h2>
|
||||
</header>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="search-group">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
data-field="adminSearch"
|
||||
placeholder="Search for admin by name..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="list-container" data-list="adminResults">
|
||||
<div class="list-item" data-item="admin-001">
|
||||
<span>John Smith</span>
|
||||
<button type="button" class="btn btn-secondary" data-action="select">Select</button>
|
||||
</div>
|
||||
<div class="list-item" data-item="admin-002">
|
||||
<span>Jane Doe</span>
|
||||
<button type="button" class="btn btn-secondary" data-action="select">Select</button>
|
||||
</div>
|
||||
<div class="list-item" data-item="admin-003">
|
||||
<span>Bob Wilson</span>
|
||||
<button type="button" class="btn btn-secondary" data-action="select">Select</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="cancel"
|
||||
onclick="window.location.href='step-05-server-details.html'"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="confirm"
|
||||
onclick="window.location.href='step-05-server-details.html'"
|
||||
>
|
||||
Add Selected
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
60
resources/mock-fixtures/step-08-time-limits.html
Normal file
60
resources/mock-fixtures/step-08-time-limits.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Set Cars</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="8">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="set-cars">
|
||||
<span>Step</span>
|
||||
<span class="current">8</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Set Cars</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Set Cars</h1>
|
||||
|
||||
<p style="color: #888; margin-bottom: 16px;">Select the cars available for this session.</p>
|
||||
|
||||
<div class="list-container" data-list="cars">
|
||||
<div class="list-empty">No cars selected yet</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-modal-trigger="car"
|
||||
onclick="window.location.href='step-10-add-car.html'"
|
||||
>
|
||||
Add Car
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-06-set-admins.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-09-set-cars.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
68
resources/mock-fixtures/step-09-set-cars.html
Normal file
68
resources/mock-fixtures/step-09-set-cars.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Set Car Classes</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="10">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="car-classes">
|
||||
<span>Step</span>
|
||||
<span class="current">10</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Set Car Classes</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Set Car Classes</h1>
|
||||
|
||||
<p style="color: #888; margin-bottom: 16px;">Configure multi-class race settings.</p>
|
||||
|
||||
<form id="car-classes-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="carClass">Car Class</label>
|
||||
<select
|
||||
id="carClass"
|
||||
class="form-select"
|
||||
data-dropdown="carClass"
|
||||
>
|
||||
<option value="gt3">GT3</option>
|
||||
<option value="gt4">GT4</option>
|
||||
<option value="lmp2">LMP2</option>
|
||||
<option value="lmp3">LMP3</option>
|
||||
<option value="prototype">Prototype</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="list-container" data-list="classAssignments">
|
||||
<div class="list-empty">No class assignments yet</div>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-08-time-limits.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-11-set-car-classes.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
69
resources/mock-fixtures/step-10-add-car.html
Normal file
69
resources/mock-fixtures/step-10-add-car.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Add Car</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="9" data-modal="true">
|
||||
|
||||
<div class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<header class="modal-header">
|
||||
<h2 class="modal-title" data-indicator="add-car">Add a Car</h2>
|
||||
</header>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="search-group">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
data-field="carSearch"
|
||||
placeholder="Search for cars..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid-list" data-list="carResults">
|
||||
<div class="grid-item" data-item="car-001">
|
||||
<strong>Porsche 911 GT3 R</strong>
|
||||
<span style="color: #888; font-size: 12px;">GT3</span>
|
||||
</div>
|
||||
<div class="grid-item" data-item="car-002">
|
||||
<strong>Ferrari 488 GT3</strong>
|
||||
<span style="color: #888; font-size: 12px;">GT3</span>
|
||||
</div>
|
||||
<div class="grid-item" data-item="car-003">
|
||||
<strong>BMW M4 GT3</strong>
|
||||
<span style="color: #888; font-size: 12px;">GT3</span>
|
||||
</div>
|
||||
<div class="grid-item" data-item="car-004">
|
||||
<strong>Mercedes AMG GT3</strong>
|
||||
<span style="color: #888; font-size: 12px;">GT3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="cancel"
|
||||
onclick="window.location.href='step-08-time-limits.html'"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="confirm"
|
||||
onclick="window.location.href='step-08-time-limits.html'"
|
||||
>
|
||||
Add Selected
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
61
resources/mock-fixtures/step-11-set-car-classes.html
Normal file
61
resources/mock-fixtures/step-11-set-car-classes.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Set Track</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="11">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="set-track">
|
||||
<span>Step</span>
|
||||
<span class="current">11</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Set Track</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Set Track</h1>
|
||||
|
||||
<p style="color: #888; margin-bottom: 16px;">Select the track for this session.</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Selected Track</label>
|
||||
<div class="display-field" data-field="selectedTrack">No track selected</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-modal-trigger="track"
|
||||
onclick="window.location.href='step-13-add-track.html'"
|
||||
>
|
||||
Select Track
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-09-set-cars.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-12-set-track.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
71
resources/mock-fixtures/step-12-set-track.html
Normal file
71
resources/mock-fixtures/step-12-set-track.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Track Options</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="13">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="track-options">
|
||||
<span>Step</span>
|
||||
<span class="current">13</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Track Options</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Track Options</h1>
|
||||
|
||||
<form id="track-options-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="trackConfig">Track Configuration</label>
|
||||
<select
|
||||
id="trackConfig"
|
||||
class="form-select"
|
||||
data-dropdown="trackConfig"
|
||||
>
|
||||
<option value="full">Full Course</option>
|
||||
<option value="short">Short Course</option>
|
||||
<option value="oval">Oval</option>
|
||||
<option value="rallycross">Rallycross</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="dynamicTrack"
|
||||
class="toggle-input"
|
||||
data-toggle="dynamicTrack"
|
||||
/>
|
||||
<label class="toggle-label" for="dynamicTrack">Dynamic track</label>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-11-set-car-classes.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-14-track-options.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
69
resources/mock-fixtures/step-13-add-track.html
Normal file
69
resources/mock-fixtures/step-13-add-track.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Add Track</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="12" data-modal="true">
|
||||
|
||||
<div class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<header class="modal-header">
|
||||
<h2 class="modal-title" data-indicator="add-track">Add a Track</h2>
|
||||
</header>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="search-group">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
data-field="trackSearch"
|
||||
placeholder="Search for tracks..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid-list" data-list="trackResults">
|
||||
<div class="grid-item" data-item="track-001">
|
||||
<strong>Spa-Francorchamps</strong>
|
||||
<span style="color: #888; font-size: 12px;">Belgium</span>
|
||||
</div>
|
||||
<div class="grid-item" data-item="track-002">
|
||||
<strong>Nürburgring</strong>
|
||||
<span style="color: #888; font-size: 12px;">Germany</span>
|
||||
</div>
|
||||
<div class="grid-item" data-item="track-003">
|
||||
<strong>Daytona International</strong>
|
||||
<span style="color: #888; font-size: 12px;">USA</span>
|
||||
</div>
|
||||
<div class="grid-item" data-item="track-004">
|
||||
<strong>Suzuka Circuit</strong>
|
||||
<span style="color: #888; font-size: 12px;">Japan</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="cancel"
|
||||
onclick="window.location.href='step-11-set-car-classes.html'"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="confirm"
|
||||
onclick="window.location.href='step-11-set-car-classes.html'"
|
||||
>
|
||||
Select
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
82
resources/mock-fixtures/step-14-track-options.html
Normal file
82
resources/mock-fixtures/step-14-track-options.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Time of Day</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="14">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="time-of-day">
|
||||
<span>Step</span>
|
||||
<span class="current">14</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Time of Day</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Time of Day</h1>
|
||||
|
||||
<form id="time-of-day-form">
|
||||
<div class="slider-group">
|
||||
<div class="slider-header">
|
||||
<span class="slider-label">Time of Day</span>
|
||||
<span class="slider-value">12:00</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
class="slider-input"
|
||||
data-slider="timeOfDay"
|
||||
min="0"
|
||||
max="24"
|
||||
value="12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="raceDate">Race Date</label>
|
||||
<input
|
||||
type="date"
|
||||
id="raceDate"
|
||||
class="form-input"
|
||||
data-field="raceDate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="simulatedTime"
|
||||
class="toggle-input"
|
||||
data-toggle="simulatedTime"
|
||||
/>
|
||||
<label class="toggle-label" for="simulatedTime">Simulated time progression</label>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-12-set-track.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-15-time-of-day.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
101
resources/mock-fixtures/step-15-time-of-day.html
Normal file
101
resources/mock-fixtures/step-15-time-of-day.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Weather</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="15">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="weather">
|
||||
<span>Step</span>
|
||||
<span class="current">15</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Weather</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Weather</h1>
|
||||
|
||||
<form id="weather-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="weatherType">Weather Type</label>
|
||||
<select
|
||||
id="weatherType"
|
||||
class="form-select"
|
||||
data-dropdown="weatherType"
|
||||
>
|
||||
<option value="clear">Clear</option>
|
||||
<option value="partly-cloudy">Partly Cloudy</option>
|
||||
<option value="mostly-cloudy">Mostly Cloudy</option>
|
||||
<option value="overcast">Overcast</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="slider-group">
|
||||
<div class="slider-header">
|
||||
<span class="slider-label">Temperature</span>
|
||||
<span class="slider-value">20°C</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
class="slider-input"
|
||||
data-slider="temperature"
|
||||
min="-10"
|
||||
max="45"
|
||||
value="20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="slider-group">
|
||||
<div class="slider-header">
|
||||
<span class="slider-label">Humidity</span>
|
||||
<span class="slider-value">50%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
class="slider-input"
|
||||
data-slider="humidity"
|
||||
min="0"
|
||||
max="100"
|
||||
value="50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="dynamicWeather"
|
||||
class="toggle-input"
|
||||
data-toggle="dynamicWeather"
|
||||
/>
|
||||
<label class="toggle-label" for="dynamicWeather">Dynamic weather</label>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-14-track-options.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-16-weather.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
90
resources/mock-fixtures/step-16-weather.html
Normal file
90
resources/mock-fixtures/step-16-weather.html
Normal file
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Race Options</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="16">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="race-options">
|
||||
<span>Step</span>
|
||||
<span class="current">16</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Race Options</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Race Options</h1>
|
||||
|
||||
<form id="race-options-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="maxDrivers">Maximum Drivers</label>
|
||||
<input
|
||||
type="number"
|
||||
id="maxDrivers"
|
||||
class="form-input"
|
||||
data-field="maxDrivers"
|
||||
value="32"
|
||||
min="1"
|
||||
max="60"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="rollingStart"
|
||||
class="toggle-input"
|
||||
data-toggle="rollingStart"
|
||||
/>
|
||||
<label class="toggle-label" for="rollingStart">Rolling start</label>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="fullCourseCautions"
|
||||
class="toggle-input"
|
||||
data-toggle="fullCourseCautions"
|
||||
/>
|
||||
<label class="toggle-label" for="fullCourseCautions">Full course cautions</label>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="fastRepairs"
|
||||
class="toggle-input"
|
||||
data-toggle="fastRepairs"
|
||||
/>
|
||||
<label class="toggle-label" for="fastRepairs">Fast repairs</label>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-15-time-of-day.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-17-race-options.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
83
resources/mock-fixtures/step-17-race-options.html
Normal file
83
resources/mock-fixtures/step-17-race-options.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Team Driving</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="17">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="team-driving">
|
||||
<span>Step</span>
|
||||
<span class="current">17</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Team Driving</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Team Driving</h1>
|
||||
|
||||
<form id="team-driving-form">
|
||||
<div class="toggle-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="teamDriving"
|
||||
class="toggle-input"
|
||||
data-toggle="teamDriving"
|
||||
/>
|
||||
<label class="toggle-label" for="teamDriving">Enable team driving</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="minDrivers">Min Drivers per Team</label>
|
||||
<input
|
||||
type="number"
|
||||
id="minDrivers"
|
||||
class="form-input"
|
||||
data-field="minDrivers"
|
||||
value="1"
|
||||
min="1"
|
||||
max="16"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="maxDriversTeam">Max Drivers per Team</label>
|
||||
<input
|
||||
type="number"
|
||||
id="maxDriversTeam"
|
||||
class="form-input"
|
||||
data-field="maxDrivers"
|
||||
value="4"
|
||||
min="1"
|
||||
max="16"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-16-weather.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-action="next"
|
||||
onclick="window.location.href='step-18-track-conditions.html'"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
85
resources/mock-fixtures/step-18-track-conditions.html
Normal file
85
resources/mock-fixtures/step-18-track-conditions.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iRacing - Track Conditions</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
</head>
|
||||
<body data-step="18">
|
||||
|
||||
<header class="header">
|
||||
<div class="step-indicator" data-indicator="track-conditions">
|
||||
<span>Step</span>
|
||||
<span class="current">18</span>
|
||||
<span>of 18</span>
|
||||
<span>—</span>
|
||||
<span>Track Conditions</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">Track Conditions</h1>
|
||||
|
||||
<form id="track-conditions-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="trackState">Track State</label>
|
||||
<select
|
||||
id="trackState"
|
||||
class="form-select"
|
||||
data-dropdown="trackState"
|
||||
>
|
||||
<option value="auto-generated">Auto-generated</option>
|
||||
<option value="clean">Clean</option>
|
||||
<option value="low-rubber">Low Rubber</option>
|
||||
<option value="medium-rubber">Medium Rubber</option>
|
||||
<option value="high-rubber">High Rubber</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="marbles"
|
||||
class="toggle-input"
|
||||
data-toggle="marbles"
|
||||
/>
|
||||
<label class="toggle-label" for="marbles">Marbles simulation</label>
|
||||
</div>
|
||||
|
||||
<div class="slider-group">
|
||||
<div class="slider-header">
|
||||
<span class="slider-label">Rubber Level</span>
|
||||
<span class="slider-value">50%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
class="slider-input"
|
||||
data-slider="rubberLevel"
|
||||
min="0"
|
||||
max="100"
|
||||
value="50"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div style="background: #0f3460; border-radius: 4px; padding: 16px; margin-top: 24px;">
|
||||
<p style="color: #e94560; font-weight: bold; margin-bottom: 8px;">⚠️ Final Step</p>
|
||||
<p style="color: #888; font-size: 14px;">Review your settings before creating the session. No submit button - automation stops here for manual review.</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-action="back"
|
||||
onclick="window.location.href='step-17-race-options.html'"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<!-- No Next/Submit button on final step - automation stops here for manual review -->
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user