HTML-JavaScript-Gaming/_page_template_v2.html at main · ToolboxAid/HTML-JavaScript-Gaming · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Template V2 - Game Foundry Studio</title>
  <meta name="description" content="Theme V2 production content page template.">
  <link rel="icon" href="/favicon.svg">
  <link rel="stylesheet" href="assets/theme-v2/css/theme.css">
</head>

<body>
  <div data-partial="header-nav"></div>
  <main>
    <section class="page-title">
      <div class="container">
        <div class="kicker">Page Category</div>
        <h1>Page Title</h1>
        <p class="lede">Production-ready page purpose and visitor outcome.</p>
      </div>
    </section>

    <section class="section">
      <div class="container page-hero">
        <img src="assets/theme-v2/images/image-missing.svg" alt="Page hero placeholder">
        <div>
          <h2>Primary page message.</h2>
          <p class="lede">A concise production page summary that supports the headline.</p>
          <a class="btn primary" href="#template-content">Primary Link</a>
        </div>
      </div>
    </section>

    <section class="section" id="template-content">
      <div class="container">
        <div class="surface">
          <div class="surface-header">
            <div class="kicker">Overview</div>
            <h2>Page section heading</h2>
          </div>
          <div class="surface-body">
            <div class="grid cols-3">
              <article class="callout">
                <h2>Purpose</h2>
                <p>Describe the page responsibility.</p>
              </article>
              <article class="callout">
                <h2>Status</h2>
                <p>Summarize current availability or lifecycle state.</p>
              </article>
              <article class="callout">
                <h2>Next Step</h2>
                <p>Route users to the next approved action.</p>
              </article>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="accordion-group">
          <details class="vertical-accordion" open>
            <summary>Details</summary>
            <div class="accordion-body">
              <form aria-label="Template page form">
                <div class="field-group">
                  <label for="template-page-title">Title</label>
                  <input id="template-page-title" name="template-page-title" type="text" value="Page Draft">
                  <p class="field-hint">Use Theme V2 form structure for settings and filters.</p>
                </div>
              </form>
            </div>
          </details>
          <details class="vertical-accordion">
            <summary>Status</summary>
            <div class="accordion-body">
              <div class="feedback">
                <strong class="feedback-title">Ready</strong>
                <p class="feedback-message">This page template uses shared Theme V2 chrome and components.</p>
              </div>
            </div>
          </details>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="table-wrapper">
          <table class="data-table">
            <caption>Page metadata summary</caption>
            <thead>
              <tr>
                <th>Field</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Template Type</td>
                <td>Theme V2 Page</td>
              </tr>
              <tr>
                <td>Chrome</td>
                <td>Shared partials</td>
              </tr>
            </tbody>
          </table>
        </div>
        <dialog aria-labelledby="template-page-dialog-title">
          <div class="surface">
            <div class="surface-header">
              <h2 id="template-page-dialog-title">Dialog Title</h2>
            </div>
            <div class="surface-body">
              <p>Dialog content uses Theme V2 dialog ownership when implemented.</p>
            </div>
          </div>
        </dialog>
      </div>
    </section>
  </main>
  <div data-partial="footer"></div>
  <script src="assets/theme-v2/js/gamefoundry-partials.js" defer></script>
</body>

</html>