Home Explore Help
Sign In
ux
/
dowse
Watch 3
Star 1
Fork 0
Files Issues 0 Pull Requests 0 Commits 168 Releases 0 Wiki
Browse Source

updates to the ux-v4

Federico Bonelli 2 years ago
parent
9a16a83b92
commit
7c8237a1a7
12 changed files with 486 additions and 8956 deletions
Split View Show Diff Stats
  1. BIN
      media/Dowse-siteElements_03.sketch
  2. BIN
      ux-v4.sketch
  3. 0 8184
      www/css/_pgbackup/bootstrap.min_1489268371.css
  4. 25 30
      www/css/bootstrap.min.css
  5. 5 5
      www/css/dowse.css
  6. BIN
      www/images/logos/dowseLogo.png
  7. 16 0
      www/images/logos/dowselogo.svg
  8. BIN
      www/images/logos/logo_full.png
  9. BIN
      www/images/logos/logo_small.png
  10. 91 127
      www/index.html
  11. 348 609
      www/install.html
  12. 1 1
      www/pinegrow.json

BIN
media/Dowse-siteElements_03.sketch
View File


BIN
ux-v4.sketch
View File


File diff suppressed because it is too large
+ 0 - 8184
www/css/_pgbackup/bootstrap.min_1489268371.css


File diff suppressed because it is too large
+ 25 - 30
www/css/bootstrap.min.css


+ 5 - 5
www/css/dowse.css
View File 

@@ -1,5 +1,3 @@
1 
-
2 
-
3 1 
 /*
4 2 
  * Style tweaks
5 3 
  * --------------------------------------------------
 
@@ -13,7 +11,7 @@ body
13 11 
     font-size: 18px;
14 12 
     font-family: 'Source Sans Pro', 'Ubuntu', sans-serif;
15 13 
     overflow-x: hidden;
16 
-    color: #000000;
14 
+    color: #323232;
17 15 
     background-color: #e2ecfb;
18 16 
 }
19 17 
 
@@ -27,6 +25,9 @@ h1,h2,h3,h4,h5,h6,p
27 25 
 h1
28 26 
 {
29 27 
     font-size: 2em;
28 
+
29 
+
30 
+margin-left: 0px;
30 31 
 }
31 32
32 33 
 h2
 
@@ -148,5 +149,4 @@ null
148 149 
 .right
149 150 
 {
150 151 
     text-align: right;
151 
-}
152 
-
152 
+}

BIN
www/images/logos/dowseLogo.png
View File


File diff suppressed because it is too large
+ 16 - 0
www/images/logos/dowselogo.svg


BIN
www/images/logos/logo_full.png
View File


BIN
www/images/logos/logo_small.png
View File


+ 91 - 127
www/index.html
View File 

@@ -24,7 +24,7 @@
24 24 
     </head>
25 25 
     <body ('body').flowtype({ minimum : 380, maximum : 1200, minfont : 9, maxfont : 40, fontratio : 30 });>
26 26 
         <!-- Navigation -->
27 
-        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
27 
+        <nav class="navbar navbar-fixed-top" role="navigation">
28 28 
             <div class="container">
29 29 
                 <!-- Brand and toggle get grouped for better mobile display -->
30 30 
                 <div class="navbar-header">
 
@@ -81,43 +81,64 @@
81 81 
             </div>
82 82 
             <!-- /.container -->
83 83 
         </nav>
84 
-        <header id="myCarousel" class="carousel slide hidden-xs" data-interval="5s" data-wrap="true">
85 
-            <!-- Indicators -->
86 
-            <ol class="carousel-indicators">
87 
-                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
88 
-                <li data-target="#myCarousel" data-slide-to="1"></li>
89 
-                <li data-target="#myCarousel" data-slide-to="2"></li>
90 
-            </ol>
91 
-            <div class="carousel-inner">
92 
-                <div class="item active">
93 
-                    <div class="fill" style="background-image:url('images/carousel/carousel.001.jpeg');">
84 
+        <div class="container-fluid">
85 
+            <div class="well annunciazio">Dowse 1.0 beta is out!</div>
86 
+            <div class="jumbotron">
87 
+                <div class="col-xs-6 col-md-3">
94 88 
 </div>
95 
-                    <div class="carousel-caption">
96 
-                        <h2 class="CarouselBig CarouselSlogan">Because you need to be aware</h2>
89 
+                <h1>Awareness&nbsp;</h1>
90 
+                <p><div class="col-xs-6 col-md-3">
91 
+                        <a href="#">
92 
+                            <img src="images/logos/dowselogo.svg" alt="" style="margin-right: -1px;padding-right: 9px;width: 160px;height: 120px;">
93 
+                        </a>
94 
+                    </div>Dowse is a curtain to keep your lan private, a lock to close the door to spyware, and a mirror, to monitor your home network behaviour and enforce politeness, between users and machines alike.<span style="color: inherit;">&nbsp;</span></p>
95 
+                <p></p>
96 
+                <p><a class="btn btn-primary btn-lg" role="button" href="about.html">Learn more</a></p>
97 
+            </div>
98 
+            <div class="row">
99 
+                <div class="col-md-4">
100 
+                    <div class="panel panel-default">
101 
+                        <div class="panel-heading">
102 
+                            <h4><i class="fa fa-fw fa-key fa-2x"></i> IoT missing On-OFF button</h4>
103 
+                        </div>
104 
+                        <div class="panel-body">
105 
+                            The IoT (internet of things) hype loves to generate buzz about things that
106 
+                            will be allowed to connect to the internet and talk to other things. This buzz requires attention.
107 
+                            Things like home appliances have clear behaviour and a simple switch to put them off.
108 
+                            <br>
109 
+                            Dowse puts this switch back to any device in your LAN.
110 
+                        </div>
97 111 
                     </div>
98 112 
                 </div>
99 
-                <div class="item">
100 
-                    <div class="fill" style="background-image:url('images/carousel/carousel.002.jpeg');">
101 
-</div>
102 
-                    <div class="carousel-caption">
103 
-                        <h2 class="CarouselBig CarouselSlogan">And had enough of security jargon</h2>
113 
+                <div class="col-md-4">
114 
+                    <div class="panel panel-default">
115 
+                        <div class="panel-heading">
116 
+                            <h4><i class="fa fa-fw fa-check-circle-o fa-2x" aria-hidden="true"></i> Design for awareness</h4>
117 
+                        </div>
118 
+                        <div class="panel-body">
119 
+                            <p>Dowse keeps your private network
120 
+                            private and let you understand what is
121 
+                            trying to talk with what.</p>
122 
+                            <p>If necessary Dowse can mute things: it can switch them off with a button, simple and clear.</p>
123 
+                            <p>Dowse is a open source project as well. Experts can look at how is done and it is built to last and to be used by anyone.</p>
124 
+                            <!--<a href="#" class="btn btn-dowse">Learn More</a>-->
125 
+                        </div>
104 126 
                     </div>
105 127 
                 </div>
106 
-                <div class="item">
107 
-                    <div class="fill" style="background-image:url('images/carousel/carousel.003.jpeg');">
108 
-</div>
109 
-                    <div class="carousel-caption">
110 
-                        <h2 class="CarouselBig CarouselSlogan">Keep it simple, be aware, afford hospitality</h2>
128 
+                <div class="col-md-4">
129 
+                    <div class="panel panel-default">
130 
+                        <div class="panel-heading">
131 
+                            <h4><i class="fa fa-puzzle-piece fa-2x"></i> Experiment</h4>
132 
+                        </div>
133 
+                        <div class="panel-body">
134 
+                            <p>Dowse talks. In open standards: MQTT, Websockets, Open Sound Control... So many types of devices can
135 
+                            treasure the messages that Dowse publishes. A good start for hobbyists and makers to create
136 
+                            amazing network-aware effects and interfaces. We try to help a community of dowsers to
137 
+                            explore this possibility.</p>
138 
+                        </div>
111 139 
                     </div>
112 140 
                 </div>
113 141 
             </div>
114 
-            <!-- Wrapper for slides -->
115 
-            <!-- Controls -->
116 
-            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="icon-prev"></span></a>
117 
-            <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="icon-next"></span></a>
118 
-        </header>
119 
-        <div class="container-fluid">
120 
-            <div class="well annunciazio">Dowse 1.0 beta is out!</div>
121 142 
             <div class="row">
122 143 
                 <div class="col-sm-6 col-md-4 col-lg-4 col-xs-4">
123 144 
                     <div class="thumbnail">
 
@@ -158,12 +179,6 @@
158 179 
                 </div>
159 180 
                 <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6">
160 181 
                     <h3>Dowse visualisation with Gource</h3>
161 
-                    <video class="embed-responsive-item" autoplay="" loop="" width="545">
162 
-                        <source src="images/dowse-dns-graph.webm" type="video/webm">
163 
-                        <source src="images/dowse-dns-graph.ogg" type="video/ogg">
164 
-                        <source src="images/dowse-dns-graph.mp4" type="video/mp4">
165 
-                        Your browser does not support the video tag.
166 
-                    </video>
167 182 
                     <p><a href="http://gource.io/">Gource is a open source
168 183 
                     project</a> that allow visualisation in real time of activity on graphs. It's been developed for git and svn repositories.
169 184 
                     We have adapted Dowse to use it to visualise the flow of information in the network. Small "agents" show
 
@@ -184,68 +199,22 @@
184 199 
                 </div>
185 200 
             </div>
186 201 
             <div class="row">
187 
-                <div class="col-md-4">
188 
-                    <div class="panel panel-default">
189 
-                        <div class="panel-heading">
190 
-                            <h4><i class="fa fa-fw fa-key fa-2x"></i> IoT missing On-OFF button</h4>
191 
-                        </div>
192 
-                        <div class="panel-body">
193 
-                            The IoT (internet of things) hype loves to generate buzz about things that
194 
-                            will be allowed to connect to the internet and talk to other things. This buzz requires attention.
195 
-                            Things like home appliances have clear behaviour and a simple switch to put them off.
196 
-                            <br>
197 
-                            Dowse puts this switch back to any device in your LAN.
198 
-                        </div>
199 
-                    </div>
200 
-                </div>
201 
-                <div class="col-md-4">
202 
-                    <div class="panel panel-default">
203 
-                        <div class="panel-heading">
204 
-                            <h4><i class="fa fa-fw fa-check-circle-o fa-2x" aria-hidden="true"></i> Design for awareness</h4>
205 
-                        </div>
206 
-                        <div class="panel-body">
207 
-                            <p>Dowse keeps your private network
208 
-                            private and let you understand what is
209 
-                            trying to talk with what.</p>
210 
-                            <p>If necessary Dowse can mute things: it can switch them off with a button, simple and clear.</p>
211 
-                            <p>Dowse is a open source project as well. Experts can look at how is done and it is built to last and to be used by anyone.</p>
212 
-                            <!--<a href="#" class="btn btn-dowse">Learn More</a>-->
213 
-                        </div>
214 
-                    </div>
215 
-                </div>
216 
-                <div class="col-md-4">
217 
-                    <div class="panel panel-default">
218 
-                        <div class="panel-heading">
219 
-                            <h4><i class="fa fa-puzzle-piece fa-2x"></i> Experiment</h4>
220 
-                        </div>
221 
-                        <div class="panel-body">
222 
-                            <p>Dowse talks. In open standards: MQTT, Websockets, Open Sound Control... So many types of devices can
223 
-                            treasure the messages that Dowse publishes. A good start for hobbyists and makers to create
224 
-                            amazing network-aware effects and interfaces. We try to help a community of dowsers to
225 
-                            explore this possibility.</p>
226 
-                        </div>
227 
-                    </div>
228 
-                </div>
229 
-            </div>
230 
-            <div class="row">
231 202 
                 <div class="col-lg-12">
232 203 
                     <h1 class="page-header">What is Dowse...</h1>
233 
-                    <div class="container">
234 
-                        <div class="row">
235 
-                            <div class="col-md-4 col-sm-12 col-xs-12">
236 
-                                <h3>and how it is made</h3>
237 
-                                <p>To develop Dowse we must develop a community. In a community there are no users and developers, but adopters, thinkerers, hackers, designers and aunts, mothers, friends... There is place for everyone.</p>
238 
-                            </div>
239 
-                            <div class="col-md-8 col-lg-8 col-sm-4 col-xs-4 hidden-xs">
240 
-                                <iframe width="720" height="480" src="https://www.youtube.com/embed/wDLyYk_TQtI" frameborder="0" allowfullscreen></iframe>
241 
-                            </div>
204 
+                    <div class="row">
205 
+                        <div class="col-xs-12 col-sm-12 col-md-12">
206 
+                            <p>To develop Dowse we must develop a community. In a community there are no users and developers, but adopters, thinkerers, hackers, designers and aunts, mothers, friends... There is place for everyone.</p>
207 
+                            <iframe width="720" height="480" src="https://www.youtube.com/embed/wDLyYk_TQtI" frameborder="0" allowfullscreen=""></iframe>
208 
+                            <h3>and how it is made</h3>
242 209 
                         </div>
210 
+                        <div class="col-md-8 col-lg-8 col-sm-4 col-xs-4 hidden-xs">
211 
+</div>
243 212 
                     </div>
244 213 
                     <h1 class="page-header">How to Dowse...</h1>
245 214 
                 </div>
246 215 
                 <div class="col-sm-6 col-md-6">
247 216 
                     <div class="thumbnail">
248 
-                        <img src="images/2016_07_H&D/hd3.jpg" alt="">
217 
+                        <img src="images/2016_07_H&amp;D/hd3.jpg" alt="">
249 218 
                         <div class="caption">
250 219 
                             <h3><a href="install.html">Install and Configure</a></h3>
251 220 
                             <p>To install and configure Dowse from scratch. A tutorial to show you that is actually pretty easy.</p>
 
@@ -267,7 +236,7 @@ A short tutorial is here --&gt;</a></p>
267 236 
                 </div>
268 237 
             </div>
269 238 
             <div class="col-lg-12">
270 
-                <h2 class="page-header">Dowse related events</h2>
239 
+                <h1>Dowse related events</h1>
271 240 
             </div>
272 241 
             <div class="row">
273 242 
                 <div class="col-md-4 col-sm-6">
 
@@ -299,7 +268,7 @@ A short tutorial is here --&gt;</a></p>
299 268 
                 </div>
300 269 
                 <div class="col-md-4 col-sm-6">
301 270 
                     <a href="portfolio-item.html">
302 
-                        <img class="img-responsive img-portfolio img-hover" src="images/2016_07_H&D/hd8.1.jpg" alt="" style="background-image:url('images/2015_08_ev_ccc/lowres/ccc7.jpeg');">
271 
+                        <img class="img-responsive img-portfolio img-hover" src="images/2016_07_H&amp;D/hd8.1.jpg" alt="" style="background-image:url('images/2015_08_ev_ccc/lowres/ccc7.jpeg');">
303 272 
                     </a>
304 273 
                 </div>
305 274 
             </div>
 
@@ -309,7 +278,7 @@ A short tutorial is here --&gt;</a></p>
309 278 
             <!-- Features Section -->
310 279 
             <div class="row">
311 280 
                 <div class="col-lg-12">
312 
-                    <h2 class="page-header">What is Dowse?</h2>
281 
+                    <h1 class="page-header">What is Dowse?</h1>
313 282 
                 </div>
314 283 
                 <div class="col-md-6">
315 284 
                     <p><strong>DOWSE</strong> The Dowse box gives you back control. Dowse is free and open source software.
 
@@ -347,13 +316,13 @@ A short tutorial is here --&gt;</a></p>
347 316 
                     </ul>
348 317 
                 </div>
349 318 
                 <div class="col-md-6">
350 
-                    <img class="img-responsive" src="images/2016_07_H&D/hd2.jpg" alt="">
351 
-                    <iframe width="560" height="315" src="https://www.youtube.com/embed/vquh3IXcduc" frameborder="0" allowfullscreen></iframe>
319 
+                    <img class="img-responsive" src="images/2016_07_H&amp;D/hd2.jpg" alt="">
320 
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/vquh3IXcduc" frameborder="0" allowfullscreen=""></iframe>
352 321 
                 </div>
353 322 
             </div>
354 323 
             <div class="row">
355 324 
                 <div class="col-lg-12">
356 
-                    <h2 class="page-header">How to Dowse: Educational Workshops</h2>
325 
+                    <h1 class="page-header">How to Dowse: Educational Workshops</h1>
357 326 
                 </div>
358 327 
                 <div class="col-md-6">
359 328 
                     <p><strong>THE DOWSE WORKSHOP</strong> is a day dedicated to set up, explore and reflect on the notion of
 
@@ -374,35 +343,30 @@ A short tutorial is here --&gt;</a></p>
374 343 
                     </ul>
375 344 
                 </div>
376 345 
                 <div class="col-md-6">
377 
-                    <img class="img-responsive" src="images/2016_07_H&D/h10.jpg" alt="">
346 
+                    <img class="img-responsive" src="images/2016_07_H&amp;D/h10.jpg" alt="">
378 347 
                 </div>
379 348 
             </div>
380 349 
             <hr>
381 350 
             <div class="well">
351 
+</div>
352 
+            <div class="well-lg well">
353 
+                <div class="col-lg-12">
354 
+</div>
382 355 
                 <div class="row">
383 
-                    <div class="col-md-2">
384 
-                        <h3>Like Dowse?</h3>
385 
-                        <p>You can always donate to keep the cool flow.</p>
386 
-                    </div>
387 356 
                     <div class="col-md-6">
388 357 
                         <h3>Crowdfunding</h3>
389 358 
                         <b>First Crowdfunding is over<br>Some merchandising will
390 
-                        be there soon as well.<br></b>
391 
-                    </div>
392 
-                    <div class="col-md-4">
393 
-                        <a class="btn btn-lg btn-dowse btn-block bigButton" href="crowd.dowse.eu">Donate!</a>
359 
+                        be there soon as well.<br><a class="btn btn-lg btn-dowse btn-block bigButton" href="crowd.dowse.eu">Donate!</a></b>
394 360 
                     </div>
395 361 
                 </div>
396 
-            </div>
397 
-            <div class="well-lg well">
398 
-                <div class="col-lg-12">
399 
-</div>
400 362 
                 <div class="row">
401 
-                    <div class="col-xs-6 col-md-3 col-sm-4 col-lg-2">
363 
+                    <div class="col-md-3 col-lg-2 col-xs-3 col-sm-3" style="margin-right: 30px;">
402 364 
                         <h3>Project by</h3>
403 365 
                         <a href="www.dyne.org" class="thumbnail">
404 366 
                             <img src="images/logos/tinified/dyne.png" alt="dyne think and do tank">
405 367 
                         </a>
368 
+                    </div>
369 
+                    <div class="col-md-3 col-lg-2 col-xs-3 col-sm-3" style="margin-right: 30px;">
406 370 
                         <h3>Thanks to:</h3>
407 371 
                         <a href="http://waag.org" class="thumbnail">
408 372 
                             <img src="images/logos/tinified/waag_logo.png" alt="waag-logo" class="logosmall">
 
@@ -414,8 +378,8 @@ A short tutorial is here --&gt;</a></p>
414 378 
                             <img src="images/logos/tinified/design-shift.png" alt="design-shift" class="logosmall">
415 379 
                         </a>
416 380 
                     </div>
417 
-                    <h2 class="page-header">Made possible by fundings from:</h2>
418 
-                    <div class="col-xs-6 col-md-3 col-sm-6 col-lg-4">
381 
+                    <div class="col-md-3 col-lg-4 col-xs-3 col-sm-3">
382 
+                        <h3>Made possible by fundings from:</h3>
419 383 
                         <img src="images/logos/tinified/sidnfonds-logo.png" alt="SIDN fonds Logo" class="logosmall visible-xs-block visible-sm-block visible-md-block visible-lg-block" width="140%">
420 384 
                         <img src="images/logos/tinified/nlnet-logo.png" alt="" class="logosmall visible-xs-block visible-sm-block visible-md-block visible-lg-block" width="100%">
421 385 
                     </div>
 
@@ -423,7 +387,6 @@ A short tutorial is here --&gt;</a></p>
423 387 
             </div>
424 388 
             <!-- /.row -->
425 389 
             <!-- Call to Action Section -->
426 
-            <hr>
427 390 
             <!-- Footer -->
428 391 
             <footer>
429 392 
                 <div class="container">
 
@@ -435,22 +398,23 @@ A short tutorial is here --&gt;</a></p>
435 398 
                                 <br>
436 399 
                             </div>
437 400 
                         </div>
438 
-                    </small>
439 
-                    <div class="col-md-4">
440 
-                        <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
441 
-                            <img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png">
442 
-                        </a>
443 
-                        <br>
444 
-                        <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
445 
-                    </div>
446 
-                    <div class="col-md-4">
447 
-                        <a mailto:info@dowse.eu="">info@dowse.eu</a>
448 
-                        <div> dyne.org 2017
401 
+                        <div class="col-md-4">
402 
+                            <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
403 
+                                <img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png">
404 
+                            </a>
449 405 
                             <br>
450 
-                            made with &lt;3 in Europa
451 
-                        </div>                                                                                                                                                .
452 
-                    </div>
406 
+                            <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
407 
+                        </div>
408 
+                        <div class="col-md-4">
409 
+                            <a mailto:info@dowse.eu="">info@dowse.eu</a>
410 
+                            <div> dyne.org 2017
411 
+                                <br>
412 
+                                made with &lt;3 in Europa
413 
+                            </div>                                                                                                                                                                                                .
414 
+                        </div>
415 
+                    </div>
453 416 
                 </div>
417 
+            </footer>
454 418 
         </div>
455 419 
         <!-- Header Carousel -->
456 420 
         <!-- Page Content -->

File diff suppressed because it is too large
+ 348 - 609
www/install.html


File diff suppressed because it is too large
+ 1 - 1
www/pinegrow.json