Skip to content

Commit db880c0

Browse files
ToolboxAidToolboxAid
committed
Polish GameFoundryStudio About footer layout and admin controls rows - PR_26152_014-about-footer-controls-polish
1 parent c2f2920 commit db880c0

5 files changed

Lines changed: 199 additions & 44 deletions

File tree

‎GameFoundryStudio/about.html‎

Lines changed: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,56 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>About - Game Foundry Studio</title>
8-
<meta name="description" content="Game Foundry Studio: Build. Play. Share.">
8+
<meta name="description" content="Game Foundry Studio: creator tools, playable games, marketplace assets, tutorials, cloud saves and community discovery.">
99
<link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml">
1010
<link rel="stylesheet" href="assets/css/styles.css">
1111
</head>
1212

1313
<body>
1414
<div data-partial="header-nav"></div>
1515
<main>
16-
<section class="page-title">
17-
<div class="container">
18-
<div class="kicker">About</div>
19-
<h1>A creator platform for browser games.</h1>
20-
<p class="lede">Game Foundry Studio is positioned as a place to build games, play community creations,
21-
share assets, learn and publish.</p>
16+
<section class="about-hero">
17+
<div class="container about-hero__content">
18+
<div class="kicker">About Game Foundry Studio</div>
19+
<h1>Build the game. Ship the world. Bring the players.</h1>
20+
<p class="lede">Game Foundry Studio is a creator destination for the open web: creator tools, playable
21+
games, marketplace assets, tutorials, cloud saves and community discovery in one foundry-bright
22+
workspace.</p>
2223
</div>
2324
</section>
2425
<section class="section">
25-
<div class="container page-hero"><img src="assets/images/magic-panel.png"
26-
alt="Where the magic happens">
27-
<div>
28-
<h2>The vision</h2>
29-
<p class="lede">A Roblox-style destination for the open web: creator tools, playable games,
30-
marketplace assets, tutorials, cloud saves and community discovery.</p>
26+
<div class="container grid cols-3">
27+
<article class="card">
28+
<div class="card-body">
29+
<h2>Create</h2>
30+
<p>Forge sprites, sounds, scenes, input maps and prototypes with web-native tools built for fast
31+
iteration.</p>
32+
</div>
33+
</article>
34+
<article class="card">
35+
<div class="card-body">
36+
<h2>Play</h2>
37+
<p>Discover playable experiments, arcade releases and creator showcases without leaving the
38+
browser.</p>
39+
</div>
40+
</article>
41+
<article class="card">
42+
<div class="card-body">
43+
<h2>Share</h2>
44+
<p>Package assets, publish updates, learn from tutorials and grow a community around every
45+
finished build.</p>
46+
</div>
47+
</article>
48+
</div>
49+
</section>
50+
<section class="section">
51+
<div class="container card">
52+
<div class="card-body">
53+
<div class="kicker">Open-web game studio</div>
54+
<h2>A creator playground with production instincts.</h2>
55+
<p class="lede">The direction is simple: make the browser feel like a living game foundry. Tools,
56+
games, tutorials, marketplace assets, saves and discovery should feel connected, energetic and
57+
ready for creators who want to move from idea to playable world without ceremony.</p>
3158
</div>
3259
</div>
3360
</section>

‎GameFoundryStudio/admin/controls.html‎

Lines changed: 50 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ <h2>Planned Sections</h2>
7676
<div class="kicker">HTML controls</div>
7777
<h2>Everyday controls with branded side colors.</h2>
7878
</div>
79-
<div class="field">
79+
<div class="control-row control-row--toolbar">
8080
<label for="control-theme">Preview grouping</label>
8181
<select id="control-theme" data-controls-theme-select>
8282
<option value="tool-group-build-create">Build &amp; Create</option>
@@ -94,53 +94,76 @@ <h2>Everyday controls with branded side colors.</h2>
9494
<article class="control-card side-orange">
9595
<h3>Text Inputs</h3>
9696
<p>Names, slugs, paths, labels, and short values.</p>
97-
<div class="control-demo"><label for="text-name">Text</label><input id="text-name" type="text"
98-
value="King of the Iceberg"><label for="search">Search</label><input id="search"
99-
type="search" placeholder="Search tools"></div>
97+
<div class="control-demo">
98+
<div class="control-row"><label for="text-name">Text Input - Text - textbox</label><input
99+
id="text-name" type="text" value="King of the Iceberg"></div>
100+
<div class="control-row"><label for="search">Text Input - Search - textbox</label><input
101+
id="search" type="search" placeholder="Search tools"></div>
102+
</div>
100103
</article>
101104
<article class="control-card side-cyan">
102105
<h3>Identity Inputs</h3>
103106
<p>Account forms and creator profile fields.</p>
104-
<div class="control-demo"><label for="email">Email</label><input id="email" type="email"
105-
value="creator@example.com"><label for="password">Password</label><input id="password"
106-
type="password" value="foundry"></div>
107+
<div class="control-demo">
108+
<div class="control-row"><label for="email">Identity Input - Email - textbox</label><input
109+
id="email" type="email" value="creator@example.com"></div>
110+
<div class="control-row"><label for="password">Identity Input - Password - textbox</label><input
111+
id="password" type="password" value="foundry"></div>
112+
</div>
107113
</article>
108114
<article class="control-card side-gold">
109115
<h3>Numeric Inputs</h3>
110116
<p>Stats, limits, sizes, scores, prices, and settings.</p>
111-
<div class="control-demo"><label for="number">Number</label><input id="number" type="number"
112-
value="100" min="0" max="999"><label for="range">Range</label><input id="range"
113-
type="range" min="0" max="100" value="68"></div>
117+
<div class="control-demo">
118+
<div class="control-row"><label for="number">Numeric Input - Number - textbox</label><input
119+
id="number" type="number" value="100" min="0" max="999"></div>
120+
<div class="control-row"><label for="range">Numeric Input - Range - slider</label><input
121+
id="range" type="range" min="0" max="100" value="68"></div>
122+
</div>
114123
</article>
115124
<article class="control-card side-green">
116125
<h3>Choices</h3>
117126
<p>Modes, visibility, platforms, and feature flags.</p>
118-
<div class="control-demo"><label class="choice"><input type="checkbox" checked> Public
119-
project</label><label class="choice"><input type="checkbox"> Allow
120-
remixing</label><label class="choice"><input name="mode" type="radio" checked>
121-
Arcade</label><label class="choice"><input name="mode" type="radio"> Studio</label>
127+
<div class="control-demo">
128+
<div class="control-row control-row--choice"><span class="control-row__label">Choice -
129+
Public project - Checkbox</span><label class="choice"><input type="checkbox"
130+
checked> Public project</label></div>
131+
<div class="control-row control-row--choice"><span class="control-row__label">Choice -
132+
Allow remixing - Checkbox</span><label class="choice"><input type="checkbox"> Allow
133+
remixing</label></div>
134+
<div class="control-row control-row--choice"><span class="control-row__label">Choice -
135+
Arcade - Radio</span><label class="choice"><input name="mode" type="radio" checked>
136+
Arcade</label></div>
137+
<div class="control-row control-row--choice"><span class="control-row__label">Choice -
138+
Studio - Radio</span><label class="choice"><input name="mode" type="radio">
139+
Studio</label></div>
122140
</div>
123141
</article>
124142
<article class="control-card side-pink">
125143
<h3>Switches</h3>
126144
<p>On/off controls for tool preferences and game options.</p>
127-
<div class="inline-row"><label class="switch"><input type="checkbox" checked><span
128-
class="slider"></span></label><span class="choice">Auto-save enabled</span></div>
145+
<div class="control-demo">
146+
<div class="control-row"><span class="control-row__label">Switch - Auto-save -
147+
Checkbox</span><label class="switch"><input type="checkbox" checked><span
148+
class="slider"></span></label></div>
149+
</div>
129150
</article>
130151
<article class="control-card side-blue">
131152
<h3>Selects</h3>
132153
<p>Single-choice dropdowns for theme, engine mode, and tool role.</p>
133-
<div class="control-demo"><label for="select">Select</label><select id="select"
134-
data-controls-theme-select>
135-
<option value="tool-group-build-create">Build &amp; Create</option>
136-
<option value="tool-group-content-assets">Content &amp; Assets</option>
137-
<option value="tool-group-media-audio">Media &amp; Audio</option>
138-
<option value="tool-group-ai-learning">AI &amp; Learning</option>
139-
<option value="tool-group-platform-cloud">Platform &amp; Cloud</option>
140-
<option value="tool-group-development-system">Development &amp; System</option>
141-
<option value="tool-group-community-marketplace">Community &amp; Marketplace</option>
142-
<option value="tool-group-play">Play</option>
143-
</select></div>
154+
<div class="control-demo">
155+
<div class="control-row"><label for="select">Select Input - Grouping</label><select
156+
id="select" data-controls-theme-select>
157+
<option value="tool-group-build-create">Build &amp; Create</option>
158+
<option value="tool-group-content-assets">Content &amp; Assets</option>
159+
<option value="tool-group-media-audio">Media &amp; Audio</option>
160+
<option value="tool-group-ai-learning">AI &amp; Learning</option>
161+
<option value="tool-group-platform-cloud">Platform &amp; Cloud</option>
162+
<option value="tool-group-development-system">Development &amp; System</option>
163+
<option value="tool-group-community-marketplace">Community &amp; Marketplace</option>
164+
<option value="tool-group-play">Play</option>
165+
</select></div>
166+
</div>
144167
</article>
145168
</div>
146169
</div>

‎GameFoundryStudio/assets/css/gamefoundrystudio.css‎

Lines changed: 61 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,26 @@
297297
color: var(--muted)
298298
}
299299

300+
.about-hero {
301+
min-height: 520px;
302+
display: flex;
303+
align-items: end;
304+
padding: 78px 0 54px;
305+
border-bottom: 1px solid var(--line);
306+
background:
307+
linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 42%, color-mix(in srgb, var(--bg) 38%, transparent) 100%),
308+
url("../images/forge-bot.png") right center / min(50vw, 620px) auto no-repeat;
309+
}
310+
311+
.about-hero__content {
312+
max-width: 760px
313+
}
314+
315+
.about-hero h1 {
316+
max-width: 720px;
317+
margin-bottom: 18px
318+
}
319+
300320
.footer {
301321
margin-top: 46px;
302322
border-top: 1px solid var(--line);
@@ -306,7 +326,7 @@
306326

307327
.footer__inner {
308328
display: grid;
309-
grid-template-columns: minmax(180px, .75fr) minmax(0, 2.25fr);
329+
grid-template-columns: minmax(160px, .55fr) minmax(0, 2.45fr) max-content;
310330
gap: 24px;
311331
align-items: start;
312332
position: relative
@@ -321,7 +341,7 @@
321341

322342
.footer__groups {
323343
display: grid;
324-
grid-template-columns: repeat(3, minmax(140px, 1fr));
344+
grid-template-columns: repeat(6, minmax(110px, 1fr));
325345
gap: 20px
326346
}
327347

@@ -354,6 +374,11 @@
354374
color: var(--gold)
355375
}
356376

377+
.footer__tagline {
378+
justify-self: end;
379+
white-space: nowrap
380+
}
381+
357382
.field {
358383
display: flex;
359384
flex-direction: column;
@@ -397,6 +422,24 @@
397422
gap: 12px
398423
}
399424

425+
.control-row {
426+
display: grid;
427+
grid-template-columns: minmax(126px, .8fr) minmax(0, 1.2fr);
428+
gap: 12px;
429+
align-items: center
430+
}
431+
432+
.control-row>label,
433+
.control-row__label {
434+
margin: 0;
435+
color: var(--muted);
436+
font-weight: 800
437+
}
438+
439+
.control-row--toolbar {
440+
min-width: min(100%, 360px)
441+
}
442+
400443
.button-row,
401444
.inline-row {
402445
display: flex;
@@ -1074,7 +1117,11 @@ body.tool-focus-mode .tool-column:last-of-type {
10741117
}
10751118

10761119
.footer__groups {
1077-
grid-template-columns: repeat(2, minmax(130px, 1fr))
1120+
grid-template-columns: repeat(3, minmax(130px, 1fr))
1121+
}
1122+
1123+
.footer__tagline {
1124+
justify-self: start
10781125
}
10791126

10801127
.tool-workspace {
@@ -1137,6 +1184,17 @@ body.tool-focus-mode .tool-column:last-of-type {
11371184
grid-template-columns: 1fr
11381185
}
11391186

1187+
.about-hero {
1188+
min-height: 460px;
1189+
background:
1190+
linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 100%),
1191+
url("../images/forge-bot.png") center bottom / 340px auto no-repeat;
1192+
}
1193+
1194+
.control-row {
1195+
grid-template-columns: 1fr
1196+
}
1197+
11401198
.sub-menu {
11411199
position: static;
11421200
opacity: 1;

‎GameFoundryStudio/assets/partials/footer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<div class="container footer__inner">
33
<div class="footer__brand">
44
<span>&copy; 2026 Game Foundry Studio</span>
5-
<span>Build &middot; Play &middot; Share</span>
65
</div>
76
<nav class="footer__groups" aria-label="Footer navigation">
87
<section class="footer__group" aria-labelledby="footer-product">
@@ -58,6 +57,7 @@ <h2 id="footer-company">Company</h2>
5857
</div>
5958
</section>
6059
</nav>
60+
<div class="footer__tagline" aria-label="Game Foundry Studio motto">Build &middot; Play &middot; Share</div>
6161
<button class="return-to-top" type="button" data-return-to-top aria-label="Return to top" title="Return to top">
6262
<span aria-hidden="true">^</span>
6363
</button>

‎docs/dev/reports/gamefoundrystudio_about_footer_controls_validation.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# GameFoundryStudio About, Footer, and Controls Polish Validation
2+
3+
Task: PR_26152_014-about-footer-controls-polish
4+
5+
## Scope
6+
7+
- Product changes were limited to `GameFoundryStudio/about.html`, `GameFoundryStudio/assets/partials/footer.html`, `GameFoundryStudio/assets/css/gamefoundrystudio.css`, and `GameFoundryStudio/admin/controls.html`.
8+
- Required report artifacts were written under `docs/dev`.
9+
- No functionality was added.
10+
- No inline style/script/event handlers were added.
11+
- No tests outside `GameFoundryStudio` were run.
12+
13+
## Commands Run
14+
15+
- `node --check GameFoundryStudio\assets\js\gamefoundry-partials.js`
16+
- Result: Passed.
17+
- `node --check GameFoundryStudio\assets\js\account-controls.js`
18+
- Result: Passed.
19+
- `git diff --check -- GameFoundryStudio\about.html GameFoundryStudio\assets\css\gamefoundrystudio.css GameFoundryStudio\assets\partials\footer.html GameFoundryStudio\admin\controls.html`
20+
- Result: Passed.
21+
- Note: Git reported line-ending conversion warnings only.
22+
- GameFoundryStudio about/footer/controls static validation with Node:
23+
- Checked changed HTML for no inline `style`, no inline `<style>`, no inline event handlers, and no inline scripts.
24+
- Checked About copy, no other-company references, no stale `magic-panel.png` reference, external CSS `forge-bot.png` background reference, footer six-group structure, footer right-side tagline, and controls `control-row` markup.
25+
- Checked `magic-panel.png` references no longer 404 by confirming no remaining `magic-panel.png` references in GameFoundryStudio HTML/CSS/JS.
26+
- Result: Passed, 36 checks.
27+
- GameFoundryStudio about/footer/controls UI validation with Playwright and a local static server:
28+
- Checked About renders with `forge-bot.png` background and updated GameFoundryStudio copy.
29+
- Checked no `magic-panel.png` image reference renders and no `magic-panel.png` 404 occurs.
30+
- Checked footer renders six grouping columns and the `Build · Play · Share` tagline appears to the right of the groupings.
31+
- Checked Admin Controls renders the requested `Numeric Input - Number - textbox` pattern.
32+
- Checked controls label/input pairs align on one row at desktop width.
33+
- Checked the existing external controls script still updates the preview grouping.
34+
- Result: Passed, 18 checks.
35+
- Follow-up footer tagline validation:
36+
- `git diff --check -- GameFoundryStudio\assets\css\gamefoundrystudio.css GameFoundryStudio\assets\partials\footer.html`
37+
- Result: Passed.
38+
- Static check confirmed `.footer__tagline` no longer overrides footer/copyright color, font size, or font weight.
39+
- Result: Passed.
40+
- Playwright check confirmed `Build · Play · Share` matches the copyright text's computed color, font family, font weight, and font size.
41+
- Result: Passed.
42+
43+
## Skipped
44+
45+
- Repo-wide tests were not run.
46+
- Tests outside `GameFoundryStudio` were not run.
47+
- Full samples smoke test was not run.

0 commit comments

Comments
 (0)