Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 13862b5

Browse files
[+] Added New Script To Convert Folder To HTML File
1 parent c628829 commit 13862b5

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()
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+
}
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)

AltStyle によって変換されたページ (->オリジナル) /