Skip to content

Commit 8ef4556

Browse files
avinashkranjanavinashkranjan
authored
Merge pull request avinashkranjan#1291 from techdobz/master
[+] Added New Script To Convert Folder To HTML File
2 parents 5e56c91 + 13862b5 commit 8ef4556

File tree

5 files changed

+389
-0
lines changed

5 files changed

+389
-0
lines changed

‎Folder-To-HTML/README.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
3+
# Folder To HTML Page
4+
5+
-> Convert Any Folder or sub folders into Single HTML Page with CSS and Some JavaScript
6+
7+
-> you can open this .html file into your browser to view data.
8+
9+
-> will Show .mp4 as html videos , .mp3 as html audios and pdf document as link, you can open that directly in your browser,
10+
11+
-> you can also add any document you want , just by adding some thing in code.
12+
13+
### How TO Use
14+
15+
-> Add all the data into td_data folder.
16+
17+
-> Run : `python make_data.py`
18+
19+
-> will create `data_view.html` file.
20+
21+
### Features
22+
23+
-> Search Data / Files based on Names,
24+
25+
-> will convert folder names into tag format , you can filter data based on that also.

‎Folder-To-HTML/make_data.py

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import os
2+
3+
data_folder = 'td_data'
4+
static_folder = 'td_static'
5+
html_file = 'data_view.html'
6+
data_dir_path = os.path.dirname(os.path.abspath(__file__))
7+
8+
class DataView():
9+
10+
def __init__(self, data_folder, html_file):
11+
self.data_folder = data_folder
12+
self.html_file = html_file
13+
14+
self.all_tags = set()
15+
self.objects = {
16+
'.mp4': [],
17+
'.mp3': [],
18+
'.pdf': [],
19+
'other': []
20+
}
21+
22+
self.allowed_data_types = ['.mp4','.mp3','.pdf']
23+
self.data_types = {
24+
'.mp4': """
25+
<video class="td-video" controls>
26+
<source src="{src_info}" type="video/mp4">
27+
</video>
28+
""",
29+
'.mp3': """
30+
<audio class="td-audio" controls>
31+
<source src="{src_info}" type="audio/ogg">
32+
</audio>
33+
""",
34+
".pdf" : """
35+
<a class="td-pdf" href="file://""" + data_dir_path + """/{src_info}" target="_blank" >OPEN</a>
36+
"""
37+
38+
}
39+
self.list_of_files = {}
40+
41+
42+
def find_all_files(self):
43+
for (dirpath, dirnames, filenames) in os.walk(data_folder):
44+
for filename in filenames:
45+
self.list_of_files[filename] = os.sep.join([dirpath, filename])
46+
47+
def write_first_html(self, src_tags):
48+
with open(self.html_file,'w') as h_file:
49+
h_file.write(
50+
"""
51+
<!DOCTYPE html>
52+
<html lang="en">
53+
<head>
54+
<meta charset="UTF-8">
55+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
56+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
57+
58+
<!-- ALL THE OUTSIDE CSS -->
59+
60+
<!-- ALL CUSTOM CSS -->
61+
<link rel="stylesheet" href=" """+ static_folder +"""/css/main/data_view.css">
62+
63+
<title>Data View</title>
64+
65+
</head>
66+
<body>
67+
<div class="_td-s">
68+
<div id="search">
69+
<input id="td-input" type="text" placeholder="Find data...">
70+
</div>
71+
</div>
72+
<div class="td-main">
73+
<div class="td-right">
74+
<div class="_td-t">
75+
<div class="_td-te tag-active">#all</div>
76+
{src_tags}
77+
</div>
78+
</div>
79+
<div class="td-left">
80+
<div class="_td-c">
81+
""".format(src_tags=src_tags)
82+
)
83+
84+
def write_middle_html(self,object):
85+
ext = object['ext']
86+
src_info = object['src_info']
87+
src_name = object['src_name']
88+
src_tags = object['src_tags']
89+
90+
with open(self.html_file,'a') as h_file:
91+
h_file.write(
92+
"""
93+
<div class="td-element">
94+
{src_info}
95+
<div class="_tde-info">{src_name}</div>
96+
<div class="_tde-tags">{src_tags}</div>
97+
</div>
98+
""".format(src_info=self.data_types[ext].format(src_info=src_info),src_name=src_name,src_tags=src_tags)
99+
)
100+
101+
def write_end_html(self):
102+
with open(self.html_file,'a') as h_file:
103+
h_file.write(
104+
"""
105+
</div>
106+
</div>
107+
</div>
108+
<!-- ALL OUTSIDE SCRIPTS -->
109+
<script src=" """+ static_folder +"""/js/outside/jquery-3.6.1.min.js"></script>
110+
111+
<!-- ALL MAIN SCRIPTS-->
112+
<script src=" """+ static_folder +"""/js/main/data_view.js"></script>
113+
</body>
114+
</html>
115+
"""
116+
)
117+
118+
def work_on_files(self):
119+
for file_name in self.list_of_files:
120+
file_path = self.list_of_files[file_name]
121+
name, ext = os.path.splitext(file_name)
122+
123+
tags = file_path.split('/')
124+
tags.remove(self.data_folder)
125+
tags.remove(file_name)
126+
127+
self.all_tags.update(tags)
128+
129+
src_tags = '\n'.join('<span class="_td-te2">#{}</span>'.format(t) for t in tags)
130+
131+
if ext in self.allowed_data_types:
132+
object = {
133+
'ext': ext,
134+
'src_info': file_path,
135+
'src_name': name,
136+
'src_tags': src_tags,
137+
}
138+
139+
self.objects[ext].append(object)
140+
141+
src_tags = '\n'.join('<div class="_td-te">#{}</div>'.format(t) for t in list(self.all_tags))
142+
143+
self.write_first_html(src_tags)
144+
145+
for ext,object_list in self.objects.items():
146+
for object_dict in object_list:
147+
self.write_middle_html(object_dict)
148+
149+
self.write_end_html()
150+
151+
data_obj = DataView(data_folder,html_file)
152+
data_obj.find_all_files()
153+
data_obj.work_on_files()

‎Folder-To-HTML/td_static/css/main/data_view.css

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
.td-element {
2+
border-radius: 20px;
3+
margin: 20px;
4+
padding: 10px;
5+
width: 450px;
6+
text-align: center;
7+
background-color: #17141d;
8+
border-radius: 10px;
9+
box-shadow: -1rem 0 3rem #000;
10+
font-family: 'Open Sans', sans-serif;
11+
}
12+
13+
.td-video {
14+
width: 80%;
15+
}
16+
17+
.td-audio {
18+
19+
}
20+
21+
._td-c {
22+
display: flex;
23+
flex-wrap: wrap;
24+
}
25+
26+
._tde-info {
27+
width: 90%;
28+
margin: 10px auto;
29+
}
30+
31+
._tde-tags {
32+
width: 90%;
33+
margin-top: 20px !important;
34+
margin: 0 auto;
35+
}
36+
37+
._tde-tags ._td-te2 {
38+
background-color: #c2fbd7;
39+
border-radius: 5px;
40+
box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
41+
color: green;
42+
cursor: pointer;
43+
display: inline-block;
44+
font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
45+
padding: 7px 20px;
46+
text-align: center;
47+
text-decoration: none;
48+
transition: all 250ms;
49+
border: 0;
50+
font-size: 16px;
51+
user-select: none;
52+
-webkit-user-select: none;
53+
touch-action: manipulation;
54+
margin: 5px;
55+
}
56+
57+
._td-t {
58+
display: flex;
59+
flex-wrap: wrap;
60+
}
61+
62+
._td-te {
63+
margin-right: 10px;
64+
cursor: pointer;
65+
background-color:
66+
}
67+
68+
@media (min-width:792px) {
69+
.td-main {
70+
display: flex;
71+
flex-direction: row-reverse;
72+
}
73+
}
74+
75+
.td-main .td-right {
76+
width: 20%;
77+
margin-right: 5px;
78+
}
79+
80+
.td-main .td-left {
81+
width: 80%;
82+
}
83+
84+
#td-input {
85+
font-family: 'Montserrat Alternates', sans-serif;
86+
border-radius: 10px;
87+
border: none;
88+
background: #c2fbd7;
89+
box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
90+
padding-top: 15px;
91+
padding-bottom: 5px;
92+
padding-left: 5px;
93+
margin-bottom: 20px;
94+
margin-right: 20px;
95+
color: green;
96+
font-size: 1.32em;
97+
font-weight: 400;
98+
letter-spacing: -0.015em;
99+
outline: none;
100+
text-align: center;
101+
}
102+
103+
.td-pdf{
104+
background: rgb(2,0,36);
105+
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,0.8617646887856705) 65%, rgba(0,212,255,1) 100%);
106+
border-radius: 5px;
107+
color: #fff;
108+
cursor: pointer;
109+
display: inline-block;
110+
font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
111+
padding: 7px 20px;
112+
text-align: center;
113+
text-decoration: none;
114+
transition: all 250ms;
115+
border: 0;
116+
font-size: 16px;
117+
user-select: none;
118+
-webkit-user-select: none;
119+
touch-action: manipulation;
120+
margin: 5px;
121+
}
122+
123+
._td-te {
124+
background-color: #c2fbd7;
125+
border-radius: 5px;
126+
box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
127+
color: green;
128+
cursor: pointer;
129+
display: inline-block;
130+
font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
131+
padding: 7px 20px;
132+
text-align: center;
133+
text-decoration: none;
134+
transition: all 250ms;
135+
border: 0;
136+
font-size: 16px;
137+
user-select: none;
138+
-webkit-user-select: none;
139+
touch-action: manipulation;
140+
margin: 5px;
141+
}
142+
143+
._td-te.tag-active {
144+
background-color: #29a0b1;
145+
color: #ddffe7;
146+
}
147+
148+
body {
149+
background-color: #100e17;
150+
color: white;
151+
width: 100%;
152+
height: 100%;
153+
background-repeat: no-repeat;
154+
background-position: center center;
155+
background-attachment: fixed;
156+
background-size: cover;
157+
overflow-x: hidden;
158+
}

‎Folder-To-HTML/td_static/js/main/data_view.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const searchInput = document.getElementById("td-input");
2+
3+
// store name elements in array-like object
4+
const names = document.getElementsByClassName("_tde-info");
5+
const tags = document.getElementsByClassName("_tde-tags");
6+
7+
// listen for user events
8+
searchInput.addEventListener("keyup", (event) => {
9+
const { value } = event.target;
10+
11+
// get user search input converted to lowercase
12+
const searchQuery = value.toLowerCase();
13+
14+
for (const nameElement of names) {
15+
// store name text and convert to lowercase
16+
let name = nameElement.textContent.toLowerCase();
17+
18+
// compare current name to search input
19+
if (name.includes(searchQuery)) {
20+
// found name matching search, display it
21+
22+
nameElement.parentNode.style.display = "block";
23+
} else {
24+
// no match, don't display name
25+
nameElement.parentNode.style.display = "none";
26+
}
27+
}
28+
});
29+
30+
$(document).on('click','._td-te', function(){
31+
var clickedValue = $(this).text();
32+
33+
$('._td-te').removeClass('tag-active');
34+
$(this).addClass('tag-active');
35+
36+
for (const tag of tags) {
37+
let tagString = tag.textContent.toLowerCase();
38+
39+
if(clickedValue != '#all'){
40+
if (tagString.includes(clickedValue)){
41+
tag.parentNode.style.display = "block";
42+
} else {
43+
tag.parentNode.style.display = "none";
44+
}
45+
} else {
46+
tag.parentNode.style.display = "block";
47+
}
48+
}
49+
50+
51+
});

‎Folder-To-HTML/td_static/js/outside/jquery-3.6.1.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)