update all

color_pick.html

@@ -6,55 +6,92 @@
     <title>颜色选择器</title>
     <style>
       body {
-        font-family: monospace, sans-serif;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          "Helvetica Neue", Arial, sans-serif;
         margin: 20px;
+        line-height: 1.6;
       }
 
       input {
-        font-family: monospace, sans-serif; /* 为所有输入框设置等宽字体 */
+        font-family:
+          "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
+          "Courier New", monospace;
       }
 
       .container {
-        display: flex;
+        max-width: 900px;
-        flex-direction: column;
+        margin: 0 auto;
-        align-items: center;
+        padding: 20px;
+      }
+
+      h1 {
+        text-align: center;
+        margin-bottom: 30px;
+        font-weight: 600;
+        color: #333;
+        font-size: 2rem;
       }
 
       .color-picker {
         display: flex;
-        flex-direction: column; /* Changed to column */
+        flex-direction: column;
-        align-items: center; /* Center items horizontally */
         margin-bottom: 20px;
       }
 
+      .main-content {
+        display: flex;
+        gap: 0;
+        margin-bottom: 30px;
+      }
+
+      .left-column {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 25px;
+        border-right: 1px solid #ccc;
+      }
+
+      .right-column {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 25px;
+        padding-top: 0;
+      }
+
       .basic-color-controls {
         display: flex;
-        flex-direction: row; /* Keep basic controls in a row */
+        flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
-        margin-bottom: 10px; /* Add some spacing */
+        margin-bottom: 15px;
       }
 
       .color-preview {
         width: 100px;
         height: 100px;
         border: 1px solid #ccc;
-        margin-right: 20px;
+        margin-right: 15px;
       }
 
       .sliders {
         display: flex;
         flex-direction: column;
+        flex: 1;
       }
 
       .slider-group {
         display: flex;
         align-items: center;
-        margin-bottom: 5px;
+        margin-bottom: 3px;
       }
 
       .slider-label {
         width: 30px;
         margin-right: 10px;
+        font-weight: 500;
+        color: #555;
       }
 
       input[type="range"] {
@@ -62,7 +99,10 @@
       }
 
       .color-values {
-        margin-top: 20px;
+        margin-top: 15px;
+        flex: 1;
+        padding-bottom: 15px;
+        border-bottom: 1px solid #ccc;
       }
 
       .color-values div {
@@ -72,35 +112,55 @@
       /* 颜色历史记录样式 */
       .color-history {
         display: flex;
-        margin-top: 20px;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 10px;
       }
 
       .history-color {
         width: 25px;
         height: 25px;
         border: 1px solid #ccc;
-        margin-right: 5px;
         cursor: pointer;
+        border-radius: 3px;
+        transition: transform 0.2s ease;
+      }
+
+      .history-color:hover {
+        transform: scale(1.1);
+      }
+
+      .history-section {
+        margin-top: 15px;
+        padding-top: 15px;
+        border-top: 1px solid #ccc;
+      }
+
+      .history-section h3 {
+        margin: 0 0 10px 0;
+        font-size: 0.9rem;
+        color: #666;
+        text-align: center;
       }
 
       /* 复制按钮样式 */
       .copy-button {
-        background-color: #2196f3; /* Blue */
+        background-color: #4caf50;
-        border: none;
         color: white;
         padding: 5px 10px;
-        text-align: center;
+        border: none;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 12px;
-        cursor: pointer;
         border-radius: 4px;
+        cursor: pointer;
         margin-left: 5px;
-        position: relative; /* 相对定位，方便对勾定位 */
+        position: relative;
+        font-size: 12px;
+        font-weight: 500;
+        transition: background-color 0.2s ease;
       }
 
       .copy-button:hover {
-        background-color: #0b7dda;
+        background-color: #3e8e41;
       }
 
       /* 复制成功对勾样式 */
@@ -121,42 +181,64 @@
 
       /* 输入框样式 */
       .input-container {
-        margin-top: 20px;
+        flex: 1;
         display: flex;
         flex-direction: column;
-        align-items: center;
+        margin-top: 20px;
       }
 
-      .input-group {
+      .input-container label {
-        display: flex;
+        display: block;
-        align-items: center;
         margin-bottom: 5px;
-      }
+        font-weight: 500;
-
+        color: #555;
-      .input-group label {
-        margin-right: 5px;
       }
 
       .input-container input {
-        padding: 5px;
+        width: 100%;
-        width: 50px; /* Adjusted width for RGB inputs */
+        padding: 8px 12px;
-        margin-right: 5px;
+        margin-bottom: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 14px;
+        transition: border-color 0.2s ease;
       }
 
-      .input-container #hex-input {
+      .input-container input:focus {
-        width: 150px; /* Adjusted width for Hex input */
+        outline: none;
+        border-color: #4caf50;
       }
 
       .input-container button {
-        padding: 5px 10px;
+        background-color: #4caf50;
+        color: white;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 4px;
         cursor: pointer;
-        margin-left: 5px;
+        margin-bottom: 10px;
+        font-weight: 500;
+        transition: background-color 0.2s ease;
       }
 
-      /* 新增样式 */
+      .input-container button:hover {
+        background-color: #3e8e41;
+      }
+
+      #results {
+        margin-top: 20px;
+        border-top: 1px solid #ccc;
+        padding-top: 10px;
+      }
+
+      /* 高级颜色选择器样式 */
       .advanced-color-picker {
         display: flex;
-        margin-top: 20px;
+        margin-top: 15px;
+        padding-top: 15px;
+        justify-content: center;
+        align-items: flex-start;
       }
 
       .color-gradient {
@@ -238,7 +320,9 @@
     <div class="container">
       <h1>颜色选择器</h1>
 
-      <div class="color-picker">
+      <div class="main-content">
+        <!-- 左列 -->
+        <div class="left-column">
           <div class="basic-color-controls">
             <div
               id="color-preview"
@@ -265,6 +349,25 @@
             </div>
           </div>
 
+          <!-- 高级颜色选择器 -->
+          <div class="advanced-color-picker">
+            <div class="color-gradient">
+              <div class="color-selector"></div>
+            </div>
+            <div class="hue-slider">
+              <div class="hue-selector"></div>
+            </div>
+          </div>
+
+          <!-- 颜色历史记录 -->
+          <div class="history-section">
+            <h3>颜色历史记录</h3>
+            <div class="color-history"></div>
+          </div>
+        </div>
+
+        <!-- 右列 -->
+        <div class="right-column">
           <div class="color-values">
             <div>
               RGB: <span id="rgb-value">rgb(255, 255, 255)</span>
@@ -292,39 +395,49 @@
             </div>
           </div>
 
-        <!-- 高级颜色选择器 -->
-        <div class="advanced-color-picker">
-          <div class="color-gradient">
-            <div class="color-selector"></div>
-          </div>
-          <div class="hue-slider">
-            <div class="hue-selector"></div>
-          </div>
-        </div>
-      </div>
-
           <!-- 输入框 -->
           <div class="input-container">
-        <div class="input-group">
+            <label for="rgb-r">红色 (R):</label>
-          <label for="rgb-r">R:</label>
+            <input
-          <input type="number" id="rgb-r" min="0" max="255" value="255" />
+              type="number"
-          <label for="rgb-g">G:</label>
+              id="rgb-r"
-          <input type="number" id="rgb-g" min="0" max="255" value="255" />
+              min="0"
-          <label for="rgb-b">B:</label>
+              max="255"
-          <input type="number" id="rgb-b" min="0" max="255" value="255" />
+              value="255"
+              required
+            />
+
+            <label for="rgb-g">绿色 (G):</label>
+            <input
+              type="number"
+              id="rgb-g"
+              min="0"
+              max="255"
+              value="255"
+              required
+            />
+
+            <label for="rgb-b">蓝色 (B):</label>
+            <input
+              type="number"
+              id="rgb-b"
+              min="0"
+              max="255"
+              value="255"
+              required
+            />
+
             <button id="convert-rgb-button">转换 RGB</button>
-        </div>
+
-        <div class="input-group">
+            <label for="hex-input">十六进制颜色值:</label>
-          <label for="hex-input">Hex:</label>
+            <input type="text" id="hex-input" placeholder="例如: #ffffff" />
-          <input type="text" id="hex-input" placeholder="输入 Hex 颜色值" />
+
             <button id="convert-hex-button">转换 Hex</button>
-        </div>
+
             <div id="input-error" class="error-message"></div>
           </div>
-
+        </div>
-      <!-- 颜色历史记录 -->
+      </div>
-      <h2>颜色历史记录</h2>
-      <div class="color-history"></div>
     </div>
 
     <script>

electricity_calculator.html

@@ -15,8 +15,6 @@
         max-width: 600px;
         margin: 0 auto;
         padding: 20px;
-        border: 1px solid #ccc;
-        border-radius: 5px;
       }
 
       label {
@@ -58,19 +56,13 @@
       <h1>电费计算器</h1>
 
       <label for="power">设备功耗 (瓦):</label>
-      <input type="number" id="power" placeholder="例如: 100" required />
+      <input type="number" id="power" value="100" required />
 
       <label for="hours">每日使用时长 (小时):</label>
-      <input type="number" id="hours" placeholder="例如: 8" required />
+      <input type="number" id="hours" value="8" required />
 
       <label for="price">电价 (元/度):</label>
-      <input
+      <input type="number" id="price" value="0.6" step="0.01" required />
-        type="number"
-        id="price"
-        placeholder="例如: 0.6"
-        step="0.01"
-        required
-      />
 
       <button onclick="calculateCost()">计算</button>
 
@@ -84,6 +76,9 @@
     </div>
 
     <script>
+      // 页面加载时自动计算一次
+      document.addEventListener("DOMContentLoaded", calculateCost);
+
       function calculateCost() {
         // 获取输入值
         let power = parseFloat(document.getElementById("power").value);

index.html

@@ -286,6 +286,7 @@
         flex-wrap: wrap;
         gap: 8px;
         margin-top: 15px;
+        justify-content: center;
       }
 
       .feature-tag {
@@ -326,20 +327,112 @@
         background: #95a5a6;
       }
 
-      /* 响应式设计 */
+      /* 响应式设计 - 保持左右布局 */
       @media (max-width: 768px) {
-        .container {
-          flex-direction: column;
-        }
-
         .sidebar {
-          width: 100%;
+          width: 50px;
-          height: auto;
+          padding: 10px 5px;
+        }
+
+        .sidebar.expanded {
+          width: 220px;
           padding: 15px;
         }
 
-        .main-content {
+        .sidebar h1 {
-          padding: 15px;
+          font-size: 14px;
+          margin-bottom: 20px;
+        }
+
+        .sidebar.expanded h1 {
+          font-size: 16px;
+        }
+
+        .tool-item {
+          padding: 8px 6px;
+          margin-bottom: 5px;
+        }
+
+        .sidebar.expanded .tool-item {
+          padding: 12px 10px;
+        }
+
+        .tool-icon {
+          font-size: 16px;
+        }
+
+        .sidebar.expanded .tool-icon {
+          font-size: 20px;
+          margin-right: 10px;
+          width: 20px;
+        }
+
+        .tool-info h3 {
+          font-size: 12px;
+        }
+
+        .sidebar.expanded .tool-info h3 {
+          font-size: 14px;
+        }
+
+        .tool-info p {
+          font-size: 9px;
+        }
+
+        .sidebar.expanded .tool-info p {
+          font-size: 10px;
+        }
+
+        .sidebar-toggle {
+          width: 24px;
+          height: 24px;
+          font-size: 12px;
+        }
+
+        #toggleIcon {
+          font-size: 22px;
+        }
+
+        .welcome-section {
+          padding: 20px;
+        }
+
+        .welcome-section h2 {
+          font-size: 28px;
+        }
+
+        .welcome-section p {
+          font-size: 16px;
+        }
+      }
+
+      @media (max-width: 480px) {
+        .sidebar {
+          width: 40px;
+          padding: 8px 4px;
+        }
+
+        .sidebar.expanded {
+          width: 200px;
+          padding: 10px;
+        }
+
+        .tool-icon {
+          font-size: 14px;
+        }
+
+        .sidebar.expanded .tool-icon {
+          font-size: 18px;
+        }
+
+        .sidebar-toggle {
+          width: 20px;
+          height: 20px;
+          font-size: 10px;
+        }
+
+        #toggleIcon {
+          font-size: 18px;
         }
       }
     </style>
@@ -415,7 +508,6 @@
               所有工具都经过精心设计，界面简洁美观，功能强大实用。支持在线使用，无需下载安装。
             </p>
             <div class="feature-tags">
-              <span class="feature-tag">💻 纯前端</span>
               <span class="feature-tag">🎨 界面美观</span>
               <span class="feature-tag">⚡ 快速响应</span>
               <span class="feature-tag">📱 响应式设计</span>
@@ -432,6 +524,22 @@
               点击左侧的工具名称即可在右侧区域打开对应工具。所有数据都在本地处理，不会上传到服务器，保护您的隐私安全。
             </p>
           </div>
+
+          <div
+            class="tool-preview"
+            style="margin-top: 30px; border-left-color: #27ae60"
+          >
+            <h3>💬 定制服务</h3>
+            <p>
+              如果您有想要加入的工具箱功能，欢迎联系
+              <a
+                href="mailto:gogongxt@163.com"
+                style="color: #27ae60; text-decoration: none"
+                >gogongxt@163.com</a
+              >
+              为您定制专属工具。
+            </p>
+          </div>
         </div>
       </div>
     </div>
@@ -522,7 +630,6 @@
                 <h3>📋 工具特色</h3>
                 <p>所有工具都经过精心设计，界面简洁美观，功能强大实用。支持在线使用，无需下载安装。</p>
                 <div class="feature-tags">
-                  <span class="feature-tag">💻 纯前端</span>
                   <span class="feature-tag">🎨 界面美观</span>
                   <span class="feature-tag">⚡ 快速响应</span>
                   <span class="feature-tag">📱 响应式设计</span>
@@ -534,6 +641,11 @@
                 <h3>🚀 使用说明</h3>
                 <p>点击左侧的工具名称即可在右侧区域打开对应工具。所有数据都在本地处理，不会上传到服务器，保护您的隐私安全。</p>
               </div>
+
+              <div class="tool-preview" style="margin-top: 30px; border-left-color: #27ae60;">
+                <h3>💬 定制服务</h3>
+                <p>如果您有想要加入的工具箱功能，欢迎联系 <a href="mailto:gogongxt@163.com" style="color: #27ae60; text-decoration: none;">gogongxt@163.com</a> 为您定制专属工具。</p>
+              </div>
             </div>
           `;
         } else if (tool.url) {
@@ -543,31 +655,6 @@
           `;
         }
       }
-
-      // 键盘快捷键支持
-      document.addEventListener("keydown", function (e) {
-        // Ctrl/Cmd + 数字键快速切换工具
-        if (e.ctrlKey || e.metaKey) {
-          const key = parseInt(e.key);
-          if (key >= 1 && key <= 6) {
-            const toolNames = [
-              "welcome",
-              "calculator",
-              "number",
-              "color",
-              "json",
-              "other",
-            ];
-            const toolName = toolNames[key - 1];
-            const toolItem = document.querySelector(
-              `[data-tool="${toolName}"]`,
-            );
-            if (toolItem) {
-              toolItem.click();
-            }
-          }
-        }
-      });
     </script>
   </body>
 </html>

json_formatter.html

@@ -15,12 +15,12 @@
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
         margin: 0;
         padding: 0;
-        background: white;
         color: #333;
+        overflow: hidden;
       }
 
       .container {
-        width: 100%;
+        width: 100vw;
         height: 100vh;
         display: flex;
         flex-direction: column;
@@ -28,9 +28,10 @@
 
       .header {
         background: #f5f5f5;
-        padding: 20px;
+        padding: 15px 20px;
         text-align: center;
         border-bottom: 1px solid #ddd;
+        flex-shrink: 0;
       }
 
       .header h1 {
@@ -46,7 +47,7 @@
       }
 
       .controls {
-        padding: 15px 20px;
+        padding: 10px 15px;
         background: #f9f9f9;
         border-bottom: 1px solid #ddd;
         display: flex;
@@ -54,6 +55,7 @@
         align-items: center;
         flex-wrap: wrap;
         gap: 10px;
+        flex-shrink: 0;
       }
 
       .control-group {
@@ -110,7 +112,8 @@
 
       .editor-container {
         display: flex;
-        height: 600px;
+        flex: 1;
+        min-height: 400px;
       }
 
       .editor-panel {
@@ -195,12 +198,13 @@
       .status-bar {
         background: #f5f5f5;
         border-top: 1px solid #ddd;
-        padding: 8px 15px;
+        padding: 6px 15px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: 12px;
         color: #666;
+        flex-shrink: 0;
       }
 
       .char-count {

number.html

@@ -7,17 +7,14 @@
 
     <style>
       body {
-        font-family: Arial, sans-serif;
+        font-family: sans-serif;
-        background-color: #f4f4f4;
+        margin: 20px;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 20px;
       }
 
-      h1 {
+      .container {
-        color: #333;
+        max-width: 600px;
+        margin: 0 auto;
+        padding: 20px;
       }
 
       .input-section {
@@ -28,62 +25,43 @@
       }
 
       input[type="text"] {
+        width: 100%;
         padding: 8px;
-        font-size: 16px;
+        margin-bottom: 10px;
         border: 1px solid #ccc;
         border-radius: 4px;
-        flex: 1;
+        box-sizing: border-box; /* 确保 padding 不会增加元素宽度 */
       }
 
       .radio-group {
         display: flex;
         gap: 10px;
         margin-top: 10px;
-        margin-bottom: 20px; /* 增加间距 */
+        margin-bottom: 20px;
       }
 
       .radio-group label {
-        font-size: 16px;
+        display: block;
-        cursor: pointer;
+        margin-bottom: 5px;
       }
 
       button {
-        padding: 8px 16px;
+        background-color: #4caf50;
-        font-size: 16px;
-        background-color: #007bff;
         color: white;
+        padding: 10px 20px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
       }
 
       button:hover {
-        background-color: #0056b3;
+        background-color: #3e8e41;
       }
 
-      .result-section {
+      #results {
-        margin-bottom: 20px;
+        margin-top: 20px;
-        background-color: white;
+        border-top: 1px solid #ccc;
-        padding: 15px;
+        padding-top: 10px;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        width: 300px;
-        text-align: left; /* 左对齐 */
-      }
-
-      .result-section p {
-        margin: 10px 0;
-        font-size: 18px;
-        color: #333;
-      }
-
-      .history-section {
-        width: 300px;
-      }
-
-      .history-section h2 {
-        font-size: 18px;
-        color: #333;
       }
 
       .history-list {
@@ -93,17 +71,19 @@
 
       .history-list li {
         padding: 10px;
-
-        background-color: white;
-
         border: 1px solid #ccc;
-
         border-radius: 4px;
         margin-bottom: 5px;
         cursor: pointer;
         font-size: 14px;
       }
 
+      .history-section h2 {
+        font-size: 18px;
+        color: #333;
+        margin-bottom: 15px;
+      }
+
       .history-list li:hover {
         background-color: #f0f0f0;
       }
@@ -111,11 +91,13 @@
   </head>
 
   <body>
+    <div class="container">
       <h1>程序员进制计算器</h1>
-    <div class="input-section">
+
-      <input type="text" id="number-input" placeholder="请输入数字" />
+      <label for="number-input">请输入数字:</label>
+      <input type="text" id="number-input" placeholder="例如: 100" required />
+
       <button onclick="convertNumber()">转换</button>
-    </div>
       <div class="radio-group">
         <label
           ><input type="radio" name="base" value="10" checked /> 十进制</label
@@ -124,9 +106,12 @@
         <label><input type="radio" name="base" value="8" /> 八进制</label>
         <label><input type="radio" name="base" value="16" /> 十六进制</label>
       </div>
-    <div class="result-section" id="result-section">
+      <div id="results">
+        <h2>转换结果</h2>
+        <div id="result-section">
           <!-- 计算结果将显示在这里 -->
         </div>
+      </div>
       <div class="history-section">
         <h2>历史记录</h2>
         <ul class="history-list" id="history-list">
@@ -139,7 +124,9 @@
 
         function convertNumber() {
           const numberInput = document.getElementById("number-input").value;
-        const base = document.querySelector('input[name="base"]:checked').value;
+          const base = document.querySelector(
+            'input[name="base"]:checked',
+          ).value;
 
           let decimal;
           if (base === "10") {
@@ -164,12 +151,17 @@
           const resultSection = document.getElementById("result-section");
 
           resultSection.innerHTML = `
-                <p>十进制: <strong>${decimal}</strong></p>
+                <p>十进制: <span id="decimal"></span></p>
-                <p>二进制: <strong>${binary}</strong></p>
+                <p>二进制: <span id="binary"></span></p>
-                <p>十六进制: <strong>${hexadecimal}</strong></p>
+                <p>十六进制: <span id="hexadecimal"></span></p>
-                <p>八进制: <strong>${octal}</strong></p>
+                <p>八进制: <span id="octal"></span></p>
             `;
 
+          document.getElementById("decimal").textContent = decimal;
+          document.getElementById("binary").textContent = binary;
+          document.getElementById("hexadecimal").textContent = hexadecimal;
+          document.getElementById("octal").textContent = octal;
+
           const historyItem = {
             input: numberInput,
             base: base,
@@ -224,14 +216,18 @@
           const item = historyList[index];
           const resultSection = document.getElementById("result-section");
           resultSection.innerHTML = `
-                <p>十进制: <strong>${item.decimal}</strong></p>
+                <p>十进制: <span id="decimal"></span></p>
-                <p>二进制: <strong>${item.binary}</strong></p>
+                <p>二进制: <span id="binary"></span></p>
-
+                <p>十六进制: <span id="hexadecimal"></span></p>
-                <p>十六进制: <strong>${item.hexadecimal}</strong></p>
+                <p>八进制: <span id="octal"></span></p>
-
-                <p>八进制: <strong>${item.octal}</strong></p>
             `;
+
+          document.getElementById("decimal").textContent = item.decimal;
+          document.getElementById("binary").textContent = item.binary;
+          document.getElementById("hexadecimal").textContent = item.hexadecimal;
+          document.getElementById("octal").textContent = item.octal;
         }
       </script>
+    </div>
   </body>
 </html>