update all
This commit is contained in:
347
color_pick.html
347
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;
|
||||
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,93 +320,124 @@
|
||||
<div class="container">
|
||||
<h1>颜色选择器</h1>
|
||||
|
||||
<div class="color-picker">
|
||||
<div class="basic-color-controls">
|
||||
<div
|
||||
id="color-preview"
|
||||
class="color-preview"
|
||||
style="background-color: #ffffff"
|
||||
></div>
|
||||
<div class="main-content">
|
||||
<!-- 左列 -->
|
||||
<div class="left-column">
|
||||
<div class="basic-color-controls">
|
||||
<div
|
||||
id="color-preview"
|
||||
class="color-preview"
|
||||
style="background-color: #ffffff"
|
||||
></div>
|
||||
|
||||
<div class="sliders">
|
||||
<div class="slider-group">
|
||||
<label for="red" class="slider-label">R:</label>
|
||||
<input type="range" id="red" min="0" max="255" value="255" />
|
||||
<span id="red-value">255</span>
|
||||
<div class="sliders">
|
||||
<div class="slider-group">
|
||||
<label for="red" class="slider-label">R:</label>
|
||||
<input type="range" id="red" min="0" max="255" value="255" />
|
||||
<span id="red-value">255</span>
|
||||
</div>
|
||||
<div class="slider-group">
|
||||
<label for="green" class="slider-label">G:</label>
|
||||
<input type="range" id="green" min="0" max="255" value="255" />
|
||||
<span id="green-value">255</span>
|
||||
</div>
|
||||
<div class="slider-group">
|
||||
<label for="blue" class="slider-label">B:</label>
|
||||
<input type="range" id="blue" min="0" max="255" value="255" />
|
||||
<span id="blue-value">255</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-group">
|
||||
<label for="green" class="slider-label">G:</label>
|
||||
<input type="range" id="green" min="0" max="255" value="255" />
|
||||
<span id="green-value">255</span>
|
||||
</div>
|
||||
|
||||
<!-- 高级颜色选择器 -->
|
||||
<div class="advanced-color-picker">
|
||||
<div class="color-gradient">
|
||||
<div class="color-selector"></div>
|
||||
</div>
|
||||
<div class="slider-group">
|
||||
<label for="blue" class="slider-label">B:</label>
|
||||
<input type="range" id="blue" min="0" max="255" value="255" />
|
||||
<span id="blue-value">255</span>
|
||||
<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="color-values">
|
||||
<div>
|
||||
RGB: <span id="rgb-value">rgb(255, 255, 255)</span>
|
||||
<button class="copy-button" data-target="rgb">
|
||||
复制 <span class="copy-success-icon">✔</span>
|
||||
</button>
|
||||
<!-- 右列 -->
|
||||
<div class="right-column">
|
||||
<div class="color-values">
|
||||
<div>
|
||||
RGB: <span id="rgb-value">rgb(255, 255, 255)</span>
|
||||
<button class="copy-button" data-target="rgb">
|
||||
复制 <span class="copy-success-icon">✔</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
Hex: <span id="hex-value">#ffffff</span>
|
||||
<button class="copy-button" data-target="hex">
|
||||
复制 <span class="copy-success-icon">✔</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
HSL: <span id="hsl-value">hsl(0, 0%, 100%)</span>
|
||||
<button class="copy-button" data-target="hsl">
|
||||
复制 <span class="copy-success-icon">✔</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
HSV: <span id="hsv-value">hsv(0, 0%, 100%)</span>
|
||||
<button class="copy-button" data-target="hsv">
|
||||
复制 <span class="copy-success-icon">✔</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Hex: <span id="hex-value">#ffffff</span>
|
||||
<button class="copy-button" data-target="hex">
|
||||
复制 <span class="copy-success-icon">✔</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
HSL: <span id="hsl-value">hsl(0, 0%, 100%)</span>
|
||||
<button class="copy-button" data-target="hsl">
|
||||
复制 <span class="copy-success-icon">✔</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
HSV: <span id="hsv-value">hsv(0, 0%, 100%)</span>
|
||||
<button class="copy-button" data-target="hsv">
|
||||
复制 <span class="copy-success-icon">✔</span>
|
||||
</button>
|
||||
</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 class="input-container">
|
||||
<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>
|
||||
|
||||
<label for="hex-input">十六进制颜色值:</label>
|
||||
<input type="text" id="hex-input" placeholder="例如: #ffffff" />
|
||||
|
||||
<button id="convert-hex-button">转换 Hex</button>
|
||||
|
||||
<div id="input-error" class="error-message"></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" />
|
||||
<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 颜色值" />
|
||||
<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>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user