Project-1-Mood-Tracker/index.html at main · CailinBellWold/Project-1-Mood-Tracker · GitHub

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
<!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://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Pangolin&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="Assets/CSS/style.css">
    <link rel="stylesheet" href="Assets/CSS/animation.css">
    <title>Mood Tracker</title>
</head>
<body>
    <header>
        <div class="hero">
            <div class="welcome">
                <h1>Welcome Friends</h1>
                <h2 class="time"></h2>
            </div>
        </div>
    </header>
        <section class="container">
            <div class="columns is-flex-wrap is-justify-content-space-evenly mt-5">
                <div id="weather" class="on-click box is-align-self-center mx-2 p-6">
                    <div class="subtitle is-4 has-text-weight-semibold">STEP 1:</div>
                    <div class="subtitle is-4">What is the Weather like outside?</div>
                    <div class="buttons are-large">
                    <button id="sunny" class="weather-button sunny button is-medium is-fullwidth">☀️</button>
                    <button id="cloudy" class="weather-button cloudy button is-medium is-fullwidth">☁️</button>
                    <button id="raining" class="weather-button raining button is-medium is-fullwidth">☔️</button>
                    <button id="snowing" class="weather-button snowing button is-medium is-fullwidth">❄️</button>
                    </div>
                </div>
                <div id="feeling" class="on-click box is-align-self-center mx-2 p-6">
                    <div class="subtitle is-4 has-text-weight-semibold">STEP 2:</div>
                    <div class="subtitle is-4">How Are You Feeling Today?</div>
                    <div class="buttons are-large">
                    <button id="angry" class="feeling-button angry button is-medium is-fullwidth">Angry</button>
                    <button id="happy" class="feeling-button happy button is-medium is-fullwidth">Happy</button>
                    <button id="sad" class="feeling-button sad button is-medium is-fullwidth">Sad</button>
                    <button id="calm" class="feeling-button calm button is-medium is-fullwidth">Calm</button>
                    </div>
                </div>
                <div id="suggestions" class="image is-align-self-center mx-1 mb-4 p-2">
                    <div class="subtitle is-3 pt-1"><h5 class="title">Suggestions For You</h5>
                    <div class="suggestions mt-3" style="width: 640px; height: 360px;">
                        <figure class="image is-16by9">
                            <img src="Assets/images/suggestions.jpeg" alt="Kids looking in the aquarium">
                        </figure>
                        <div class="modal">
                            <div class="modal-background"></div>
                            <div class="modal-card">
                                <header class="modal-card-head cbw-card-header">
                                <p class="modal-card-title is-size-2 cbw-card-header-txt">We Think You Will Like This!</p>
                                <button class="modal-close" aria-label="close"></button>
                                </header>
                                <section class="modal-card-body is-size-4">
                                    <div id="content"></div>
                                    <img id="GIF" src="" alt="">
                                        <h3 id="bodyquote"></h3>
                                        <h4 id="author"></h4>
                                </section>
                                <footer class="modal-card-foot">
                                    <a href="#" id="next" class="card-footer-item cbw-card-footer is-size-4">Next</a>
                            </footer>
                            </div>
                        </div>
        </section>
        <section>
            <div id="past-history">
                <h6><a href="history.html" ><span class="tag is-light is-large">
                    A look back into the past...</span></a></h6>
            </div>
        </section>
    <footer class="footer">
        <div class="content has-text-centered">
            <p>
            <strong>Mood Tracker</strong> by
                <a href="https://github.com/CailinBellWold" target="_blank">
                    Cailin Bell Wold</a>.
                <a href="https://github.com/Chabivz" target="_blank">
                    Chris Abiva</a>,
                <a href="https://github.com/mohamedB-01"target="_blank">
                    Mohamed Bassiouni</a>,
                <a href="https://github.com/twashke" target="_blank">
                    Tiffany Washke</a>.<br>
            </p>
        </div>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="Assets/JS/script.js"></script>
    <script src="Assets/JS/local-storage-set.js"></script>
    <script src="Assets/JS/all-api-scripts.js"></script>
</body>
</html>