یک سایت بساز که بعد از اپلود عکس اون رو به تکه های A4 بخش کنه به طوری که با چسباندن تکه ها به همدیگر یک پوستر بزرگ بسازیم

README.md

@@ -1,10 +1,13 @@
 ---
-title: Posterpuzzle Maker
-emoji: 🏃
-colorFrom: blue
-colorTo: blue
+title: PosterPuzzle Maker 🧩
+colorFrom: red
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,101 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          background-color: #1e293b;
+          color: white;
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 3rem 1.5rem;
+        }
+        .footer-content {
+          display: flex;
+          flex-direction: column;
+          gap: 2rem;
+        }
+        .footer-top {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 2rem;
+        }
+        .footer-logo {
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: white;
+          text-decoration: none;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          margin-bottom: 1rem;
+        }
+        .footer-links {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+        .footer-link {
+          color: #cbd5e1;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-link:hover {
+          color: white;
+        }
+        .footer-bottom {
+          border-top: 1px solid #334155;
+          padding-top: 2rem;
+          text-align: center;
+          color: #94a3b8;
+          font-size: 0.875rem;
+        }
+        @media (min-width: 768px) {
+          .footer-content {
+            gap: 4rem;
+          }
+        }
+      </style>
+      <footer>
+        <div class="container">
+          <div class="footer-content">
+            <div class="footer-top">
+              <div>
+                <a href="/" class="footer-logo">
+                  <i data-feather="box"></i>
+                  PosterPuzzle
+                </a>
+                <p class="text-slate-300">Create stunning large posters from your favorite images.</p>
+              </div>
+              <div>
+                <h4 class="font-medium text-lg mb-3">Quick Links</h4>
+                <div class="footer-links">
+                  <a href="/" class="footer-link">Home</a>
+                  <a href="#" class="footer-link">How it works</a>
+                  <a href="#" class="footer-link">Tutorial</a>
+                </div>
+              </div>
+              <div>
+                <h4 class="font-medium text-lg mb-3">Resources</h4>
+                <div class="footer-links">
+                  <a href="#" class="footer-link">Help Center</a>
+                  <a href="#" class="footer-link">Privacy Policy</a>
+                  <a href="#" class="footer-link">Terms of Service</a>
+                </div>
+              </div>
+            </div>
+            <div class="footer-bottom">
+              &copy; ${new Date().getFullYear()} PosterPuzzle Maker. All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,71 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        nav {
+          background-color: white;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 1rem 1.5rem;
+        }
+        .navbar-content {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo {
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: #4f46e5;
+          text-decoration: none;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .nav-links {
+          display: flex;
+          gap: 1.5rem;
+        }
+        .nav-link {
+          color: #4b5563;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.2s;
+        }
+        .nav-link:hover {
+          color: #4f46e5;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+        }
+      </style>
+      <nav>
+        <div class="container">
+          <div class="navbar-content">
+            <a href="/" class="logo">
+              <i data-feather="box"></i>
+              PosterPuzzle
+            </a>
+            <div class="nav-links">
+              <a href="/" class="nav-link">Home</a>
+              <a href="#" class="nav-link">How it works</a>
+              <a href="#" class="nav-link">About</a>
+            </div>
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,118 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PosterPuzzle Maker - Create Giant Posters</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="min-h-screen flex flex-col bg-gray-50">
+    <custom-navbar></custom-navbar>
+
+    <main class="flex-grow container mx-auto px-4 py-8">
+        <div class="max-w-4xl mx-auto">
+            <div class="text-center mb-12">
+                <h1 class="text-4xl font-bold text-gray-800 mb-3">Create Your Giant Poster</h1>
+                <p class="text-lg text-gray-600">Upload an image and we'll split it into A4 pages for you to print and assemble</p>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+                <div class="flex flex-col md:flex-row gap-6">
+                    <div class="w-full md:w-1/2">
+                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center transition hover:border-indigo-400">
+                            <div id="drop-zone" class="cursor-pointer">
+                                <i data-feather="upload" class="w-12 h-12 text-indigo-500 mx-auto mb-3"></i>
+                                <h3 class="text-lg font-medium text-gray-700 mb-2">Upload Your Image</h3>
+                                <p class="text-gray-500 mb-3">Drag & drop or click to select</p>
+                                <input type="file" id="file-input" accept="image/*" class="hidden">
+                                <button id="upload-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
+                                    Select Image
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="mt-6">
+                            <label for="page-count" class="block text-sm font-medium text-gray-700 mb-2">Number of A4 Pages</label>
+                            <div class="flex items-center gap-4">
+                                <input type="range" id="page-count" min="1" max="16" value="4" class="w-full">
+                                <span id="page-count-value" class="font-medium text-gray-800">4</span>
+                            </div>
+                        </div>
+
+                        <div class="mt-6">
+                            <label for="orientation" class="block text-sm font-medium text-gray-700 mb-2">Orientation</label>
+                            <div class="flex gap-4">
+                                <button id="portrait" class="orientation-btn active bg-indigo-100 text-indigo-700 px-4 py-2 rounded-lg">
+                                    Portrait
+                                </button>
+                                <button id="landscape" class="orientation-btn px-4 py-2 rounded-lg border border-gray-300">
+                                    Landscape
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="mt-6 hidden" id="preview-controls">
+                            <button id="generate-btn" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition font-medium">
+                                Generate Poster Pages
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="w-full md:w-1/2">
+                        <div class="border border-gray-200 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center" style="min-height: 300px;">
+                            <div id="image-preview-container" class="hidden w-full h-full flex items-center justify-center">
+                                <img id="image-preview" class="max-w-full max-h-full object-contain">
+                            </div>
+                            <div id="empty-state" class="text-center p-6">
+                                <i data-feather="image" class="w-12 h-12 text-gray-400 mx-auto mb-3"></i>
+                                <p class="text-gray-500">Your image will appear here</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="result-section" class="hidden">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-2xl font-bold text-gray-800">Your Poster Pages</h2>
+                    <button id="download-all" class="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
+                        <i data-feather="download"></i>
+                        Download All
+                    </button>
+                </div>
+
+                <div id="poster-pages" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                    <!-- Generated pages will appear here -->
+                </div>
+
+                <div class="mt-8 bg-yellow-50 border-l-4 border-yellow-400 p-4">
+                    <div class="flex">
+                        <div class="flex-shrink-0">
+                            <i data-feather="alert-triangle" class="h-5 w-5 text-yellow-400"></i>
+                        </div>
+                        <div class="ml-3">
+                            <p class="text-sm text-yellow-700">
+                                <strong>Printing instructions:</strong> Print all pages at 100% scale (no scaling). 
+                                Trim the edges as indicated and assemble them together to create your giant poster.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,274 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // DOM elements
+    const fileInput = document.getElementById('file-input');
+    const uploadBtn = document.getElementById('upload-btn');
+    const dropZone = document.getElementById('drop-zone');
+    const imagePreview = document.getElementById('image-preview');
+    const imagePreviewContainer = document.getElementById('image-preview-container');
+    const emptyState = document.getElementById('empty-state');
+    const pageCountInput = document.getElementById('page-count');
+    const pageCountValue = document.getElementById('page-count-value');
+    const portraitBtn = document.getElementById('portrait');
+    const landscapeBtn = document.getElementById('landscape');
+    const previewControls = document.getElementById('preview-controls');
+    const generateBtn = document.getElementById('generate-btn');
+    const resultSection = document.getElementById('result-section');
+    const posterPages = document.getElementById('poster-pages');
+    const downloadAllBtn = document.getElementById('download-all');
+
+    // Current image and settings
+    let currentImage = null;
+    let currentOrientation = 'portrait';
+    let currentPageCount = 4;
+
+    // Event listeners
+    uploadBtn.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', handleFileSelect);
+    dropZone.addEventListener('dragover', handleDragOver);
+    dropZone.addEventListener('dragleave', handleDragLeave);
+    dropZone.addEventListener('drop', handleDrop);
+    pageCountInput.addEventListener('input', updatePageCount);
+    portraitBtn.addEventListener('click', () => setOrientation('portrait'));
+    landscapeBtn.addEventListener('click', () => setOrientation('landscape'));
+    generateBtn.addEventListener('click', generatePosterPages);
+    downloadAllBtn.addEventListener('click', downloadAllPages);
+
+    // Update page count display
+    function updatePageCount() {
+        currentPageCount = parseInt(pageCountInput.value);
+        pageCountValue.textContent = currentPageCount;
+    }
+
+    // Set orientation
+    function setOrientation(orientation) {
+        currentOrientation = orientation;
+        if (orientation === 'portrait') {
+            portraitBtn.classList.add('active', 'bg-indigo-100', 'text-indigo-700');
+            portraitBtn.classList.remove('border', 'border-gray-300');
+            landscapeBtn.classList.remove('active', 'bg-indigo-100', 'text-indigo-700');
+            landscapeBtn.classList.add('border', 'border-gray-300');
+        } else {
+            landscapeBtn.classList.add('active', 'bg-indigo-100', 'text-indigo-700');
+            landscapeBtn.classList.remove('border', 'border-gray-300');
+            portraitBtn.classList.remove('active', 'bg-indigo-100', 'text-indigo-700');
+            portraitBtn.classList.add('border', 'border-gray-300');
+        }
+    }
+
+    // Handle file selection
+    function handleFileSelect(e) {
+        const file = e.target.files[0];
+        if (file && file.type.match('image.*')) {
+            processImageFile(file);
+        }
+    }
+
+    // Handle drag over
+    function handleDragOver(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        dropZone.classList.add('highlight');
+    }
+
+    // Handle drag leave
+    function handleDragLeave(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        dropZone.classList.remove('highlight');
+    }
+
+    // Handle drop
+    function handleDrop(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        dropZone.classList.remove('highlight');
+        
+        const file = e.dataTransfer.files[0];
+        if (file && file.type.match('image.*')) {
+            processImageFile(file);
+        }
+    }
+
+    // Process image file
+    function processImageFile(file) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            currentImage = new Image();
+            currentImage.onload = function() {
+                showPreview();
+            };
+            currentImage.src = e.target.result;
+        };
+        reader.readAsDataURL(file);
+    }
+
+    // Show preview
+    function showPreview() {
+        imagePreview.src = currentImage.src;
+        imagePreviewContainer.classList.remove('hidden');
+        emptyState.classList.add('hidden');
+        previewControls.classList.remove('hidden');
+    }
+
+    // Generate poster pages
+    function generatePosterPages() {
+        if (!currentImage) return;
+        
+        // Clear previous results
+        posterPages.innerHTML = '';
+        resultSection.classList.remove('hidden');
+        
+        // Calculate dimensions for each page
+        const aspectRatio = currentImage.width / currentImage.height;
+        let cols, rows;
+        
+        if (currentOrientation === 'portrait') {
+            // For portrait orientation, we'll split vertically first
+            cols = Math.ceil(Math.sqrt(currentPageCount * (210 / 297))); // A4 ratio
+            rows = Math.ceil(currentPageCount / cols);
+        } else {
+            // For landscape orientation, we'll split horizontally first
+            rows = Math.ceil(Math.sqrt(currentPageCount * (297 / 210))); // A4 ratio
+            cols = Math.ceil(currentPageCount / rows);
+        }
+        
+        // Create canvas for the entire image
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // Size canvas to maintain aspect ratio
+        if (currentOrientation === 'portrait') {
+            canvas.width = cols * 210; // A4 width in mm (approximate)
+            canvas.height = (canvas.width / aspectRatio);
+            
+            // If height is less than needed for rows, adjust
+            const neededHeight = rows * 297;
+            if (canvas.height < neededHeight) {
+                canvas.height = neededHeight;
+                canvas.width = canvas.height * aspectRatio;
+            }
+        } else {
+            canvas.height = rows * 210; // A4 height in mm (approximate)
+            canvas.width = canvas.height * aspectRatio;
+            
+            // If width is less than needed for cols, adjust
+            const neededWidth = cols * 297;
+            if (canvas.width < neededWidth) {
+                canvas.width = neededWidth;
+                canvas.height = canvas.width / aspectRatio;
+            }
+        }
+        
+        // Draw the image on canvas
+        ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
+        
+        // Calculate each page's dimensions
+        const pageWidth = canvas.width / cols;
+        const pageHeight = canvas.height / rows;
+        
+        // Create individual pages
+        for (let row = 0; row < rows; row++) {
+            for (let col = 0; col < cols; col++) {
+                const pageIndex = row * cols + col;
+                if (pageIndex >= currentPageCount) break;
+                
+                // Create page canvas
+                const pageCanvas = document.createElement('canvas');
+                pageCanvas.width = 2480; // A4 at 300dpi
+                pageCanvas.height = 3508;
+                const pageCtx = pageCanvas.getContext('2d');
+                
+                // Calculate source dimensions
+                const sx = col * pageWidth;
+                const sy = row * pageHeight;
+                const sw = pageWidth;
+                const sh = pageHeight;
+                
+                // Draw the portion of the image on the page
+                pageCtx.drawImage(
+                    canvas,
+                    sx, sy, sw, sh,
+                    0, 0, pageCanvas.width, pageCanvas.height
+                );
+                
+                // Add cut lines and page number
+                addPageMarkings(pageCtx, pageCanvas.width, pageCanvas.height, pageIndex + 1);
+                
+                // Create page element
+                const pageElement = document.createElement('div');
+                pageElement.className = 'poster-page relative';
+                
+                // Create download button
+                const downloadBtn = document.createElement('button');
+                downloadBtn.className = 'absolute top-2 left-2 bg-white bg-opacity-90 p-2 rounded-full shadow hover:bg-opacity-100 transition';
+                downloadBtn.innerHTML = '<i data-feather="download" class="w-4 h-4"></i>';
+                downloadBtn.onclick = () => downloadPage(pageCanvas, pageIndex + 1);
+                
+                // Add image and button to page
+                const img = document.createElement('img');
+                img.src = pageCanvas.toDataURL('image/jpeg', 0.9);
+                img.className = 'w-full h-auto';
+                
+                pageElement.appendChild(img);
+                pageElement.appendChild(downloadBtn);
+                posterPages.appendChild(pageElement);
+            }
+        }
+        
+        feather.replace();
+    }
+
+    // Add page markings (cut lines and page numbers)
+    function addPageMarkings(ctx, width, height, pageNumber) {
+        // Cut lines (5mm from edges)
+        const cutMargin = 59; // 5mm at 300dpi (5/25.4*300)
+        
+        ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+        ctx.lineWidth = 2;
+        ctx.setLineDash([5, 5]);
+        
+        // Top and bottom lines
+        ctx.beginPath();
+        ctx.moveTo(cutMargin, cutMargin);
+        ctx.lineTo(width - cutMargin, cutMargin);
+        ctx.moveTo(cutMargin, height - cutMargin);
+        ctx.lineTo(width - cutMargin, height - cutMargin);
+        ctx.stroke();
+        
+        // Left and right lines
+        ctx.beginPath();
+        ctx.moveTo(cutMargin, cutMargin);
+        ctx.lineTo(cutMargin, height - cutMargin);
+        ctx.moveTo(width - cutMargin, cutMargin);
+        ctx.lineTo(width - cutMargin, height - cutMargin);
+        ctx.stroke();
+        
+        // Page number
+        ctx.font = 'bold 40px Arial';
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'bottom';
+        ctx.fillText(pageNumber.toString(), width - 20, height - 20);
+    }
+
+    // Download a single page
+    function downloadPage(canvas, pageNumber) {
+        const link = document.createElement('a');
+        link.download = `poster-page-${pageNumber}.jpg`;
+        link.href = canvas.toDataURL('image/jpeg', 0.9);
+        link.click();
+    }
+
+    // Download all pages
+    function downloadAllPages() {
+        const pages = posterPages.querySelectorAll('.poster-page img');
+        pages.forEach((img, index) => {
+            const link = document.createElement('a');
+            link.download = `poster-page-${index + 1}.jpg`;
+            link.href = img.src;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        });
+    }
+});

style.css

@@ -1,28 +1,64 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom styles to enhance the Tailwind base */
+#drop-zone.highlight {
+    border-color: #6366f1;
+    background-color: #f0f5ff;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.orientation-btn.active {
+    border: 2px solid #6366f1;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.poster-page {
+    position: relative;
+    background-color: white;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.poster-page::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px dashed rgba(0, 0, 0, 0.2);
+    pointer-events: none;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.cut-line {
+    position: absolute;
+    background-color: rgba(255, 0, 0, 0.5);
+    z-index: 10;
 }
+
+.page-number {
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+@media print {
+    body * {
+        visibility: hidden;
+    }
+    .poster-page, .poster-page * {
+        visibility: visible;
+    }
+    .poster-page {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+        page-break-after: always;
+    }
+}