fe_qrcodegenerator/index.php

109 lines
5.0 KiB
PHP

<?php
session_start();
require_once __DIR__.'/vendor/autoload.php';
use Gregwar\Captcha\CaptchaBuilder;
$builder = new CaptchaBuilder;
$builder->build();
$_SESSION['phrase'] = $builder->getPhrase();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QRCode Generator Asset Diskominsta</title>
<link rel="icon" type="image/x-icon" href="https://magelangkota.go.id/logomagelang.ico">
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;700&display=swap" rel="stylesheet">
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
<!-- Sweet Alert -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto h-screen">
<div class="w-full h-full flex flex-col items-center justify-center">
<div class="flex flex-col justify-center items-center mb-10">
<div class="w-14 md:w-20 mb-5">
<img src="./image/magelang.svg" class="w-full h-full">
</div>
<div class="text-sm md:text-xl lg:text-2xl flex flex-col items-center font-medium">
<span class="py-2 font-semibold">
QRCode Generator Asset
</span>
<span class="py-2">
Dinas Komunikasi Informatika dan Statistik
</span>
<span>
Kota Magelang
</span>
</div>
</div>
<form enctype="multipart/form-data" class="w-1/2 flex flex-col" id="form">
<input type="file" name="file" id="upload-button" accept=".xlsx, .xls"/>
<label for="upload-button" class="flex flex-col items-center justify-center w-full h-60 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<svg aria-hidden="true" class="w-10 h-10 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Klik untuk unggah</span> atau tarik file</p>
<p class="text-xs text-gray-500 dark:text-gray-400">excel file (MAX. 5Mb)</p>
<p class="text-xs text-gray-500 dark:text-gray-400">*file yang diizinkan hanya .xls dan .xlsx</p>
</div>
</label>
<div id="error"></div>
<div id="file-display"></div>
<div class="grid grid-cols-1 gap-4 mt-2 mb-2">
<div>
<input type="password" maxlength="128" minlength="128" size="128" class="w-full bg-gray-200 rounded-lg py-2 px-4 focus:outline-none focus:bg-white transition duration-150 ease-in-out" name="key" aria-describedby="key" placeholder="input key" required>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mt-2">
<div>
<input type="text" maxlength="5" minlength="5" size="5" class="w-full bg-gray-200 rounded-lg py-2 px-4 focus:outline-none focus:bg-white transition duration-150 ease-in-out" name="capcay" aria-describedby="code" placeholder="Masukan Kode Captcha" required>
</div>
<div>
<img width="100%" class="img-fluid img-thumbnail" src="<?php echo $builder->inline(); ?>" />
</div>
</div>
<button type="submit" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm md:px-5 px-3 md:py-2.5 py-2 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 mt-8">Unggah File</button>
</form>
<a class="mt-2 text-blue-500 underline" href="template/template.xlsx" download>Download template excel</a>
</div>
</div>
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"></script>
<script src="script.js"></script>
</body>
</html>