增加生成图片弹窗和给学弟学妹留言

2024-09-10 14:27:42 +08:00 · 2024-09-10 14:27:42 +08:00 · 7e4169a74e
commit 7e4169a74e
parent a3dcccb93d
4 changed files with 143 additions and 13 deletions
--- a/css/style.css
+++ b/css/style.css
@ -444,3 +444,46 @@
  height: 20px;
  margin-left: 6px;
 }
+.pop-up {
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+.pop-up .select {
+  width: 600px;
+  height: 500px;
+  background: #fff;
+  border-radius: 20px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.pop-up .select .title {
+  font-weight: 650;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+.pop-up .select .img-box {
+  width: 400px;
+  height: 400px;
+  overflow: hidden;
+}
+.pop-up .select .img-box .img {
+  height: 400px;
+  object-fit: contain;
+}
+.pop-up .select .btn {
+  padding: 0 20px;
+  height: 40px;
+  border: 1px solid #eee;
+  border-radius: 20px;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+  color: #000;
+  text-decoration: none;
+}
--- a/css/style.less
+++ b/css/style.less
@ -518,3 +518,49 @@
        margin-left: 6px;
    }
 }
+
+.pop-up {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.4);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    .select {
+        width: 600px;
+        height: 500px;
+        background: #fff;
+        border-radius: 20px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .title {
+            font-weight: 650;
+            font-size: 20px;
+            margin-bottom: 10px;
+        }
+        .img-box {
+            width: 400px;
+            height: 400px;
+            overflow: hidden;
+            .img {
+                // width: 400px;
+                height: 400px;
+                object-fit: contain;
+            }
+        }
+
+        .btn {
+            padding: 0 20px;
+            height: 40px;
+            border: 1px solid #eee;
+            border-radius: 20px;
+            text-align: center;
+            line-height: 40px;
+            cursor: pointer;
+            color: #000;
+            text-decoration: none;
+        }
+    }
+}
--- a/index.html
+++ b/index.html
@ -22,7 +22,7 @@
            <div class="operate flexacenter">
                <input placeholder="请输入" v-model="inputText" @keyup.enter="confirm()" />
                <div class="btn" @click="confirm()">确定</div>
-                <div class="btn" @click="saveimage()">保存图片</div>
+                <div class="btn" @click="saveimage()">生成图片</div>
            </div>
            <div class="main">
                <template v-if="tab == 'offer' && JSON.stringify(offerinfo) !== '{}'">
@ -276,11 +276,37 @@
                        <div class="content summary-text">{{ info.content }}</div>
                    </div>

+                    <div class="box" v-if="info.message">
+                        <div class="head">
+                            <div class="left">
+                                <img class="index" crossorigin="anonymous" :src="info.content ? base03 : base02" />
+                                <img class="arrow" crossorigin="anonymous" :src="arrowblue" />
+                                <img class="arrow" crossorigin="anonymous" :src="arrowlightblue" />
+                            </div>
+                            <div class="right summary">
+                                <div class="right-text">给学弟学妹的留言</div>
+                            </div>
+                            <div class="strip"></div>
+                        </div>
+
+                        <div class="content summary-text">{{ info.message }}</div>
+                    </div>
+
                    <div class="more flexcenter">
                        more
                        <img class="more-icon" crossorigin="anonymous" :src="arrow1round" />
                    </div>
                </template>
+
+                <div v-if="selectState" class="pop-up flexcenter">
+                    <div class="select flexflex">
+                        <div class="title">生成成功</div>
+                        <div class="img-box flexcenter">
+                            <img class="img" :src="selectBase64" />
+                        </div>
+                        <a class="btn" :href="selectBase64" :download="inputId + '.png'">另存为</a>
+                    </div>
+                </div>
            </div>
        </div>

@ -413,9 +439,12 @@

                    base01: "",
                    arrow1round: "",
+
+                    selectState: false,
+                    selectBase64: "",
                },
                mounted() {
-                    axios.defaults.headers.common["Authorization"] = "813blr43ue2hhf2kjnlfibyy9swlxm2x"
+                    // axios.defaults.headers.common["Authorization"] = "3v900y3avdzkp1ljhuycvhq2ck7ah01y"

                    this.base01 = base01
                    this.base02 = base02
@ -490,6 +519,15 @@
                                }
                                const data = res.data

+                                while (data.info.message && data.info.message.indexOf("\n\n\n\n") >= 0) {
+                                    data.info.message = data.info.message.replace("\n\n\n\n", "\n\n\n")
+                                }
+                                if (data.info.message && (data.info.message == "\n\n\n" || data.info.message == "\n\n" || data.info.message == "\n")) data.info.message = "" // 留言只有 回车
+
+                                // 删除前后的空格
+                                if (data.info.content) data.info.content = data.info.content.trim()
+                                if (data.info.message) data.info.message = data.info.message.trim()
+
                                const offercollege = data.offercollege || []

                                this.offercollege = offercollege
@ -709,22 +747,25 @@
                            // document.body.appendChild(canvas)

                            // 或者你可以将canvas转换为图片数据
-                            var img = canvas.toDataURL("image/png")
+                            let img = canvas.toDataURL("image/png")

                            // 创建一个新的图片元素
-                            var newImg = document.createElement("img")
-                            newImg.src = img
+                            // let newImg = document.createElement("img")
+                            // newImg.src = img

                            // 将新图片添加到文档中
                            // document.body.appendChild(newImg)

+                            this.selectBase64 = img
+                            this.selectState = true
+
                            // 创建一个链接元素用于下载
-                            var downloadLink = document.createElement("a")
-                            downloadLink.href = img
-                            // 为下载的文件命名
-                            downloadLink.download = this.inputId + ".png"
-                            // 触发下载
-                            downloadLink.click()
+                            // var downloadLink = document.createElement("a")
+                            // downloadLink.href = img
+                            // // 为下载的文件命名
+                            // downloadLink.download = this.inputId + ".png"
+                            // // 触发下载
+                            // downloadLink.click()
                        })
                    },
                },
--- a/js/base.js
+++ b/js/base.js
@ -6,9 +6,9 @@ const base03 = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAABjCAYAAAAB4f

 const arrow1round = `data:image/svg+xml;base64,77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAiIHkxPSIwIiB4Mj0iMTAiIHkyPSIyMCIgaWQ9IkxpbmVhckdyYWRpZW50ODIiPgogICAgICA8c3RvcCBpZD0iU3RvcDgzIiBzdG9wLWNvbG9yPSIjNjZjNjM5IiBvZmZzZXQ9IjAiIC8+CiAgICAgIDxzdG9wIGlkPSJTdG9wODQiIHN0b3AtY29sb3I9IiNjN2VkNzYiIG9mZnNldD0iMSIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgLTEyNjIgLTE5MzYgKSI+CiAgICA8cGF0aCBkPSJNIDguNzUgMTYuNzQ0NzkxNjY2NjY2NyAgQyA4Ljk3NTY5NDQ0NDQ0NDQ0IDE2Ljc0NDc5MTY2NjY2NjcgIDkuMTcxMDA2OTQ0NDQ0NDQgMTYuNjYyMzI2Mzg4ODg4OSAgOS4zMzU5Mzc1IDE2LjQ5NzM5NTgzMzMzMzMgIEwgMTUuMjQ3Mzk1ODMzMzMzMyAxMC41ODU5Mzc1ICBDIDE1LjQxMjMyNjM4ODg4ODkgMTAuNDIxMDA2OTQ0NDQ0NCAgMTUuNDk0NzkxNjY2NjY2NyAxMC4yMjU2OTQ0NDQ0NDQ0ICAxNS40OTQ3OTE2NjY2NjY3IDEwICBDIDE1LjQ5NDc5MTY2NjY2NjcgOS43NzQzMDU1NTU1NTU1NiAgMTUuNDEyMzI2Mzg4ODg4OSA5LjU3ODk5MzA1NTU1NTU2ICAxNS4yNDczOTU4MzMzMzMzIDkuNDE0MDYyNSAgTCA5LjMzNTkzNzUgMy41MDI2MDQxNjY2NjY2NyAgQyA5LjE3MTAwNjk0NDQ0NDQ0IDMuMzM3NjczNjExMTExMTEgIDguOTc1Njk0NDQ0NDQ0NDQgMy4yNTUyMDgzMzMzMzMzMyAgOC43NSAzLjI1NTIwODMzMzMzMzMzICBDIDguNTI0MzA1NTU1NTU1NTYgMy4yNTUyMDgzMzMzMzMzMyAgOC4zMjg5OTMwNTU1NTU1NiAzLjMzNzY3MzYxMTExMTExICA4LjE2NDA2MjUgMy41MDI2MDQxNjY2NjY2NyAgTCA2LjgzNTkzNzUgNC44MzA3MjkxNjY2NjY2NyAgQyA2LjY3MTAwNjk0NDQ0NDQ1IDQuOTk1NjU5NzIyMjIyMjIgIDYuNTg4NTQxNjY2NjY2NjcgNS4xOTA5NzIyMjIyMjIyMiAgNi41ODg1NDE2NjY2NjY2NyA1LjQxNjY2NjY2NjY2NjY3ICBDIDYuNTg4NTQxNjY2NjY2NjcgNS42NDIzNjExMTExMTExMSAgNi42NzEwMDY5NDQ0NDQ0NSA1LjgzNzY3MzYxMTExMTExICA2LjgzNTkzNzUgNi4wMDI2MDQxNjY2NjY2NyAgTCAxMC44MzMzMzMzMzMzMzMzIDEwICBMIDYuODM1OTM3NSAxMy45OTczOTU4MzMzMzMzICBDIDYuNjcxMDA2OTQ0NDQ0NDUgMTQuMTYyMzI2Mzg4ODg4OSAgNi41ODg1NDE2NjY2NjY2NyAxNC4zNTc2Mzg4ODg4ODg5ICA2LjU4ODU0MTY2NjY2NjY3IDE0LjU4MzMzMzMzMzMzMzMgIEMgNi41ODg1NDE2NjY2NjY2NyAxNC44MDkwMjc3Nzc3Nzc4ICA2LjY3MTAwNjk0NDQ0NDQ1IDE1LjAwNDM0MDI3Nzc3NzggIDYuODM1OTM3NSAxNS4xNjkyNzA4MzMzMzMzICBMIDguMTY0MDYyNSAxNi40OTczOTU4MzMzMzMzICBDIDguMzI4OTkzMDU1NTU1NTYgMTYuNjYyMzI2Mzg4ODg4OSAgOC41MjQzMDU1NTU1NTU1NiAxNi43NDQ3OTE2NjY2NjY3ICA4Ljc1IDE2Ljc0NDc5MTY2NjY2NjcgIFogTSAxOC42NTg4NTQxNjY2NjY3IDQuOTgwNDY4NzUgIEMgMTkuNTUyOTUxMzg4ODg4OSA2LjUxMjU4NjgwNTU1NTU1ICAyMCA4LjE4NTc2Mzg4ODg4ODg5ICAyMCAxMCAgQyAyMCAxMS44MTQyMzYxMTExMTExICAxOS41NTI5NTEzODg4ODg5IDEzLjQ4NzQxMzE5NDQ0NDQgIDE4LjY1ODg1NDE2NjY2NjcgMTUuMDE5NTMxMjUgIEMgMTcuNzY0NzU2OTQ0NDQ0NCAxNi41NTE2NDkzMDU1NTU2ICAxNi41NTE2NDkzMDU1NTU2IDE3Ljc2NDc1Njk0NDQ0NDQgIDE1LjAxOTUzMTI1IDE4LjY1ODg1NDE2NjY2NjcgIEMgMTMuNDg3NDEzMTk0NDQ0NCAxOS41NTI5NTEzODg4ODg5ICAxMS44MTQyMzYxMTExMTExIDIwICAxMCAyMCAgQyA4LjE4NTc2Mzg4ODg4ODg5IDIwICA2LjUxMjU4NjgwNTU1NTU2IDE5LjU1Mjk1MTM4ODg4ODkgIDQuOTgwNDY4NzUgMTguNjU4ODU0MTY2NjY2NyAgQyAzLjQ0ODM1MDY5NDQ0NDQ0IDE3Ljc2NDc1Njk0NDQ0NDQgIDIuMjM1MjQzMDU1NTU1NTYgMTYuNTUxNjQ5MzA1NTU1NiAgMS4zNDExNDU4MzMzMzMzMyAxNS4wMTk1MzEyNSAgQyAwLjQ0NzA0ODYxMTExMTExMSAxMy40ODc0MTMxOTQ0NDQ0ICAwIDExLjgxNDIzNjExMTExMTEgIDAgMTAgIEMgMCA4LjE4NTc2Mzg4ODg4ODg5ICAwLjQ0NzA0ODYxMTExMTExMSA2LjUxMjU4NjgwNTU1NTU1ICAxLjM0MTE0NTgzMzMzMzMzIDQuOTgwNDY4NzUgIEMgMi4yMzUyNDMwNTU1NTU1NiAzLjQ0ODM1MDY5NDQ0NDQ0ICAzLjQ0ODM1MDY5NDQ0NDQ0IDIuMjM1MjQzMDU1NTU1NTUgIDQuOTgwNDY4NzUgMS4zNDExNDU4MzMzMzMzMyAgQyA2LjUxMjU4NjgwNTU1NTU2IDAuNDQ3MDQ4NjExMTExMTA5ICA4LjE4NTc2Mzg4ODg4ODg5IDAgIDEwIDAgIEMgMTEuODE0MjM2MTExMTExMSAwICAxMy40ODc0MTMxOTQ0NDQ0IDAuNDQ3MDQ4NjExMTExMTA5ICAxNS4wMTk1MzEyNSAxLjM0MTE0NTgzMzMzMzMzICBDIDE2LjU1MTY0OTMwNTU1NTYgMi4yMzUyNDMwNTU1NTU1NSAgMTcuNzY0NzU2OTQ0NDQ0NCAzLjQ0ODM1MDY5NDQ0NDQ0ICAxOC42NTg4NTQxNjY2NjY3IDQuOTgwNDY4NzUgIFogIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9InVybCgjTGluZWFyR3JhZGllbnQ4MikiIHN0cm9rZT0ibm9uZSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSAxMjYyIDE5MzYgKSIgLz4KICA8L2c+Cjwvc3ZnPg==`

-const arrowblue = `data:image/svg+xml;base64,77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTFweCIgaGVpZ2h0PSIyMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgLTE2OCAtMTMwICkiPgogICAgPHBhdGggZD0iTSAxMC42MzcxNTI3Nzc3Nzc4IDkuMTIxMDkzNzUgIEMgMTAuODc5MDUwOTI1OTI1OSA5LjM2ODQ4OTU4MzMzMzMzICAxMSA5LjY2MTQ1ODMzMzMzMzMzICAxMSAxMCAgQyAxMSAxMC4zMzg1NDE2NjY2NjY3ICAxMC44NzkwNTA5MjU5MjU5IDEwLjYzMTUxMDQxNjY2NjcgIDEwLjYzNzE1Mjc3Nzc3NzggMTAuODc4OTA2MjUgIEwgMi4wODE1OTcyMjIyMjIyMiAxOS42Mjg5MDYyNSAgQyAxLjgzOTY5OTA3NDA3NDA3IDE5Ljg3NjMwMjA4MzMzMzMgIDEuNTUzMjQwNzQwNzQwNzQgMjAgIDEuMjIyMjIyMjIyMjIyMjIgMjAgIEMgMC44OTEyMDM3MDM3MDM3MDQgMjAgIDAuNjA0NzQ1MzcwMzcwMzcgMTkuODc2MzAyMDgzMzMzMyAgMC4zNjI4NDcyMjIyMjIyMjIgMTkuNjI4OTA2MjUgIEMgMC4xMjA5NDkwNzQwNzQwNzQgMTkuMzgxNTEwNDE2NjY2NyAgMCAxOS4wODg1NDE2NjY2NjY3ICAwIDE4Ljc1ICBMIDAgMS4yNSAgQyAwIDAuOTExNDU4MzMzMzMzMzMgIDAuMTIwOTQ5MDc0MDc0MDc0IDAuNjE4NDg5NTgzMzMzMzMgIDAuMzYyODQ3MjIyMjIyMjIyIDAuMzcxMDkzNzUgIEMgMC42MDQ3NDUzNzAzNzAzNyAwLjEyMzY5NzkxNjY2NjY2NSAgMC44OTEyMDM3MDM3MDM3MDQgMCAgMS4yMjIyMjIyMjIyMjIyMiAwICBDIDEuNTUzMjQwNzQwNzQwNzQgMCAgMS44Mzk2OTkwNzQwNzQwNyAwLjEyMzY5NzkxNjY2NjY2NSAgMi4wODE1OTcyMjIyMjIyMiAwLjM3MTA5Mzc1ICBMIDEwLjYzNzE1Mjc3Nzc3NzggOS4xMjEwOTM3NSAgWiAiIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0iIzAwMzRkZiIgc3Ryb2tlPSJub25lIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDE2OCAxMzAgKSIgLz4KICA8L2c+Cjwvc3ZnPg==`
+const arrowblue = `data:image/svg+xml;base64,77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTFweCIgaGVpZ2h0PSIyMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgLTEwODcgLTEzMCApIj4KICAgIDxwYXRoIGQ9Ik0gMTAuNjM3MTUyNzc3Nzc3OCA5LjEyMTA5Mzc1ICBDIDEwLjg3OTA1MDkyNTkyNTkgOS4zNjg0ODk1ODMzMzMzMyAgMTEgOS42NjE0NTgzMzMzMzMzMyAgMTEgMTAgIEMgMTEgMTAuMzM4NTQxNjY2NjY2NyAgMTAuODc5MDUwOTI1OTI1OSAxMC42MzE1MTA0MTY2NjY3ICAxMC42MzcxNTI3Nzc3Nzc4IDEwLjg3ODkwNjI1ICBMIDIuMDgxNTk3MjIyMjIyMjIgMTkuNjI4OTA2MjUgIEMgMS44Mzk2OTkwNzQwNzQwNyAxOS44NzYzMDIwODMzMzMzICAxLjU1MzI0MDc0MDc0MDc0IDIwICAxLjIyMjIyMjIyMjIyMjIyIDIwICBDIDAuODkxMjAzNzAzNzAzNzA0IDIwICAwLjYwNDc0NTM3MDM3MDM3IDE5Ljg3NjMwMjA4MzMzMzMgIDAuMzYyODQ3MjIyMjIyMjIyIDE5LjYyODkwNjI1ICBDIDAuMTIwOTQ5MDc0MDc0MDc0IDE5LjM4MTUxMDQxNjY2NjcgIDAgMTkuMDg4NTQxNjY2NjY2NyAgMCAxOC43NSAgTCAwIDEuMjUgIEMgMCAwLjkxMTQ1ODMzMzMzMzMzICAwLjEyMDk0OTA3NDA3NDA3NCAwLjYxODQ4OTU4MzMzMzMzICAwLjM2Mjg0NzIyMjIyMjIyMiAwLjM3MTA5Mzc1ICBDIDAuNjA0NzQ1MzcwMzcwMzcgMC4xMjM2OTc5MTY2NjY2NjUgIDAuODkxMjAzNzAzNzAzNzA0IDAgIDEuMjIyMjIyMjIyMjIyMjIgMCAgQyAxLjU1MzI0MDc0MDc0MDc0IDAgIDEuODM5Njk5MDc0MDc0MDcgMC4xMjM2OTc5MTY2NjY2NjUgIDIuMDgxNTk3MjIyMjIyMjIgMC4zNzEwOTM3NSAgTCAxMC42MzcxNTI3Nzc3Nzc4IDkuMTIxMDkzNzUgIFogIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9IiM1ZTQ3ZWYiIHN0cm9rZT0ibm9uZSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSAxMDg3IDEzMCApIiAvPgogIDwvZz4KPC9zdmc+`

-const arrowlightblue = `data:image/svg+xml;base64,77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTFweCIgaGVpZ2h0PSIyMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgLTE3NyAtMTMwICkiPgogICAgPHBhdGggZD0iTSAxMC42MzcxNTI3Nzc3Nzc4IDkuMTIxMDkzNzUgIEMgMTAuODc5MDUwOTI1OTI1OSA5LjM2ODQ4OTU4MzMzMzMzICAxMSA5LjY2MTQ1ODMzMzMzMzMzICAxMSAxMCAgQyAxMSAxMC4zMzg1NDE2NjY2NjY3ICAxMC44NzkwNTA5MjU5MjU5IDEwLjYzMTUxMDQxNjY2NjcgIDEwLjYzNzE1Mjc3Nzc3NzggMTAuODc4OTA2MjUgIEwgMi4wODE1OTcyMjIyMjIyMiAxOS42Mjg5MDYyNSAgQyAxLjgzOTY5OTA3NDA3NDA3IDE5Ljg3NjMwMjA4MzMzMzMgIDEuNTUzMjQwNzQwNzQwNzQgMjAgIDEuMjIyMjIyMjIyMjIyMjIgMjAgIEMgMC44OTEyMDM3MDM3MDM3MDQgMjAgIDAuNjA0NzQ1MzcwMzcwMzcgMTkuODc2MzAyMDgzMzMzMyAgMC4zNjI4NDcyMjIyMjIyMjIgMTkuNjI4OTA2MjUgIEMgMC4xMjA5NDkwNzQwNzQwNzQgMTkuMzgxNTEwNDE2NjY2NyAgMCAxOS4wODg1NDE2NjY2NjY3ICAwIDE4Ljc1ICBMIDAgMS4yNSAgQyAwIDAuOTExNDU4MzMzMzMzMzMgIDAuMTIwOTQ5MDc0MDc0MDc0IDAuNjE4NDg5NTgzMzMzMzMgIDAuMzYyODQ3MjIyMjIyMjIyIDAuMzcxMDkzNzUgIEMgMC42MDQ3NDUzNzAzNzAzNyAwLjEyMzY5NzkxNjY2NjY2NSAgMC44OTEyMDM3MDM3MDM3MDQgMCAgMS4yMjIyMjIyMjIyMjIyMiAwICBDIDEuNTUzMjQwNzQwNzQwNzQgMCAgMS44Mzk2OTkwNzQwNzQwNyAwLjEyMzY5NzkxNjY2NjY2NSAgMi4wODE1OTcyMjIyMjIyMiAwLjM3MTA5Mzc1ICBMIDEwLjYzNzE1Mjc3Nzc3NzggOS4xMjEwOTM3NSAgWiAiIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0iI2IxYzlmYyIgc3Ryb2tlPSJub25lIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDE3NyAxMzAgKSIgLz4KICA8L2c+Cjwvc3ZnPg==`
+const arrowlightblue = `data:image/svg+xml;base64,77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTFweCIgaGVpZ2h0PSIyMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgLTEwOTYgLTEzMCApIj4KICAgIDxwYXRoIGQ9Ik0gMTAuNjM3MTUyNzc3Nzc3OCA5LjEyMTA5Mzc1ICBDIDEwLjg3OTA1MDkyNTkyNTkgOS4zNjg0ODk1ODMzMzMzMyAgMTEgOS42NjE0NTgzMzMzMzMzMyAgMTEgMTAgIEMgMTEgMTAuMzM4NTQxNjY2NjY2NyAgMTAuODc5MDUwOTI1OTI1OSAxMC42MzE1MTA0MTY2NjY3ICAxMC42MzcxNTI3Nzc3Nzc4IDEwLjg3ODkwNjI1ICBMIDIuMDgxNTk3MjIyMjIyMjIgMTkuNjI4OTA2MjUgIEMgMS44Mzk2OTkwNzQwNzQwNyAxOS44NzYzMDIwODMzMzMzICAxLjU1MzI0MDc0MDc0MDc0IDIwICAxLjIyMjIyMjIyMjIyMjIyIDIwICBDIDAuODkxMjAzNzAzNzAzNzA0IDIwICAwLjYwNDc0NTM3MDM3MDM3IDE5Ljg3NjMwMjA4MzMzMzMgIDAuMzYyODQ3MjIyMjIyMjIyIDE5LjYyODkwNjI1ICBDIDAuMTIwOTQ5MDc0MDc0MDc0IDE5LjM4MTUxMDQxNjY2NjcgIDAgMTkuMDg4NTQxNjY2NjY2NyAgMCAxOC43NSAgTCAwIDEuMjUgIEMgMCAwLjkxMTQ1ODMzMzMzMzMzICAwLjEyMDk0OTA3NDA3NDA3NCAwLjYxODQ4OTU4MzMzMzMzICAwLjM2Mjg0NzIyMjIyMjIyMiAwLjM3MTA5Mzc1ICBDIDAuNjA0NzQ1MzcwMzcwMzcgMC4xMjM2OTc5MTY2NjY2NjUgIDAuODkxMjAzNzAzNzAzNzA0IDAgIDEuMjIyMjIyMjIyMjIyMjIgMCAgQyAxLjU1MzI0MDc0MDc0MDc0IDAgIDEuODM5Njk5MDc0MDc0MDcgMC4xMjM2OTc5MTY2NjY2NjUgIDIuMDgxNTk3MjIyMjIyMjIgMC4zNzEwOTM3NSAgTCAxMC42MzcxNTI3Nzc3Nzc4IDkuMTIxMDkzNzUgIFogIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9IiM5NDk4ZmMiIHN0cm9rZT0ibm9uZSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSAxMDk2IDEzMCApIiAvPgogIDwvZz4KPC9zdmc+`

 const arrowround = `data:image/svg+xml;base64,77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAiIHkxPSIwIiB4Mj0iMTAiIHkyPSIyMCIgaWQ9IkxpbmVhckdyYWRpZW50NjciPgogICAgICA8c3RvcCBpZD0iU3RvcDY4IiBzdG9wLWNvbG9yPSIjYzI4MGZmIiBvZmZzZXQ9IjAiIC8+CiAgICAgIDxzdG9wIGlkPSJTdG9wNjkiIHN0b3AtY29sb3I9IiM4MDgwZmYiIG9mZnNldD0iMSIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgLTM0MyAtMjQ1MyApIj4KICAgIDxwYXRoIGQ9Ik0gOC43NSAxNi43NDQ3OTE2NjY2NjY3ICBDIDguOTc1Njk0NDQ0NDQ0NDQgMTYuNzQ0NzkxNjY2NjY2NyAgOS4xNzEwMDY5NDQ0NDQ0NCAxNi42NjIzMjYzODg4ODg5ICA5LjMzNTkzNzUgMTYuNDk3Mzk1ODMzMzMzMyAgTCAxNS4yNDczOTU4MzMzMzMzIDEwLjU4NTkzNzUgIEMgMTUuNDEyMzI2Mzg4ODg4OSAxMC40MjEwMDY5NDQ0NDQ0ICAxNS40OTQ3OTE2NjY2NjY3IDEwLjIyNTY5NDQ0NDQ0NDQgIDE1LjQ5NDc5MTY2NjY2NjcgMTAgIEMgMTUuNDk0NzkxNjY2NjY2NyA5Ljc3NDMwNTU1NTU1NTU2ICAxNS40MTIzMjYzODg4ODg5IDkuNTc4OTkzMDU1NTU1NTYgIDE1LjI0NzM5NTgzMzMzMzMgOS40MTQwNjI1ICBMIDkuMzM1OTM3NSAzLjUwMjYwNDE2NjY2NjY3ICBDIDkuMTcxMDA2OTQ0NDQ0NDQgMy4zMzc2NzM2MTExMTExMSAgOC45NzU2OTQ0NDQ0NDQ0NCAzLjI1NTIwODMzMzMzMzMzICA4Ljc1IDMuMjU1MjA4MzMzMzMzMzMgIEMgOC41MjQzMDU1NTU1NTU1NiAzLjI1NTIwODMzMzMzMzMzICA4LjMyODk5MzA1NTU1NTU2IDMuMzM3NjczNjExMTExMTEgIDguMTY0MDYyNSAzLjUwMjYwNDE2NjY2NjY3ICBMIDYuODM1OTM3NSA0LjgzMDcyOTE2NjY2NjY3ICBDIDYuNjcxMDA2OTQ0NDQ0NDUgNC45OTU2NTk3MjIyMjIyMiAgNi41ODg1NDE2NjY2NjY2NyA1LjE5MDk3MjIyMjIyMjIyICA2LjU4ODU0MTY2NjY2NjY3IDUuNDE2NjY2NjY2NjY2NjcgIEMgNi41ODg1NDE2NjY2NjY2NyA1LjY0MjM2MTExMTExMTExICA2LjY3MTAwNjk0NDQ0NDQ1IDUuODM3NjczNjExMTExMTEgIDYuODM1OTM3NSA2LjAwMjYwNDE2NjY2NjY3ICBMIDEwLjgzMzMzMzMzMzMzMzMgMTAgIEwgNi44MzU5Mzc1IDEzLjk5NzM5NTgzMzMzMzMgIEMgNi42NzEwMDY5NDQ0NDQ0NSAxNC4xNjIzMjYzODg4ODg5ICA2LjU4ODU0MTY2NjY2NjY3IDE0LjM1NzYzODg4ODg4ODkgIDYuNTg4NTQxNjY2NjY2NjcgMTQuNTgzMzMzMzMzMzMzMyAgQyA2LjU4ODU0MTY2NjY2NjY3IDE0LjgwOTAyNzc3Nzc3NzggIDYuNjcxMDA2OTQ0NDQ0NDUgMTUuMDA0MzQwMjc3Nzc3OCAgNi44MzU5Mzc1IDE1LjE2OTI3MDgzMzMzMzMgIEwgOC4xNjQwNjI1IDE2LjQ5NzM5NTgzMzMzMzMgIEMgOC4zMjg5OTMwNTU1NTU1NiAxNi42NjIzMjYzODg4ODg5ICA4LjUyNDMwNTU1NTU1NTU2IDE2Ljc0NDc5MTY2NjY2NjcgIDguNzUgMTYuNzQ0NzkxNjY2NjY2NyAgWiBNIDE4LjY1ODg1NDE2NjY2NjcgNC45ODA0Njg3NSAgQyAxOS41NTI5NTEzODg4ODg5IDYuNTEyNTg2ODA1NTU1NTUgIDIwIDguMTg1NzYzODg4ODg4ODkgIDIwIDEwICBDIDIwIDExLjgxNDIzNjExMTExMTEgIDE5LjU1Mjk1MTM4ODg4ODkgMTMuNDg3NDEzMTk0NDQ0NCAgMTguNjU4ODU0MTY2NjY2NyAxNS4wMTk1MzEyNSAgQyAxNy43NjQ3NTY5NDQ0NDQ0IDE2LjU1MTY0OTMwNTU1NTYgIDE2LjU1MTY0OTMwNTU1NTYgMTcuNzY0NzU2OTQ0NDQ0NCAgMTUuMDE5NTMxMjUgMTguNjU4ODU0MTY2NjY2NyAgQyAxMy40ODc0MTMxOTQ0NDQ0IDE5LjU1Mjk1MTM4ODg4ODkgIDExLjgxNDIzNjExMTExMTEgMjAgIDEwIDIwICBDIDguMTg1NzYzODg4ODg4ODkgMjAgIDYuNTEyNTg2ODA1NTU1NTYgMTkuNTUyOTUxMzg4ODg4OSAgNC45ODA0Njg3NSAxOC42NTg4NTQxNjY2NjY3ICBDIDMuNDQ4MzUwNjk0NDQ0NDQgMTcuNzY0NzU2OTQ0NDQ0NCAgMi4yMzUyNDMwNTU1NTU1NiAxNi41NTE2NDkzMDU1NTU2ICAxLjM0MTE0NTgzMzMzMzMzIDE1LjAxOTUzMTI1ICBDIDAuNDQ3MDQ4NjExMTExMTExIDEzLjQ4NzQxMzE5NDQ0NDQgIDAgMTEuODE0MjM2MTExMTExMSAgMCAxMCAgQyAwIDguMTg1NzYzODg4ODg4ODkgIDAuNDQ3MDQ4NjExMTExMTExIDYuNTEyNTg2ODA1NTU1NTUgIDEuMzQxMTQ1ODMzMzMzMzMgNC45ODA0Njg3NSAgQyAyLjIzNTI0MzA1NTU1NTU2IDMuNDQ4MzUwNjk0NDQ0NDQgIDMuNDQ4MzUwNjk0NDQ0NDQgMi4yMzUyNDMwNTU1NTU1NSAgNC45ODA0Njg3NSAxLjM0MTE0NTgzMzMzMzMzICBDIDYuNTEyNTg2ODA1NTU1NTYgMC40NDcwNDg2MTExMTExMDkgIDguMTg1NzYzODg4ODg4ODkgMCAgMTAgMCAgQyAxMS44MTQyMzYxMTExMTExIDAgIDEzLjQ4NzQxMzE5NDQ0NDQgMC40NDcwNDg2MTExMTExMDkgIDE1LjAxOTUzMTI1IDEuMzQxMTQ1ODMzMzMzMzMgIEMgMTYuNTUxNjQ5MzA1NTU1NiAyLjIzNTI0MzA1NTU1NTU1ICAxNy43NjQ3NTY5NDQ0NDQ0IDMuNDQ4MzUwNjk0NDQ0NDQgIDE4LjY1ODg1NDE2NjY2NjcgNC45ODA0Njg3NSAgWiAiIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0idXJsKCNMaW5lYXJHcmFkaWVudDY3KSIgc3Ryb2tlPSJub25lIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDM0MyAyNDUzICkiIC8+CiAgPC9nPgo8L3N2Zz4=`