-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.html
155 lines (145 loc) · 6.57 KB
/
search.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link
href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Gloock&family=Paytone+One&family=Roboto:wght@100;300;400;500;700&family=Unna:ital,wght@0,400;0,700;1,400&family=Young+Serif&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="indexstyle.css">
<script src="https://kit.fontawesome.com/b284ece004.js" crossorigin="anonymous"></script>
<title>Search</title>
</head>
<body>
<!--SIDE BAR starts-->
<div id="sidebar">
<form action="purchase.html">
<input type="submit" value="Go to Purchase" />
</form>
<form action="search.html">
<input type="submit" value="Find Mushrooms" />
</form>
<form action="Gallery.html">
<input type="submit" value="Picture gallery" />
</form>
<form action="map_new.html">
<input type="submit" value="Mushroom maps" />
</form>
</div>
<!--SIDE BAR ends-->
<!-- Header starts -->
<header>
<div class="logorow column" style="flex-grow: 1;"><a class="logorow column" style="flex-grow: 1;"
href="index.html"><img src="images/mushroom-logo.png">
<h1 style="clear: both;">MushROOM</h1>
</a><br>
</div>
<div style="flex-grow: 4;"><span>Search mushrooms and recipes</span>
<div class="input-icons searchrow" style="gap: 8px; width: 50%;"><input type="text" id="Search"
class="input-field searchbar">
<button id="searchButton" class="btn"><i class="fa fa-search"></i> Search</button>
<button class="secondarybtn"><i class="fa fa-filter"></i> Filters</button>
</div>
</header>
<div id="profile-box">
<form action="signin.html" method="get">
<input type="submit" value="LOGIN" />
</form>
<form action="sign-up.html" method="get">
<input type="submit" value="SIGNUP" />
</form>
</div>
<!-- //Header ends -->
<div id="displayResult" style="display: none;">
<p style="margin-top: 36px;">17 results total</p>
<span class="searchrow column"><img src="images/mushroom.png" class="icon_title">
<h3>Mushrooms</h3>
</span>
<div class="cardstack">
<!-- product card 1 -->
<section class="card">
<img class="card" src="images/mushroom-red.png">
<div class="innerCardContent">
<h4>Fly agaric mushrooms</h4>
<p>Fly agaric mushrooms, or Amanita muscaria, are known for their distinctive appearance. They're a
bright
red
mushroom with white spots, kinda like Toad in Mario Kart. Another amazing quality of theirs is
their
hallucinogenic properties, courtesy of ibotenic acid and muscimol.</p>
</div>
</section>
<!-- product card 2-->
<section class="card">
<img class="card" src="images/mushroom-red.png">
<div class="innerCardContent">
<h4>Fly agaric mushrooms</h4>
<p>Fly agaric mushrooms, or Amanita muscaria, are known for their distinctive appearance. They're a
bright
red
mushroom with white spots, kinda like Toad in Mario Kart. Another amazing quality of theirs is
their
hallucinogenic properties, courtesy of ibotenic acid and muscimol.</p>
</div>
</section>
</div>
<span class="searchrow column"><img src="images/grill-hot.svg" class="icon_title">
<h3>Recipes</h3>
</span>
<div class="cardstack">
<!-- product card 1 -->
<section class="card">
<img class="card" src="images/cooking.png" style="width: 187px">
<div class="innerCardContent">
<h4>Fly agaric mushrooms</h4>
<p>Fly agaric mushrooms, or Amanita muscaria, are known for their distinctive appearance. They're a
bright
red
mushroom with white spots, kinda like Toad in Mario Kart. Another amazing quality of theirs is
their
hallucinogenic properties, courtesy of ibotenic acid and muscimol.</p>
</div>
</section>
<!-- product card 2-->
<section class="card">
<img class="card" src="images/cooking.png" style="width: 187px">
<div class="innerCardContent">
<h4>Fly agaric mushrooms</h4>
<p>Fly agaric mushrooms, or Amanita muscaria, are known for their distinctive appearance. They're a
bright
red
mushroom with white spots, kinda like Toad in Mario Kart. Another amazing quality of theirs is
their
hallucinogenic properties, courtesy of ibotenic acid and muscimol.</p>
</div>
</section>
</div>
</div>
<!--FOOTER -->
<footer>
<br>
All rights reserved by MushROOM Media. 2023
</footer>
<!--FOOTER ends -->
<script>
var result = "Nothing found!";
const SearchBtn = document.getElementById("searchButton");
SearchBtn.addEventListener('click', function () {
var displayResult = document.getElementById("displayResult");
var searchInput = document.getElementById("Search");
if (searchInput.value != "") {
displayResult.style.display = "block";
} else {
alert("Please type something!")
}
})
</script>
</body>
</html>