about page

spadgos · Mar 25, 2012 · 78d5de8 · 78d5de8
1 parent 864a44f
commit 78d5de8
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 0 deletions.
diff --git a/app/app.js b/app/app.js
@@ -166,6 +166,13 @@ $(function(){
     $(this).hide();
   }).hide();
 
+  $('#aboutLink').click(function () {
+    $('#about').removeClass('hidden');
+  });
+  $('#about .shade').click(function () {
+    $('#about').addClass('hidden');
+  });
+
   ////////////////////////////////////////////
 
   function addFeature(type) {

diff --git a/app/index.html b/app/index.html
@@ -46,12 +46,53 @@
     h1 {
       margin-bottom: 10px;
     }
+    #about, #about .shade, #about .content {
+      -webkit-transition: opacity 300ms ease-in-out;
+         -moz-transition: opacity 300ms ease-in-out;
+           -o-transition: opacity 300ms ease-in-out;
+          -ms-transition: opacity 300ms ease-in-out;
+              transition: opacity 300ms ease-in-out;
+    }
+    #about {
+      position: fixed;
+      top: 0; right: 0; left: 0; bottom: 0;
+    }
+    #about.hidden {
+      position: absolute;
+      top: -10000px; left: -10000px; width: 50px; height: 50px;
+    }
+    #about.hidden .shade {
+      opacity: 0;
+    }
+    #about .shade {
+      width: 100%;
+      height: 100%;
+      background-color: #000;
+      opacity: .2;
+    }
+    #about.hidden .content {
+      opacity: 0;
+    }
+    #about .content {
+      opacity: 1;
+      padding: 10px;
+      box-shadow: 0 0 20px rgba(0,0,0,.4);
+      background-color: white;
+      position: absolute;
+      top: 30%;
+      left: 50%;
+      width: 400px;
+      margin-left: -200px;
+    }
   </style>
 </head>
 <body>
   <div id="map_canvas"></div>
   <div id="panel">
     <h1>CitySonar</h1>
+    <div id="byline">
+      <a href="#about" id="aboutLink">About</a>
+    </div>
     <fieldset>
       <label>
         <span>Feature</span>
@@ -103,6 +144,23 @@ <h1>CitySonar</h1>
       </label>
     </fieldset>
   </div>
+  <div id="about" class="hidden">
+    <div class="shade"></div>
+    <div class="content">
+      <h2>About</h2>
+      <p>
+        CitySonar is an experiment in using geographical information to create sound.
+      </p>
+      <p>
+        Choose a feature (such as 'cafe'), and they will appear on the map. Press play, and the locations of the cafes will be used to create notes which will start to play. The closer to the centre, the higher the note will be, and the order is determined by a clockwise sweep from the centre of your viewport. Additional features can be added to the same map to create more sounds.
+      </p>
+      <p>
+        CitySonar is a <a href="http://musichackday.org">Music Hack Day</a> project by
+        <a href="http://spadgos.github.com">Nick Fisher</a> and <a href="http://twitter.com/#!/a_kovalev">Alexander Kovalev</a>
+        from <a href="http://soundcloud.com">SoundCloud</a>.
+      </p>
+    </div>
+  </div>
   <script src="app.js"></script>
 </body>
 </html>