-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (98 loc) · 5.02 KB
/
index.html
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Image to Audio</title>
<meta name="description" content="Image to Audio converter">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" id = "dark_mode_link" href="dark_mode.css">
<link rel="icon" type="image/png" href="images/logo.png">
</head>
<body> <!-- #00264d #004080-->
<header>
<nav class="navbar navbar-expand navbar-light">
<a class="logo" href="/"> I2A </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<label class="switch switch_dm">
<input type="checkbox" id = "dark_mode" onclick="on_dark_mode()" checked>
<span class="slider"></span>
</label>
<p class = "checkbox_text checkbox_text_dm"> dark mode </p>
<a href = "description.html" id = "desc" class = "ml-auto"> Description </a>
</nav>
</header>
<div class="container">
<h2 class = "title"> Image to Audio Converter </h2>
<p class = "center"> Upload an image and download an audio file. </p>
<div class = "center-div">
<span class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">
.png
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" type = "button" onclick = "changeValue(this, 'image')">.jpeg</button>
<button class="dropdown-item" type = "button" onclick = "changeValue(this, 'image')">.gif</button>
<button class="dropdown-item" type = "button" onclick = "changeValue(this, 'image')">.pdf</button>
</div>
</span>
<p class = "to"> TO </p>
<span class="dropdown right">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">
.mp3
</button>
<!-- https://pypi.org/project/AudioConverter/ to convert them-->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" type = "button" onclick = "changeValue(this, 'audio')">.flac</button>
<button class="dropdown-item" type = "button" onclick = "changeValue(this, 'audio')">.wav</button>
<button class="dropdown-item" type = "button" onclick = "changeValue(this, 'audio')">.aiff</button>
<button class="dropdown-item" type = "button" onclick = "changeValue(this, 'audio')">.m4a</button>
</div>
</span>
</div>
<div class = "box center-div" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<p> Upload a file <span id = "fileCount"> 0 </span> </p>
<!-- TODO change the primary color -->
<form action="upload.php" method="post" enctype="multipart/form-data">
<label type = "button" class="btn btn-primary btn-lg">
Choose file(s) <input type="file" name="fileToUpload[]" id="fileToUpload" hidden multiple>
</label>
<br><input class="btn btn-secondary" type="submit" value="Upload" name="submit" style = "float:right; margin-right: 2em;" onclick="load_anim()">
<input style = "display:none;" name = "from" id = "from" value = ".png">
<input style = "display:none;" name = "to" id = "to" value = ".mp3">
<label class="switch">
<input type="checkbox" name = "checkbox" id = "checkbox">
<span class="slider"></span>
</label>
<p class = "checkbox_text"> bad photo</p>
</form>
</div>
<div class = "center-div">
<p class = "message"> Note that you can drag and drop multiple files at once. </p>
</div>
<div class = "div_dragndop">
<img class = "arrow" src = "images/arrow.png"/>
<img class = "dragndrop" src = "images/dragNdrop.png"/>
<p class = "small-print center-div"> ( or drag and drop )</p>
</div>
</div>
<div id = "loader_backgrd">
<div id = "loader">
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src = "script-main.js"></script>
<script src = "dark_mode.js"></script>
</body>
</html>