Spaces:
Sleeping
Sleeping
File size: 3,890 Bytes
c3abc9e |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpeciScan</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-leaf"></i> SpeciScan</h1>
<p>Identify animals and plants and learn about them</p>
</header>
<div class="main-content">
<div class="search-methods">
<div class="method-card">
<h2><i class="fas fa-camera"></i> Upload Image</h2>
<p>Take or upload a photo to identify the species</p>
<form id="upload-form" enctype="multipart/form-data">
<div class="file-upload">
<label for="file-input">
<div class="upload-zone" id="upload-zone">
<i class="fas fa-cloud-upload-alt"></i>
<p>Click to select or drag an image here</p>
<p class="file-name" id="file-name"></p>
</div>
</label>
<input id="file-input" type="file" name="file" accept="image/*">
</div>
<button type="submit" class="btn primary-btn">
<i class="fas fa-search"></i> Identify Species
</button>
</form>
</div>
<div class="method-card">
<h2><i class="fas fa-keyboard"></i> Enter Species Name</h2>
<p>Type the name of the species you want to learn about</p>
<form id="name-form">
<input type="text" name="species_name" placeholder="E.g., Panthera leo (Lion)" required>
<button type="submit" class="btn primary-btn">
<i class="fas fa-search"></i> Find Species
</button>
</form>
<div class="suggestions">
<p>Try these examples:</p>
<div class="suggestion-chips">
<span class="chip" data-species="Panthera leo">Lion</span>
<span class="chip" data-species="Panthera tigris">Tiger</span>
<span class="chip" data-species="Ursus arctos">Bear</span>
<span class="chip" data-species="Helianthus annuus">Sunflower</span>
<span class="chip" data-species="Quercus">Oak Tree</span>
<span class="chip" data-species="Apis mellifera">Honey Bee</span>
</div>
</div>
</div>
</div>
<div class="results" id="results">
<!-- Results will be displayed here -->
</div>
</div>
<div class="loading-overlay" id="loading-overlay">
<div class="spinner"></div>
<p>SpeciScan in progress...</p>
</div>
<footer>
<p>Data provided by <a href="https://species.wikimedia.org/" target="_blank">Wikispecies</a> and
<a href="https://commons.wikimedia.org/" target="_blank">Wikimedia Commons</a></p>
<p>© 2025 SpeciScan - Educational App</p>
</footer>
</div>
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html> |