Files
letter-editor/template_backup.html
2025-07-13 14:54:21 +05:00

228 lines
6.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OmegaTech Solution - Letterhead</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background: #f8f9fa;
color: #333;
line-height: 1.6;
}
.letterhead-container {
width: 210mm;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
background: white;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
position: relative;
}
.page {
width: 210mm;
height: 297mm;
padding: 40px;
box-sizing: border-box;
page-break-after: auto;
position: relative;
background: white;
display: flex;
flex-direction: column;
}
.company-logo-bg {
max-width: 600px;
opacity: 0.08;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
pointer-events: none;
}
.header {
display: flex;
align-items: center;
margin-bottom: 40px;
position: relative;
z-index: 10;
flex-shrink: 0;
}
.header-logo {
width: 60px;
height: 60px;
margin-right: 20px;
flex-shrink: 0;
}
.company-info {
display: flex;
flex-direction: column;
}
.company-name {
font-size: 24px;
font-weight: bold;
color: #2c3e50;
margin: 0;
letter-spacing: 0.5px;
}
.company-tagline {
font-size: 14px;
color: #7f8c8d;
margin: 2px 0 0 0;
}
.content-area {
flex: 1;
position: relative;
z-index: 10;
overflow: hidden;
max-height: 200mm; /* Increased max height to use more available space */
}
.footer {
margin-top: auto;
padding-top: 25px;
border-top: 1px solid #ecf0f1;
position: relative;
z-index: 10;
flex-shrink: 0;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
max-width: 100%;
}
.footer-left, .footer-right {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-item {
display: flex;
align-items: center;
font-size: 12px;
color: #666;
}
.footer-icon {
width: 14px;
height: 14px;
margin-right: 8px;
fill: #666;
flex-shrink: 0;
}
/* Print styles */
@media print {
body {
background: white;
}
.letterhead-container {
width: 100%;
margin: 0;
box-shadow: none;
}
.page {
page-break-after: always;
margin: 0;
padding: 20mm;
}
.page:last-child {
page-break-after: avoid;
}
.company-logo-bg {
max-width: 500px;
opacity: 0.05;
}
}
/* PDF generation styles */
.pdf-mode {
background: white;
}
.pdf-mode .letterhead-container {
box-shadow: none;
}
.pdf-mode .company-logo-bg {
position: absolute;
top: 200px;
left: 50px;
transform: none;
max-width: 500px;
opacity: 0.05;
}
</style>
</head>
<body>
<div class="letterhead-container">
<!-- Background Logo -->
<img src="logo.png" alt="OmegaTech Solution Logo" class="company-logo-bg">
<div class="page">
<!-- Header Section -->
<div class="header">
<img src="logo.png" alt="OmegaTech Solution" class="header-logo">
<div class="company-info">
<h1 class="company-name">OMEGATECH SOLUTION</h1>
<!--` <p class="company-tagline">Technology Solutions</p>-->
</div>
</div>
<!-- Content Area -->
<div class="content-area">
<!-- Content will be injected here -->
</div>
<!-- Footer -->
<div class="footer">
<div class="footer-content">
<div class="footer-left">
<div class="footer-item">
<svg class="footer-icon" viewBox="0 0 24 24">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
hello@omegatechsolution.org
</div>
<div class="footer-item">
<svg class="footer-icon" viewBox="0 0 24 24">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</svg>
https://omegatechsolution.org
</div>
</div>
<div class="footer-right">
<div class="footer-item">
<svg class="footer-icon" viewBox="0 0 24 24">
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
</svg>
+960 9198026
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>