-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
73 lines (60 loc) · 2.98 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Motivation Locale</title>
</head>
<body>
<header > <!--this for the title and the first button is to generate the quote and second is to generate a img-->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Welcome to Motivation Locale</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>User Guide</h4>
<p>Welcome to Motivation Locale, please press the "quote" button to generate a random quote, and the "image" button to generate a random image. In the feelings input box, you can add your feelings today and save them all. All saved quotes,images, and input will be saved to the history pafe. We hope you enjoy the experience!</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Proceed</a>
</div>
</div>
<!-- modal ends here-->
<div class="color">
<div class="col s12 m2">
<div class="z-depth-5" class="container">
<h1 class="title">Motivation Locale</h1>
<div class="btn-location"><button class="waves-effect waves-light btn" class="make-quote" id="gquote">Generate Quote</button></div>
<div class="btn-location"><button class="waves-effect waves-light btn" class="make-img" id="gimg">Generate Image</button></div>
</div>
</div>
</div>
</header>
<!--Container for the generated quote and image-->
<div class="border">
<section> <!-- here is where the quote will be generated-->
<div id="quotecard" class="quote-card"> </div>
</section>
<section> <!--here will be where the img will be generated-->
<img class="imgcard"></img>
</section>
</div>
<!-- Container where the user will be able to input their feeling-->
<section class="feeling-box">
<div class="feeling">
<input id="userinput" type="text" placeholder="your feelings?">
<button class="feeling-save">Save</button>
</div>
</section>
<!--Button to take the user to the history page-->
<div>
<a href="assets/history.html" class="btn" id="old-quotes">History</a>
</div>
<footer> this product uses the flicker API but not endoresd or certified by SmugMug.inc </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="assets/script/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>