From dc576dc74af7914d237ae947997b073a8fbb8965 Mon Sep 17 00:00:00 2001
From: sunjiahao <sunjiahao@example.com>
Date: Fri, 11 Oct 2024 16:23:04 +0800
Subject: [PATCH] sjh

---
 index.html | 94 ++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 70 insertions(+), 24 deletions(-)
diff --git a/index.html b/index.html
index 3355d65..3c873f5 100644
--- a/index.html
+++ b/index.html
@@ -5,47 +5,93 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
     <title>进制转换程序</title>  
     <style>  
-        body { font-family: Arial, sans-serif; }  
-        input { margin-bottom: 10px; }  
+        body {  
+            font-family: Arial, sans-serif;  
+            background-color: #f4f4f4;  
+            padding: 30px;  
+            margin: 0;  
+        }  
+        h1 {  
+            text-align: center;  
+            color: #333;  
+        }  
+        .container {  
+            background: #fff;  
+            padding: 20px;  
+            border-radius: 8px;  
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
+            max-width: 400px;  
+            margin: 0 auto;  
+        }  
+        label {  
+            margin-top: 10px;  
+            font-weight: bold;  
+            display: block;  
+        }  
+        input {  
+            width: calc(100% - 20px);  
+            padding: 10px;  
+            margin: 5px 0 15px;  
+            border: 1px solid #ccc;  
+            border-radius: 4px;  
+            box-sizing: border-box;  
+        }  
+        button {  
+            background-color: #28a745;  
+            color: #fff;  
+            border: none;  
+            padding: 10px;  
+            border-radius: 4px;  
+            cursor: pointer;  
+            width: 100%;  
+        }  
+        button:hover {  
+            background-color: #218838;  
+        }  
+        h2 {  
+            text-align: center;  
+            color: #333;  
+        }  
+        #result {  
+            text-align: center;  
+            font-size: 18px;  
+            font-weight: bold;  
+            color: #007bff;  
+        }  
     </style>  
 </head>  
 <body>  
-    <h1>进制转换程序</h1>  
-    
-    <label for="fromBase">输入进制 (R1):</label>  
-    <input type="number" id="fromBase" value="10" min="2" max="16"><br>  
+    <div class="container">  
+        <h1>进制转换程序</h1>  
+        
+        <label for="fromBase">输入进制 (R1):</label>  
+        <input type="number" id="fromBase" value="10" min="2" max="16">  
+
+        <label for="numberX">输入数字 X:</label>  
+        <input type="text" id="numberX" placeholder="例如：A3">  
+
+        <label for="toBase">转换进制 (R2):</label>  
+        <input type="number" id="toBase" value="10" min="2" max="16">  
+        
+        <button onclick="convertBase()">转换</button>  
+        
+        <h2>转换结果 Y:</h2>  
+        <p id="result"></p>  
+    </div>  
 
-    <label for="numberX">输入数字 X:</label>  
-    <input type="text" id="numberX"><br>  
-    
-    <label for="toBase">转换进制 (R2):</label>  
-    <input type="number" id="toBase" value="10" min="2" max="16"><br>  
-    
-    <button onclick="convertBase()">转换</button>  
-    
-    <h2>转换结果 Y:</h2>  
-    <p id="result"></p>  
-    
     <script>  
         function convertBase() {  
-            // 获取输入值  
             const fromBase = parseInt(document.getElementById('fromBase').value);  
             const numberX = document.getElementById('numberX').value.trim();  
             const toBase = parseInt(document.getElementById('toBase').value);  
 
-            // 验证输入  
             if (!isValidNumberInBase(numberX, fromBase)) {  
                 document.getElementById('result').innerText = "输入的数字 X 在指定的进制 R1 中无效！";  
                 return;  
             }  
 
-            // 将 X 从 R1 进制转换为十进制  
             const decimalValue = parseInt(numberX, fromBase);  
-
-            // 将十进制转换为 R2 进制  
             const resultY = decimalToBase(decimalValue, toBase);  
-
-            // 输出结果  
             document.getElementById('result').innerText = resultY;  
         }  
 
