328 lines
10 KiB
HTML
328 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>文字内联短横线生成器</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
}
|
||
|
||
body {
|
||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||
color: #333;
|
||
line-height: 1.6;
|
||
padding: 20px;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
max-width: 600px;
|
||
background: white;
|
||
border-radius: 15px;
|
||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
|
||
overflow: hidden;
|
||
}
|
||
|
||
header {
|
||
background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
|
||
color: white;
|
||
padding: 25px 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 1.8rem;
|
||
margin-bottom: 5px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.controls {
|
||
padding: 25px 30px;
|
||
background: #f9f9f9;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.control-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.control-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.value-display {
|
||
background: #2575fc;
|
||
color: white;
|
||
padding: 3px 12px;
|
||
border-radius: 12px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
input[type="range"] {
|
||
width: 100%;
|
||
height: 8px;
|
||
-webkit-appearance: none;
|
||
background: #e0e0e0;
|
||
border-radius: 4px;
|
||
outline: none;
|
||
}
|
||
|
||
input[type="range"]::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
width: 22px;
|
||
height: 22px;
|
||
background: #2575fc;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
input[type="color"] {
|
||
width: 100%;
|
||
height: 45px;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
background: white;
|
||
padding: 3px;
|
||
}
|
||
|
||
.preview {
|
||
padding: 30px;
|
||
text-align: left;
|
||
background: white;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.preview-title {
|
||
font-weight: 600;
|
||
color: #7f8c8d;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.preview-content {
|
||
font-size: 1.2rem;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
#inline-hr {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.code-output {
|
||
margin-top: 30px;
|
||
padding: 20px;
|
||
background: #2c3e50;
|
||
color: white;
|
||
border-radius: 8px;
|
||
font-family: 'Courier New', monospace;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
text-align: left;
|
||
font-size: 0.9rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.copy-btn {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 14px;
|
||
background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
margin-top: 15px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(38, 117, 252, 0.4);
|
||
}
|
||
|
||
.copy-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: #7f8c8d;
|
||
font-size: 0.9rem;
|
||
background: #f9f9f9;
|
||
}
|
||
|
||
.usage {
|
||
padding: 15px 30px;
|
||
background: #e8f4fc;
|
||
border-top: 1px solid #c3e1f7;
|
||
}
|
||
|
||
.usage h3 {
|
||
color: #2575fc;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.usage p {
|
||
margin-bottom: 10px;
|
||
font-size: 0.95rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>文字内联短横线生成器</h1>
|
||
<p class="subtitle">适用于Obsidian及其他Markdown编辑器</p>
|
||
</header>
|
||
|
||
<div class="controls">
|
||
<div class="control-group">
|
||
<label>
|
||
横线长度
|
||
<span id="length-value" class="value-display">150px</span>
|
||
</label>
|
||
<input type="range" id="hr-length" min="20" max="300" value="150">
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>
|
||
线条粗细
|
||
<span id="thickness-value" class="value-display">3px</span>
|
||
</label>
|
||
<input type="range" id="hr-thickness" min="1" max="10" value="3">
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label for="hr-color">线条颜色</label>
|
||
<input type="color" id="hr-color" value="#3498db">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="preview">
|
||
<div class="preview-title">预览效果</div>
|
||
<div class="preview-content">
|
||
<p>这是一段示例文字<span id="inline-hr"></span>横线跟在文字后面。</p>
|
||
<p>另一行示例<span id="inline-hr2"></span>这是另一条横线。</p>
|
||
</div>
|
||
|
||
<div class="code-output" id="code-output">
|
||
<!-- 代码将在这里显示 -->
|
||
</div>
|
||
|
||
<button class="copy-btn" id="copy-btn">复制HTML代码</button>
|
||
</div>
|
||
|
||
<div class="usage">
|
||
<h3>使用说明</h3>
|
||
<p>1. 调整上方控件自定义横线样式</p>
|
||
<p>2. 点击复制按钮获取代码</p>
|
||
<p>3. 在Obsidian中：</p>
|
||
<p> - 使用阅读视图：直接粘贴HTML代码</p>
|
||
<p> - 使用编辑视图：粘贴代码后，Obsidian会自动渲染</p>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>内联短横线生成器 | 专为Obsidian优化</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// 获取DOM元素
|
||
const lengthSlider = document.getElementById('hr-length');
|
||
const thicknessSlider = document.getElementById('hr-thickness');
|
||
const colorPicker = document.getElementById('hr-color');
|
||
const inlineHr = document.getElementById('inline-hr');
|
||
const inlineHr2 = document.getElementById('inline-hr2');
|
||
const codeOutput = document.getElementById('code-output');
|
||
const copyBtn = document.getElementById('copy-btn');
|
||
const lengthValue = document.getElementById('length-value');
|
||
const thicknessValue = document.getElementById('thickness-value');
|
||
|
||
// 更新自定义横线
|
||
function updateHr() {
|
||
const length = lengthSlider.value;
|
||
const thickness = thicknessSlider.value;
|
||
const color = colorPicker.value;
|
||
|
||
// 更新显示的值
|
||
lengthValue.textContent = `${length}px`;
|
||
thicknessValue.textContent = `${thickness}px`;
|
||
|
||
// 应用样式到横线
|
||
inlineHr.style.width = `${length}px`;
|
||
inlineHr.style.height = `${thickness}px`;
|
||
inlineHr.style.backgroundColor = color;
|
||
inlineHr.style.border = 'none';
|
||
inlineHr.style.borderRadius = '2px';
|
||
inlineHr.style.margin = '0 5px';
|
||
inlineHr.style.verticalAlign = 'middle';
|
||
|
||
// 第二个横线示例
|
||
inlineHr2.style.width = `${length}px`;
|
||
inlineHr2.style.height = `${thickness}px`;
|
||
inlineHr2.style.backgroundColor = color;
|
||
inlineHr2.style.border = 'none';
|
||
inlineHr2.style.borderRadius = '2px';
|
||
inlineHr2.style.margin = '0 5px';
|
||
inlineHr2.style.verticalAlign = 'middle';
|
||
|
||
// 更新代码输出
|
||
codeOutput.textContent = `<span style="display: inline-block; width: ${length}px; height: ${thickness}px; background: ${color}; vertical-align: middle; margin: 0 5px;"></span>`;
|
||
}
|
||
|
||
// 复制代码到剪贴板
|
||
function copyToClipboard() {
|
||
const text = codeOutput.textContent;
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
// 改变按钮文本提示用户
|
||
copyBtn.textContent = '已复制!';
|
||
setTimeout(() => {
|
||
copyBtn.textContent = '复制HTML代码';
|
||
}, 2000);
|
||
}).catch(err => {
|
||
console.error('复制失败: ', err);
|
||
});
|
||
}
|
||
|
||
// 添加事件监听器
|
||
lengthSlider.addEventListener('input', updateHr);
|
||
thicknessSlider.addEventListener('input', updateHr);
|
||
colorPicker.addEventListener('input', updateHr);
|
||
copyBtn.addEventListener('click', copyToClipboard);
|
||
|
||
// 初始化
|
||
updateHr();
|
||
</script>
|
||
</body>
|
||
</html> |