Spaces:
Configuration error
Configuration error
Upload 3 files
Browse files
404.html
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{% extends "base.html" %}
|
| 2 |
+
{% block content %}
|
| 3 |
+
|
| 4 |
+
<div class = "container text-center">
|
| 5 |
+
<h4 style="font-size: 400px;"><b>404</b></h4>
|
| 6 |
+
<h4>The Dish you're looking for is not here you can try <a href = "/" style="color: green;"><u>this page</u></a> instead</h4>
|
| 7 |
+
</div>
|
| 8 |
+
|
| 9 |
+
{% endblock %}
|
base.html
ADDED
|
@@ -0,0 +1,302 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<title>Awareness of Waste Recycling</title>
|
| 5 |
+
<meta charset="utf-8">
|
| 6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
| 7 |
+
<!-- Bootstrap CSS -->
|
| 8 |
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
|
| 9 |
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
| 10 |
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
| 11 |
+
|
| 12 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
| 13 |
+
|
| 14 |
+
<script src="https://use.fontawesome.com/305ad9003c.js"></script>
|
| 15 |
+
|
| 16 |
+
<style>
|
| 17 |
+
.topnav {
|
| 18 |
+
overflow: hidden;
|
| 19 |
+
background-color: #232a34;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
.topnav a {
|
| 23 |
+
float: left;
|
| 24 |
+
display: block;
|
| 25 |
+
color: wheat;
|
| 26 |
+
text-align: center;
|
| 27 |
+
padding: 14px 16px;
|
| 28 |
+
text-decoration: none;
|
| 29 |
+
font-size: 17px;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
.topnav a:hover {
|
| 33 |
+
background-color: wheat;
|
| 34 |
+
color: #232a34;
|
| 35 |
+
}
|
| 36 |
+
|
| 37 |
+
.topnav a.active {
|
| 38 |
+
background-color: wheat;
|
| 39 |
+
color: #232a34;
|
| 40 |
+
}
|
| 41 |
+
|
| 42 |
+
a {
|
| 43 |
+
cursor: alias;
|
| 44 |
+
color: wheat;
|
| 45 |
+
font-size: 120%;
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
+
h4{
|
| 49 |
+
color: wheat;
|
| 50 |
+
padding-top: 4%;
|
| 51 |
+
padding-left: 4px;
|
| 52 |
+
padding-right: 4px;
|
| 53 |
+
padding-bottom: 4px;
|
| 54 |
+
background-color: #232a34;
|
| 55 |
+
}
|
| 56 |
+
|
| 57 |
+
h3{
|
| 58 |
+
color: wheat;
|
| 59 |
+
background-color: #232a34;
|
| 60 |
+
padding-top: 2%;
|
| 61 |
+
padding-bottom: 1%;
|
| 62 |
+
padding-left: 4px;
|
| 63 |
+
}
|
| 64 |
+
|
| 65 |
+
h2{
|
| 66 |
+
color: wheat;
|
| 67 |
+
background-color: #232a34;
|
| 68 |
+
padding-top: 2%;
|
| 69 |
+
padding-bottom: 1%;
|
| 70 |
+
padding-left: 4px;
|
| 71 |
+
}
|
| 72 |
+
|
| 73 |
+
@media screen and (min-width: 601px) {
|
| 74 |
+
h4 {
|
| 75 |
+
font-size: 25px;
|
| 76 |
+
}
|
| 77 |
+
|
| 78 |
+
h3 {
|
| 79 |
+
font-size: 30px;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
h2 {
|
| 83 |
+
font-size: 30px;
|
| 84 |
+
}
|
| 85 |
+
|
| 86 |
+
.image-upload img
|
| 87 |
+
{
|
| 88 |
+
width: 80px;
|
| 89 |
+
cursor: pointer;
|
| 90 |
+
}
|
| 91 |
+
|
| 92 |
+
#upload-web {
|
| 93 |
+
display: block;
|
| 94 |
+
}
|
| 95 |
+
|
| 96 |
+
#upload-mobile {
|
| 97 |
+
display: none;
|
| 98 |
+
}
|
| 99 |
+
|
| 100 |
+
.classify-button{
|
| 101 |
+
border: 2px;
|
| 102 |
+
background: none;
|
| 103 |
+
background-color: wheat;
|
| 104 |
+
color: #232a34;
|
| 105 |
+
font-size: large;
|
| 106 |
+
font-weight: bold;
|
| 107 |
+
width: 250px;
|
| 108 |
+
padding: 10px;
|
| 109 |
+
border-radius-top-right: 5px;
|
| 110 |
+
-moz-border-radius-top-right: 5px;
|
| 111 |
+
-webkit-border-radius-top-right: 5px;
|
| 112 |
+
border-radius-bottom-right: 5px;
|
| 113 |
+
-moz-border-radius-bottom-right: 5px;
|
| 114 |
+
-webkit-border-radius-bottom-right: 5px;
|
| 115 |
+
cursor:pointer;
|
| 116 |
+
}
|
| 117 |
+
|
| 118 |
+
#logo-img{
|
| 119 |
+
height: 140px;
|
| 120 |
+
width: 580px;
|
| 121 |
+
}
|
| 122 |
+
|
| 123 |
+
}
|
| 124 |
+
|
| 125 |
+
@media screen and (max-width: 600px) {
|
| 126 |
+
h4 {
|
| 127 |
+
font-size: 15px;
|
| 128 |
+
}
|
| 129 |
+
|
| 130 |
+
h3 {
|
| 131 |
+
font-size: 20px;
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
h2 {
|
| 135 |
+
font-size: 12px;
|
| 136 |
+
}
|
| 137 |
+
|
| 138 |
+
.image-upload img
|
| 139 |
+
{
|
| 140 |
+
width: 40px;
|
| 141 |
+
cursor: pointer;
|
| 142 |
+
}
|
| 143 |
+
|
| 144 |
+
#upload-web {
|
| 145 |
+
display: none;
|
| 146 |
+
}
|
| 147 |
+
|
| 148 |
+
#upload-mobile {
|
| 149 |
+
display: block;
|
| 150 |
+
}
|
| 151 |
+
|
| 152 |
+
.classify-button{
|
| 153 |
+
border: 0px;
|
| 154 |
+
background: none;
|
| 155 |
+
background-color: wheat;
|
| 156 |
+
color: #232a34;
|
| 157 |
+
font-size: small;
|
| 158 |
+
font-weight: bold;
|
| 159 |
+
width: 195px;
|
| 160 |
+
padding: 10px;
|
| 161 |
+
border-radius-top-right: 5px;
|
| 162 |
+
-moz-border-radius-top-right: 5px;
|
| 163 |
+
-webkit-border-radius-top-right: 5px;
|
| 164 |
+
border-radius-bottom-right: 5px;
|
| 165 |
+
-moz-border-radius-bottom-right: 5px;
|
| 166 |
+
-webkit-border-radius-bottom-right: 5px;
|
| 167 |
+
cursor:pointer;
|
| 168 |
+
}
|
| 169 |
+
|
| 170 |
+
#logo-img{
|
| 171 |
+
height: 120px;
|
| 172 |
+
width: 360px;
|
| 173 |
+
}
|
| 174 |
+
|
| 175 |
+
}
|
| 176 |
+
|
| 177 |
+
body{
|
| 178 |
+
background-color: black;
|
| 179 |
+
font-family: 'Times New Roman';
|
| 180 |
+
}
|
| 181 |
+
|
| 182 |
+
.classy_frame{
|
| 183 |
+
position: relative;
|
| 184 |
+
display: block;
|
| 185 |
+
border: solid;
|
| 186 |
+
border-color: wheat;
|
| 187 |
+
border-radius: 7px;
|
| 188 |
+
overflow: hidden;
|
| 189 |
+
box-shadow: none;
|
| 190 |
+
transform: scale(0.98) translateY(5px);
|
| 191 |
+
padding-top: 2%;
|
| 192 |
+
margin-bottom: 3%;
|
| 193 |
+
|
| 194 |
+
|
| 195 |
+
}
|
| 196 |
+
.classy_frame:hover{
|
| 197 |
+
box-shadow: 0px 20px 30px wheat;
|
| 198 |
+
transition: all ease 0.4s;
|
| 199 |
+
}
|
| 200 |
+
|
| 201 |
+
hr {
|
| 202 |
+
border:6px solid #232a34;
|
| 203 |
+
border-radius: 5px;
|
| 204 |
+
background-color: wheat;
|
| 205 |
+
|
| 206 |
+
}
|
| 207 |
+
|
| 208 |
+
.image-upload > input
|
| 209 |
+
{
|
| 210 |
+
display: none;
|
| 211 |
+
}
|
| 212 |
+
|
| 213 |
+
#loading {
|
| 214 |
+
background: #000 url("{{ url_for('static', filename='images/loading.gif') }}") no-repeat center center;
|
| 215 |
+
position: fixed;
|
| 216 |
+
top: 0;
|
| 217 |
+
left: 0;
|
| 218 |
+
height: 100%;
|
| 219 |
+
width: 100%;
|
| 220 |
+
z-index: 9999999;
|
| 221 |
+
display: none;
|
| 222 |
+
}
|
| 223 |
+
|
| 224 |
+
</style>
|
| 225 |
+
|
| 226 |
+
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon">
|
| 227 |
+
{{ JSGlue.include() }} <!-- this is use for use url_for() from javascript -->
|
| 228 |
+
</head>
|
| 229 |
+
<body>
|
| 230 |
+
|
| 231 |
+
<nav class="navbar" style="background-color: #232a34;">
|
| 232 |
+
<div class="container">
|
| 233 |
+
<center>
|
| 234 |
+
<div>
|
| 235 |
+
<a href="/"><img id="logo-img" src="{{ url_for('static', filename = 'images/awareness_of_waste_recycling.png') }}" alt="awareness of waste recycling" title = "awareness of waste recycling"></center></a>
|
| 236 |
+
</div>
|
| 237 |
+
</center>
|
| 238 |
+
</div>
|
| 239 |
+
</nav>
|
| 240 |
+
<br>
|
| 241 |
+
|
| 242 |
+
<!-- Modal -->
|
| 243 |
+
<div class="modal fade" id="errorPopup" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
| 244 |
+
<div class="modal-dialog modal-dialog-centered" role="document">
|
| 245 |
+
<div class="modal-content classy_frame" style="background-color: #0b2438;">
|
| 246 |
+
<div class="modal-header">
|
| 247 |
+
<p class="modal-title" id="errorTitle" style="color:wheat;font-size:large;">Modal title</p>
|
| 248 |
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:wheat;font-size: large;">
|
| 249 |
+
<span aria-hidden="true">×</span>
|
| 250 |
+
</button>
|
| 251 |
+
</div>
|
| 252 |
+
<div class="modal-body">
|
| 253 |
+
<p style="color:wheat; font-size:medium;" id="errorMessage" style="color:wheat;"></p>
|
| 254 |
+
</div>
|
| 255 |
+
<div class="modal-footer">
|
| 256 |
+
<button type="button" class="btn btn-secondary" data-dismiss="modal" style="background-color: wheat; color: #0b2438;">OK</button>
|
| 257 |
+
</div>
|
| 258 |
+
</div>
|
| 259 |
+
</div>
|
| 260 |
+
</div>
|
| 261 |
+
<div id="loading">
|
| 262 |
+
<h3 style="text-align: center;">Wait a second your messy waste is classifying...</h3>
|
| 263 |
+
</div>
|
| 264 |
+
|
| 265 |
+
{% block content %}
|
| 266 |
+
{% endblock %}
|
| 267 |
+
|
| 268 |
+
<footer style="background-color:#232a34">
|
| 269 |
+
<div class = "container">
|
| 270 |
+
<div class = "row">
|
| 271 |
+
<h4 style="text-align:center">Developed by</h4>
|
| 272 |
+
<hr>
|
| 273 |
+
<div class = "col-xs-6 col-sm-3">
|
| 274 |
+
<h4>
|
| 275 |
+
<a href="https://www.instagram.com/jaysoftic/" target="_blank"><i class="fa fa-instagram"></i> Instagram</a>
|
| 276 |
+
</h4>
|
| 277 |
+
<h4>
|
| 278 |
+
<a href="https://www.linkedin.com/in/jaysoftic/" target="_blank"><i class="fa fa-linkedin-square"></i> Linkedin</a>
|
| 279 |
+
</h4>
|
| 280 |
+
<h4>
|
| 281 |
+
<a href="https://github.com/jaysoftic" target="_blank"><i class="fa fa-github"></i> Github</a>
|
| 282 |
+
</h4>
|
| 283 |
+
<h4>
|
| 284 |
+
<a href="https://www.kaggle.com/jaysoftic/" target="_blank"><i class="fab fa-kaggle"></i> Kaggle</a>
|
| 285 |
+
</h4>
|
| 286 |
+
</div>
|
| 287 |
+
<div class = "col-xs-0 col-sm-6">
|
| 288 |
+
|
| 289 |
+
</div>
|
| 290 |
+
<div class = "col-xs-6 col-sm-3">
|
| 291 |
+
<img src="{{ url_for('static', filename = 'images/jaysoftic_brand.png') }}" alt="jaysoftic" height="47%" width="70%" title = "jaysoftic" class = "classy_frame" style="padding: 1%;" align="right">
|
| 292 |
+
</div>
|
| 293 |
+
</div>
|
| 294 |
+
<br>
|
| 295 |
+
<div class="row" style="background-color: #0b2438;">
|
| 296 |
+
<p style="color:wheat; text-align: center;">Learn from Mistakes and Live for Today.</p>
|
| 297 |
+
</div>
|
| 298 |
+
</div>
|
| 299 |
+
</footer>
|
| 300 |
+
|
| 301 |
+
</body>
|
| 302 |
+
</html>
|
home.html
ADDED
|
@@ -0,0 +1,196 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{% extends "base.html" %}
|
| 2 |
+
{% block content %}
|
| 3 |
+
|
| 4 |
+
<div class="container">
|
| 5 |
+
<br>
|
| 6 |
+
<div class="row">
|
| 7 |
+
<div class="col-md-6 classy_frame" style="padding-top: 0%;">
|
| 8 |
+
<center><h3 style="text-transform: capitalize;">Classify Your Waste Material</h3></center>
|
| 9 |
+
<img id="preview" src="{{ url_for('static', filename = 'images/reuse.png') }}" height="400px" width="100%" title = "client pic">
|
| 10 |
+
|
| 11 |
+
<center>
|
| 12 |
+
<br>
|
| 13 |
+
<div class="image-upload">
|
| 14 |
+
<p style="color:wheat;" id="upload-web">Click the image upload icon below to upload a image.</p style="color:wheat;"">
|
| 15 |
+
<p style="color:wheat;" id="upload-mobile">Click the camera icon below to click a image.</p style="color:wheat;"">
|
| 16 |
+
|
| 17 |
+
<label for="file">
|
| 18 |
+
<img id="upload-web" src="{{ url_for('static', filename = 'images/upload.png') }}"/>
|
| 19 |
+
<img id="upload-mobile" src="{{ url_for('static', filename = 'images/camera.png') }}"/>
|
| 20 |
+
|
| 21 |
+
</label>
|
| 22 |
+
<input type="file" name="file" id="file" onchange="previewImage()">
|
| 23 |
+
</div>
|
| 24 |
+
|
| 25 |
+
<br>
|
| 26 |
+
<button class="classify-button" onclick="classifyWaste()">Classify your waste material</button>
|
| 27 |
+
</center>
|
| 28 |
+
<br>
|
| 29 |
+
</div>
|
| 30 |
+
|
| 31 |
+
<div class="col-md-6 classy_frame" style="padding-top: 0%;" id="about">
|
| 32 |
+
<center><h3 style="text-transform: capitalize;">About</h3></center>
|
| 33 |
+
<h4>The world generates at least 3.5 million tons of waste per day and this number is still increasing day by day
|
| 34 |
+
that's why we need to aware about waste.<br><br>This app is help you to classify your waste with 9 different waste materials.
|
| 35 |
+
The recycling process of these waste materials are very hard and even it's very difficult to classify these 9 different waste
|
| 36 |
+
materials at recycling factory.<br><br>But what if every people make 9 trash for 9 different waste materials and put the waste to the
|
| 37 |
+
particular trash according to that waste materials this would be much more better for cleaners and recycling factory to classify
|
| 38 |
+
and recycle the waste. Everyone should do this because around 70% of waste are not recycled just because that was not classified.
|
| 39 |
+
<br><br><br><br><br><br>
|
| 40 |
+
</h4>
|
| 41 |
+
</div>
|
| 42 |
+
</div>
|
| 43 |
+
|
| 44 |
+
<div class="row" id="recycling-videos">
|
| 45 |
+
<br>
|
| 46 |
+
<hr>
|
| 47 |
+
<h3 id="video-title"></h3>
|
| 48 |
+
<div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%; padding-bottom: 2%;">
|
| 49 |
+
<div class="embed-responsive embed-responsive-16by9">
|
| 50 |
+
<iframe id="video1" width="560" height="315" src="https://www.youtube.com/embed/zO3jFKiqmHo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
|
| 51 |
+
</div>
|
| 52 |
+
</div>
|
| 53 |
+
<div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%; padding-bottom: 2%;">
|
| 54 |
+
<div class="embed-responsive embed-responsive-16by9">
|
| 55 |
+
<iframe id="video2" width="560" height="315" src="https://www.youtube.com/embed/I_fUpP-hq3A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
|
| 56 |
+
</div>
|
| 57 |
+
</div>
|
| 58 |
+
</div>
|
| 59 |
+
|
| 60 |
+
<div class="row" id="what-if">
|
| 61 |
+
<br>
|
| 62 |
+
<hr>
|
| 63 |
+
<div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%; padding-bottom: 2%;">
|
| 64 |
+
<center><h2 style="text-transform: capitalize;">What If We Stopped Recycling?</h2></center>
|
| 65 |
+
|
| 66 |
+
<div class="embed-responsive embed-responsive-16by9">
|
| 67 |
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/8fFJOzXxB54" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
|
| 68 |
+
</div>
|
| 69 |
+
</div>
|
| 70 |
+
<div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%; padding-bottom: 2%;">
|
| 71 |
+
<center><h2 style="text-transform: capitalize;">What If We Created No Waste?</h2></center>
|
| 72 |
+
|
| 73 |
+
<div class="embed-responsive embed-responsive-16by9">
|
| 74 |
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/wWbL7Mv2MFw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
|
| 75 |
+
</div>
|
| 76 |
+
</div>
|
| 77 |
+
</div>
|
| 78 |
+
|
| 79 |
+
|
| 80 |
+
<div class="row" id="motivation">
|
| 81 |
+
<br>
|
| 82 |
+
<hr>
|
| 83 |
+
<h3>Why We Need Awareness</h3>
|
| 84 |
+
<div class="col-md-12 classy_frame" style="padding-top: 0%; padding-bottom: 2%;">
|
| 85 |
+
<div class="embed-responsive embed-responsive-16by9">
|
| 86 |
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/NhF4pXBNfq8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
</div>
|
| 90 |
+
|
| 91 |
+
<div class="row" id="quotes">
|
| 92 |
+
<br>
|
| 93 |
+
<hr>
|
| 94 |
+
<div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%;">
|
| 95 |
+
<h4>They don’t dive into the swimming pool they dive into the mud. We can't even imagine how they would feel.</h4>
|
| 96 |
+
</div>
|
| 97 |
+
<div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%;">
|
| 98 |
+
<h4>Your one step to waste recycling can make a cleaner’s life 10 minutes better.<br> </h4>
|
| 99 |
+
</div>
|
| 100 |
+
</div>
|
| 101 |
+
</div>
|
| 102 |
+
|
| 103 |
+
<script>
|
| 104 |
+
var imgData;
|
| 105 |
+
var loading = document.getElementById("loading");
|
| 106 |
+
var whatif = document.getElementById("what-if");
|
| 107 |
+
var motivation = document.getElementById("motivation");
|
| 108 |
+
var quotes = document.getElementById("quotes");
|
| 109 |
+
var recyclingvideos = document.getElementById("recycling-videos");
|
| 110 |
+
|
| 111 |
+
whatif.style.display = "none";
|
| 112 |
+
motivation.style.display = "none";
|
| 113 |
+
quotes.style.display = "none";
|
| 114 |
+
recyclingvideos.style.display = "none";
|
| 115 |
+
|
| 116 |
+
function previewImage(){
|
| 117 |
+
|
| 118 |
+
var file = document.getElementById("file").files;
|
| 119 |
+
if(file.length>0){
|
| 120 |
+
var fileName = file[0].name;
|
| 121 |
+
var allowed_extensions = new Array("jpeg", "jpg","png");
|
| 122 |
+
var file_extension = fileName.split('.').pop().toLowerCase();
|
| 123 |
+
|
| 124 |
+
if(allowed_extensions[0] == file_extension || allowed_extensions[1] == file_extension || allowed_extensions[2] == file_extension){
|
| 125 |
+
var imgObj = document.getElementById("preview");
|
| 126 |
+
var fileReader = new FileReader();
|
| 127 |
+
|
| 128 |
+
fileReader.onload = function(event){
|
| 129 |
+
document.getElementById("preview").setAttribute("src", event.target.result);
|
| 130 |
+
imgData = event.target.result;
|
| 131 |
+
};
|
| 132 |
+
|
| 133 |
+
fileReader.readAsDataURL(file[0]);
|
| 134 |
+
}
|
| 135 |
+
else{
|
| 136 |
+
document.getElementById("file").value = "";
|
| 137 |
+
document.getElementById("errorTitle").innerHTML = "Error - Only Image File Acceptable";
|
| 138 |
+
document.getElementById("errorMessage").innerHTML = "We only accept image with .jpeg .jpg or .png extensions.";
|
| 139 |
+
$("#errorPopup").modal("show");
|
| 140 |
+
|
| 141 |
+
}
|
| 142 |
+
|
| 143 |
+
|
| 144 |
+
}
|
| 145 |
+
}
|
| 146 |
+
|
| 147 |
+
function classifyWaste(){
|
| 148 |
+
var file = document.getElementById("file").files;
|
| 149 |
+
if(file.length > 0){
|
| 150 |
+
loading.style.display = "block";
|
| 151 |
+
whatif.style.display = "block";
|
| 152 |
+
motivation.style.display = "block";
|
| 153 |
+
quotes.style.display = "block";
|
| 154 |
+
recyclingvideos.style.display = "block";
|
| 155 |
+
|
| 156 |
+
var form_data = new FormData();
|
| 157 |
+
form_data.append("file", document.getElementById("file").files[0]);
|
| 158 |
+
$.ajax({
|
| 159 |
+
url: 'classifywaste', // point to server-side URL
|
| 160 |
+
dataType: 'json', // what to expect back from server
|
| 161 |
+
cache: false,
|
| 162 |
+
contentType: false,
|
| 163 |
+
processData: false,
|
| 164 |
+
data: form_data,
|
| 165 |
+
type: 'post',
|
| 166 |
+
success: function (data) {
|
| 167 |
+
|
| 168 |
+
var predicted_value = data["predicted_value"];
|
| 169 |
+
var details = data["details"];
|
| 170 |
+
var video1 = data["video1"];
|
| 171 |
+
var video2 = data["video2"];
|
| 172 |
+
|
| 173 |
+
var about = document.getElementById("about");
|
| 174 |
+
var videotitle = document.getElementById("video-title");
|
| 175 |
+
|
| 176 |
+
about.innerHTML = "<center><h3>Waste classified as <b style='background-color: #0b2438;'>" + predicted_value + "</b> material</h3></center><h4>"+ details +"</h4>";
|
| 177 |
+
videotitle.innerHTML = "How "+ predicted_value +" Recycling Works?";
|
| 178 |
+
|
| 179 |
+
document.getElementById("video1").setAttribute("src", "https://www.youtube.com/embed/" + video1);
|
| 180 |
+
document.getElementById("video2").setAttribute("src", "https://www.youtube.com/embed/" + video2);
|
| 181 |
+
|
| 182 |
+
loading.style.display = "none";
|
| 183 |
+
}
|
| 184 |
+
|
| 185 |
+
});
|
| 186 |
+
}
|
| 187 |
+
else{
|
| 188 |
+
document.getElementById("errorTitle").innerHTML = "Error - Image not uploaded";
|
| 189 |
+
document.getElementById("errorMessage").innerHTML = "Please upload image of your waste material.";
|
| 190 |
+
$("#errorPopup").modal("show");
|
| 191 |
+
}
|
| 192 |
+
}
|
| 193 |
+
</script>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
{% endblock %}
|