Spaces:

Dariky
/

anycoder-e25882d5

Running

App Files Files Community

anycoder-e25882d5 / index.html

Dariky

Upload folder using huggingface_hub

087327f verified about 1 month ago

raw

history blame contribute delete

21.9 kB

	<!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>