LSB提取网页生成

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gray-100 py-8">
      <header className="text-center mb-10">
        <h1 className="text-4xl font-bold text-gray-800">LSB Extraction Tool</h1>
        <p className="text-gray-600 mt-2">Extract Least Significant Bits from Images</p>
      </header>

      <main className="container mx-auto px-4">
        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-700 mb-4">Upload Image</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <input type="file" className="border p-2 rounded w-full" />
          </div>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-700 mb-4">Extraction Settings</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <label className="block text-gray-700 mb-2">Bit Depth</label>
            <select className="border p-2 rounded w-full">
              <option>1 Bit</option>
              <option>2 Bits</option>
              <option>3 Bits</option>
            </select>
          </div>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-700 mb-4">Extracted Data</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <textarea className="border p-2 rounded w-full h-32" placeholder="Extracted data will appear here..." />
          </div>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-700 mb-4">Preview</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <img src="https://placehold.co/600x400" alt="Preview" className="rounded-lg" />
          </div>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-700 mb-4">Download</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Download Extracted Data</button>
          </div>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-700 mb-4">About</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <p className="text-gray-600">This tool allows you to extract the Least Significant Bits (LSB) from an image. This technique is often used in steganography to hide information within images.</p>
          </div>
        </section>

        <footer className="text-center mt-12 text-gray-600">
          <p>© 2025 LSB Extraction Tool. All rights reserved.</p>
        </footer>
      </main>
    </div>
  );
};

export default App;