tools/tool.html.template at main · mathspp/tools · 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
132
133
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><!-- Replace with tool title --></title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            max-width: 960px;
            margin: 0 auto;
            padding: 24px 20px 48px;
        }

        .page-header {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .site-link {
            font-weight: 600;
            color: var(--foreground-subtle);
            text-decoration: none;
        }

        .site-link:hover,
        .site-link:focus-visible {
            color: var(--foreground);
        }

        main {
            display: grid;
            gap: 1.5rem;
        }

        .tool-card {
            padding: clamp(1.25rem, 3vw, 2rem);
        }

        .tool-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        @media (max-width: 720px) {
            body {
                padding: 20px 16px 40px;
            }
        }
    </style>
</head>

<body>
    <header class="page-header">
        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
        <h1><!-- Tool name --></h1>
        <p class="lead"><!-- Short description of what the tool does. --></p>
    </header>

    <main>
        <section class="surface tool-card">
            <!-- Primary inputs and controls go here. -->
            <form>
                <div class="form-group">
                    <label for="input-field">Example field</label>
                    <input id="input-field" name="input-field" type="text" placeholder="Enter something">
                </div>

                <div class="tool-actions">
                    <button type="submit">Run</button>
                    <button type="reset">Reset</button>
                </div>
            </form>
        </section>

        <section class="surface tool-card" aria-live="polite">
            <h2>Results</h2>
            <p class="lead">Output appears here after running the tool.</p>
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>Column</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Example</td>
                            <td>Example value</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </main>

    <script>
        (function () {
            const form = document.querySelector('form');
            const resultTableBody = document.querySelector('tbody');

            form.addEventListener('submit', event => {
                event.preventDefault();
                const value = new FormData(form).get('input-field');
                resultTableBody.innerHTML = `
                    <tr>
                        <td>Input</td>
                        <td>${value || '—'}</td>
                    </tr>
                `;
            });

            form.addEventListener('reset', () => {
                resultTableBody.innerHTML = `
                    <tr>
                        <td>Example</td>
                        <td>Example value</td>
                    </tr>
                `;
            });
        })();
    </script>

    <footer class="page-footer">
        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
    </footer>
</body>

</html>