The agent script box should dynamically shorten (but must still contain the text inside it) so that the entire drawer doesn't resize.
1a88b39 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Screenpop Drawer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .drawer { | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); | |
| border-radius: 8px 0 0 0; | |
| } | |
| .agent-script { | |
| min-height: 100px; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| background-color: #f8fafc; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="fixed bottom-0 left-0 w-full max-w-xl mx-4 mb-4 drawer"> | |
| <!-- Header --> | |
| <div class="flex items-center justify-between px-6 py-4 bg-gray-800 text-white rounded-t-lg"> | |
| <div class="text-lg font-semibold whitespace-nowrap"> | |
| Incoming Call: VDP New Donations | |
| </div> | |
| <i data-feather="chevron-down" class="text-gray-300"></i> | |
| </div> | |
| <!-- Body --> | |
| <div class="bg-white p-6 space-y-6"> | |
| <!-- Nonprofit --> | |
| <div class="text-base"> | |
| <span class="font-medium">Nonprofit:</span> 21st Century Gardens / Mulberry Community Gardens | |
| </div> | |
| <!-- Agent Script --> | |
| <div> | |
| <div class="font-medium mb-2">Agent Script</div> | |
| <div class="agent-script p-4 text-gray-700 flex items-center"> | |
| <div class="w-full"> | |
| 21st Century Gardens / Mulberry Community Gardens in San Diego VDP Program | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Warning Section --> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4"> | |
| <div class="font-bold text-yellow-800">WARNING: VEHICLE IN TITLE ISSUE</div> | |
| <ul class="list-disc pl-5 mt-2 space-y-1 text-yellow-700"> | |
| <li class="text-sm">If the donor asks about the Title Issue, or an update on their vehicle donation, please respond with: "Records with Title Issues are handled by our Title Department. I'll send a request for them to contact you as soon as possible."</li> | |
| <li class="text-sm">Tag "Supervisor Action Needed" on this record.</li> | |
| </ul> | |
| </div> | |
| <!-- Two Column Section --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Caller Information --> | |
| <div> | |
| <div class="text-lg font-bold mb-3">Caller Information</div> | |
| <div class="space-y-2"> | |
| <div> | |
| <span class="font-medium">Caller ID:</span> 858-216-5751 | |
| </div> | |
| <div> | |
| <span class="font-medium">Name:</span> Stuart Green | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Associated Records --> | |
| <div> | |
| <div class="text-lg font-bold mb-3">Associated Records</div> | |
| <div class="space-y-2"> | |
| <div class="whitespace-nowrap"> | |
| <span class="font-medium">Donations:</span> 3 | |
| </div> | |
| <div class="whitespace-nowrap"> | |
| <span class="font-medium">Leads:</span> 1 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="flex justify-between px-6 py-4 bg-gray-50 rounded-b-lg"> | |
| <button class="px-6 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition"> | |
| Reject | |
| </button> | |
| <button class="px-6 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition"> | |
| Accept | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |