-
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdefense.html
287 lines (283 loc) · 20.1 KB
/
defense.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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="common.css?v=0.16.0">
<script src="dragdrop.js"></script>
<script defer src="common.js?v=0.16.0"></script>
<script defer src="defense.js?v=0.6.0"></script>
<script defer src="data/defense-labels.js?v=0.6.0"></script>
<title>D4 Defense Calculator</title>
<!-- open graph settings -->
<meta property="og:title" content="D4 Defense Calculator"/>
<meta property="og:determiner" content="the" />
<meta property="og:url" content="https://bytemind-de.github.io/apps/d4/defense.html"/>
<meta property="og:description" content="A tool for Diablo 4 to calculate and compare your defense.">
<meta property="og:image" content="https://bytemind-de.github.io/apps/d4/icon.png"/>
<meta property="og:image:width" content="256"/>
<meta property="og:image:height" content="256"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:alt" content="Diablo Icon"/>
<meta property="og:type" content="website"/>
<meta property="og:locale" content="en_GB"/>
<meta property="og:locale:alternate" content="en_US"/>
<meta property="og:locale:alternate" content="de_DE"/>
<style>
</style>
<script>
var d4cType = "defcalc"; //TODO: this is added to the storage key and can in theory be in conflict with calc name
var d4cVersion = "0.6.1";
var d4season = "6";
</script>
</head>
<body>
<div class="main-header">
<div class="header-section hide-when-small">
<button onclick="toggleNavMenu();" title="Toggle D4 tools menu.">
<svg viewBox="0 0 512 512" style="width: 12px; fill: currentColor;"><use xlink:href="#svg-apps"></use></svg>
</button>
<button onclick="toggleOptionsMenu();" title="Toggle display options.">
<svg viewBox="0 0 16 16" style="width: 14px; fill: currentColor;"><use xlink:href="#svg-settings-sliders"></use></svg>
</button>
</div>
<div class="header-section" style="flex: 1 0 auto;">
<svg id="d4-icon" xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="none" viewBox="0 1 48 48"><path fill="#DD0707" fill-rule="evenodd" d="M5.79 8.96c.058 0 .497.203.497.203s.86 1.045.918 1.122a.748.748 0 0 1 .089.242l.165.619c.02.069-.038.183-.038.183s.042.442.065.668h.388c1.593 0 3.742.02 5.77.042.05-.658.095-1.239.104-1.29.019-.122.105-.374.105-.374l.665-1.072.803-.79s.177-.173.204-.216c.102-.166 1.669-1.363 1.669-1.363s-.137-.064-.166-.064l-.94.024s-.566.032-.614.04a3.882 3.882 0 0 1-.482.015A28.983 28.983 0 0 1 14 6.883c-.076-.012-.722.074-.722.074s-2.034-.002-2.265-.022c-.231-.02-.623-.116-.623-.116l-.822-.038-1.892-.096c-.163-.015-.802-.19-.802-.19s-.348-.007-.956-.007c-.714 0-4.663.178-4.663.178L1 6.78l4.408 1.962c.135.076.325.216.383.216Zm6.241 11.401c-.957-.471-2.934-1.82-3.803-2.424a80.492 80.492 0 0 0-.586-.404 81.513 81.513 0 0 0-.071 1.788c.003.26-.006.372.111.44.118.07.168.222.168.222s.015.344.037.482c.02.137-.087.34-.115.4-.028.062.013.169.013.169s.605 2.522.68 2.882c.074.36.46 2.233.473 2.378.013.145.558 4.353.65 4.95.047.314.247 1.64.433 2.888a41.55 41.55 0 0 1 1.642-.45c-.11-.351-.201-.852-.233-1.61-.014-.342.004-1.329.03-2.685a89 89 0 0 0 .018-1.051c0-.447.105-.813.244-1.106a2.51 2.51 0 0 1-.194-.96c0-.868.004-3.76.054-4.5.033-.48.206-.96.45-1.409Zm1.327 19.171a70.313 70.313 0 0 1-2.689.06c.058.614.105 1.095.116 1.17.033.213.252 2.876.245 3.028-.007.153.144.612.144.612s.072.539.143.784c.071.244.106.913.268 1.51.161.596.267.783.267.783s.757-3.884 1.1-5.887c.105-.619.193-1.083.2-1.127.023-.141.093-.256.076-.287-.017-.03.047-.273.048-.296 0-.01.039-.17.082-.35Zm4.88-31.808c.079.119.495.564.491.636.07.09.134.205.134.205l1.016 1.07s1.529 1.363 1.634 1.446c.105.083.14.281.191.382.052.101-.035.146.219.47.024.03.05.078.076.131a621.52 621.52 0 0 1 5.539-.01 3.72 3.72 0 0 1-.014-.479c.011-.444.206-.493.5-.743.293-.25.393-.36.51-.51.116-.15.831-1.228.904-1.324.073-.096.79-.816 1.325-1.262a7.69 7.69 0 0 0 .867-.93c-.51-.038-.88 0-.88 0s-.222-.038-.362-.043c-.14-.006-.803-.076-1.023-.082-.22-.007-1.036.122-1.407.182-.37.061-1.077.099-1.077.099s-.21-.018-.41-.05c-.2-.031-.58-.175-.58-.175-.273-.01-1.462.018-1.702.015-.239-.004-.742-.02-.742-.02s-.214-.004-.294.004c-.08.008-1.507-.027-1.507-.027a2.74 2.74 0 0 1-.543.217c-.137.034-.996-.024-1.002-.026-.005-.002-.293-.025-.319-.047-.009-.007-.016-.01-.027-.009-.2.024-.487-.011-.504-.011l-.742.031c-.27.024-.864.005-.948.005-.057-.007.021.088.057.123.092.167.467.497.62.732Zm5.624 10.423c.029.04.066.083.104.152.092.167.173.445.204.656.017.123.167.17.12.228-.045.058.102.454.102.454l.486 1.665.46 2.097c.04.193.647 1.795.652 1.888.006.093.638 2.295.79 2.375.084.043.364.788.629 1.517.177-.607.282-1.23.37-1.761l.027-.158a4.06 4.06 0 0 0 .04-.527c.018-.508.04-1.172.412-2.048-.042-.757-.01-1.458.006-1.83l.006-.17a7.112 7.112 0 0 0-.188-1.176 8.784 8.784 0 0 1-.107-.473c-.056-.271-.203-.986-.37-1.193l-1.573-1.286.179-.166a33.186 33.186 0 0 0-2.349-.244ZM46.998 2.05c-.026-.163-.095-.03-.095-.03L45.07 5.2c-.069.144-.095.258-.14.256-.029-.002-.026.232-.09.23-.086-.005-.05.054-.089.122-.069.12-1.38 2.689-1.583 3.118-.202.43-1.772 4.006-2.033 4.58a809.55 809.55 0 0 0-1.958 4.42c-.2.461-.804 1.877-1.204 2.793.137.389.266.761.376 1.09.032.097.056.194.072.294l.236.702-.53.677c-.102.225-.3.83-.402 1.264-.025.109-.063.297-.111.535-.182.9-.488 2.407-.848 3.444-.22.635-1.442 3.92-3.825 6.173-.887.838-1.88 1.504-2.856 2.033.288.911.574 1.82.652 2.046.16.474.845 2.642 1.053 3.306.209.664.726 2.387.726 2.387.139.505.178.812.291.812.07 0 .13-.097.13-.097s.157-.24.237-.326c.08-.086.085-.253.102-.31.018-.06.243-.292.243-.292s.448-1.25.483-1.359c.035-.108.17-.213.187-.267.017-.055.113-.113.113-.113s.543-.648.556-.69c.013-.044.278-.393.321-.436.044-.042.117-.12.126-.175.009-.054 0-.112 0-.112s.365-1.549.448-1.933c.082-.384.578-2.407.617-2.605.039-.198.27-.413.274-.483.004-.07.262-1.337.349-1.43.087-.093.06-.167.082-.221.022-.054.9-1.556 1.083-1.746.183-.19.058-.503.058-.503s.123-.254.123-.34c0-.085.043-.143.043-.143l.287-.342c.091-.108.144-.147.17-.22.026-.074.556-1.903.63-2.147.074-.245.125-.305.199-.522.074-.217.622-1.92.748-2.328.126-.407.773-2.6.9-2.97.125-.368.456-1.516.556-1.76a.587.587 0 0 0 0-.497c-.039-.086-.158-.29-.293-.523-.134-.233.11-.53.083-.67a.382.382 0 0 1 .03-.268c.027-.05.018-.163.035-.244.018-.082.14-.39.158-.487.017-.097.331-1.249.331-1.249l.693-2.542.257-.887c.034-.122-.062-.168-.066-.221-.005-.068.017-.176.072-.379.044-.162.39-1.368.458-1.5.07-.132.157-.448.2-.693.044-.245.243-.78.376-1.102.133-.323.162-.489.21-.614.114-.293.133-.4.145-.573.011-.173.07-.51.076-.573.006-.062.153-.42.153-.42.012-.086.116-.37.235-.628.119-.259.295-.727.382-.916.087-.189.191-.456.206-.58.015-.124.174-.46.255-.668.081-.206.234-.616.298-.795.064-.179.2-.4.2-.4a3.05 3.05 0 0 1 .172-.4c.052-.104.017-.413.068-.519.073-.155.118-.281.114-.315-.004-.034.304-.735.277-.898Z" clip-rule="evenodd"></path><path fill="currentColor" fill-rule="evenodd" d="M17.184 16.224c.418.389 1.895 1.836 2.274 2.155.38.319.978 1.037.988 1.447-.409.04-1.646.01-1.936-.07-.289-.08-.398-.08-.379.16.06.748.3 4.898.33 5.227.03.33.11.54.26.709.149.17 1.096 1.147 1.256 1.416-.23.26-.988.998-1.117 1.137-.13.14-.31.24-.32.739-.01.499-.03 2.464.01 2.843.04.38.13 1.816-.05 2.136.819 0 3.789-.029 5.102-.089 1.49-.067 3.077-.692 4.097-1.727 1.357-1.377 1.66-3.466 1.876-4.75.15-.887-.09-1.416.509-2.534-.1-.957-.03-1.955-.02-2.284.01-.33-.11-1.178-.25-1.696-.14-.52-.289-1.946-1.057-2.574.3-.28.499-.56.678-.729.18-.17.372-.412-.08-.559-1.137-.369-4.11-.798-6.066-.858-1.63-.05-5.118-.209-6.105-.1Zm1.456-2.345c1.699 0 7.448-.078 12.122 0 2.079.035 3.985.14 5.158.23.445.034.42.15.27.359-.15.21-.789.698-1.227 1.127-.44.429-.27 1.068-.1 1.676.167.6 1.221 3.423 1.786 5.108.007.023-.008.058 0 .08-.22.28-.549 1.367-.669 1.876-.12.509-.489 2.594-.908 3.801-.419 1.208-1.546 3.742-3.362 5.458-1.816 1.716-4.4 2.803-6.565 3.312-2.165.509-7.183.738-9.468.768-.27.004-.34-.03-.429-.12-.09-.09-.23-.339-.449-.329-.22.01-.34.15-.529.44-.429.08-2.294.12-3.093.13-.798.01-3.152 0-3.92-.1.229-.21.498-.47 1.286-1.048.789-.58 3.712-1.267 4.58-1.477.555-.134.519-.479.569-.788.05-.31-.09-.808-.24-1.058-.15-.249-.21-.848-.23-1.327-.02-.479.05-3.242.05-3.661 0-.42.26-.579.46-.818.2-.24.08-.559-.14-.699-.132-.083-.27-.309-.27-.549 0-.239 0-3.641.05-4.38.05-.738 1.118-1.925 1.866-2.553-.21-.14-.668-.26-1.038-.27-.369-.01-.788-.09-1.277-.27-.489-.179-2.594-1.586-3.671-2.334-1.078-.748-2.734-1.856-2.953-2.025-.22-.17-.5-.48-.52-.619 1.607-.09 10.407.06 12.861.06Z" clip-rule="evenodd"></path></svg>
<h3 id="main-headline" class="text-shadow-1">Defense Calculator (S6 BETA)</h3>
<svg viewBox="0 0 128 128" style="width: 17px; fill: currentColor;"><use xlink:href="#svg-shield"></use></svg>
</div>
<div class="header-section hide-when-small">
<button onclick="loadStoredCalculator();" title="Load a stored calculator and add it to the screen.">
<svg viewBox="0 0 16 16" style="width: 14px; fill: currentColor;"><use xlink:href="#svg-folder"></use></svg>
</button>
<button onclick="addNewCalculator();" title="Create a new calculator and add it to the screen.">
<svg viewBox="0 0 16 16" style="width: 14px; fill: currentColor;"><use xlink:href="#svg-add-btn"></use></svg>
</button>
</div>
</div>
<div class="main-view">
<div class="nav-menu hidden">
<section>
<div class="group">
<a class="button-style bigger gold" href="index.html">MORE D4 TOOLS</a>
</div>
<div class="group">
<a class="button-style bigger black" href="https://github.com/bytemind-de/d4-tools?tab=readme-ov-file#defense-calculator" target=blank_>HELP / CODE</a>
</div>
</section>
</div>
<div class="options-menu hidden">
<section>
<div class="group">
<label>Color style dark:</label><input name="option-dark-mode" type="checkbox">
</div>
<div class="group">
<label>Show detailed result:</label><input name="option-detailed-info" type="checkbox">
</div>
<div class="group">
<label>Always single column:</label><input name="option-single-column" type="checkbox">
</div>
</section>
</div>
<div class="content-page">
<div class="no-content-menu section">
<div class="nc-menu-section">
<h3>Welcome to the<br>D4 Defense Calculator</h3>
</div>
<div class="nc-menu-section">
<button class="bigger" onclick="addNewCalculator(true, true);">CREATE NEW CALCULATOR</button>
</div>
<div class="nc-menu-section">
<button class="bigger" onclick="loadStoredCalculator();">LOAD STORED CALCULATOR</button>
</div>
<div class="nc-menu-section">
<label title="Import a configuration to this calculator from file or import a whole set"
name="import-btn" class="button-style bigger">IMPORT FROM FILE<input type="file" class="import-data-selector"></label>
</div>
<div class="nc-menu-section"></div>
<div class="nc-menu-section">
<button class="bigger" onclick="toggleColorStyle(true);">TOGGLE COLOR STYLE</button>
</div>
<div class="nc-menu-section"></div>
<div class="nc-menu-section">
<a class="button-style bigger gold" href="index.html">MORE D4 TOOLS</a>
</div>
<div class="nc-menu-section">
<a class="button-style bigger black" href="https://github.com/bytemind-de/d4-tools?tab=readme-ov-file#defense-calculator" target=blank_>HELP / CODE</a>
</div>
<div class="nc-menu-section" style="margin-bottom: 12px;"></div>
<div class="nc-menu-section info-text centered">Version: <script>document.write(d4cVersion);</script> (Season <script>document.write(d4season);</script>)</div>
<div class="nc-menu-section info-text centered" style="display: inline-block;">
Made by <span title="Florian Quirin" style="cursor: help;">FQ</span>
</div>
<div class="nc-menu-section"></div>
</div>
<!-- CALCULATOR TEMPLATE START -->
<div id="calculator-template" class="content-box calculator-instance">
<div class="section-group">
<div class="section info-box calc-title">
<!--<span style="width: 15px; margin-right: 4px;">🛡</span>-->
<svg viewBox="0 0 128 128" style="width: 14px; fill: currentColor; margin-right: 5px;"><use xlink:href="#svg-shield"></use></svg>
<span name="calc-title" title="Title of this calculator. Click to edit.">New Calculator</span>
<!--<button name="close-btn" class="section-vis-button" title="Close this calculator."></button>-->
<span style="width: 15px; margin-left: 4px;">⚖</span>
</div>
<div class="section">
<div class="group calc-item" title="Your base life, taken from character stats menu. Note: depends on your character level.">
<label class="has-info">Base life:</label>
<input name="char-base-life" class="" type="number" value="400">
</div>
<div class="group calc-item" title="Your strength. Will be applied to base armor with a factor of 1/5 (from season 6 on).">
<label class="has-info">Strength:</label>
<input name="char-strength" class="" type="number" value="500">
</div>
</div>
</div>
<div class="section-group">
<!-- NOTE: since season 6 this is character = monster level -->
<div class="section">
<div class="group calc-item" title="Character/enemy level (same since S6). Affects your damage reduction obtained through armor.">
<label class="has-info">Character/enemy level:</label>
<input name="enemy-level" class="highlight" type="number" value="60">
</div>
</div>
</div>
<div class="section-group">
<div class="section">
<p class="has-info" title="Your base armor from gear, paragon board, skulls etc. You can add single values for each item or combine values as you like."
>Armor base values ([+] gear, paragon, etc.):</p>
<div name="armor-items-container" class="modifiers-container"></div>
<div class="group right">
<button class="button-bold" name="armor-items-btn" title="Add new value">+</button>
</div>
</div>
</div>
<div class="section-group">
<div class="section">
<p class="has-info" title="Additional armor through percentage modifiers. Each value will be calculated based on the sum of your base armor."
>Armor percentage modifiers ([%]):</p>
<div name="armor-pct-container" class="modifiers-container"></div>
<div class="group right">
<button class="button-bold" name="armor-pct-btn" title="Add new value">+</button>
</div>
</div>
</div>
<div class="section-group">
<div class="section">
<div class="group calc-item" title="Your elemental resistance. Choose the lowest value or the element you want to calculate.">
<!-- TODO: add one for each element? -->
<label class="has-info">Elemental resistance (lowest) [%]:</label>
<input name="elemental-resis-custom" class="highlight border-col-elemental-resis" type="number" value="70" step="0.1">
</div>
</div>
</div>
<div class="section-group">
<div class="section">
<p class="has-info" title="Additional life through gear like helms, chest armor or unique items like Grandfather etc."
>Maximum life additive values ([+] gear, etc.):</p>
<div name="maxlife-items-container" class="modifiers-container"></div>
<div class="group right">
<button class="button-bold" name="maxlife-items-btn" title="Add new value">+</button>
</div>
</div>
</div>
<div class="section-group">
<div class="section">
<p class="has-info" title="Additional life through percentage modifiers like ruby gems, passives or unique items like Doombringer etc. Please add each ruby and each paragon node as single entry!"
>Max. life modifiers ([%] rubies, paragon, etc.):</p>
<div name="maxlife-pct-container" class="modifiers-container"></div>
<div class="group right">
<button class="button-bold" name="maxlife-pct-btn" title="Add new value">+</button>
</div>
</div>
</div>
<div class="section-group">
<div class="section">
<p class="has-info" title="Damage reduction in percent. Add each item individually or use the combined (inverse multiplied) values from the character stats menu."
>Damage reduction ([%] gear, paragon, etc.):</p>
<div name="dr-values-container" class="modifiers-container"></div>
<div class="group right">
<button class="button-bold" name="dr-values-btn" title="Add new value">+</button>
</div>
</div>
</div>
<div class="section-group">
<div class="section">
<p class="has-info" title="Additional damage taken in percent. Add each item individually."
>Additional damage taken ([%] passives etc.):</p>
<div name="penalty-values-container" class="modifiers-container"></div>
<div class="group right">
<button class="button-bold" name="penalty-values-btn" title="Add new value">+</button>
</div>
</div>
</div>
<div class="section-group">
<div class="section">
<div class="group center" title="Is the character fortified? Check this box if you did not add fortify manually to the DR section.">
<label class="single flex">Is fortified: <input name="char-is-fortified" type="checkbox"></label>
</div>
<div class="group center buttons-box">
<button name="calculate-data-btn">CALCULATE DEFENSE</button>
</div>
</div>
<div class="section" style="display: none;">
<div name="result-container" class="result-container"></div>
</div>
<div class="section">
<div class="group center buttons-box">
<button name="save-btn" title="Save this configuration">SAVE</button><!-- 🖫 -->
<button name="load-btn" title="Load a configuration to this calculator">LOAD</button>
<button name="export-btn" title="Export this configuration to a file">EXPORT</button><!-- 🕷 🕸 -->
<label title="Import a configuration to this calculator from file or import a whole set"
name="import-btn" class="button-style">IMPORT<input type="file" class="import-data-selector"></label>
<button name="close-btn" title="Close this calculator">CLOSE</button><!-- 🗑 -->
</div>
</div>
<div name="info-footer" class="section info-box" style="font-size: 12px; justify-content: center;">
Version: <script>document.write(d4cVersion);</script> (S<script>document.write(d4season);</script>)
</div>
</div>
</div>
<!-- CALCULATOR TEMPLATE END -->
</div>
<!-- SVGs -->
<div style="display: none">
<svg viewBox="0 0 128 128">
<g id="svg-shield">
<g transform="translate(-54.19 -19.68)"><path d="m118.2 26.47-48.35 10.27s-2.987 35.77 5.956 55.4c18.27 38.1 42.4 48.73 42.4 48.73v-0.043c0.2717-0.1076 24.18-10.8 42.37-48.72 8.942-19.63 5.955-55.4 5.955-55.4z"/></g>
</g>
</svg>
<svg viewBox="0 0 330 330">
<g id="svg-lock">
<g><path d="M65,330h200c8.284,0,15-6.716,15-15V145c0-8.284-6.716-15-15-15h-15V85c0-46.869-38.131-85-85-85 S80,38.131,80,85v45H65c-8.284,0-15,6.716-15,15v170C50,323.284,56.716,330,65,330z M180,234.986V255c0,8.284-6.716,15-15,15 s-15-6.716-15-15v-20.014c-6.068-4.565-10-11.824-10-19.986c0-13.785,11.215-25,25-25s25,11.215,25,25 C190,223.162,186.068,230.421,180,234.986z M110,85c0-30.327,24.673-55,55-55s55,24.673,55,55v45H110V85z"></path></g>
</g>
</svg>
<svg viewBox="0 0 16 16">
<g id="svg-settings-sliders">
<path d="M3 1H8V3H15V5H8V7H3V5H1V3H3V1Z"/><path d="M13 13H15V11H13V9H8V11H1V13H8V15H13V13Z"/>
</g>
</svg>
<svg viewBox="0 0 512 512">
<g id="svg-apps">
<path d="M186.2,139.6h139.6V0H186.2V139.6z M372.4,0v139.6H512V0H372.4z M0,139.6h139.6V0H0V139.6z M186.2,325.8h139.6V186.2H186.2 V325.8z M372.4,325.8H512V186.2H372.4V325.8z M0,325.8h139.6V186.2H0V325.8z M186.2,512h139.6V372.4H186.2V512z M372.4,512H512 V372.4H372.4V512z M0,512h139.6V372.4H0V512z"/>
</g>
</svg>
<svg viewBox="0 0 16 16">
<g id="svg-folder">
<path d="M0 1H6L9 4H16V14H0V1Z"/>
</g>
</svg>
<svg viewBox="0 0 16 16">
<g id="svg-add-btn">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H1V15H15V1ZM7 4H9V7H12V9H9V12H7V9H4V7H7V4Z"/>
</g>
</svg>
</div>
</div>
<script>
</script>
</body>
</html>