-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
dev.html
162 lines (149 loc) · 7.41 KB
/
dev.html
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
---
permalink: /dev
---
<!DOCTYPE html>
<html>
<head>
<title>Theme Customiser Developer Mode</title>
<link rel="stylesheet" href="./assets/common.css" type="text/css">
<link rel="stylesheet" href="./assets/customiser.css" type="text/css">
<link rel="stylesheet" href="./assets/dev.css" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/6dbb1e5ab5.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" href="./assets/favicon_16.png" sizes="16x16">
<link rel="icon" type="image/png" href="./assets/favicon_32.png" sizes="32x32">
<link rel="icon" type="image/png" href="./assets/favicon_128.png" sizes="128x128">
<link rel="icon" type="image/png" href="./assets/favicon_256.png" sizes="256x256">
</head>
<body>
<main class="content customiser" id="js-content">
<div class="topbar">
<div class="topbar__section">
<nav class="top-nav">
<a href="./" class="top-nav__link" id="js-back">
<div class="top-nav__link-inner">
<i class="top-nav__icon fa fa-arrow-left"></i>
<span class="top-nav__text">Exit</span>
</div>
</a>
<a class="top-nav__link js-tutorial-update" onclick="toggleEle('#js-pp-update-json')">
<div class="top-nav__link-inner">
<i class="top-nav__icon fa-solid fa-wrench"></i>
<span class="top-nav__text">Update Json</span>
</div>
</a>
<a class="top-nav__link js-tutorial-tools" onclick="toggleEle('#js-pp-format-text')">
<div class="top-nav__link-inner">
<i class="top-nav__icon fa-solid fa-wrench"></i>
<span class="top-nav__text">Format Text</span>
</div>
</a>
<a class="top-nav__link js-tutorial-docs" href="https://github.com/ValerioLyndon/Theme-Customiser/wiki" target="_blank">
<div class="top-nav__link-inner">
<i class="top-nav__icon fa-solid fa-book"></i>
<span class="top-nav__text">Documentation</span>
</div>
</a>
</nav>
</div>
<div class="topbar__section o-hidden">
<div class="top-nav">
<a class="top-nav__link">
<div class="top-nav__link-inner">
<i class="top-nav__icon fa-solid fa-arrow-rotate-right"></i>
<span class="top-nav__text">Reload Preview</span>
</div>
</a>
</div>
</div>
</div>
<div class="preview">
<div class="rounds rounds--left"></div>
<div class="preview__window-wrapper" id="js-preview"></div>
</div>
<div class="sidebar" style="--sidebar-width: clamp(350px, 500px, 40vw);" id="js-sidebar">
<div class="sidebar__inner">
<div class="rounds rounds--right"></div>
<div class="sidebar__section sidebar__section--top">
<h1 class="title o-clear">Create JSON</h1>
<h2 class="sub-title">Validate & test your Customiser JSON files.</h2>
</div>
<div class="sidebar__section sidebar__section--no-border" id="js-json">
<button type="button" class="button button--highlighted" id="js-render">
Refresh Preview
</button>
<button type="button" class="button" onclick="resetEditor()">
Reset Editor
</button>
<label class="toggle-with-text">
<input id="js-auto-render" type="checkbox" class="o-hidden" checked="checked">
<label class="toggle" for="js-auto-render"></label>
<span class="toggle-with-text__text">Auto Refresh</span>
</label>
<p class="info-box info-box--indented info-box--error o-hidden" id="js-json-notice"></p>
</div>
</div>
</div>
</main>
<noscript>
<div class="loading-screen">
<div class="loading-screen__cross"></div>
<div class="loading-screen__item loading-screen__title" id="js-loader-text">Unable to load.</div>
<div class="loading-screen__item loading-screen__description" id="js-loader-subtext">JavaScript must be enabled.</div>
<a class="loading-screen__item hyperlink" href="https://valeriolyndon.github.io/Theme-Customiser/">Project page.</a>
</div>
</noscript>
<div class="popup is-hidden" id="js-pp-update-json">
<div class="popup__inner">
<div class="popup__invisibutton" onclick="toggleEle('#js-pp-update-json')"></div>
<div class="popup__content popup__content--wide" id="js-theme-config">
<h4 class="popup__header">Update JSON</h4>
<p class="popup-paragraph">
Place your JSON into the left text field and click to update it. The output will be placed in the right text field for easy copying. While this tool does check for valid JSON, it will not provide detailed reports. For detailed validation, use the main JSON editor.
</p>
<div class="l-split">
<div class="l-split__left">
<h6 class="popup__sub-header">Input</h6>
<textarea id="js-update-json__in" class="input input--textarea-tall" autocomplete="off" autocorrect="off" spellcheck="false"></textarea>
<button type="button" class="button button--highlighted" onclick="updatePopupJson()">Update JSON</button>
</div>
<div class="l-split__right">
<h6 class="popup__sub-header">Output</h6>
<textarea id="js-update-json__out" class="input input--textarea-tall" readonly="readonly"></textarea>
<button type="button" class="button button--highlighted" onclick="navigator.clipboard.writeText(document.getElementById('js-update-json__out').value);">Copy Output</button>
</div>
</div>
</div>
</div>
</div>
<div class="popup is-hidden" id="js-pp-format-text">
<div class="popup__inner">
<div class="popup__invisibutton" onclick="toggleEle('#js-pp-format-text')"></div>
<div class="popup__content popup__content--wide" id="js-theme-config">
<h4 class="popup__header">Format text for use in JSON</h4>
<p class="popup-paragraph">
Formatting text for use with JSON can be kind of a pain, so this tool can do it for you. This should work for all text such as CSS, Regular Expressions, and anything else. Regular text goes on the left, encoded text goes on the right.
</p>
<div class="l-split">
<div class="l-split__left">
<h6 class="popup__sub-header">Raw</h6>
<textarea id="js-format-text__in" class="input input--textarea-tall" autocomplete="off" autocorrect="off" spellcheck="false" placeholder="Regular text can be encoded from here."></textarea>
<button type="button" class="button button--highlighted" onclick="encodeJson()">Encode Raw</button>
<button type="button" class="button button--highlighted" onclick="navigator.clipboard.writeText(document.getElementById('js-format-text__in').value);">Copy</button>
</div>
<div class="l-split__right">
<h6 class="popup__sub-header">Formatted</h6>
<textarea id="js-format-text__out" class="input input--textarea-tall" placeholder="Formatted text can be decoded from here."></textarea>
<button type="button" class="button button--highlighted" onclick="decodeJson()">Decode Formatted</button>
<button type="button" class="button button--highlighted" onclick="navigator.clipboard.writeText(document.getElementById('js-format-text__out').value);">Copy</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="./assets/common.js" type="text/javascript"></script>
<script src="./assets/dev.js" type="text/javascript"></script>
</html>