198 lines
11 KiB
HTML
198 lines
11 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>代码格式化工具 - IT工具合集</title>
|
||
<link rel="icon" href="../../favicon.svg" type="image/svg+xml">
|
||
<link rel="shortcut icon" href="../../favicon.svg" type="image/svg+xml">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
|
||
<link rel="stylesheet" href="../../styles.css">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body class="bg-gray-50 text-gray-900 min-h-screen flex flex-col">
|
||
<!-- 导航栏 -->
|
||
<nav class="bg-white shadow-sm border-b border-gray-200">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-between h-16">
|
||
<div class="flex items-center">
|
||
<a href="../../index.html" class="flex items-center">
|
||
<i class="fas fa-chevron-left mr-2"></i>
|
||
<span class="text-xl font-bold">工具集</span>
|
||
</a>
|
||
</div>
|
||
<div class="flex items-center space-x-4">
|
||
<button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-gray-200">
|
||
<i class="fas fa-moon"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主要内容 -->
|
||
<main class="flex-grow container mx-auto px-4 py-8">
|
||
<!-- 工具标题 -->
|
||
<div class="text-center mb-8">
|
||
<h1 class="text-3xl font-bold mb-2">代码格式化工具</h1>
|
||
<p class="text-gray-600 max-w-2xl mx-auto">美化并格式化您的代码，支持多种编程语言</p>
|
||
</div>
|
||
|
||
<!-- 代码格式化工具 -->
|
||
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||
<!-- 工具控制区 -->
|
||
<div class="p-6 border-b border-gray-200">
|
||
<div class="flex flex-col md:flex-row gap-6">
|
||
<!-- 左侧控制面板 -->
|
||
<div class="w-full md:w-1/3">
|
||
<div class="mb-4">
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">编程语言</label>
|
||
<select id="language-select" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500">
|
||
<option value="javascript">JavaScript</option>
|
||
<option value="html">HTML</option>
|
||
<option value="css">CSS</option>
|
||
<option value="json">JSON</option>
|
||
<option value="xml">XML</option>
|
||
<option value="sql">SQL</option>
|
||
<option value="python">Python</option>
|
||
<option value="java">Java</option>
|
||
<option value="csharp">C#</option>
|
||
<option value="cpp">C++</option>
|
||
<option value="php">PHP</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">格式化选项</label>
|
||
<div class="space-y-2">
|
||
<label class="flex items-center">
|
||
<input type="checkbox" id="opt-indent" class="mr-2" checked>
|
||
<span>缩进代码</span>
|
||
</label>
|
||
<label class="flex items-center">
|
||
<input type="checkbox" id="opt-remove-comments" class="mr-2">
|
||
<span>删除注释</span>
|
||
</label>
|
||
<label class="flex items-center">
|
||
<input type="checkbox" id="opt-single-quotes" class="mr-2">
|
||
<span>使用单引号</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||
缩进空格数: <span id="indent-value">2</span>
|
||
</label>
|
||
<input type="range" id="indent-slider" min="1" max="8" value="2" class="w-full">
|
||
</div>
|
||
|
||
<div class="flex space-x-2">
|
||
<button id="format-btn" class="flex-1 bg-gray-800 hover:bg-black text-white font-medium py-2 px-4 rounded-md transition-colors">
|
||
格式化代码
|
||
</button>
|
||
<button id="copy-btn" class="px-3 py-2 border border-gray-300 rounded-md hover:bg-gray-100">
|
||
<i class="far fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧代码输入区 -->
|
||
<div class="w-full md:w-2/3">
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">输入代码</label>
|
||
<div class="relative">
|
||
<textarea id="code-input" class="w-full h-64 px-4 py-3 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" placeholder="粘贴您的代码到这里..."></textarea>
|
||
<button id="clear-btn" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600">
|
||
<i class="fas fa-times-circle"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 格式化结果 -->
|
||
<div class="p-6 border-t border-gray-200">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h3 class="font-medium">格式化结果</h3>
|
||
<div class="flex items-center space-x-2">
|
||
<button id="download-btn" class="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-md transition-colors flex items-center">
|
||
<i class="fas fa-download mr-1.5"></i>下载
|
||
</button>
|
||
<select id="theme-select" class="text-sm px-3 py-1.5 border border-gray-200 rounded-md">
|
||
<option value="atom-one-dark">深色主题</option>
|
||
<option value="atom-one-light">浅色主题</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div id="code-output-container" class="rounded-md overflow-hidden border border-gray-200 bg-gray-800">
|
||
<pre><code id="code-output" class="hljs language-javascript h-96 overflow-auto p-4"></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 说明和提示 -->
|
||
<div class="p-6 bg-gray-50 border-t border-gray-200">
|
||
<h3 class="font-medium mb-2">使用说明：</h3>
|
||
<ul class="list-disc pl-5 text-gray-600 space-y-1 text-sm">
|
||
<li>支持多种编程语言的代码格式化，包括JavaScript、HTML、CSS等</li>
|
||
<li>可以调整缩进空格数、引号样式等格式化选项</li>
|
||
<li>格式化后的代码支持语法高亮显示</li>
|
||
<li>可以复制或下载格式化后的代码</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-white border-t border-gray-200 py-6">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-3">IT工具合集</h3>
|
||
<p class="text-gray-500 text-sm">提供多种实用工具，帮助您提高效率，解决问题。所有工具完全免费使用，无需注册。</p>
|
||
<div class="flex space-x-4 mt-3 social-links">
|
||
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="github">
|
||
<i class="fab fa-github text-xl"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="twitter">
|
||
<i class="fab fa-twitter text-xl"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="wechat">
|
||
<i class="fab fa-weixin text-xl"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-3">快速链接</h3>
|
||
<ul class="space-y-2 text-sm text-gray-500 quick-links">
|
||
<li><a href="#" class="hover:text-black" data-link-type="about">关于我们</a></li>
|
||
<li><a href="#" class="hover:text-black" data-link-type="terms">使用条款</a></li>
|
||
<li><a href="#" class="hover:text-black" data-link-type="privacy">隐私政策</a></li>
|
||
<li><a href="#" class="hover:text-black" data-link-type="faq">常见问题</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-3">返回主页</h3>
|
||
<p class="text-gray-500 text-sm mb-3">查看更多实用的在线工具</p>
|
||
<a href="../../index.html" class="inline-flex items-center bg-gray-800 hover:bg-black text-white font-medium py-2 px-4 rounded-md transition-colors">
|
||
<i class="fas fa-home mr-2"></i>回到主页
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-gray-200 mt-6 pt-4 text-center text-gray-500 text-sm">
|
||
<p>© 2025 工具集 | 一站式工具合集网站</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify-html.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify-css.min.js"></script>
|
||
<script src="../../script.js"></script>
|
||
<script src="../../footer.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|