bryan
/
BangleApps_old
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Customizer.html

master
Andreas Rozek 2022-01-12 10:57:10 +01:00
parent 84a403a24f
commit 797d5fbd81
1 changed files with 106 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
apps/ac_ac/Customizer.html
View File

@ -26,11 +26,12 @@
default-src 'self' 'unsafe-inline' 'unsafe-eval' file: https:; default-src 'self' 'unsafe-inline' 'unsafe-eval' file: https:;
"> ">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="jquery-3.6.0.min.js"></script>
<!--script src="https://code.jquery.com/jquery-3.6.0.min.js"></script-->
<link rel="stylesheet" href=""https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.4.5/spectre.min.css"> <link rel="stylesheet" href=""https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.4.5/spectre.min.css">
<!--link rel="stylesheet" href="../../css/spectre.min.css"--> <!--link rel="stylesheet" href="../../css/spectre.min.css"-->
<script src="https://raw.githubusercontent.com/espruino/EspruinoAppLoaderCore/b05af96b2522a7a7225a56d804faf9383f8a8f97/lib/customize.js"></script> <script src="customize.js"></script>
<!--script src="../../core/lib/customize.js"></script--> <!--script src="../../core/lib/customize.js"></script-->
<style> <style>
@ -40,50 +41,25 @@
text-align:center; vertical-align:top; text-align:center; vertical-align:top;
} }
input.labelled { label.Preview {
display:inline-block; position:relative;
}
label.Preview > input[type="radio"] {
display:none; position:relative; display:none; position:relative;
-webkit-appearance:none; -moz-appearance:none; appearance:none; -webkit-appearance:none; -moz-appearance:none; appearance:none;
width:0px; height:0px; width:0px; height:0px;
} }
input + div { label.Preview > input[type="radio"] + img {
display:inline-block; positon:relative;
margin:0px; padding:0px;
border:none;
}
input:checked + div > label {
border:solid 3px red;
}
label.Preview {
display:inline-block; position:relative;
border:solid 3px white;
margin:0px; padding:0px;
vertical-align:top;
}
label.Preview:checked {
border:solid 3px red;
}
label.Preview > img {
display:inline-block; position:relative; display:inline-block; position:relative;
width:88px; height:88px; width:88px; height:88px;
border:solid 1px black; margin:0px; padding:0px;
border:solid 3px white;
box-shadow:0px 0px 1px 1px lightgray;
} }
label.Preview > input[type="radio"]:checked + img {
label.ColorPatch {
width:70px;
font-size:16px; line-height:24px;
text-align:center;
}
label.ColorPatch:checked {
border:solid 3px red; border:solid 3px red;
} }
label > input[type="radio"] {
display:none;
}
.ColorPatch { .ColorPatch {
display:inline-block; position:relative; display:inline-block; position:relative;
@ -94,10 +70,57 @@
box-shadow:inset 0px 0px 1px 1px black; box-shadow:inset 0px 0px 1px 1px black;
vertical-align:top; vertical-align:top;
} }
.ColorPatch:checked { .ColorPatch:checked {
border:solid 3px red; border:solid 3px red;
} }
label.ColorPatch {
display:inline-block; position:relative;
width:70px;
border:none;
box-shadow:none;
}
label.ColorPatch > input[type="radio"] {
display:none; position:relative;
-webkit-appearance:none; -moz-appearance:none; appearance:none;
width:0px; height:0px;
}
label.ColorPatch > input[type="radio"] + span {
display:inline-block; position:absolute;
left:0px; top:0px; right:0px; bottom:0px;
margin:0px; padding:0px;
border:solid 3px white;
box-shadow:inset 0px 0px 1px 1px black;
font-size:16px; line-height:24px;
text-align:center;
}
label.ColorPatch > input[type="radio"]:checked + span {
border:solid 3px red;
}
/*
input.labelled {
display:none; position:relative;
-webkit-appearance:none; -moz-appearance:none; appearance:none;
width:0px; height:0px;
}
input + img {
display:inline-block; positon:relative;
margin:0px; padding:0px;
border:solid 3px white;
box-shadow:inset 0px 0px 1px 1px black;
}
input:checked + div > label {
border:solid 3px red;
}
label > input[type="radio"] {
display:none;
}
*/
</style> </style>
@ -279,23 +302,24 @@
(or choose "themed" to use your Bangle's configured theme) - if not, just (or choose "themed" to use your Bangle's configured theme) - if not, just
select "none": select "none":
</p><p> </p><p>
<b>Second Hand Color:</b> <br> <b>Second Hand Color:</b>
<label class="ColorPatch"> </p><p>
<input type="radio" name="second-hand" value="(null)"/> <label class="ColorPatch">
none <input type="radio" name="second-hand" value="(null)"/>
</label> <span>none</span>
<label class="ColorPatch"> </label>
<input type="radio" name="second-hand" value="Theme"/> <label class="ColorPatch">
themed <input type="radio" name="second-hand" value="Theme"/>
</label> <span>themed</span>
<input type="radio" name="second-hand" value="#000000" class="ColorPatch" style="background:#000000"/> </label>
<input type="radio" name="second-hand" value="#FF0000" class="ColorPatch" style="background:#FF0000"/> <input type="radio" name="second-hand" value="#000000" class="ColorPatch" style="background:#000000"/>
<input type="radio" name="second-hand" value="#00FF00" class="ColorPatch" style="background:#00FF00"/> <input type="radio" name="second-hand" value="#FF0000" class="ColorPatch" style="background:#FF0000"/>
<input type="radio" name="second-hand" value="#0000FF" class="ColorPatch" style="background:#0000FF"/> <input type="radio" name="second-hand" value="#00FF00" class="ColorPatch" style="background:#00FF00"/>
<input type="radio" name="second-hand" value="#FFFF00" class="ColorPatch" style="background:#FFFF00"/> <input type="radio" name="second-hand" value="#0000FF" class="ColorPatch" style="background:#0000FF"/>
<input type="radio" name="second-hand" value="#FF00FF" class="ColorPatch" style="background:#FF00FF"/> <input type="radio" name="second-hand" value="#FFFF00" class="ColorPatch" style="background:#FFFF00"/>
<input type="radio" name="second-hand" value="#00FFFF" class="ColorPatch" style="background:#00FFFF"/> <input type="radio" name="second-hand" value="#FF00FF" class="ColorPatch" style="background:#FF00FF"/>
<input type="radio" name="second-hand" value="#FFFFFF" class="ColorPatch" style="background:#FFFFFF"/> <input type="radio" name="second-hand" value="#00FFFF" class="ColorPatch" style="background:#00FFFF"/>
<input type="radio" name="second-hand" value="#FFFFFF" class="ColorPatch" style="background:#FFFFFF"/>
</p><p> </p><p>
If you prefer "custom" clock hands, please enter the URL If you prefer "custom" clock hands, please enter the URL
of their JavaScript module below: of their JavaScript module below:
@ -504,33 +528,35 @@
"themed" if you want the clock to use the currently configured theme on "themed" if you want the clock to use the currently configured theme on
your Bangle.js 2: your Bangle.js 2:
</p><p> </p><p>
<b>Foreground Color:</b> <br> <b>Foreground Color:</b>
<input type="radio" id="foreground-themed" class="labelled" name="foreground" value="Theme"/>
<div>
<label for="foreground-themed" class="ColorPatch">themed</label>
</div>
<input type="radio" name="foreground" value="#000000" class="ColorPatch" style="background:#000000"/>
<input type="radio" name="foreground" value="#FF0000" class="ColorPatch" style="background:#FF0000"/>
<input type="radio" name="foreground" value="#00FF00" class="ColorPatch" style="background:#00FF00"/>
<input type="radio" name="foreground" value="#0000FF" class="ColorPatch" style="background:#0000FF"/>
<input type="radio" name="foreground" value="#FFFF00" class="ColorPatch" style="background:#FFFF00"/>
<input type="radio" name="foreground" value="#FF00FF" class="ColorPatch" style="background:#FF00FF"/>
<input type="radio" name="foreground" value="#00FFFF" class="ColorPatch" style="background:#00FFFF"/>
<input type="radio" name="foreground" value="#FFFFFF" class="ColorPatch" style="background:#FFFFFF"/>
</p><p> </p><p>
<b>Background Color:</b> <br> <label class="ColorPatch">
<label class="ColorPatch"> <input type="radio" name="foreground" value="Theme"/>
<input type="radio" name="background" value="Theme"/> <span>themed</span>
themed </label>
</label> <input type="radio" name="foreground" value="#000000" class="ColorPatch" style="background:#000000"/>
<input type="radio" name="background" value="#000000" class="ColorPatch" style="background:#000000"/> <input type="radio" name="foreground" value="#FF0000" class="ColorPatch" style="background:#FF0000"/>
<input type="radio" name="background" value="#FF0000" class="ColorPatch" style="background:#FF0000"/> <input type="radio" name="foreground" value="#00FF00" class="ColorPatch" style="background:#00FF00"/>
<input type="radio" name="background" value="#00FF00" class="ColorPatch" style="background:#00FF00"/> <input type="radio" name="foreground" value="#0000FF" class="ColorPatch" style="background:#0000FF"/>
<input type="radio" name="background" value="#0000FF" class="ColorPatch" style="background:#0000FF"/> <input type="radio" name="foreground" value="#FFFF00" class="ColorPatch" style="background:#FFFF00"/>
<input type="radio" name="background" value="#FFFF00" class="ColorPatch" style="background:#FFFF00"/> <input type="radio" name="foreground" value="#FF00FF" class="ColorPatch" style="background:#FF00FF"/>
<input type="radio" name="background" value="#FF00FF" class="ColorPatch" style="background:#FF00FF"/> <input type="radio" name="foreground" value="#00FFFF" class="ColorPatch" style="background:#00FFFF"/>
<input type="radio" name="background" value="#00FFFF" class="ColorPatch" style="background:#00FFFF"/> <input type="radio" name="foreground" value="#FFFFFF" class="ColorPatch" style="background:#FFFFFF"/>
<input type="radio" name="background" value="#FFFFFF" class="ColorPatch" style="background:#FFFFFF"/> </p><p>
<b>Background Color:</b>
</p><p>
<label class="ColorPatch">
<input type="radio" name="background" value="Theme"/>
<span>themed</span>
</label>
<input type="radio" name="background" value="#000000" class="ColorPatch" style="background:#000000"/>
<input type="radio" name="background" value="#FF0000" class="ColorPatch" style="background:#FF0000"/>
<input type="radio" name="background" value="#00FF00" class="ColorPatch" style="background:#00FF00"/>
<input type="radio" name="background" value="#0000FF" class="ColorPatch" style="background:#0000FF"/>
<input type="radio" name="background" value="#FFFF00" class="ColorPatch" style="background:#FFFF00"/>
<input type="radio" name="background" value="#FF00FF" class="ColorPatch" style="background:#FF00FF"/>
<input type="radio" name="background" value="#00FFFF" class="ColorPatch" style="background:#00FFFF"/>
<input type="radio" name="background" value="#FFFFFF" class="ColorPatch" style="background:#FFFFFF"/>
</p><p> </p><p>
When you are satisfied with your configuration, just click on "Upload" in When you are satisfied with your configuration, just click on "Upload" in
order to generate the specified clock and upload it to your Bangle.js 2: order to generate the specified clock and upload it to your Bangle.js 2: