fixed width
This commit is contained in:
ilmedova
parent
0201edb9b0
commit
606b798244
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Scanner</title>
|
||||
<script src="/js/html5-qrcode.min.js"></script>
|
||||
|
|
@ -26,49 +26,51 @@
|
|||
|
||||
</style>
|
||||
</head>
|
||||
<body class="container bg-gray-100 pt-6">
|
||||
<div id="scanapp_ad">
|
||||
<div class="flex justify-center">
|
||||
<div style="max-width: 100px; display: inline-block;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" />
|
||||
<body class="container bg-gray-100 pt-6">
|
||||
<div style="width: 95%; margin:auto">
|
||||
<div id="scanapp_ad">
|
||||
<div class="flex justify-center">
|
||||
<div style="max-width: 100px; display: inline-block;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div style="display: inline-block; margin-left: 10px">
|
||||
<strong>To scan hold a QR code inside the square</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-rounded m-auto mt-3" style="width: 500px;" id="reader"></div>
|
||||
</div>
|
||||
<!--Modal-->
|
||||
<div class="modal opacity-0 transition-opacity ease-in duration-100 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
|
||||
<div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
|
||||
|
||||
<div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
|
||||
|
||||
<div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
|
||||
<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="display: inline-block; margin-left: 10px">
|
||||
<strong>To scan hold a QR code inside the square</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-rounded m-auto mt-3" style="width: 500px;" id="reader"></div>
|
||||
</div>
|
||||
<!--Modal-->
|
||||
<div class="modal opacity-0 transition-opacity ease-in duration-100 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
|
||||
<div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
|
||||
|
||||
<div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
|
||||
|
||||
<div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
|
||||
<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
|
||||
</svg>
|
||||
<span class="text-sm">(Esc)</span>
|
||||
</div>
|
||||
|
||||
<!-- Add margin if you want to see some of the overlay behind the modal-->
|
||||
<div class="modal-content py-8 text-left px-8">
|
||||
<!--Title-->
|
||||
<div class="pb-3">
|
||||
<p id="attender_name" class="text-xl font-bold"></p>
|
||||
<p id="attender_organization" class="text-xl font-bold"></p>
|
||||
<p id="attender_consent" class="text-xl font-bold"></p>
|
||||
<span class="text-sm">(Esc)</span>
|
||||
</div>
|
||||
|
||||
<!--Footer-->
|
||||
<div class="flex justify-end pt-6">
|
||||
<button type="button" class="modal-close px-4 bg-blue-500 p-3 rounded-lg text-white hover:bg-blue-400">Close</button>
|
||||
</div>
|
||||
<!-- Add margin if you want to see some of the overlay behind the modal-->
|
||||
<div class="modal-content py-8 text-left px-8">
|
||||
<!--Title-->
|
||||
<div class="pb-3">
|
||||
<p id="attender_name" class="text-xl font-bold"></p>
|
||||
<p id="attender_organization" class="text-xl font-bold"></p>
|
||||
<p id="attender_consent" class="text-xl font-bold"></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Footer-->
|
||||
<div class="flex justify-end pt-6">
|
||||
<button type="button" class="modal-close px-4 bg-blue-500 p-3 rounded-lg text-white hover:bg-blue-400">Close</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue