Update UI again

DodgeHo · Dec 11, 2024 · a53566f · a53566f
1 parent da19422
commit a53566f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# IELTS Writing GPT 评分助手
+# IELTS Writing GPT 
 
-这是一个使用 GPT 模型来评估和改进 IELTS 写作的工具。该工具可以对写作进行多维度评分,并提供详细的反馈和改进建议。
+这是一个使用 GPT 模型来评估和改进雅思写作的工具。该工具可以对写作进行多维度评分,并提供详细的反馈和改进建议。
 
 ## 功能特点
 

diff --git a/index.html b/index.html
@@ -8,8 +8,8 @@
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 </head>
 <body>
-    <h1>IELTS Writing Hinter</h1>
-    <h3>请在下方输入一个雅思写作的题目，系统会生成写作提示和相关词汇建议以及写作范文。</h3>
+    <h1>IELTS Writing GPT</h1>
+    <label>GPT模型设置：</label>
     <div style="display: flex; gap: 40px; margin: 0 20px;">
         <div>
             <label for="apiKey">API Key:</label>
@@ -26,25 +26,36 @@ <h3>请在下方输入一个雅思写作的题目，系统会生成写作提示
             <input type="text" id="modelName" placeholder="Enter the model name" style="margin-right: 15px;">
         </div>
     </div>
+    <hr style="border: 1px solid black; width: 100%;">
+
+    <h1>IELTS Writing Hinter</h1>
+    <h3>请在下方输入一个雅思写作的题目，系统会生成写作提示和相关词汇建议以及写作范文。</h3>
+
     <div>
         <h2>Topic Text</h2>
         <label for="task">Task:</label>
         <select id="task">
             <option value="1">Task 1</option>
             <option value="2">Task 2</option>
         </select>
-        <div class="textarea-container">
+        <div class="upload-controls">
+            <input type="file" id="fileInput" accept=".txt" style="display: none;">
+            <button class="upload" id="uploadButton">Upload a File as Topic</button>
+        </div>
+        <div class="textarea-wrapper">
             <textarea id="topicText" rows="8"></textarea>
-            <div class="upload-controls">
-                <input type="file" id="fileInput" accept=".txt" style="display: none;">
-                <button class="upload" id="uploadButton">Upload a File as Topic</button>
-            </div>
+        </div>
+        <div class="textarea-container">
+
+
         </div>
     </div>
     <br />
     <div class="button-group">
         <button onclick="processTopic()">Generate Writing Hints and Model Essay</button>
     </div>
+    <hr style="border: 1px solid black; width: 100%;">
+
     <div>
         <div class="status-header">
             <h2>Processing Status:</h2>

diff --git a/styles.css b/styles.css
@@ -30,8 +30,6 @@ input[type="password"] {
 }
 
 textarea {
-    width: 100%;
-    padding: 10px;
     border: 1px solid #ddd;
     border-radius: 4px;
     resize: vertical;
@@ -57,13 +55,19 @@ button {
 
 button.upload {
     background-color: #ccc;
-    color: #666;
+    color: #ffffff;
     padding: 5px 15px;
+    position: relative;
+    float: right;
+    margin: 0 0 10px 0;
 }
 
 button:hover {
     background-color: #45a049;
 }
+button.upload:hover {
+    background-color: #000000;
+}
 
 /* 状态和提示区域样式 */
 pre {
@@ -156,22 +160,21 @@ pre.completed {
     gap: 10px;
 } 
 
-.textarea-container {
-    position: relative;
-    margin-bottom: 20px;
-}
-
 .textarea-container textarea {
     width: 100%;
     margin-bottom: 0; /* 移除底部边距 */
 }
 
-.textarea-container button.upload {
-    position: absolute;
-    right: 0;
-    margin-top: 10px; /* 与 textarea 之间的间距 */
+.upload-controls {
+    margin-bottom: 10px;
 }
 
-.upload-controls {
-    margin-top: 10px;
+.textarea-wrapper {
+    width: 100%;
+}
+
+textarea#topicText {
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
 }