Created
June 12, 2015 18:34
-
-
Save solak/81ff2830cfc04d20426f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html class="no-js" lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Unter Drohnen</title> | |
| <link rel="stylesheet" href="css/foundation.css" /> | |
| <script src="js/vendor/modernizr.js"></script> | |
| <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'> | |
| <!-- SMOOTH SCROLL --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script> | |
| $(function() { | |
| $('a[href*=#]:not([href=#])').click(function() { | |
| if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { | |
| var target = $(this.hash); | |
| target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); | |
| if (target.length) { | |
| $('html,body').animate({ | |
| scrollTop: target.offset().top | |
| }, 1000); | |
| return false; | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <!-- End of SMOOTH SCROLL --> | |
| </head> | |
| <body> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="panel" > | |
| <!------- NAVIGATION --------> | |
| <div class="row"> | |
| <div class="large-4 columns"> | |
| <h1>Under Drones</h1> | |
| </div> | |
| <div class="large-6 columns"> | |
| <ul class="right button-group"> | |
| <li><a href="#scn01" class="button">Survey</a></li> | |
| <li><a href="#contact" class="button">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!------- ORBIT --------> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <ul class="example-orbit" data-orbit> | |
| <li><img src="img/orbit_01.jpg"></li> | |
| <li><img src="img/orbit_02.jpg"></li> | |
| <li><img src="img/orbit_03.jpg"></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <hr/> | |
| <!------- COPY --------> | |
| <div class="row"> | |
| <div class="large-4 columns"> | |
| <h4>Potential and risks of drones in urban areas</h4> | |
| <p>Drones are a hot topic. May it be armed drones for military purposes or the rise of civilian use which raise a lot of questions. Apart form technical restrictions and laws, quadcopters can be used in a wide spectrum of scenarios. | |
| </p> | |
| </div> | |
| <div class="large-4 columns"> | |
| <h4>What do you think about this subject? </h4> | |
| <p>We should start to ask ourselves today, how much we want to allow drones to invade our lives. | |
| This project visualizes different scenarios and wants you to reflect and become part of a debate about the potential and dangers of civilian drone use. With this evaluation we want to find out how people actually feel about this topic. | |
| </p> | |
| </div> | |
| <div class="large-4 columns" style="padding-top: 20px"> | |
| <img src="img/urbancomplexitylab.svg" style="width: 50%; height: 50%" > | |
| <a href="http://www.fh-potsdam.de/"><img src="img/logo-fhp.svg" style="width: 40%; height: 40%" align="right"></a> | |
| <a href="#scn01" class="radius button large" style="margin-top: 10rem">Survey</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div name="scn01"> | |
| <div class="panel" > | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <h3 align="center">Please rate all scenarios and feel free to leave comments. </h3><br> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------SZENARIO 01 --------> | |
| <form action="http://immense-journey-3315.herokuapp.com/responses" method="post"> | |
| <div class="panel" > | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="panel"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <img src="img/Park-02.jpg"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="callout panel"> | |
| <h4>Scenario 1 // Personal Lantern</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-6 medium-4 columns"> | |
| <table> | |
| <tr> | |
| <td>realistic</th> | |
| <td> | |
| <input type="radio" name="sz01a" id="sz01a1" value="1"> | |
| <input type="radio" name="sz01a" id="sz01a2" value="2"> | |
| <input type="radio" name="sz01a" id="sz01a3" value="3"> | |
| <input type="radio" name="sz01a" id="sz01a4" value="4"> | |
| <input type="radio" name="sz01a" id="sz01a5" value="5"> | |
| </th> | |
| <td>unrealistic</th> | |
| </tr> | |
| <tr> | |
| <td>useful</th> | |
| <td> | |
| <input type="radio" name="sz01b" id="sz01b1" value="1"> | |
| <input type="radio" name="sz01b" id="sz01b2" value="2"> | |
| <input type="radio" name="sz01b" id="sz01b3" value="3"> | |
| <input type="radio" name="sz01b" id="sz01b4" value="4"> | |
| <input type="radio" name="sz01b" id="sz01b5" value="5"> | |
| </th> | |
| <td>superfluous </th> | |
| </tr> | |
| <tr> | |
| <td>comforting</th> | |
| <td> | |
| <input type="radio" name="sz01c" id="sz01c1" value="1"> | |
| <input type="radio" name="sz01c" id="sz01c2" value="2"> | |
| <input type="radio" name="sz01c" id="sz01c3" value="3"> | |
| <input type="radio" name="sz01c" id="sz01c4" value="4"> | |
| <input type="radio" name="sz01c" id="sz01c5" value="5"> </th> | |
| <td>threatening</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="large-6 medium-4 columns"> | |
| <textarea>Comments</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------SZENARIO 02 --------> | |
| <div class="panel" > | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="panel"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <img src="img/park_grid.jpg"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="callout panel"> | |
| <h4>Szenario 2 // Schwarm von Laternen</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-6 medium-4 columns"> | |
| <table> | |
| <tr> | |
| <td>realistic</th> | |
| <td> | |
| <input type="radio" name="sz02a" id="sz02a1" value="1"> | |
| <input type="radio" name="sz02a" id="sz02a2" value="2"> | |
| <input type="radio" name="sz02a" id="sz02a3" value="3"> | |
| <input type="radio" name="sz02a" id="sz02a4" value="4"> | |
| <input type="radio" name="sz02a" id="sz02a5" value="5"> | |
| </th> | |
| <td>unrealistic</th> | |
| </tr> | |
| <tr> | |
| <td>useful</th> | |
| <td> | |
| <input type="radio" name="sz02b" id="sz02b1" value="1"> | |
| <input type="radio" name="sz02b" id="sz02b2" value="2"> | |
| <input type="radio" name="sz02b" id="sz02b3" value="3"> | |
| <input type="radio" name="sz02b" id="sz02b4" value="4"> | |
| <input type="radio" name="sz02b" id="sz02b5" value="5"> | |
| </th> | |
| <td>superfluous </th> | |
| </tr> | |
| <tr> | |
| <td>comforting</th> | |
| <td> | |
| <input type="radio" name="sz02c" id="sz02c1" value="1"> | |
| <input type="radio" name="sz02c" id="sz02c2" value="2"> | |
| <input type="radio" name="sz02c" id="sz02c3" value="3"> | |
| <input type="radio" name="sz02c" id="sz02c4" value="4"> | |
| <input type="radio" name="sz02c" id="sz02c5" value="5"> </th> | |
| <td>threatening</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="large-6 medium-4 columns"> | |
| <textarea>Comments</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------SZENARIO 03 --------> | |
| <div class="panel" > | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="panel"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <img src="img/autobahn.jpg"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="callout panel"> | |
| <h4>Szenario 3 // Mobiles Verkehrsschlid</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-6 medium-4 columns"> | |
| <table> | |
| <tr> | |
| <td>realistic</th> | |
| <td> | |
| <input type="radio" name="sz03a" id="sz03a1" value="1"> | |
| <input type="radio" name="sz03a" id="sz03a2" value="2"> | |
| <input type="radio" name="sz03a" id="sz03a3" value="3"> | |
| <input type="radio" name="sz03a" id="sz03a4" value="4"> | |
| <input type="radio" name="sz03a" id="sz03a5" value="5"> | |
| </th> | |
| <td>unrealistic</th> | |
| </tr> | |
| <tr> | |
| <td>useful</th> | |
| <td> | |
| <input type="radio" name="sz03b" id="sz03b1" value="1"> | |
| <input type="radio" name="sz03b" id="sz03b2" value="2"> | |
| <input type="radio" name="sz03b" id="sz03b3" value="3"> | |
| <input type="radio" name="sz03b" id="sz03b4" value="4"> | |
| <input type="radio" name="sz03b" id="sz03b5" value="5"> | |
| </th> | |
| <td>superfluous </th> | |
| </tr> | |
| <tr> | |
| <td>comforting</th> | |
| <td> | |
| <input type="radio" name="sz03c" id="sz03c1" value="1"> | |
| <input type="radio" name="sz03c" id="sz03c2" value="2"> | |
| <input type="radio" name="sz03c" id="sz03c3" value="3"> | |
| <input type="radio" name="sz03c" id="sz03c4" value="4"> | |
| <input type="radio" name="sz03c" id="sz03c5" value="5"> </th> | |
| <td>threatening</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="large-6 medium-4 columns"> | |
| <textarea>Comments</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------SZENARIO 04 --------> | |
| <div class="panel" > | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="panel"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <img src="img/addisplay.jpg"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="callout panel"> | |
| <h4>Szenario 4 // Mobiles Werbedisplay</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-6 medium-4 columns"> | |
| <table> | |
| <tr> | |
| <td>realistic</th> | |
| <td> | |
| <input type="radio" name="sz04a" id="sz04a1" value="1"> | |
| <input type="radio" name="sz04a" id="sz04a2" value="2"> | |
| <input type="radio" name="sz04a" id="sz04a3" value="3"> | |
| <input type="radio" name="sz04a" id="sz04a4" value="4"> | |
| <input type="radio" name="sz04a" id="sz04a5" value="5"> | |
| </th> | |
| <td>unrealistic</th> | |
| </tr> | |
| <tr> | |
| <td>useful</th> | |
| <td> | |
| <input type="radio" name="sz04b" id="sz04b1" value="1"> | |
| <input type="radio" name="sz04b" id="sz04b2" value="2"> | |
| <input type="radio" name="sz04b" id="sz04b3" value="3"> | |
| <input type="radio" name="sz04b" id="sz04b4" value="4"> | |
| <input type="radio" name="sz04b" id="sz04b5" value="5"> | |
| </th> | |
| <td>superfluous </th> | |
| </tr> | |
| <tr> | |
| <td>comforting</th> | |
| <td> | |
| <input type="radio" name="sz04c" id="sz04c1" value="1"> | |
| <input type="radio" name="sz04c" id="sz04c2" value="2"> | |
| <input type="radio" name="sz04c" id="sz04c3" value="3"> | |
| <input type="radio" name="sz04c" id="sz04c4" value="4"> | |
| <input type="radio" name="sz04c" id="sz04c5" value="5"> </th> | |
| <td>threatening</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="large-6 medium-4 columns"> | |
| <textarea>Comments</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------SZENARIO 05 --------> | |
| <div class="panel" > | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="panel"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <img src="img/mieten_beamer.jpg"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="callout panel"> | |
| <h4>Szenario 5 // Projektion an Hauswand</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-6 medium-4 columns"> | |
| <table> | |
| <tr> | |
| <td>realistic</th> | |
| <td> | |
| <input type="radio" name="sz05a" id="sz05a1" value="1"> | |
| <input type="radio" name="sz05a" id="sz05a2" value="2"> | |
| <input type="radio" name="sz05a" id="sz05a3" value="3"> | |
| <input type="radio" name="sz05a" id="sz05a4" value="4"> | |
| <input type="radio" name="sz05a" id="sz05a5" value="5"> | |
| </th> | |
| <td>unrealistic</th> | |
| </tr> | |
| <tr> | |
| <td>useful</th> | |
| <td> | |
| <input type="radio" name="sz05b" id="sz05b1" value="1"> | |
| <input type="radio" name="sz05b" id="sz05b2" value="2"> | |
| <input type="radio" name="sz05b" id="sz05b3" value="3"> | |
| <input type="radio" name="sz05b" id="sz05b4" value="4"> | |
| <input type="radio" name="sz05b" id="sz05b5" value="5"> | |
| </th> | |
| <td>superfluous </th> | |
| </tr> | |
| <tr> | |
| <td>comforting</th> | |
| <td> | |
| <input type="radio" name="sz05c" id="sz05c1" value="1"> | |
| <input type="radio" name="sz05c" id="sz05c2" value="2"> | |
| <input type="radio" name="sz05c" id="sz05c3" value="3"> | |
| <input type="radio" name="sz05c" id="sz05c4" value="4"> | |
| <input type="radio" name="sz05c" id="sz05c5" value="5"> </th> | |
| <td>threatening</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="large-6 medium-4 columns"> | |
| <textarea>Comments</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------SZENARIO 06 --------> | |
| <div class="panel" > | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="panel"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <img src="img/projektion_loft.jpg"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="callout panel"> | |
| <h4>Szenario 6 // Projektion von Werbung an Hauswand</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-6 medium-4 columns"> | |
| <table> | |
| <tr> | |
| <td>realistic</th> | |
| <td> | |
| <input type="radio" name="sz06a" id="sz06a1" value="1"> | |
| <input type="radio" name="sz06a" id="sz06a2" value="2"> | |
| <input type="radio" name="sz06a" id="sz06a3" value="3"> | |
| <input type="radio" name="sz06a" id="sz06a4" value="4"> | |
| <input type="radio" name="sz06a" id="sz06a5" value="5"> | |
| </th> | |
| <td>unrealistic</th> | |
| </tr> | |
| <tr> | |
| <td>useful</th> | |
| <td> | |
| <input type="radio" name="sz06b" id="sz06b1" value="1"> | |
| <input type="radio" name="sz06b" id="sz06b2" value="2"> | |
| <input type="radio" name="sz06b" id="sz06b3" value="3"> | |
| <input type="radio" name="sz06b" id="sz06b4" value="4"> | |
| <input type="radio" name="sz06b" id="sz06b5" value="5"> | |
| </th> | |
| <td>superfluous </th> | |
| </tr> | |
| <tr> | |
| <td>comforting</th> | |
| <td> | |
| <input type="radio" name="sz06c" id="sz06c1" value="1"> | |
| <input type="radio" name="sz06c" id="sz06c2" value="2"> | |
| <input type="radio" name="sz06c" id="sz06c3" value="3"> | |
| <input type="radio" name="sz06c" id="sz06c4" value="4"> | |
| <input type="radio" name="sz06c" id="sz06c5" value="5"> </th> | |
| <td>threatening</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="large-6 medium-4 columns"> | |
| <textarea>Comments</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------SZENARIO 07 --------> | |
| <div class="panel" > | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="panel"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <img src="img/security.jpg"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="callout panel"> | |
| <h4>Szenario 7 // Security Drohne</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-6 medium-4 columns"> | |
| <table> | |
| <tr> | |
| <td>realistic</th> | |
| <td> | |
| <input type="radio" name="sz07a" id="sz07a1" value="1"> | |
| <input type="radio" name="sz07a" id="sz07a2" value="2"> | |
| <input type="radio" name="sz07a" id="sz07a3" value="3"> | |
| <input type="radio" name="sz07a" id="sz07a4" value="4"> | |
| <input type="radio" name="sz07a" id="sz07a5" value="5"> | |
| </th> | |
| <td>unrealistic</th> | |
| </tr> | |
| <tr> | |
| <td>useful</th> | |
| <td> | |
| <input type="radio" name="sz07b" id="sz07b1" value="1"> | |
| <input type="radio" name="sz07b" id="sz07b2" value="2"> | |
| <input type="radio" name="sz07b" id="sz07b3" value="3"> | |
| <input type="radio" name="sz07b" id="sz07b4" value="4"> | |
| <input type="radio" name="sz07b" id="sz07b5" value="5"> | |
| </th> | |
| <td>superfluous </th> | |
| </tr> | |
| <tr> | |
| <td>comforting</th> | |
| <td> | |
| <input type="radio" name="sz07c" id="sz07c1" value="1"> | |
| <input type="radio" name="sz07c" id="sz07c2" value="2"> | |
| <input type="radio" name="sz07c" id="sz07c3" value="3"> | |
| <input type="radio" name="sz07c" id="sz07c4" value="4"> | |
| <input type="radio" name="sz07c" id="sz07c5" value="5"> </th> | |
| <td>threatening</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="large-6 medium-4 columns"> | |
| <textarea>Comments</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------SZENARIO 08 --------> | |
| <div class="panel" > | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="panel"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <img src="img/security_park.jpg"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="callout panel"> | |
| <h4>Szenario 8 // Polizei Drohne</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-6 medium-4 columns"> | |
| <table> | |
| <tr> | |
| <td>realistic</th> | |
| <td> | |
| <input type="radio" name="sz08a" id="sz08a1" value="1"> | |
| <input type="radio" name="sz08a" id="sz08a2" value="2"> | |
| <input type="radio" name="sz08a" id="sz08a3" value="3"> | |
| <input type="radio" name="sz08a" id="sz08a4" value="4"> | |
| <input type="radio" name="sz08a" id="sz08a5" value="5"> | |
| </th> | |
| <td>unrealistic</th> | |
| </tr> | |
| <tr> | |
| <td>useful</th> | |
| <td> | |
| <input type="radio" name="sz08b" id="sz08b1" value="1"> | |
| <input type="radio" name="sz08b" id="sz08b2" value="2"> | |
| <input type="radio" name="sz08b" id="sz08b3" value="3"> | |
| <input type="radio" name="sz08b" id="sz08b4" value="4"> | |
| <input type="radio" name="sz08b" id="sz08b5" value="5"> | |
| </th> | |
| <td>superfluous </th> | |
| </tr> | |
| <tr> | |
| <td>comforting</th> | |
| <td> | |
| <input type="radio" name="sz08c" id="sz08c1" value="1"> | |
| <input type="radio" name="sz08c" id="sz08c2" value="2"> | |
| <input type="radio" name="sz08c" id="sz08c3" value="3"> | |
| <input type="radio" name="sz08c" id="sz08c4" value="4"> | |
| <input type="radio" name="sz08c" id="sz08c5" value="5"> </th> | |
| <td>threatening</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="large-6 medium-4 columns"> | |
| <textarea>Comments</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------SZENARIO 09 --------> | |
| <div class="panel" > | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="panel"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <img src="img/haus_ueberwacht.jpg"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="callout panel"> | |
| <h4>Szenario 9 // Polizei Drohne</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-6 medium-4 columns"> | |
| <table> | |
| <tr> | |
| <td>realistic</th> | |
| <td> | |
| <input type="radio" name="sz09a" id="sz09a1" value="1"> | |
| <input type="radio" name="sz09a" id="sz09a2" value="2"> | |
| <input type="radio" name="sz09a" id="sz09a3" value="3"> | |
| <input type="radio" name="sz09a" id="sz09a4" value="4"> | |
| <input type="radio" name="sz09a" id="sz09a5" value="5"> | |
| </th> | |
| <td>unrealistic</th> | |
| </tr> | |
| <tr> | |
| <td>useful</th> | |
| <td> | |
| <input type="radio" name="sz09b" id="sz09b1" value="1"> | |
| <input type="radio" name="sz09b" id="sz09b2" value="2"> | |
| <input type="radio" name="sz09b" id="sz09b3" value="3"> | |
| <input type="radio" name="sz09b" id="sz09b4" value="4"> | |
| <input type="radio" name="sz09b" id="sz09b5" value="5"> | |
| </th> | |
| <td>superfluous </th> | |
| </tr> | |
| <tr> | |
| <td>comforting</th> | |
| <td> | |
| <input type="radio" name="sz09c" id="sz09c1" value="1"> | |
| <input type="radio" name="sz09c" id="sz09c2" value="2"> | |
| <input type="radio" name="sz09c" id="sz09c3" value="3"> | |
| <input type="radio" name="sz09c" id="sz09c4" value="4"> | |
| <input type="radio" name="sz09c" id="sz09c5" value="5"> </th> | |
| <td>threatening</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="large-6 medium-4 columns"> | |
| <textarea>Comments</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------SZENARIO 10 --------> | |
| <div class="panel" > | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="panel"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <img src="img/demo.jpg"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="callout panel"> | |
| <h4>Szenario 10 // Polizei Drohnen</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-6 medium-4 columns"> | |
| <table> | |
| <tr> | |
| <td>realistic</th> | |
| <td> | |
| <input type="radio" name="sz10a" id="sz10a1" value="1"> | |
| <input type="radio" name="sz10a" id="sz10a2" value="2"> | |
| <input type="radio" name="sz10a" id="sz10a3" value="3"> | |
| <input type="radio" name="sz10a" id="sz10a4" value="4"> | |
| <input type="radio" name="sz10a" id="sz10a5" value="5"> | |
| </th> | |
| <td>unrealistic</th> | |
| </tr> | |
| <tr> | |
| <td>useful</th> | |
| <td> | |
| <input type="radio" name="sz10b" id="sz10b1" value="1"> | |
| <input type="radio" name="sz10b" id="sz10b2" value="2"> | |
| <input type="radio" name="sz10b" id="sz10b3" value="3"> | |
| <input type="radio" name="sz10b" id="sz10b4" value="4"> | |
| <input type="radio" name="sz10b" id="sz10b5" value="5"> | |
| </th> | |
| <td>superfluous </th> | |
| </tr> | |
| <tr> | |
| <td>comforting</th> | |
| <td> | |
| <input type="radio" name="sz10c" id="sz10c1" value="1"> | |
| <input type="radio" name="sz10c" id="sz10c2" value="2"> | |
| <input type="radio" name="sz10c" id="sz10c3" value="3"> | |
| <input type="radio" name="sz10c" id="sz10c4" value="4"> | |
| <input type="radio" name="sz10c" id="sz10c5" value="5"> </th> | |
| <td>threatening</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="large-6 medium-4 columns"> | |
| <textarea>Comments</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <hr/> | |
| <div class="row"> | |
| <div class="large-2 columns"> | |
| <table> | |
| <tr> | |
| <td>Male</th> | |
| <td> | |
| <input type="radio" name="gender" id="male" value="1"> | |
| </th> | |
| </tr> | |
| <td>Female</th> | |
| <td> | |
| <input type="radio" name="gender" id="female" value="1"> | |
| </table> | |
| </div> | |
| <div class="large-4 columns"> | |
| <p><a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="radius button left secondary tiny">Alter</a></a></p> | |
| <ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1"> | |
| <li><a href="#">15 – 17 Years</a></li> | |
| <li><a href="#">18 – 24 Years</a></li> | |
| <li><a href="#">25 – 29 Years</a></li> | |
| <li><a href="#">30 – 39 Years</a></li> | |
| <li><a href="#">40 – 49 Years</a></li> | |
| <li><a href="#">50 – 59 Years</a></li> | |
| <li><a href="#">60+</a></li> | |
| </ul> | |
| </div> | |
| <div class="large-4 columns"> | |
| <a href="thanks.html" class="button large radius right" >SEND</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!------- CONTACT --------> | |
| <div class="row"> | |
| <div class="large-12 columns"><div class="panel" > | |
| <div name="contact"> | |
| <h5 class="title"><a href="#panel1">Please contact us!</a></h5> | |
| <div class="content" data-slug="panel1"> | |
| <div class="row collapse"> | |
| <div class="large-2 columns"> | |
| <label class="inline">Your Name</label> | |
| </div> | |
| <div class="large-6 columns"> | |
| <input type="text" id="yourName" placeholder="Jane Smith"> | |
| </div> | |
| </div> | |
| <div class="row collapse"> | |
| <div class="large-2 columns"> | |
| <label class="inline">Mail Address</label> | |
| </div> | |
| <div class="large-6 columns"> | |
| <input type="text" id="yourEmail" placeholder="[email protected]"> | |
| </div> | |
| </div> | |
| <textarea rows="4"></textarea> | |
| <button type="submit" class="radius button">Submit</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| <!------- FOOTER --------> | |
| <footer class="row"> | |
| <div class="large-12 columns"> | |
| <div class="large-6 columns"> | |
| <p> A Projekt by <a href="http://uclab.fh-potsdam.de/">Urban Complexity Labs</a> at <a href="http://www.fh-potsdam.de">FH Potsdam</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="js/vendor/jquery.js"></script> | |
| <script src="js/foundation.min.js"></script> | |
| <script> | |
| $(document).foundation(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment