FirstBootcampProject/index.html at master · GormTheWyrm/FirstBootcampProject · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Time</title>

    <!-- alternative to bootstrap = pure css; https://purecss.io/ -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css"
        integrity="sha384-oAOxQR6DkCoMliIh8yFnu25d7Eq/PHS21PClpwjOTeU2jRSq11vu66rf90/cZr47" crossorigin="anonymous">

    <!-- figure out responsive part here -->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-old-ie-min.css">
<![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-min.css">
    <!--<![endif]-->

    <!--API for the Globe-->
    <script src="https://www.webglearth.com/v2/api.js"></script>

    <!-- our css -->
    <link rel="stylesheet" href="assets/style.css">

</head>


<body>

    <!-- background for the main page -->
    <div class="testbox background">


        <div class="pure-g">
            <!-- invisible row holds the search bar -->


            <form class="pure-form">
                <input id="locationInput" type="text" class="pure-input-rounded" placeholder="Search for City"
                    style="color: white">
                <button id="input-button" type="button" class="pure-button">Search</button>

            </form>
        </div>
        <!-- container for the globe -->
        <div id="globe-div" class="pure-u-sm-1 pure-u-md-16-24 pure-u-21-24 testbox">
            <div id="earth_div"></div>

        </div>

        <!-- holds right side  -->

        <div id="right-div" class="pure-u-sm-1 pure-u-md-7-24 testbox pure-u-21-24">
            <div id="location-div u-1-1" class="testbox location-div">

                <h1>Current Time:</h1>
                <h1>Current Date:</h1>
                    <h2>Country:</h2>
                    <h2>Time Zone:</h2>
                    <p>GPS coordinates:</p>
            </div>


        </div>

        <!-- bottom section -->

        <div id="bottom-div" class="testbox pure-u-lg-1 pure-u-sm-1">

            <div id="city1" class="pure-u-1-6 pinned-div">.. </div>
            <div id="city2" class="pure-u-1-6 pinned-div">.. </div>
            <div id="city3" class="pure-u-1-6 pinned-div">.. </div>
            <div id="city4" class="pure-u-1-6 pinned-div">.. </div>
            <div id="city5" class="pure-u-1-6 pinned-div">.. </div>
        </div>


        <!-- <div class="pure-g"> -->
        <div class="pure-u-md-1-1 pure-u-21-24 footer">
            <!-- <div class="footer" -->
            <p>Sources:
                <br> Background Photo from Google
                <br> WebGL Earth JavaScript API
                <br> TimeZone DB API
                <br> Opencage Geocoding API
            </p>
            <!-- </div> -->
        </div>
    </div>


    <!-- </div> -->
    <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js></script>
    <script src="assets/script.js"></script>
</body>

</html>