File: /mnt/data/doccure-wp/wp-content/plugins/doccure/debug-prescription-print.html
<!DOCTYPE html>
<html>
<head>
<title>Prescription Print Debug</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 25px;
background: #ffffff;
color: #333;
line-height: 1.5;
}
.prescription-view-details {
background: #ffffff;
border-radius: 0;
padding: 35px;
box-shadow: none;
max-width: 850px;
margin: 0 auto;
}
/* Header Styles - Exact match to image */
.prescription-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 45px;
padding-bottom: 25px;
border-bottom: 1px solid #0e82fd;
}
.prescription-header h4 {
color: #0e82fd;
margin: 0;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.navbar-brand.logo {
display: inline-block;
}
.navbar-brand.logo img {
max-height: 55px;
width: auto;
filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
/* Section Styles - Clean blue headers */
.section-title {
color: #0e82fd;
font-size: 19px;
font-weight: 700;
margin: 35px 0 25px 0;
padding-bottom: 12px;
border-bottom: 2px solid #0e82fd;
text-transform: uppercase;
letter-spacing: 0.6px;
}
/* Info Group Styles - Two column layout like image */
.info-group {
margin-bottom: 18px;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.info-group:last-child {
border-bottom: none;
}
.info-group label {
display: inline-block;
margin: 0;
color: #555;
font-weight: 600;
font-size: 15px;
min-width: 130px;
}
.info-group p {
margin: 0;
color: #333;
font-size: 15px;
font-weight: 400;
text-align: right;
flex: 1;
}
/* Table Styles - Clean medical table like image */
.medicine-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 0;
overflow: hidden;
}
.medicine-table th {
background: #0e82fd;
color: #fff;
font-weight: 700;
text-align: center;
padding: 15px 12px;
border: 1px solid #0e82fd;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.6px;
}
.medicine-table td {
padding: 12px 10px;
border: 1px solid #ddd;
vertical-align: middle;
text-align: center;
font-weight: 400;
font-size: 13px;
}
.medicine-table tbody tr:nth-child(even) {
background-color: #f8f9fa;
}
.medicine-table tbody tr:nth-child(odd) {
background-color: #ffffff;
}
/* Bootstrap Grid Classes */
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
padding-right: 15px;
padding-left: 15px;
}
.col-md-12 {
flex: 0 0 100%;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
/* Utility Classes */
.text-center { text-align: center; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: 1rem; }
.p-0 { padding: 0; }
.img-fluid { max-width: 100%; height: auto; }
/* Debug Controls */
.debug-controls {
position: fixed;
top: 20px;
right: 20px;
background: #fff;
border: 1px solid #ddd;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 1000;
}
.debug-controls button {
background: #0e82fd;
color: white;
border: none;
padding: 8px 15px;
margin: 5px;
border-radius: 3px;
cursor: pointer;
}
.debug-controls button:hover {
background: #0056b3;
}
/* Enhanced Print Styles */
@media print {
body {
margin: 0;
padding: 15px;
background: white;
font-size: 13px;
}
.prescription-view-details {
background: white;
box-shadow: none;
border: none;
padding: 20px;
margin: 0;
}
.navbar-brand.logo img {
max-height: 45px;
filter: none;
}
.prescription-header {
margin-bottom: 25px;
border-bottom: 1px solid #0e82fd;
padding-bottom: 15px;
}
.prescription-header h4 {
font-size: 18px;
}
.section-title {
margin: 25px 0 15px 0;
border-bottom: 2px solid #0e82fd;
font-size: 16px;
}
.info-group {
margin-bottom: 12px;
padding: 8px 0;
font-size: 12px;
}
.info-group label {
font-size: 12px;
min-width: 100px;
}
.info-group p {
font-size: 12px;
}
.medicine-table {
box-shadow: none;
border: 1px solid #ddd;
font-size: 11px;
}
.medicine-table th {
background: #0e82fd !important;
-webkit-print-color-adjust: exact;
color-adjust: exact;
font-size: 11px;
padding: 8px 6px;
}
.medicine-table td {
font-size: 11px;
padding: 6px 5px;
}
.medicine-table tbody tr:nth-child(even) {
background-color: #f8f9fa !important;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
.debug-controls {
display: none;
}
}
/* RTL Support for Print */
@media print and (direction: rtl) {
body {
direction: rtl;
text-align: right;
}
.prescription-header {
flex-direction: row-reverse;
}
.prescription-header h4 {
text-align: right;
}
.navbar-brand.logo {
text-align: left;
}
.section-title {
text-align: right;
}
.info-group {
flex-direction: row-reverse;
}
.info-group label {
text-align: right;
margin-left: 15px;
margin-right: 0;
}
.info-group p {
text-align: left;
}
.row {
flex-direction: row-reverse;
}
.col-md-6 {
padding-right: 15px;
padding-left: 15px;
}
.medicine-table th,
.medicine-table td {
text-align: center;
}
.medicine-table th:first-child,
.medicine-table td:first-child {
text-align: right;
}
.medicine-table th:last-child,
.medicine-table td:last-child {
text-align: left;
}
}
/* RTL Support for Screen */
[dir="rtl"] body {
direction: rtl;
text-align: right;
}
[dir="rtl"] .prescription-header {
flex-direction: row-reverse;
}
[dir="rtl"] .prescription-header h4 {
text-align: right;
}
[dir="rtl"] .navbar-brand.logo {
text-align: left;
}
[dir="rtl"] .section-title {
text-align: right;
}
[dir="rtl"] .info-group {
flex-direction: row-reverse;
}
[dir="rtl"] .info-group label {
text-align: right;
margin-left: 15px;
margin-right: 0;
}
[dir="rtl"] .info-group p {
text-align: left;
}
[dir="rtl"] .row {
flex-direction: row-reverse;
}
[dir="rtl"] .col-md-6 {
padding-right: 15px;
padding-left: 15px;
}
[dir="rtl"] .medicine-table th,
[dir="rtl"] .medicine-table td {
text-align: center;
}
[dir="rtl"] .medicine-table th:first-child,
[dir="rtl"] .medicine-table td:first-child {
text-align: right;
}
[dir="rtl"] .medicine-table th:last-child,
[dir="rtl"] .medicine-table td:last-child {
text-align: left;
}
</style>
</head>
<body>
<!-- Debug Controls -->
<div class="debug-controls">
<h4>Debug Controls</h4>
<button onclick="window.print()">Print Preview</button>
<button onclick="togglePrintMode()">Toggle Print Mode</button>
<button onclick="toggleRTL()">Toggle RTL</button>
<button onclick="location.reload()">Refresh</button>
<p><small>Open browser dev tools (F12) to see print styles</small></p>
</div>
<!-- Prescription Content -->
<div class="prescription-view-details">
<!-- Header -->
<div class="prescription-header">
<div class="navbar-brand logo">
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSIjMGU4MmZkIi8+Cjx0ZXh0IHg9IjUwIiB5PSI2MCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjQwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlQ8L3RleHQ+Cjwvc3ZnPgo=" alt="TELEDOC Logo">
<span style="font-size: 24px; font-weight: bold; color: #0e82fd; margin-left: 10px;">TELEDOC</span>
</div>
<h4>PRESCRIPTION DETAILS</h4>
</div>
<!-- Patient Information -->
<div class="section-title">PATIENT INFORMATION</div>
<div class="row">
<div class="col-md-6">
<div class="info-group">
<label>Name:</label>
<p>abdulrahman Yaseen</p>
</div>
<div class="info-group">
<label>Gender:</label>
<p>Male</p>
</div>
<div class="info-group">
<label>Phone:</label>
<p>55225252252</p>
</div>
</div>
<div class="col-md-6">
<div class="info-group">
<label>Age:</label>
<p>34 year</p>
</div>
<div class="info-group">
<label>Marital status:</label>
<p>53</p>
</div>
<div class="info-group">
<label>Address:</label>
<p>Talbot St. Bridgewater,</p>
</div>
</div>
</div>
<!-- Medical Information -->
<div class="section-title">MEDICAL INFORMATION</div>
<div class="row">
<div class="col-md-6">
<div class="info-group">
<label>Diseases:</label>
<p>Food allergies, Skin allergies</p>
</div>
<div class="info-group">
<label>Diagnosis:</label>
<p>Medical History Medical History Medical History Medical History</p>
</div>
</div>
<div class="col-md-6">
<div class="info-group">
<label>Child illness:</label>
<p>Anorexia, Athlete</p>
</div>
<div class="info-group">
<label>Vital signs:</label>
<p>Blood pressure (10), Body temperature (20)</p>
</div>
</div>
</div>
<!-- Medications -->
<div class="section-title">MEDICATIONS</div>
<table class="medicine-table">
<thead>
<tr>
<th>NAME</th>
<th>TYPES</th>
<th>DURATION</th>
<th>USAGE</th>
<th>DETAILS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Capsules</td>
<td>1 Day</td>
<td>Once a day</td>
<td>Add Comment</td>
</tr>
<tr>
<td>Clinic Name 1</td>
<td>Capsules</td>
<td>1 Month</td>
<td>Thrice a day</td>
<td>Add Comment</td>
</tr>
</tbody>
</table>
</div>
<script>
function togglePrintMode() {
const body = document.body;
if (body.style.backgroundColor === 'white') {
body.style.backgroundColor = '#f0f0f0';
body.style.padding = '15px';
body.style.fontSize = '13px';
} else {
body.style.backgroundColor = 'white';
body.style.padding = '25px';
body.style.fontSize = '16px';
}
}
function toggleRTL() {
const body = document.body;
const html = document.documentElement;
if (body.getAttribute('dir') === 'rtl') {
body.removeAttribute('dir');
html.removeAttribute('dir');
console.log('RTL disabled - LTR mode active');
} else {
body.setAttribute('dir', 'rtl');
html.setAttribute('dir', 'rtl');
console.log('RTL enabled - RTL mode active');
}
}
// Add some helpful console messages
console.log('Prescription Print Debug Page Loaded');
console.log('Use the debug controls to test print functionality');
console.log('Press Ctrl+P or use the Print Preview button to see print styles');
console.log('Use Toggle RTL button to test RTL layout');
</script>
</body>
</html>