irongit
Sign inRegister
huncholanehuncholane/pdftohtmlPublic
pdftohtml/index.html
116 lines2.8 KBHTML
RawDownloadHistory
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>PDF To HTML</title>
7 <link
8 href="https://fonts.googleapis.com/css?family=Poppins"
9 rel="stylesheet"
10 />
11 <style>
12 body {
13 all: unset;
14 background-color: rgb(35, 33, 33);
15 color: white;
16 font-family: "Poppins";
17 }
18
19 h1 {
20 text-align: center;
21 margin: 20px;
22 width: 100%;
23 }
24
25 /* Dropzone */
26 #dropzone {
27 border: 2px dashed #4d4b4b;
28 width: 80%;
29 margin: 0 auto;
30 text-align: center;
31 border-radius: 10px;
32 padding: 20px;
33 }
34 #dropzone button {
35 all: unset;
36 cursor: pointer;
37 color: rgb(164, 164, 236);
38 }
39 #dropzone button:hover {
40 color: rgb(255, 255, 255);
41 }
42
43 /* Tabs and Container */
44 .tabs-container {
45 width: 80%;
46 margin: 0 auto;
47 margin-top: 20px;
48 }
49 .tabs-container div:first-child {
50 display: flex;
51 }
52 .tabs-container div:first-child h4 {
53 width: 50%;
54 text-align: center;
55 cursor: pointer;
56 padding: 10px;
57 margin: 0;
58 }
59 .tabs-container div:first-child h4:hover {
60 background-color: #6c6767;
61 }
62 .tabs-container div:first-child h4 {
63 background-color: #4d4b4b;
64 border-bottom: 2px solid #6c6767;
65 }
66 .tabs-container div:first-child h4.active {
67 background-color: #6c6767;
68 }
69 .tabs-container div:first-child h4:first-child {
70 border-top-left-radius: 10px;
71 }
72 .tabs-container div:first-child h4:last-child {
73 border-top-right-radius: 10px;
74 }
75 .tabs-container div:last-child {
76 padding: 10px;
77 border-radius: 0 0 10px 10px;
78 background-color: #4d4b4b;
79 }
80 .tabs-container div:nth-child(2) div {
81 display: none;
82 }
83 .tabs-container div:nth-child(2) div.active {
84 display: block;
85 }
86 </style>
87 </head>
88 <body>
89 <h1>PDF To HTML</h1>
90 <div id="dropzone">
91 Drop your files or <button id="manual-upload-btn">Click to upload</button>
92 </div>
93
94 <div class="tabs-container">
95 <div>
96 <h4 class="active">PDF</h4>
97 <h4>HTML</h4>
98 </div>
99 <div>
100 <div class="active">Pdf File</div>
101 <div>Html File</div>
102 </div>
103 </div>
104
105 <script>
106 function manualUpload(e) {}
107
108 document.addEventListener("DOMContentLoaded", (event) => {
109 const dropzone = document.getElementById("dropzone");
110 const manualUploadBtn = document.getElementById("manual-upload-btn");
111
112 manualUploadBtn.add;
113 });
114 </script>
115 </body>
116</html>