mapabq.org/index.html at main · mapabq/mapabq.org · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>MapABQ</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-75138441-2"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-75138441-2');
    </script>
    <style>
        body, html {
            margin:0;
            padding:0;
            font-family: 'Roboto', sans-serif;
            line-height: 24px;
        }

        body {
            background-color: #fbfbfb;
        }

        .nav {
            height: 48px;
            background-color: #25c2e9;
            padding: 0 16px;
            display: flex;
            align-items: center;
            box-shadow: #999 0px 1px 2px;
        }

        .container {
            margin: 0 16px;
            display: flex;
        }

        .info {
            margin: 16px;
            padding: 16px;
            font-size: 16px;
            flex:1;
            box-shadow: #aaa 1px 1px 3px 0px;
            background-color:white;
        }

        .meetings {
            margin: 16px;
            padding: 16px;
            box-shadow: #aaa 1px 1px 3px 0px;
            flex:1;
            background-color:white;
        }

        .social-icon > a {
            vertical-align:top;
        }

        #map {
            height:300px;
            width:100%;
        }

        .progress > img {
            width: 100%;
        }

        @media (max-width: 767.98px) {

            .nav {
                padding: 0;
            }
            .container {
                flex-direction: column;
                margin: 0;
            }

            .info {
                margin: 0;
            }
            .meetings {
                margin: 0;
            }
        }
    </style>
</head>
<body>
    <nav class="nav"><img src="logo.png" alt="mapabq logo"></img><h1>MapABQ</h1></nav>
    <div class="container">
        <div class="info">
            <div class="about">
                <h2>About</h2>
                <b>MapABQ</b> is a monthly meeting of OpenStreetMap users to collaborate and contribute to <a href="https://www.openstreetmap.org">OpenStreetMap</a>.
                <b>MapABQ</b> aims to fill a gap in the availability of open map data in Albuquerque and around the world. <b>MapABQ</b> is for anyone interested in mapping,
                open data and open-source technology.
                <br>
                <p><b>MapABQ</b> also paricipates in larger mapathon events and <a href="https://hotosm.org">Humanitarian OpenStreetMap (HOT)</a> events to focus on specific contribution goals.</p>
            </div>
            <hr>
            <div class="social">
                <h2>Follow us</h2>
                <div class="social-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg> <a href="https://twitter.com/mapabq"> @MapABQ </a><br>
                </div>
                <div class="social-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> <a href="https://github.com/mapabq">MapABQ on Github</a> <br>
                </div>
            </div>
        </div>
        <div class="meetings">
            <div class="meeting-info"></div>
            <h2>Meetings</h2>
            <p>Anyone is welcome to join and we're happy to help get you started mapping. The meetings are in an open format to allow contributors to focus on adding to OpenStreetMap for Albuquerque and
                surrounding areas.</p></p>Please bring a laptop and sign up for a free openstreetmap account <a href="https://www.openstreetmap.org/user/new">here</a> before the meeting.</p>
            <hr>
            <p><b>Where: </b>We've gone virtual to be COVID safe, join us on <a href="https://slack.openstreetmap.us/">OSM-US Slack</a> in the #local-newmexico channel for more info</p>
            <p><b>When: </b>Third Wednesday of the Month</p>
            <p><b>Next meeting: </b><span id="next-date"></span> - 5:30PM-6:30PM</p>
            <div id="map"></div>
        </div>
    </div>
    </div>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
    <script src="main.js" defer></script>
</body>
</html>