Saimon14M/doctrack-pro-protocol-wizardry
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Digital Receipt | DocTrack Pro</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <style>10 @media print {11 body * {12 visibility: hidden;13 }14 .receipt-container, .receipt-container * {15 visibility: visible;16 }17 .receipt-container {18 position: absolute;19 left: 0;20 top: 0;21 width: 100%;22 }23 .no-print {24 display: none;25 }26 }27 </style>28</head>29<body class="bg-gray-900 text-gray-200 min-h-screen flex items-center justify-center p-4">30 <div class="receipt-container bg-gray-800 rounded-xl shadow-lg max-w-md w-full p-6">31 <div class="text-center mb-6">32 <h1 class="text-2xl font-bold text-primary-400 flex items-center justify-center gap-2">33 <i data-feather="file-text"></i>34 DocTrack Pro35 </h1>36 <p class="text-gray-400 mt-1">Digital Receipt Confirmation</p>37 </div>38 39 <div class="space-y-4" id="receiptContent">40 <div class="bg-gray-700 p-4 rounded-lg">41 <h2 class="text-lg font-semibold text-center mb-3">Protocol Information</h2>42 <div class="grid grid-cols-2 gap-4">43 <div>44 <p class="text-gray-400 text-sm">Protocol Number</p>45 <p id="protocolNumber" class="font-mono text-primary-400">2023-00000</p>46 </div>47 <div>48 <p class="text-gray-400 text-sm">Date</p>49 <p id="protocolDate" class="text-gray-300">DD/MM/YYYY</p>50 </div>51 <div>52 <p class="text-gray-400 text-sm">From</p>53 <p id="protocolFrom" class="text-gray-300">Department</p>54 </div>55 <div>56 <p class="text-gray-400 text-sm">To</p>57 <p id="protocolTo" class="text-gray-300">Recipient</p>58 </div>59 </div>60 </div>61 62 <div class="bg-gray-700 p-4 rounded-lg">63 <h2 class="text-lg font-semibold text-center mb-3">Documents Received</h2>64 <ul id="documentsList" class="space-y-2">65 <!-- Documents will be listed here -->66 </ul>67 </div>68 69 <div class="bg-gray-700 p-4 rounded-lg">70 <h2 class="text-lg font-semibold text-center mb-3">Receiver Information</h2>71 <div class="space-y-3">72 <div>73 <label for="receiverName" class="block text-gray-400 text-sm mb-1">Full Name *</label>74 <input type="text" id="receiverName" class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2" required>75 </div>76 <div>77 <label for="receiverDocument" class="block text-gray-400 text-sm mb-1">Document Number *</label>78 <input type="text" id="receiverDocument" class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2" required>79 </div>80 <div class="flex items-center">81 <input type="checkbox" id="agreeTerms" class="mr-2" required>82 <label for="agreeTerms" class="text-sm text-gray-300">I confirm receipt of all documents listed above</label>83 </div>84 </div>85 </div>86 <div class="no-print flex flex-col gap-3">87 <button id="confirmReceiptBtn" class="w-full bg-gradient-to-r from-primary-600 to-primary-500 hover:from-primary-700 hover:to-primary-600 text-white px-4 py-3 rounded-lg flex items-center justify-center gap-2 transition-all hover:shadow-lg">88 <i data-feather="check-circle"></i> Confirm Receipt89 </button>90 <button onclick="window.print()" class="w-full bg-gray-700 hover:bg-gray-600 text-white px-4 py-3 rounded-lg flex items-center justify-center gap-2 transition-all">91 <i data-feather="printer"></i> Print Protocol92 </button>93 </div>94<div id="confirmationMessage" class="hidden bg-green-900/30 border border-green-800 text-green-300 p-4 rounded-lg text-center">95 <i data-feather="check-circle" class="w-8 h-8 mx-auto mb-2"></i>96 <p class="font-semibold">Receipt confirmed successfully!</p>97 <p class="text-sm mt-1" id="confirmationDetails"></p>98 <button onclick="window.print()" class="mt-3 bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center gap-1 mx-auto">99 <i data-feather="printer" class="w-4 h-4"></i> Print Confirmation100 </button>101 </div>102 </div>103 </div>104 105 <script>106 feather.replace();107 108 // Parse URL parameters109 const urlParams = new URLSearchParams(window.location.search);110 const protocolNumber = urlParams.get('protocol');111 112 // In a real app, you would fetch this data from your API113 if (protocolNumber) {114 document.getElementById('protocolNumber').textContent = protocolNumber;115 116 // Simulate fetching protocol data117 setTimeout(() => {118 document.getElementById('protocolDate').textContent = new Date().toLocaleDateString();119 document.getElementById('protocolFrom').textContent = 'Finance Department';120 document.getElementById('protocolTo').textContent = 'Your Name';121 122 // Add sample documents123 const documentsList = document.getElementById('documentsList');124 const sampleDocs = ['Annual Report.pdf', 'Budget Proposal.docx', 'Approval Form.pdf'];125 126 sampleDocs.forEach(doc => {127 const li = document.createElement('li');128 li.className = 'flex items-center gap-2';129 li.innerHTML = `<i data-feather="file" class="text-gray-400 w-4 h-4"></i> ${doc}`;130 documentsList.appendChild(li);131 });132 133 feather.replace();134 }, 500);135 }136 // Handle receipt confirmation137 document.getElementById('confirmReceiptBtn').addEventListener('click', function(e) {138 e.preventDefault();139const receiverName = document.getElementById('receiverName').value;140 const receiverDoc = document.getElementById('receiverDocument').value;141 const agreeTerms = document.getElementById('agreeTerms').checked;142 143 if (!receiverName || !receiverDoc || !agreeTerms) {144 alert('Please fill all required fields and confirm receipt');145 return;146 }147 148 // In a real app, you would send this to your API149 const confirmationDetails = `Confirmed by ${receiverName} (${receiverDoc}) on ${new Date().toLocaleString()}`;150 151 // Show confirmation152 document.getElementById('receiptContent').classList.add('hidden');153 document.getElementById('confirmationMessage').classList.remove('hidden');154 document.getElementById('confirmationDetails').textContent = confirmationDetails;155 156 // Here you would normally send this data to your backend157 console.log('Receipt confirmed:', {158 protocol: protocolNumber,159 receiverName,160 receiverDocument: receiverDoc,161 confirmationDate: new Date().toISOString()162 });163 164 feather.replace();165 });166 </script>167</body>168</html>