Datasets
Models
Downloads: 1
Diff of
/templates/Home.html
[000000]
..
[9dc5df]
Switch to side-by-side view
--- a +++ b/templates/Home.html @@ -0,0 +1,272 @@ +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>AI Demo</title> + <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> + <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script> + <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> + <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> + <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet"> + <link rel="stylesheet" href="C:\Users\junnajamshed\Desktop\projectCopy\static\css\navstyle.css"> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> + <style> + body{ + width: 100%; + height: 100vh; + display: block; + background-size: 300% 300%; + background-image: linear-gradient( + -45deg, + rgba(59,173,227,1) 0%, + rgba(87,111,230,1) 25%, + rgba(152,68,183,1) 51%, + rgba(255,53,127,1) 100% + ); + animation: AnimateBG 20s ease infinite; + } + + @keyframes AnimateBG { + 0%{background-position:0% 50%} + 50%{background-position:100% 50%} + 100%{background-position:0% 50%} + } + * { + padding: 0; + margin: 0; + text-decoration: none; + list-style: none; + box-sizing: border-box; +} +body { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +nav { + background: #022f69; + height: 80px; + width: 100%; +} +label.logo { + color: #fff; + font-size: 35px; + line-height: 80px; + padding: 0 100px; + font-weight: bold; +} +nav ul { + float: right; + margin-right: 20px; +} +nav ul li { + display: inline-block; + line-height: 80px; + margin: 0 5px; +} +nav ul li a { + color: #fff; + font-size: 17px; + padding: 7px 13px; + border-radius: 3px; + text-transform: uppercase; +} +a.active, +a:hover { + background: #fff; + transition: 0.5s; + color: #022f69; +} +.checkbtn { + font-size: 30px; + color: #fff; + float: right; + line-height: 80px; + margin-right: 40px; + cursor: pointer; + display: none; +} +#check { + display: none; +} +@media (max-width: 968px) { + label.logo { + font-size: 30px; + padding-left: 50px; + } + nav ul li a { + font-size: 16px; + } +} +@media (max-width: 875px) { + .checkbtn { + display: block; + } + nav ul { + position: fixed; + width: 100%; + height: 100vh; + background: #27282c; + top: 80px; + left: -100%; + text-align: center; + transition: all 0.5s; + } + nav ul li { + display: block; + margin: 50px 0; + line-height: 30px; + } + nav ul li a { + font-size: 20px; + } + a:hover, + a.active { + background: none; + color: #0082e6; + } + #check:checked ~ ul { + left: 0; + } +} +.img-preview { + width: 256px; + height: 256px; + position: relative; + border: 5px solid #f8f8f8; + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); + margin-top: 1em; + margin-bottom: 1em; +} + +.img-preview > div { + width: 100%; + height: 100%; + background-size: 256px 256px; + background-repeat: no-repeat; + background-position: center; +} + +input[type="file"] { + display: none; +} + +.upload-label { + display: inline-block; + padding: 12px 30px; + background: #39d2b4; + color: #fff; + font-size: 1em; + transition: all 0.4s; + cursor: pointer; +} + +.upload-label:hover { + background: #34495e; + color: #39d2b4; +} + +.loader { + border: 8px solid #f3f3f3; /* Light grey */ + border-top: 8px solid #3498db; /* Blue */ + border-radius: 50%; + width: 50px; + height: 50px; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + + </style> +</head> + +<body> + <nav> + <input type="checkbox" id="check"> + <label for="check" class="checkbtn"> + <i class="fas fa-bars"></i> + </label> + <label class="logo">Leukemia Cancer Detection</label> + <ul> + <li><a href="Home.html">Home</a></li> + <li><a class="active" href="index.html">Detection</a></li> + + <li><a href="about.html">About us</a></li> + <li><a href="#">Contact</a></li> + </ul> + </nav> + <div class="container"> + <div id="content" style="margin-top:2em">{% block content %}{% endblock %}</div> + </div> +</body> + +<footer> + <script > + $(document).ready(function () { + // Init + $('.image-section').hide(); + $('.loader').hide(); + $('#result').hide(); + + // Upload Preview + function readURL(input) { + if (input.files && input.files[0]) { + var reader = new FileReader(); + reader.onload = function (e) { + $('#imagePreview').css('background-image', 'url(' + e.target.result + ')'); + $('#imagePreview').hide(); + $('#imagePreview').fadeIn(650); + } + reader.readAsDataURL(input.files[0]); + } + } + $("#imageUpload").change(function () { + $('.image-section').show(); + $('#btn-predict').show(); + $('#result').text(''); + $('#result').hide(); + readURL(this); + }); + + // Predict + $('#btn-predict').click(function () { + var form_data = new FormData($('#upload-file')[0]); + + // Show loading animation + $(this).hide(); + $('.loader').show(); + + // Make prediction by calling api /predict + $.ajax({ + type: 'POST', + url: '/predict', + data: form_data, + contentType: false, + cache: false, + processData: false, + async: true, + success: function (data) { + // Get and display the result + $('.loader').hide(); + $('#result').fadeIn(600); + $('#result').text(' Result: ' + data); + console.log('Success!'); + }, + }); + }); + +}); + + </script> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> +</footer> + +</html> \ No newline at end of file