gogongxt/tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update all

Browse Source
This commit is contained in:
gogongxt
2025-11-28 16:31:49 +08:00
parent 45268544ea
commit 1c9f59bac7
5 changed files with 523 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
color_pick.html
View File

@@ -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;
flex-direction: column;
align-items: center;
max-width: 900px;
margin: 0 auto;
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 */
align-items: center; /* Center items horizontally */
flex-direction: column;
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 */
align-items: center;
margin-bottom: 10px; /* Add some spacing */
flex-direction: row;
align-items: flex-start;
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 */
border: none;
background-color: #4caf50;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
border: none;
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 {
display: flex;
align-items: center;
.input-container label {
display: block;
margin-bottom: 5px;
}
.input-group label {
margin-right: 5px;
font-weight: 500;
color: #555;
}
.input-container input {
padding: 5px;
width: 50px; /* Adjusted width for RGB inputs */
margin-right: 5px;
width: 100%;
padding: 8px 12px;
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 {
width: 150px; /* Adjusted width for Hex input */
.input-container input:focus {
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>
<input type="number" id="rgb-r" min="0" max="255" value="255" />
<label for="rgb-g">G:</label>
<input type="number" id="rgb-g" min="0" max="255" value="255" />
<label for="rgb-b">B:</label>
<input type="number" id="rgb-b" min="0" max="255" value="255" />
<label for="rgb-r">红色 (R):</label>
<input
type="number"
id="rgb-r"
min="0"
max="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">Hex:</label>
<input type="text" id="hex-input" placeholder="输入 Hex 颜色值" />
<label for="hex-input">十六进制颜色值:</label>
<input type="text" id="hex-input" placeholder="例如: #ffffff" />
<button id="convert-hex-button">转换 Hex</button>
</div>
<div id="input-error" class="error-message"></div>
</div>
<!-- 颜色历史记录 -->
<h2>颜色历史记录</h2>
<div class="color-history"></div>
</div>
</div>
</div>
<script>

17
electricity_calculator.html
View File

@@ -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
type="number"
id="price"
placeholder="例如: 0.6"
step="0.01"
required
/>
<input type="number" id="price" value="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);

159
index.html
View File

@@ -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%;
height: auto;
width: 50px;
padding: 10px 5px;
}
.sidebar.expanded {
width: 220px;
padding: 15px;
}
.main-content {
padding: 15px;
.sidebar h1 {
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>

16
json_formatter.html
View File

@@ -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 {

116
number.html
View File

@@ -7,17 +7,14 @@
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
font-family: sans-serif;
margin: 20px;
}
h1 {
color: #333;
.container {
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;
cursor: pointer;
display: block;
margin-bottom: 5px;
}
button {
padding: 8px 16px;
font-size: 16px;
background-color: #007bff;
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
background-color: #3e8e41;
}
.result-section {
margin-bottom: 20px;
background-color: white;
padding: 15px;
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;
#results {
margin-top: 20px;
border-top: 1px solid #ccc;
padding-top: 10px;
}
.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>二进制: <strong>${binary}</strong></p>
<p>十六进制: <strong>${hexadecimal}</strong></p>
<p>八进制: <strong>${octal}</strong></p>
<p>十进制: <span id="decimal"></span></p>
<p>二进制: <span id="binary"></span></p>
<p>十六进制: <span id="hexadecimal"></span></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>二进制: <strong>${item.binary}</strong></p>
<p>十六进制: <strong>${item.hexadecimal}</strong></p>
<p>八进制: <strong>${item.octal}</strong></p>
<p>十进制: <span id="decimal"></span></p>
<p>二进制: <span id="binary"></span></p>
<p>十六进制: <span id="hexadecimal"></span></p>
<p>八进制: <span id="octal"></span></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>