hackuci2020/index.html at master · DennisHC/hackuci2020 · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Welcome!</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css">
    <script value="text/javascript" src="functions.js" defer></script>

    <!-- import Sweet Alert Library -->
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

    <!-- Boot Strap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <!-- Weather Widget-->
    <link rel="stylesheet" href="weatherWidget.css">
    <script value="text/javascript" src="weatherWidget.js" defer></script>

</head>


    <body>
        <div class="clearfix">


        </div>
    </body>

    <body onload="display()">
        <h1 class="container bg-dark text-white p-3 rounded"> Welcome to My App! </h1>


        <!-- Title Bar -->
        <div class="row ml-5 p-3 mr-5 rounded" id="titleBar">
            <div class="col-4 bg-light p-2" id="homeButton">Home</div>
            <div class="col-4 bg-light p-2" id="aboutUsButton">About Us</div>
            <div class="col-4 bg-light pr-5 p-2" id="createAnAccountButton">Create an Account</div>
        </div>

        <!-- Date -->
        <div id="date" class="col"></div>
        <!-- Digital Clock -->
        <div id="clock"></div>

        <!-- Corgi Button -->
        <div style="text-align:right">
            <button onclick="corgiButtonHandler()" style="background-color:black;">
                <img src="/corgi.jpg" class="corgiButton" alt="Corgi">
            </button>

                <p id="corgiButtonId"></p>
        </div>

        <!-- Motivational Quote-->
        <div id="positiveAffirmations"></div>

        <!-- TO DO DIV -->
        <div id="todo-list">
            <div> To Do List:</div>
            <div class = "todo-add-button" onclick= 'askForTodo();'>
                <div class = 'todo-add-text'> click to add </div>
            </div>
        </div>

        <!-- Embedded Spotify Player -->
        <iframe
            src="https://open.spotify.com/embed/playlist/0aRiGVrMN6T72NZ4pbNxwD"
            width="300" height="380" frameborder="0" allowtransparency="true"
            allow="encrypted-media"
            style= "float:right">
        </iframe>


    <main class="mdl-layout__content mdl-color--grey-100 bg-light">
        <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">

            <!-- Container for the demo -->
            <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">

                <div class="mdl-card__supporting-text mdl-color-text--grey-600">
                    <p>Sign in with your Google account below.</p>

                    <!-- Button that handles sign-in/sign-out -->
                    <button disabled class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-in">Sign in with Google</button>

                    <!-- Container where we'll display the user details -->
                    <div class="quickstart-user-details-container">
                        Login status: <span id="quickstart-sign-in-status"></span>
                        <div>Account: <span id="quickstart-account-details"></span> </div>
                    </div>
                </div>
            </div>
        </div>
    </main>


    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="/__/firebase/7.8.0/firebase-app.js"></script>
    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
    <script src="/__/firebase/7.8.0/firebase-analytics.js"></script>
    <!-- Add Firebase products that you want to use -->
    <script src="/__/firebase/7.8.0/firebase-auth.js"></script>
    <script src="/__/firebase/7.8.0/firebase-firestore.js"></script>
    <script src="/__/firebase/init.js"></script>
    <script src="/auth.js"></script>


<!-- Weather Widget-->
<div id="container">
    <div class="app-title">
        <p>Weather</p>
    </div>
    <div id="notification"> </div>
    <div class="weather-container">
        <div class="weather-icon"><img src="icons/02d.png"></div>
        <div class="temperature-value">
            <p>- °C</p>
        </div>
        <div class="temperature-description">
            <p> - </p>
        </div>
        <div class="location">
            <p>-</p>
        </div>
        <div class="switch">
               C / F
        </div>
    </div>
</div> (edited)

</body>

</html>