基本完成, 后续添加用户设定（待定）, v-1.0.3

GentleCold · May 8, 2022 · 8753e52 · 8753e52
1 parent d951bb3
commit 8753e52
Show file tree

Hide file tree

Showing 5 changed files with 317 additions and 137 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,5 +10,8 @@ fontawesome
 neutralino.js
 
 # Neutralinojs related files
+backup
+setup.iss
+word
 .storage
 *.log
diff --git a/neutralino.config.json b/neutralino.config.json
@@ -16,7 +16,8 @@
         "window.*",
         "os.setTray",
         "app.*",
-        "storage.*"
+        "storage.*",
+        "filesystem.readFile"
     ],
     "modes": {
         "window": {

diff --git a/resources/css/index.css b/resources/css/index.css
@@ -27,7 +27,7 @@ body {
 #titleBar {
     width: 100%;
     height: 20px;
-    background-color: #C66A0D;
+    background-color: rgb(198, 106, 13);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -36,6 +36,7 @@ body {
 
 #more {
     cursor: pointer;
+    padding: 5px;
 }
 
 #close {
@@ -46,6 +47,27 @@ body {
     padding: 5px;
 }
 
+#nextBoard {
+    position: absolute;
+    right: 70px;
+    bottom: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: rgba(187, 54, 13, 0.8);
+    box-shadow: 0 0 2px 1px rgba(38, 40, 41, 0.5);
+    z-index: 1;
+}
+
+#next {
+    font-size: 5px;
+    cursor: pointer;
+}
+
 #title {
     position: absolute;
     top: 25px;
@@ -70,13 +92,19 @@ body {
     border: 2px solid #414547;
 }
 
+#scroll {
+    overflow-y: scroll;
+    width: 100%;
+    height: 50%;
+}
+
 .block2 {
     display: flex;
     text-align: center;
     align-items: center;
     justify-content: center;
-    width: 100%;
-    height: 50%;
+    min-height: 100%;
+    max-height: 500%;
     background-color: #262829;
     border: 2px solid #414547;
     border-top: none;
@@ -123,6 +151,12 @@ input {
     display: none;
 }
 
+#cancel {
+    position: absolute;
+    right: 5px;
+    display: none;
+}
+
 #look1 {
     position: absolute;
     left: 5px;
@@ -139,19 +173,49 @@ input {
 .text {
     width: 60%;
     cursor: zoom-in;
+    white-space: nowrap;
     word-wrap: break-word;
+    text-overflow: ellipsis;
     font-size: 14px;
 }
 
+::-webkit-scrollbar {
+    display:none;
+}
+
 #text2 {
     display: none;
 }
 
-#setting {
+#listBoard {
     width: 100%;
-    height: 140px;
+    height: 0;
+    z-index: 2;
+    text-align: center;
+    position: absolute;
+    top: 20px;
     background-color: #262829;
+}
+
+.list {
+    width: 100%;
+    height: 28px;
+    padding: 5px;
     border: 2px solid #414547;
-    z-index: 2;
-    display: none;
-}
+    border-top: none;
+    cursor: pointer;
+}
+
+.list:hover {
+    color: #BB360D;
+    background-color: rgba(65, 69, 71, 0.5);
+}
+
+/*#setting {*/
+/*    width: 100%;*/
+/*    height: 140px;*/
+/*    background-color: #262829;*/
+/*    border: 2px solid #414547;*/
+/*    z-index: 1;*/
+/*    display: none;*/
+/*}*/
diff --git a/resources/index.html b/resources/index.html
@@ -8,26 +8,41 @@
 </head>
 <body>
 <div id="titleBar"><i class="fas fa-ellipsis-h" id="more"></i></div>
+
 <i class="fas fa-times" id="close"></i>
+<div id="nextBoard"><i class="fas fa-undo-alt" id="next"></i></div>
+
 <div id="title"></div>
 
+<div id="listBoard">
+    <div class="list" id="list1">YOUR-WORD</div>
+    <div class="list" id="list2">CORE-700</div>
+    <div class="list" id="list3">CET-4</div>
+    <div class="list" id="list4">CET-6</div>
+    <div class="list" id="list5">POST-CET-6</div>
+</div>
+
 <div id="board">
     <div class="block1" id="word">
         <i class="fas fa-edit icon" id="edit"></i>
         <i class="fas fa-bookmark icon" id="mark"></i>
+        <i class="fas fa-backspace icon" id="cancel"></i>
         <div class="text" id="text1"></div>
         <label for="input1"></label>
         <input id="input1" maxlength="45">
     </div>
-    <div class="block2" id="translation">
-        <i class="fas fa-trash-alt icon" id="trash"></i>
-        <i class="fas fa-eye-slash icon" id="look1"></i>
-        <i class="fas fa-eye icon" id="look2"></i>
-        <i class="fas fa-check icon" id="check"></i>
-        <div class="text" id="text2"></div>
-        <label for="input2"></label>
-        <input id="input2" maxlength="20">
+    <div id="scroll">
+        <div class="block2" id="translation">
+            <i class="fas fa-trash-alt icon" id="trash"></i>
+            <i class="fas fa-eye-slash icon" id="look1"></i>
+            <i class="fas fa-eye icon" id="look2"></i>
+            <i class="fas fa-check icon" id="check"></i>
+            <div class="text" id="text2"></div>
+            <label for="input2"></label>
+            <input id="input2" maxlength="20">
+        </div>
     </div>
+
 </div>
 <div id="setting"></div>
 </body>