diff --git a/.gitignore b/.gitignore
index 5b934592..4a2de0c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,6 +28,7 @@ user_setups/active/*
build_output/*
build_output/firmware/*.bin
build_output/firmware/*.exe
+lib/SimpleFTPServer/examples/*
src/custom/*
!src/custom/README.md
!src/custom/bootlogo_template.h
diff --git a/data/edit.htm.gz b/data/edit.htm.gz
deleted file mode 100644
index 880615de..00000000
Binary files a/data/edit.htm.gz and /dev/null differ
diff --git a/data/static/edit.htm.gz b/data/static/edit.htm.gz
new file mode 100644
index 00000000..5a6eae02
Binary files /dev/null and b/data/static/edit.htm.gz differ
diff --git a/data/static/en.json.gz b/data/static/en.json.gz
index c999b5a6..9278e158 100644
Binary files a/data/static/en.json.gz and b/data/static/en.json.gz differ
diff --git a/data/static/hasp.htm.gz b/data/static/hasp.htm.gz
index 265f2c14..7fb75272 100644
Binary files a/data/static/hasp.htm.gz and b/data/static/hasp.htm.gz differ
diff --git a/data/script.js.gz b/data/static/script.js.gz
similarity index 97%
rename from data/script.js.gz
rename to data/static/script.js.gz
index 5ddb5922..3e7738bf 100644
Binary files a/data/script.js.gz and b/data/static/script.js.gz differ
diff --git a/data/static/style.css.gz b/data/static/style.css.gz
new file mode 100644
index 00000000..8466e9d6
Binary files /dev/null and b/data/static/style.css.gz differ
diff --git a/data/style.css b/data/style.css
index 86b5d811..df574e3a 100644
--- a/data/style.css
+++ b/data/style.css
@@ -1,73 +1,169 @@
+/* Icons SVG files */
:root {
+ --info: url('data:image/svg+xml,');
+ --home: url('data:image/svg+xml,');
+ --shot: url('data:image/svg+xml,');
+ --ota: url('data:image/svg+xml,');
+ --browse: url('data:image/svg+xml,');
+ --cog: url('data:image/svg+xml,');
--star: url('data:image/svg+xml,');
- --trash: url('data:image/svg+xml,')
+ --trash: url('data:image/svg+xml,');
+ --download: url('data:image/svg+xml,')
}
-a.foot:link,
-a.foot:visited {
- color: var(--footfg)
+.fa {
+ display: block;
+ text-indent: -9999px;
+ width: clamp(2rem, 7.5vw, 5rem);
+ height: 2rem;
+ mask-size: auto;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ -webkit-mask-size: auto;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ background-color: var(--clr-primary-400);
+ transition: 0.5s;
+ padding: 1rem;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+.fa-browse { mask-image: var(--browse); -webkit-mask-image: var(--browse)}
+.fa-cog { mask-image: var(--cog); -webkit-mask-image: var(--cog)}
+.fa-download{ mask-image: var(--download); -webkit-mask-image: var(--download)}
+.fa-home { mask-image: var(--home); -webkit-mask-image: var(--home)}
+.fa-info { mask-image: var(--info); -webkit-mask-image: var(--info)}
+.fa-ota { mask-image: var(--ota); -webkit-mask-image: var(--ota)}
+.fa-shot { mask-image: var(--shot); -webkit-mask-image: var(--shot)}
+.fa-star { mask-image: var(--star); -webkit-mask-image: var(--star)}
+.fa-trash { mask-image: var(--trash); -webkit-mask-image: var(--trask)}
+
+#ctx {
+ display: none;
+ top: 10px;
+ left: 50px;
+ position: absolute;
+ background: #fff;
+ z-index: 10;
+ padding: 0.75rem;
+ border-radius: 0.5rem;
+ box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.25);
+}
+#ctx > ul {
+ padding-left: 0px;
+}
+#ctx > ul > li,
+.sub_div > ul > li {
+ cursor: pointer;
+}
+#ctx > ul > li:hover {
+ background: #ccc;
}
-input:not([type=file]) {
- background-color: var(--fldbg);
- color: var(--fldfg)
+.nav-list {
+ font-size: var(--fs-nav);
+ padding: 0;
+ display: flex;
+ justify-content: space-evenly;
+ gap: clamp(1.5rem, 10vw, var(--size-500));
+ width: clamp(275px, 80vw, 600px);
+}
+.nav-list a {
+ position: relative;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ flex-direction: column;
+ text-decoration: none;
+ color: var(--clr-primary-400);
+}
+.nav-list a:hover,
+.nav-list a:focus-visible {
+ color: var(--clr-accent-400);
+}
+.nav-list a .text {
+ position: absolute;
+ letter-spacing: -0.05rem;
+ font-size: var(--fs-500);
+ font-weight: var(--fw-semi-bold);
+ white-space: nowrap;
+ opacity: 0;
+ transition: 0.5s;
+ transform: translateY(0.5rem);
+}
+.nav-list a:hover .text,
+.nav-list a:focus-visible .text {
+ opacity: 1;
+ transform: translateY(1rem);
+}
+.nav-list a:hover .fa,
+.nav-list a:focus-visible .fa {
+ background-color: var(--clr-accent-400);
+ transform: translateY(-0.5rem);
}
-input[type=checkbox],
-input[type=radio] {
- width: 1em
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
}
-input[type=color] {
- width: 30%;
- padding: 5px
-}
-
-select {
- background-color: var(--fldbg);
- color: var(--fldfg)
-}
-
-input:invalid {
- border: 1px solid var(--fldred)
+/* Set default margin */
+* {
+ margin: 0px;
+ padding: 0px;
+}
+P {
+ margin: 1em 0px;
}
+/* Main Style */
body {
- font-family: verdana;
- margin: auto;
+ font-family: 'Inter', sans-serif;
+ line-height: 1.5;
+ height: 100%;
background: var(--bg);
color: var(--txt)
}
-
-.c,
-body {
- text-align: center
+a {
+ text-decoration: none;
+}
+a[href],
+input[type='submit'],
+label[for],
+select,
+button,
+.pointer {
+ cursor: pointer;
}
-.clear {
- clear: both
-}
-
-.foot {
- background-color: transparent !important;
- all: revert;
- float: right;
- margin: 0;
- font-size: .6em
-}
-
-#doc>a.red,
-button.red {
- background-color: var(--btnred)
-}
-
-#doc>a.red:focus,
-#doc>a.red:hover,
-button.red:focus,
-button.red:hover {
- background-color: var(--btnredhi)
+/* Message Fields */
+.error,
+.info,
+.success,
+.validation,
+.warning {
+ border: 1px solid;
+ margin: 1rem auto;
+ padding: 2rem 1rem 1rem 3rem;
+ background-repeat: no-repeat;
+ background-position: 10px center;
+ max-width: 500px
+}
+.info { color: #00529B; background-color: #BDE5F8 }
+.success{ color: #4F8A10; background-color: #DFF2BF }
+.warning{ color: #9F6000; background-color: #FEEFB3 }
+.error { color: #D8000C; background-color: #FFD2D2 }
+
+
+/* Navigation bar */
+
+#filebrowser {
+ display: none
}
+/* Main Page */
#doc {
text-align: left;
margin: 0 auto;
@@ -79,75 +175,12 @@ button.red:hover {
display: table
}
-td {
- font-size: .87rem;
- padding-bottom: 0;
- padding-top: 0
-}
-
-th {
- padding-top: .5em
-}
-
-* {
- box-sizing: border-box
-}
-
-input,
-select,
-textarea {
- width: 100%;
- padding: 12px;
- border: 1px solid #ccc;
- border-radius: .6rem;
- resize: vertical
-}
-
-label {
- padding: 12px 18px 12px 0;
- display: inline-block
-}
-
-.required {
- background-image: var(--star);
- background-size: 1.5em 1.5em;
- background-position: right;
- background-repeat: no-repeat
-}
-
-.edit:before {
- content: "\0000a0"
-}
-
-.edit {
- background-image: var(--edit);
- background-size: 1.5em 1.5em;
- background-position: left;
- background-repeat: no-repeat;
- width: 1.5em;
- display: inline-block;
- text-decoration: none
-}
-
-.trash:before {
- content: "\0000a0"
-}
-
-.trash {
- background-image: var(--trash);
- background-size: 1.5em 1.5em;
- background-position: left;
- background-repeat: no-repeat;
- width: 1.5em;
- display: inline-block;
- text-decoration: none
-}
-
#doc>a,
.dist>a,
-button,
-input[type=submit] {
- padding: 12px;
+#doc button,
+#doc input[type=submit] {
+ // padding: 12px;
+ height: 3rem;
border: 1px solid var(--btnbrd);
border-radius: .6rem;
background-color: var(--btnbg);
@@ -164,11 +197,110 @@ input[type=submit] {
#doc>a:hover,
.dist>a:hover,
-button:hover,
-input[type=submit]:hover {
+#doc button:hover,
+#doc input[type=submit]:hover {
background-color: var(--btnbghi)
}
+#doc input:not([type=file]) {
+ background-color: var(--fldbg);
+ color: var(--fldfg)
+}
+#doc input[type=checkbox],
+#doc input[type=radio] {
+ width: 1rem;
+ height: 1rem;
+ margin: 0.25rem
+}
+#doc input[type=color] {
+ width: 30%;
+ padding: 5px
+}
+#doc input:invalid {
+ border: 1px solid var(--fldred)
+}
+#doc select {
+ background-color: var(--fldbg);
+ color: var(--fldfg)
+}
+
+.c {
+ text-align: center
+}
+
+#doc>a.red,
+#doc button.red {
+ background-color: var(--btnred)
+}
+
+#doc>a.red:focus,
+#doc>a.red:hover,
+#doc button.red:focus,
+#doc button.red:hover {
+ background-color: var(--btnredhi)
+}
+
+#doc td {
+ padding-bottom: 0;
+ padding-top: 0
+}
+#doc th {
+ padding-top: .5em
+}
+
+#doc input,
+#doc select,
+#doc textarea {
+ width: 100%;
+ padding: 1rem;
+ border: 1px solid #ccc;
+ border-radius: .6rem;
+ resize: vertical
+}
+#doc select {
+ appearance: none;
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-position: right .8rem center;
+ background-size: 1em
+}
+
+#doc label {
+ padding-right: 18px;
+ padding-left: .25rem;
+ display: inline-block
+}
+
+.required {
+ background-image: var(--star);
+ background-position: right;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+}
+
+.icon {
+ background-size: 1.05em 1.05em;
+ background-position: left;
+ background-repeat: no-repeat;
+ width: 1.5em;
+ display: inline-block;
+ text-decoration: none
+}
+
+.icon:before {
+ content: "\0000a0"
+}
+.edit {
+ background-image: var(--browse);
+}
+.trash {
+ background-image: var(--trash);
+}
+.download {
+ background-image: var(--download);
+}
+
+/* Forms */
.container {
background-color: var(--grpbg);
color: var(--grpfg);
@@ -180,7 +312,8 @@ input[type=submit]:hover {
.dist {
display: flex;
justify-content: space-between;
- width: 100%
+ width: 100%;
+ margin: 1rem 0
}
.dist>a {
@@ -196,19 +329,6 @@ input[type=submit]:hover {
margin-right: 0
}
-.col-25 {
- float: left;
- width: 25%;
- text-align: right;
- margin: 0
-}
-
-.col-75 {
- margin: 0;
- float: left;
- width: 75%
-}
-
.row:after {
content: "";
display: table;
@@ -216,53 +336,61 @@ input[type=submit]:hover {
}
.row {
- font-size: .833rem;
+ // font-size: .833rem;
margin: 5px
}
.gap,
.row:last-of-type {
- margin: 5px 5px 20px
+ margin-bottom: 1rem
}
-.error,
-.info,
-.success,
-.validation,
-.warning {
- border: 1px solid;
- margin: 10px auto;
- padding: 15px 10px 15px 50px;
- background-repeat: no-repeat;
- background-position: 10px center;
- max-width: 500px
+.col-25 {
+ // float: left;
+ // width: 25%;
+ text-align: left;
}
-.info {
- color: #00529B;
- background-color: #BDE5F8
+.col-75 {
+ // float: left;
+ // width: 75%
}
-.success {
- color: #4F8A10;
- background-color: #DFF2BF
+#doc label,
+#doc legend {
+ padding: 5px 18px 5px 0;
+}
+#doc fieldset {
+ display: contents
+}
+
+@media screen and (min-width:800px) {
+ .row {
+ display:flex;
+ align-items:center
+ }
+ .col-25,
+ .col-75
+ {
+ float: left;
+ width: 75%;
+ margin-top: 0
+ }
+
+ .col-25 {
+ width: 25%;
+ text-align: right
+ }
}
-.warning {
- color: #9F6000;
- background-color: #FEEFB3
-}
-
-.error {
- color: #D8000C;
- background-color: #FFD2D2
-}
+/*
@media screen and (max-width:800px) {
+ // #doc input[type=submit],
.col-25,
- .col-75,
- input[type=submit] {
+ .col-75
+ {
width: 100%;
margin-top: 0
}
@@ -271,7 +399,100 @@ input[type=submit]:hover {
text-align: left
}
- label {
+ #doc label {
padding: 5px 18px 5px 0
}
+}
+*/
+
+/* Page Footer */
+.foot {
+ background-color: transparent !important;
+ all: revert;
+ float: right;
+ margin: 0;
+ font-size: .6em
+}
+a.foot:link,
+a.foot:visited {
+ color: var(--footfg)
+}
+.clear {
+ clear: both
+}
+
+/* File Editor */
+.container__editor {
+ display: none;
+
+ /* Misc */
+ border: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: burlywood;
+}
+.container__left {
+ /* Initially, the left takes 3/4 width */
+ width: clamp(10rem, 15vw, 20rem);
+ max-width: 20rem;
+
+ /* Misc */
+ /* align-items: center; */
+ display: flex;
+ justify-content: left;
+ overflow-x: clip;
+ overflow-y: scroll;
+
+ /* Popout */
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: clamp(10rem, 15vw, 80rem);
+ z-index: 10;
+ /* position: absolute; */
+ /* visibility: hidden; */
+}
+.resizer {
+ background-color: #d5dbe2;
+ cursor: ew-resize;
+ height: 100%;
+ width: 5px;
+}
+.container__right {
+ /* Take the remaining width */
+ flex: 1;
+ flex-direction: column;
+
+ /* Misc */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ background-color: brown;
+}
+.toolbar {
+ /* Take the remaining width */
+ height: 3rem;
+ background-color: gray;
+
+ /* Misc */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ width: 100%;
+}
+.container__bottom {
+ /* Take the remaining width */
+ flex: 1;
+
+ /* Misc */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ top: 0;
+ bottom: 0;
+ width: 100%;
+ /* background-color: bisque; */
+}
+#sizeList {
+ width: 4rem;
}
\ No newline at end of file
diff --git a/data/style.css.gz b/data/style.css.gz
deleted file mode 100644
index cf8ca7fc..00000000
Binary files a/data/style.css.gz and /dev/null differ
diff --git a/user_setups/esp32/_esp32.ini b/user_setups/esp32/_esp32.ini
index 42881b3f..c5ee382a 100644
--- a/user_setups/esp32/_esp32.ini
+++ b/user_setups/esp32/_esp32.ini
@@ -15,11 +15,11 @@ debug_tool = esp-prog
debug_init_break = tbreak setup
board_build.embed_files =
- data/edit.htm.gz
+ data/static/edit.htm.gz
data/openhasp.ttf
; data/openhasplite.ttf
- data/style.css.gz
- data/script.js.gz
+ data/static/style.css.gz
+ data/static/script.js.gz
data/cert/x509_crt_bundle.bin
; -- new dynamic website files -------------------
data/static/logo.svg.gz
@@ -70,8 +70,8 @@ build_flags =
; -- SimpleFTpServer build options -----------------
-D HASP_USE_FTP=1
-D FTP_SERVER_DEBUG
- -D FTP_SERVER_NETWORK_TYPE=4 ;// NETWORK_ESP32
- -D STORAGE_TYPE=6 ;// STORAGE_LITTLEFS
+ -D FTP_SERVER_NETWORK_TYPE=NETWORK_ESP32 ;// NETWORK_ESP32
+ -D STORAGE_TYPE=STORAGE_LITTLEFS ;// STORAGE_LITTLEFS
-D STORAGE_SD_FORCE_DISABLE
-D STORAGE_SPIFFS_FORCE_DISABLE