186 lines
10 KiB
HTML
186 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>
|
||
<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> |