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

first commit

Browse Source
This commit is contained in:
shenjianZ
2025-05-24 22:25:49 +08:00
commit bcdeef8892
150 changed files with 9734 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
media-tools/image-converter/old/index.html Normal file
View File

@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片格式转换 - 工具合集</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="../../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">轻松转换各种图片格式，支持JPG、PNG、WEBP等多种格式</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 id="upload-container" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors cursor-pointer">
<input type="file" id="file-input" class="hidden" accept="image/*">
<div id="upload-prompt">
<i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
<h3 class="text-lg font-medium mb-2">拖放图片到此处或点击上传</h3>
<p class="text-gray-500 text-sm mb-3">支持 JPG、PNG、GIF、WEBP 等格式</p>
<button id="upload-button" class="bg-gray-800 hover:bg-black text-white text-sm font-medium py-2 px-4 rounded-md transition-colors">
选择图片文件
</button>
</div>
<div id="upload-preview" class="hidden flex flex-col items-center">
<img id="preview-image" class="max-h-64 max-w-full mb-4 rounded-md shadow-sm" src="">
<p id="file-info" class="text-sm text-gray-500 mb-3"></p>
<button id="change-file" class="text-sm text-gray-600 hover:text-black">
更换图片
</button>
</div>
</div>
</div>
<!-- 转换选项 -->
<div class="p-6 border-b border-gray-200">
<h3 class="font-medium mb-4">转换选项：</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- 目标格式 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">目标格式</label>
<select id="format-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="jpg">JPG/JPEG</option>
<option value="png">PNG</option>
<option value="webp">WEBP</option>
<option value="gif">GIF</option>
<option value="bmp">BMP</option>
</select>
</div>
<!-- 质量设置 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
图片质量: <span id="quality-value">80</span>%
</label>
<input type="range" id="quality-slider" min="10" max="100" value="80" class="w-full">
</div>
</div>
<!-- 图片尺寸 -->
<div class="mt-5">
<div class="flex items-center mb-3">
<label class="text-sm font-medium text-gray-700 mr-2">调整图片尺寸</label>
<div class="relative inline-block w-10 mr-2 align-middle select-none">
<input type="checkbox" id="resize-toggle" class="sr-only">
<div class="w-10 h-5 bg-gray-300 rounded-full shadow-inner"></div>
<div class="absolute inset-y-0 left-0 w-5 h-5 bg-white rounded-full shadow transform transition-transform"></div>
</div>
</div>
<div id="resize-options" class="grid grid-cols-2 gap-4 mt-3 hidden">
<div>
<label class="block text-xs text-gray-600 mb-1">宽度 (像素)</label>
<input type="number" id="width-input" placeholder="自动" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500">
</div>
<div>
<label class="block text-xs text-gray-600 mb-1">高度 (像素)</label>
<input type="number" id="height-input" placeholder="自动" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500">
</div>
</div>
</div>
<!-- 转换按钮 -->
<div class="mt-6">
<button id="convert-button" class="w-full bg-gray-800 hover:bg-black text-white font-medium py-3 px-6 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
开始转换
</button>
</div>
</div>
<!-- 转换结果 -->
<div id="result-section" class="p-6 bg-gray-50 border-t border-gray-200 hidden">
<h3 class="font-medium mb-4">转换结果：</h3>
<div class="flex flex-col items-center">
<div class="bg-white p-4 rounded-md shadow-sm max-w-sm">
<img id="result-image" class="max-h-64 max-w-full mb-4" src="">
</div>
<div class="mt-4 text-center">
<p id="result-info" class="text-sm text-gray-600 mb-3"></p>
<a id="download-link" class="inline-block bg-gray-800 hover:bg-black text-white font-medium py-2 px-6 rounded-md transition-colors" href="#" download>
<i class="fas fa-download mr-2"></i>下载图片
</a>
</div>
</div>
</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="../../script.js"></script>
<script src="../../footer.js"></script>
<script src="script.js"></script>
</body>
</html>