-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
90 lines (73 loc) · 4.33 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="An app that returns random bird calls, as well as information about the bird.">
<meta name="keywords" content="birdcall">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Favicon -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦜</text></svg>">
<!-- External CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<title>Random Bird Calls</title>
</head>
<body class="d-flex flex-column min-vh-100">
<!-- Example Bootstrap code for centered hero, modified for bird song -->
<div class="px-4 pt-5 mt-5 text-center">
<a href="https://pngtree.com/freepng/cute-geometric-pattern-bird_7312459.html?sol=downref&id=bef" target="_blank"><img class="d-block mx-auto my-4" src="img/cute-geometric-bird.png" alt="Digitally drawn bird with a red face and a blue wing." width="120" height="100"></a>
<div class="col-sm-6 mx-auto">
<div class="d-grid gap-2 d-md-flex justify-content-md-center">
<select id="area" name="area" class="form-select" aria-label="Default select example">
<option selected>Choose an area of the world</option>
<option value="africa">Africa</option>
<option value="america">Americas</option>
<option value="antarctica">Antarctica</option>
<option value="asia">Asia</option>
<option value="australia">Australia</option>
<option value="europe">Europe</option>
</select>
<button type="button" class="btn btn-outline-dark btn-md btn-block px-5 text-nowrap birdsong-button">Give me a bird call!</button>
</div>
</div>
<!-- Bird name. -->
<h1 class="display-5 fw-bold"></h1>
<!-- Image from Wikipedia API. -->
<img src="" alt="" width="400" class="bird-img rounded img-responsive">
<div class="hide-for-duck hidden">
<!-- Audio player -->
<audio controls class=" m-2 p-2">
<source src="" type="audio/wav">
Your browser does not support the <code>audio</code> element.
</audio>
<!-- Info on when and where birdcall was recorded. -->
<p class="recording-info px-5 mx-5 fw-lighter"></p>
<!-- Bird info and page link from Wikipedia API. -->
<div class="text-start mx-5">
<p class="wiki-info mx-5"></p>
<p class="wiki-link text-center fw-lighter">Click <a href="" class="wiki-full-url">here</a> to go to the full Wikipedia page.</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="mt-auto container pt-3">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<span class="mb-3 mb-md-0 text-muted">© 2022 Kristl Yuen</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<!-- GitHub icon -->
<li class="ms-3"><a class="text-muted" href="https:/kristlyuen/bird-calls" target="_blank"><svg class="bi" width="24" height="24"><i class="bi bi-github"></i></svg></a></li>
<!-- Random duck easter egg -->
<li class="ms-3"><a class="text-muted" href="#"><img src="img/duck-icon.png" width="24" height="24" class="surprise-duck"></a></li>
</ul>
</div>
</footer>
</div>
<script type="text/javascript" src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>