midro.github.io/index.html at master · MiDro/midro.github.io · 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no，maximum-scale = 1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Midro</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/animate.css">
    <!-- Temporary navbar container fix -->
    <link href="https://fonts.googleapis.com/css?family=Spectral" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
     <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="./css/kuracss.css">


     <script type="text/javascript">


    $(document).ready(function(){

        function getMobileOperatingSystem() {
          var userAgent = navigator.userAgent || navigator.vendor || window.opera;

              // Windows Phone must come first because its UA also contains "Android"
            if (/windows phone/i.test(userAgent)) {
                return "Windows Phone";
            }

            if (/android/i.test(userAgent)) {
                return "Android";
            }

            // iOS detection from: http://stackoverflow.com/a/9039885/177710
            if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
                return "iOS";
            }

            return "unknown";
        }

        var is_safari = getMobileOperatingSystem() === "iOS";

        if(is_safari){
            $(".navbar-toggler").hide();
           $(".navbar").append($(".dropdown"));
           $(".navbar").append($("#tech"));
           $("#tech").addClass("toupright2");


           $(".dropdown").addClass("toupright");
        }

      var allTheWeeks = [];
      var allTheWeeksFixed = [];


      $(".dropdown-menu li").each(function() { allTheWeeks.push($(this).text()) });
      $.each(allTheWeeks, function(value){

            var temp = allTheWeeks[value];
            var getRidOfSpace = "";
            for (var i = 0; i <= temp.length - 1; i++) {
                if(temp[i] !== " "){
                  getRidOfSpace += temp[i];
                }
            };
            allTheWeeksFixed.push(getRidOfSpace);
            });


        $(".dropdown-menu li").click(function(){
            window.location.replace(("https://midro.github.io/posts/"+allTheWeeksFixed[$(this).index()]+".html").toLowerCase());

        });

     });

     </script>
</head>

<body>

    <!-- Navigation -->
   <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="container">
            <img class="navbar-brand" src="./pictures/midro_logo_tiny.png">
            <div class="collapse navbar-collapse" id="navbarExample">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active" id="tech">
                        <a class="nav-link" href="https://midro.github.io/technical/technical.html">Technical <span class="sr-only">(current)</span></a>
                    </li>
                     <li class="dropdown" >
                        <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Weeks
                        <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                             <li><a href="#">Week 1</a></li>
                             <li><a href="#">Week 2</a></li>
                             <li><a href="#">Week 3</a></li>
                             <li><a href="#">Week 4</a></li>
                             <li><a href="#">Week 5</a></li>
                             <li><a href="#">Week 6</a></li>
                             <li><a href="#">Week 7</a></li>
                             <li><a href="#">Week 8</a></li>
                        </ul>
                     </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Header with Background Image -->
           <img class="img-fluid bgimg"  src="./pictures/midro_group.png" id="logo">


    <!-- Page Content -->
    <div class="container">

        <div class="row">
            <div >
                <h1 class="mt-5 animated bounceInLeft" align="center"><div><span style="color:#46f0e8;">M</span><span style="color:#45ede9;">u</span><span style="color:#44eae9;">d</span><span style="color:#43e7ea;">d</span><span style="color:#41e4eb;">e</span><span style="color:#40e1eb;">r</span><span style="color:#3fdeec;">s</span><span style="color:#3edced;"> </span><span style="color:#3dd9ed;">I</span><span style="color:#3cd6ee;">n</span><span style="color:#3ad3ef;">n</span><span style="color:#39d0ef;">o</span><span style="color:#38cdf0;">v</span><span style="color:#37caf1;">a</span><span style="color:#36c7f2;">t</span><span style="color:#35c4f2;">i</span><span style="color:#33c1f3;">n</span><span style="color:#32bef4;">g</span><span style="color:#31bbf4;"> </span><span style="color:#30b9f5;">t</span><span style="color:#2fb6f6;">h</span><span style="color:#2eb3f6;">e</span><span style="color:#2cb0f7;"> </span><span style="color:#2badf8;">D</span><span style="color:#2aaaf8;">r</span><span style="color:#29a7f9;">o</span></div></h1>
                <hr>
                <p align="center">The project's overarching aim is to provide a valuable resource for other cities to draw and expand upon.</p>
                <p align="center" >This website was created to extensively document the endeavors of Priscilla Chu, Herrick Fang, Darien Joso, Sati Smyth, Elijah Whitsett, and Kayla Yamada during their time in the San Leandro Pilot City Incubator Program.</p>
            </div>
        </div>
        <!-- /.row -->
        <div id="seperator"></div>
        <div class="row">
               <div class="col-sm-6 my-4">
                    <img class="card-img-top img-fluid animated fadeInDown"  id="icon" src="./pictures/search.png" alt="">
                    <div class="card-block">
                        <h4 align="center">What is the Problem?</h4>
                        <p class="card-text" >&nbsp;&nbsp;&nbsp;&nbsp;San Leandro is building itself to be a pilot city that others can look to as a model for growth and development. Thus, the city is constantly searching for optimal solutions to the various obstacles it may face. Our specific project deals primarily with expanding and optimizing waste management in downtown San Leandro. Currently there are 20 trashcans in the downtown area--the city is planning to not only upgrade these trash cans, but also introduce at least 20 more. This sudden growth will create a labor DEFICIENCY, and necessitate the redistribution of funds from other vital departments.</p>
                    </div>
            </div>
            <div class="col-sm-6 my-4">
                    <img class="card-img-top img-fluid animated fadeInDown"  id="icon" src="./pictures/idea.png"  alt="">
                    <div class="card-block">
                        <h4 align="center">What is the Approach?</h4>
                        <p class="card-text">&nbsp;&nbsp;&nbsp;&nbsp;We will connect sensor modules to monitor the levels of trash in these new trashcans and display this information on a website that workers can easily access. This webpage will allow the workers to quickly service the necessary trashcans without excessive labor. The sensor modules will connect to the city's 6LoWPAN network for further optimization. This network allows us to transmit information with much lower power and cost requirements than traditional forms of communication (such as WiFi or cellular networks). The data from the sensor modules can then be displayed on the webpage.</p>

                    </div>
            </div>

        </div>
        <!-- /.row -->

    </div>
    <!-- /.container -->

    <!-- Footer -->
    <footer class="py-4 bg-inverse">
        <div class="container">
            <p class="m-0 text-center text-white"> &copy; Midro 2017</p>
        </div>
        <!-- /.container -->
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/tether/tether.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>


</body>

</html>