GridMan/index.html at main · jp-knj/GridMan · 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
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid Man</title>
    <link href="https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <header class="header">
        <div>
            <h1 class="header__title">GRIDMAN</h1>
            <p>カンタンにGridのコードを生成しよう！<a href="https://github.com/kenji-0801/GridMan">@Github</a></p>
        </div>

        <div class="header__author">
            <p>By Kenji <a href="https://twitter.com/ignorant_kenji">@ignorant_kenji</a></p>
        </div>
    </header>

    <div class="wrapper">
        <aside class="sidebar">
            <form class="form" action="submit">
                <div class="form__inner">
                    <div class="form__item">
                        <label class="label" for="itemWidth">最小のItem幅</label>
                        <input class="input" type="number" step="25" id="itemWidth" placeholder="e.g: 200px" value="200" pattern="\d*">
                    </div>

                    <div class="form__item grid--2">
                        <div>
                            <label class="label" for="gridColGap">列のGap幅</label>
                            <input class="input" type="number" min="0" step="4" id="gridColGap" placeholder="e.g: 10px">
                        </div>

                        <div>
                            <label class="label" for="gridRowGap">行のGap幅</label>
                            <input class="input" type="number" min="0" step="4" id="gridRowGap" placeholder="e.g: 10px">
                        </div>
                    </div>

                    <div class="form__item" style="margin-bottom: 32px;">
                        <input class="" type="checkbox" id="unifyGap" checked>
                        <label class="" for="unifyGap">行と列のGap幅を等しくします</label>
                    </div>

                    <div style="position: relative;">
                        <h2>Flex Breakpoints</h2>
                        <button id="addBreakpoint" class="add-breakpoint">Breakpointを追加しよう</button>

                        <div class="flex-breakpoints">
                            <div class="flex-breakpoints-list">
                            </div>
                        </div>
                    </div>

                    <hr style="margin-bottom: 20px;">

                    <button id="generateCSS" class="button" disabled>SCSSのコードを生成しよう！</button>
                </div>
            </form>
        </aside>
        <main class="main">
            <pre id="gridCodePreview">
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                grid-gap: 16px;
            </pre>
            <div class="js-grid">
                <div class="js-grid-item"></div>
                <div class="js-grid-item"></div>
                <div class="js-grid-item"></div>
                <div class="js-grid-item"></div>
                <div class="js-grid-item"></div>
                <div class="js-grid-item"></div>
                <div class="js-grid-item"></div>
                <div class="js-grid-item"></div>
                <div class="js-grid-item"></div>
            </div>
        </main>
    </div>

    <div id="resultModal" class="modal">
        <div id="modalBody" class="modal__content">
            <button id="close" class="modal__close" aria-label="Close Modal">
                <svg width="100pt" height="100pt" viewBox="0 0 100 100">
                    <path d="M55.891 50l17.68 17.676c1.6289 1.6289 1.6289 4.2656 0 5.8945-1.6289 1.6289-4.2656 1.6289-5.8945 0l-17.676-17.68-17.676 17.68c-1.6289 1.6289-4.2656 1.6289-5.8945 0-1.6289-1.6289-1.6289-4.2656 0-5.8945L44.11 50 26.43 32.324c-1.6289-1.6289-1.6289-4.2656 0-5.8945 1.6289-1.6289 4.2656-1.6289 5.8945 0l17.676 17.68 17.676-17.68c1.6289-1.6289 4.2656-1.6289 5.8945 0 1.6289 1.6289 1.6289 4.2656 0 5.8945z" fill-rule="evenodd"/>
                </svg>
            </button>
            <button id="copyCSS" class="button button--with-icon">
                <svg viewBox="0 0 46 46">
                    <path d="M42 0H11C8.8 0 7 1.8 7 4v3H4c-2.2 0-4 1.8-4 4v31c0 2.2 1.8 4 4 4h31c2.2 0 4-1.8 4-4v-3h3c2.2 0 4-1.8 4-4V4c0-2.2-1.8-4-4-4zm-7 42H4V11h3v24c0 2.2 1.8 4 4 4h24v3zm-24-7V4h31v31H11z"/>
                </svg>
                コピーする
            </button>
            <pre></pre>
            <textarea id="resultCode"></textarea>
        </div>
    </div>

    <script src="js/main2.js"></script>
</body>
</html>