可打印商务卡片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Printable Business Cards</title>
    <!-- Tailwind CSS for styling the page -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Font from the original SVG -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    <style>
        /* Define the paper size and layout for printing */
        @media print {
            /* Hide everything except the print area */
            body * {
                visibility: hidden;
            }
            #print-area, #print-area * {
                visibility: visible;
            }
            /* Position the print area to fill the page */
            #print-area {
                position: absolute;
                left: 0;
                top: 0;
                width: 8.5in;
                height: 11in;
                margin: 0;
                padding: 0.5in 0.75in; /* 0.5" top/bottom, 0.75" left/right margins */
                box-sizing: border-box;
            }
            /* Ensure the card grid uses the full space */
            #card-grid {
                width: 100%;
                height: 100%;
            }
        }
        
        /* Define the on-screen preview of the paper */
        @page {
            size: 8.5in 11in;
            margin: 0.5in 0.75in;
        }
        
        /* General body styling for the screen view */
        body {
            background-color: #e5e7eb; /* gray-200 */
        }

        /* The container that simulates the 8.5x11 paper on screen */
        #print-area {
            width: 8.5in;
            height: 11in;
            margin: 2rem auto;
            background-color: white;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            padding: 0.5in 0.75in;
            box-sizing: border-box;
        }

        /* The grid that holds the 10 business cards */
        #card-grid {
            display: grid;
            grid-template-columns: repeat(2, 3.5in);
            grid-template-rows: repeat(5, 2in);
            justify-content: center;
            align-content: center;
            width: 100%;
            height: 100%;
        }

        /* Ensure SVG scales correctly within the grid cell */
        .card svg {
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body class="bg-gray-200 font-sans">

    <!-- Header with Print Button -->
    <header class="bg-white p-4 shadow-md print:hidden">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold text-gray-800">Business Card Print Preview</h1>
            <button onclick="window.print()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
                Print 10 Copies
            </button>
        </div>
    </header>

    <!-- This div represents the 8.5x11 inch paper -->
    <div id="print-area">
        <!-- Grid container for the business cards -->
        <div id="card-grid">
            <!-- We will generate 10 copies of the business card SVG -->
            <script>
                // The SVG content for one business card
                const cardSVG = `
                    <svg viewBox="0 0 336 192" xmlns="http://www.w3.org/2000/svg">
                      <rect width="336" height="192" fill="#FFFFFF"/>
                      <g font-family="'Alfa Slab One', cursive" font-size="14" fill="black">
                        <text x="40" y="40">Jonathan Gerhardson</text>
                        <g fill="#CF3424"><text x="40" y="60">SHOCK!</text><text x="140" y="60">SCANDAL!</text><text x="240" y="60">LIES!</text></g>
                        <text x="40" y="80">Investigative Journalist</text>
                        <g fill="#CF3424"><text x="40" y="100">EXPOSED!</text><text x="140" y="100">COVER-UP!</text></g>
                        <text x="40" y="120">413-313-1069</text>
                        <g fill="#CF3424"><text x="40" y="140">INSIDE</text><text x="140" y="140">THE</text><text x="220" y="140">EXCLUSIVE</text></g>
                        <text x="40" y="160">jon.gerhardson@proton.me</text>
                        <text x="250" y="178" font-weight="bold" fill="black" font-size="16">STORY</text>
                      </g>
                    </svg>
                `;

                // Get the grid container
                const grid = document.getElementById('card-grid');

                // Create and append 10 cards to the grid
                for (let i = 0; i < 10; i++) {
                    const cardWrapper = document.createElement('div');
                    cardWrapper.className = 'card';
                    cardWrapper.innerHTML = cardSVG;
                    grid.appendChild(cardWrapper);
                }
            </script>
        </div>
    </div>

</body>
</html>