|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Sample Document</title>
|
|
|
<style>
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
|
max-width: 800px;
|
|
|
margin: 0 auto;
|
|
|
padding: 40px 20px;
|
|
|
line-height: 1.6;
|
|
|
color: #333;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
min-height: 100vh;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
backdrop-filter: blur(20px);
|
|
|
border-radius: 20px;
|
|
|
padding: 40px;
|
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
color: #2d3748;
|
|
|
font-size: 2.5rem;
|
|
|
margin-bottom: 1rem;
|
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
background-clip: text;
|
|
|
}
|
|
|
|
|
|
h2 {
|
|
|
color: #4a5568;
|
|
|
font-size: 1.5rem;
|
|
|
margin-top: 2rem;
|
|
|
margin-bottom: 1rem;
|
|
|
border-bottom: 2px solid #e2e8f0;
|
|
|
padding-bottom: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.highlight {
|
|
|
background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
|
|
|
color: white;
|
|
|
padding: 20px;
|
|
|
border-radius: 12px;
|
|
|
margin: 20px 0;
|
|
|
}
|
|
|
|
|
|
.info-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
|
gap: 20px;
|
|
|
margin: 30px 0;
|
|
|
}
|
|
|
|
|
|
.info-card {
|
|
|
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
|
|
padding: 20px;
|
|
|
border-radius: 12px;
|
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.info-card h3 {
|
|
|
margin-top: 0;
|
|
|
color: #2d3748;
|
|
|
}
|
|
|
|
|
|
table {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
margin: 20px 0;
|
|
|
background: white;
|
|
|
border-radius: 8px;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
th, td {
|
|
|
padding: 12px 15px;
|
|
|
text-align: left;
|
|
|
border-bottom: 1px solid #e2e8f0;
|
|
|
}
|
|
|
|
|
|
th {
|
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
color: white;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
tr:hover {
|
|
|
background-color: #f7fafc;
|
|
|
}
|
|
|
|
|
|
.footer {
|
|
|
margin-top: 40px;
|
|
|
padding-top: 20px;
|
|
|
border-top: 1px solid #e2e8f0;
|
|
|
text-align: center;
|
|
|
color: #718096;
|
|
|
font-size: 0.9rem;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<h1>🌟 Luna OCR Sample Document</h1>
|
|
|
|
|
|
<div class="highlight">
|
|
|
<h2>📋 Document Information</h2>
|
|
|
<p>This is a sample HTML document designed to showcase the glassmorphism styling and document viewer capabilities of Luna OCR. The document features modern CSS styling with gradients, blur effects, and responsive design.</p>
|
|
|
</div>
|
|
|
|
|
|
<h2>📊 Sample Data Table</h2>
|
|
|
<table>
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>Item</th>
|
|
|
<th>Category</th>
|
|
|
<th>Status</th>
|
|
|
<th>Priority</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td>Document Processing</td>
|
|
|
<td>OCR Technology</td>
|
|
|
<td>✅ Active</td>
|
|
|
<td>High</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>Glassmorphism UI</td>
|
|
|
<td>Design System</td>
|
|
|
<td>✅ Complete</td>
|
|
|
<td>Medium</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>PDF Viewer</td>
|
|
|
<td>File Handling</td>
|
|
|
<td>🔄 In Progress</td>
|
|
|
<td>High</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>HTML Viewer</td>
|
|
|
<td>File Handling</td>
|
|
|
<td>✅ Complete</td>
|
|
|
<td>Medium</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
|
|
|
<div class="info-grid">
|
|
|
<div class="info-card">
|
|
|
<h3>🎨 Design Features</h3>
|
|
|
<ul>
|
|
|
<li>Glassmorphism effects</li>
|
|
|
<li>Gradient backgrounds</li>
|
|
|
<li>Smooth animations</li>
|
|
|
<li>Responsive layout</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div class="info-card">
|
|
|
<h3>⚡ Performance</h3>
|
|
|
<ul>
|
|
|
<li>Fast rendering</li>
|
|
|
<li>Optimized CSS</li>
|
|
|
<li>Minimal JavaScript</li>
|
|
|
<li>Cross-browser support</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div class="info-card">
|
|
|
<h3>🔧 Technical Stack</h3>
|
|
|
<ul>
|
|
|
<li>React.js</li>
|
|
|
<li>Framer Motion</li>
|
|
|
<li>CSS3 Backdrop Filter</li>
|
|
|
<li>Modern ES6+</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<h2>📝 Sample Content</h2>
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
|
|
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
|
|
<div class="highlight">
|
|
|
<h3>💡 Key Features</h3>
|
|
|
<p>This document demonstrates the advanced styling capabilities of the Luna OCR system, including glassmorphism effects, gradient overlays, and modern typography. The viewer supports zoom, rotation, and fullscreen modes for optimal document viewing experience.</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="footer">
|
|
|
<p>Generated by Luna OCR • Sample HTML Document • Glassmorphism Theme</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html> |
