Spaces:

Dariky
/

anycoder-e25882d5

Running

App Files Files Community

Dariky commited on Feb 9

Commit

087327f

verified ·

1 Parent(s): 2c61ad8

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +569 -19

index.html CHANGED Viewed

@@ -1,19 +1,569 @@
-<!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">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>React-Style Print Modal</title>
+    <!-- Import React & ReactDOM (Simulated for Logic Context) -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <!-- Import Babel (To compile JSX in browser) -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <!-- FontAwesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #6366f1;
+            --primary-hover: #4f46e5;
+            --bg-color: #f3f4f6;
+            --text-color: #1f2937;
+            --modal-bg: #ffffff;
+            --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --border-radius: 12px;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+            padding: 2rem;
+        }
+        /* Header Section */
+        header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 800;
+            color: #111;
+            margin-bottom: 0.5rem;
+        }
+        p.subtitle {
+            color: #6b7280;
+            font-size: 1.1rem;
+        }
+        .badge {
+            display: inline-block;
+            background: #e0e7ff;
+            color: var(--primary-color);
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+        }
+        /* Application Container (Simulating React App) */
+        .app-container {
+            width: 100%;
+            max-width: 600px;
+            background: white;
+            padding: 2rem;
+            border-radius: var(--border-radius);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .control-panel {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            padding-bottom: 2rem;
+            border-bottom: 2px solid #e5e7eb;
+        }
+        /* Modern Button Styles */
+        button {
+            cursor: pointer;
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-weight: 600;
+            font-size: 1rem;
+            transition: all 0.2s ease;
+            border: none;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+            box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3);
+        }
+        .btn-primary:hover {
+            background-color: var(--primary-hover);
+            transform: translateY(-1px);
+            box-shadow: 0 6px 8px -1px rgba(99, 102, 241, 0.4);
+        }
+        .btn-secondary {
+            background-color: white;
+            color: #4b5563;
+            border: 1px solid #d1d5db;
+        }
+        .btn-secondary:hover {
+            background-color: #f9fafb;
+            color: #1f2937;
+            border-color: #9ca3af;
+        }
+        /* Content Placeholder (Simulating the "Data" in State) */
+        .dummy-content {
+            background: #f9fafb;
+            padding: 1.5rem;
+            border-radius: 8px;
+            border: 1px dashed #d1d5db;
+            margin-bottom: 1.5rem;
+        }
+        .dummy-content h3 { margin-bottom: 0.5rem; font-size: 1.2rem; }
+        .dummy-content p { line-height: 1.6; color: #4b5563; margin-bottom: 0.5rem; }
+        .tag { display: inline-block; background: #e5e7eb; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; margin-right: 5px;}
+        /* Modal Overlay */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(4px);
+            z-index: 100;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .modal-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+        /* Modal Content Box */
+        .modal-content {
+            background: var(--modal-bg);
+            width: 90%;
+            max-width: 700px;
+            max-height: 90vh;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow-lg);
+            transform: scale(0.95) translateY(20px);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            position: relative;
+        }
+        .modal-overlay.active .modal-content {
+            transform: scale(1) translateY(0);
+        }
+        /* Modal Header */
+        .modal-header {
+            padding: 1.5rem;
+            border-bottom: 1px solid #e5e7eb;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: #f9fafb;
+        }
+        .modal-title {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #111;
+        }
+        .close-btn {
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            color: #6b7280;
+            padding: 5px;
+            line-height: 1;
+            transition: color 0.2s;
+        }
+        .close-btn:hover { color: #111; background: #e5e7eb; border-radius: 50%; }
+        /* Modal Body (The part we want to print) */
+        .modal-body {
+            padding: 3rem;
+            overflow-y: auto;
+            flex: 1;
+            /* Print specific styling for the body */
+            @media print {
+                padding: 0;
+                overflow: visible;
+                height: auto;
+            }
+        }
+        /* Print Specific Styles (The Core Logic) */
+        @media print {
+            /* Hide everything in the body that isn't the modal */
+            body * {
+                visibility: hidden;
+                opacity: 0;
+                display: none !important;
+            }
+            /* Show the modal overlay and content */
+            .modal-overlay, .modal-overlay * {
+                visibility: visible;
+                opacity: 1;
+                display: block !important;
+            }
+            /* Position the modal to fill the paper */
+            .modal-overlay {
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 100%;
+                background: white; /* Remove backdrop */
+                backdrop-filter: none;
+                display: block !important;
+                padding: 20px;
+            }
+            /* Ensure the content box is white and full width */
+            .modal-content {
+                width: 100%;
+                max-width: 100%;
+                height: auto;
+                box-shadow: none;
+                border: none;
+                display: block;
+            }
+            /* Hide the close button specifically during print */
+            .close-btn, .modal-header [data-action="close"] {
+                display: none !important;
+            }
+            /* Remove scrollbars for print */
+            .modal-body {
+                overflow: visible;
+                padding: 20px;
+            }
+        }
+        /* Document Design (What the user sees in the modal) */
+        .document-preview {
+            font-family: 'Georgia', serif;
+            line-height: 1.6;
+            color: #333;
+        }
+        .doc-header {
+            border-bottom: 2px solid #111;
+            padding-bottom: 1rem;
+            margin-bottom: 2rem;
+            display: flex;
+            justify-content: space-between;
+        }
+        .doc-title { font-size: 2rem; font-weight: bold; text-transform: uppercase; }
+        .doc-meta { text-align: right; font-family: sans-serif; font-size: 0.9rem; color: #666; }
+        .doc-section { margin-bottom: 2rem; }
+        .doc-section h2 { font-size: 1.2rem; margin-bottom: 1rem; border-bottom: 1px solid #ccc; padding-bottom: 0.3rem; }
+        .doc-section p { margin-bottom: 1rem; text-align: justify; }
+        .signature-area {
+            margin-top: 3rem;
+            display: flex;
+            justify-content: space-between;
+            border-top: 1px solid #ccc;
+            padding-top: 2rem;
+        }
+        .signature-box { width: 45%; }
+        .signature-box span { display: block; margin-top: 2rem; font-style: italic; border-bottom: 1px solid #333; width: 50%; }
+        .signature-label { font-size: 0.85rem; color: #555; margin-top: 0.5rem; }
+        /* Responsive adjustments */
+        @media (max-width: 600px) {
+            .control-panel { flex-direction: column; }
+            .modal-content { width: 95%; }
+            .signature-area { flex-direction: column; }
+            .signature-box { width: 100%; margin-bottom: 1rem; }
+        }
+        .notification {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: #10b981;
+            color: white;
+            padding: 12px 24px;
+            border-radius: 8px;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            transform: translateY(100px);
+            transition: transform 0.3s ease;
+            z-index: 200;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .notification.show { transform: translateY(0); }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="badge">React Style • Vanilla JS</div>
+        <h1>Printable Modal</h1>
+        <p class="subtitle">Generate a clean print layout from a dynamic modal interface.</p>
+    </header>
+    <!-- Main Application Container -->
+    <div id="root"></div>
+    <!--
+      React Logic Simulation
+      Since we are in a single file without a build step, we use Babel to compile
+      JSX inside the script tag, mimicking standard React component structure.
+    -->
+    <script type="text/babel">
+        const { useState } = React;
+        // --- Sub-Components ---
+        const PrintIcon = () => <i className="fa-solid fa-print"></i>;
+        const CloseIcon = () => <i className="fa-solid fa-xmark"></i>;
+        const DownloadIcon = () => <i className="fa-solid fa-download"></i>;
+        // This component represents the "Document" inside the modal
+        const InvoiceDocument = ({ data }) => (
+            <div className="document-preview">
+                <div className="doc-header">
+                    <div>
+                        <div className="doc-title">Service Invoice</div>
+                        <div style={{marginTop: '5px', fontSize: '0.9rem', color: '#666'}}>Ref: #{data.id}</div>
+                    </div>
+                    <div className="doc-meta">
+                        <div>Date: {data.date}</div>
+                        <div>Due: {data.dueDate}</div>
+                        <div>Status: <strong style={{color: '#10b981'}}>{data.status}</strong></div>
+                    </div>
+                </div>
+                <div className="doc-section">
+                    <h2>Bill To</h2>
+                    <p><strong>{data.client.name}</strong><br/>
+                    {data.client.address}<br/>
+                    {data.client.email}<br/>
+                    {data.client.phone}</p>
+                </div>
+                <div className="doc-section">
+                    <h2>Items</h2>
+                    <table style={{width: '100%', borderCollapse: 'collapse'}}>
+                        <thead>
+                            <tr style={{borderBottom: '2px solid #ccc'}}>
+                                <th style={{textAlign: 'left', padding: '8px'}}>Description</th>
+                                <th style={{textAlign: 'right', padding: '8px'}}>Quantity</th>
+                                <th style={{textAlign: 'right', padding: '8px'}}>Amount</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {data.items.map((item, idx) => (
+                                <tr key={idx} style={{borderBottom: '1px solid #eee'}}>
+                                    <td style={{padding: '10px'}}>{item.name} <br/><span style={{fontSize: '0.8rem', color: '#888'}}>{item.desc}</span></td>
+                                    <td style={{padding: '10px', textAlign: 'right'}}>{item.qty}</td>
+                                    <td style={{padding: '10px', textAlign: 'right'}}>${item.price.toFixed(2)}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+                <div className="doc-section" style={{display: 'flex', justifyContent: 'flex-end'}}>
+                    <div style={{width: '300px'}}>
+                        <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: '10px'}}>
+                            <span>Subtotal</span>
+                            <span>${data.total.toFixed(2)}</span>
+                        </div>
+                        <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: '10px'}}>
+                            <span>Tax (8%)</span>
+                            <span>${(data.total * 0.08).toFixed(2)}</span>
+                        </div>
+                        <div style={{display: 'flex', justifyContent: 'space-between', fontSize: '1.2rem', fontWeight: 'bold', borderTop: '2px solid #333', paddingTop: '10px'}}>
+                            <span>Total</span>
+                            <span>${(data.total * 1.08).toFixed(2)}</span>
+                        </div>
+                    </div>
+                </div>
+                <div className="signature-area">
+                    <div className="signature-box">
+                        <span></span>
+                        <div className="signature-label">Authorized Signature</div>
+                    </div>
+                    <div className="signature-box" style={{textAlign: 'right'}}>
+                        <div className="signature-label">Customer Copy</div>
+                        <div style={{marginTop: '20px', fontSize: '0.8rem', fontStyle: 'italic', color: '#888'}}>
+                            Thank you for your business! Please remit payment within 30 days.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+        // --- Main Application Component ---
+        const App = () => {
+            // State Simulation
+            const [isModalOpen, setIsModalOpen] = useState(false);
+            const [notification, setNotification] = useState(false);
+            // Mock Data
+            const invoiceData = {
+                id: "INV-2023-001",
+                date: new Date().toLocaleDateString(),
+                dueDate: "2023-12-31",
+                status: "Pending",
+                client: {
+                    name: "Acme Corporation",
+                    address: "123 Innovation Drive\nTech City, TC 90210",
+                    email: "billing@acmecorp.com",
+                    phone: "(555) 123-4567"
+                },
+                items: [
+                    { name: "Web Development Services", desc: "Frontend & Backend Integration", qty: 40, price: 150.00 },
+                    { name: "UI/UX Design", desc: "High-fidelity Prototypes", qty: 15, price: 120.00 },
+                    { name: "Server Hosting", desc: "Annual Premium Plan", qty: 1, price: 500.00 }
+                ],
+                total: 8600.00
+            };
+            const openModal = () => setIsModalOpen(true);
+            const closeModal = () => setIsModalOpen(false);
+            const handlePrint = () => {
+                // Trigger the browser print dialog
+                window.print();
+                // Show a temporary notification
+                setNotification(true);
+                setTimeout(() => setNotification(false), 3000);
+            };
+            return (
+                <>
+                    <div className="app-container">
+                        <div className="dummy-content">
+                            <h3>Current View: Dashboard</h3>
+                            <p>This application demonstrates how to extract content from a React-style modal for printing.</p>
+                            <p>Click the button below to generate the invoice view in a modal, then use the print button inside to see the clean print layout.</p>
+                            <div style={{marginTop: '10px'}}>
+                                <span className="tag">React</span>
+                                <span className="tag">CSS Media Queries</span>
+                                <span className="tag">Vanilla JS</span>
+                            </div>
+                        </div>
+                        <div className="control-panel">
+                            <button className="btn-primary" onClick={openModal}>
+                                <PrintIcon /> Generate Invoice Modal
+                            </button>
+                            <button className="btn-secondary" onClick={() => alert("This would save the current dashboard state.")}>
+                                <DownloadIcon /> Save Draft
+                            </button>
+                        </div>
+                        <p style={{textAlign: 'center', color: '#9ca3af', fontSize: '0.9rem'}}>
+                            * Clicking "Generate Invoice Modal" simulates fetching dynamic data and opening a component.
+                        </p>
+                    </div>
+                    {/* Modal Overlay - The Container */}
+                    {isModalOpen && (
+                        <div className="modal-overlay" onClick={closeModal}>
+                            <div className="modal-content" onClick={e => e.stopPropagation()}>
+                                {/* Modal Header */}
+                                <div className="modal-header">
+                                    <div className="modal-title">
+                                        <i className="fa-solid fa-file-invoice-dollar" style={{color: '#6366f1', marginRight: '10px'}}></i>
+                                        Invoice #{invoiceData.id}
+                                    </div>
+                                    <div className="actions">
+                                        <button className="close-btn" onClick={closeModal} data-action="close" title="Close Modal">
+                                            <CloseIcon />
+                                        </button>
+                                    </div>
+                                </div>
+                                {/* Modal Body - This is the content we want to print */}
+                                <div className="modal-body">
+                                    <InvoiceDocument data={invoiceData} />
+                                </div>
+                                {/* Modal Footer - Hidden during print via CSS logic or just for UI */}
+                                <div className="modal-header" style={{justifyContent: 'flex-end', background: 'white', padding: '1rem 2rem'}}>
+                                    <button
+                                        className="btn-primary"
+                                        onClick={handlePrint}
+                                        style={{background: '#10b981', boxShadow: '0 4px 6px -1px rgba(16, 185, 129, 0.3)'}}
+                                    >
+                                        <PrintIcon /> Print Document
+                                    </button>
+                                    <button
+                                        className="btn-secondary"
+                                        onClick={closeModal}
+                                        style={{marginRight: '10px'}}
+                                    >
+                                        Cancel
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    {/* Notification Toast */}
+                    <div className={`notification ${notification ? 'show' : ''}`}>
+                        <i className="fa-solid fa-check-circle" style={{fontSize: '1.2rem'}}></i>
+                        <span>Print command sent to browser!</span>
+                    </div>
+                </>
+            );
+        };
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<App />);
+    </script>
+    <div style="margin-top: 50px; text-align: center; opacity: 0.7;">
+        <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: #6366f1; text-decoration: none; font-weight: bold;">anycoder</a></p>
+    </div>
+</body>
+</html>