LoginAuthenticator-/home.ejs at main · SaurabhSushant/LoginAuthenticator- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
  <link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
    rel="stylesheet"
/>
</head>
<body>
    <main class="p-4 bg-gray-100 dark:bg-blue-800 h-screen w-screen">
  <button onclick="showPopUp()"  class="bg-blue-500  hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Upload File
  </button>

  <div class="pop hidden backdrop-blur fixed top-0 left-0 w-screen h-screen flex items-center justify-center">
    <form action="/upload-file" method="post" enctype="multipart/form-data">

<div class="flex  items-center justify-center w-96">
    <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-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 class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
            </svg>
            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
        </div>
        <input id="dropzone-file" type="file" class="hidden"  name="file"  />
    </label>
</div>

<button>
    Uplaod file
</button>

</form>

<button onclick="hidePopUp()" class="absolute top-4 right-4 text-gray-500 dark:text-gray-400 text-xl">
    <i class="ri-close-large-line"></i>
</button>

  </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
  <script>
    function showPopUp(){
        document.querySelector('.pop').style.display="flex";
    }
    function hidePopUp(){
        document.querySelector('.pop').style.display="none";
    }
  </script>
</body>
</html>