tour

css/pandora.css

@@ -10,7 +10,7 @@ body {
     */
     //background-color: rgb(64, 64, 64);
     //background-size: 16px 16px;
-    background-color: black;
+    background-color: rgb(32, 32, 16);
     font-family: Droid Sans, Calibri, sans-serif;
     font-size: 12px;
     color: black;
@@ -44,7 +44,8 @@ p:last-child {
     position: absolute;
     left: 80px;
     top: 288px;
-    border-radius: 8px;
+    height: 400px;
+    //border-radius: 8px;
     text-align: center;
     //box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
 }
@@ -57,6 +58,7 @@ p:last-child {
     border-bottom: 1px solid rgb(96, 48, 32);
     background-color: rgb(128, 64, 32);
     background-image: -webkit-linear-gradient(0, transparent 50%, rgba(64, 32, 16, 0.1) 50%);    
+    background-image: -moz-linear-gradient(0, transparent 50%, rgba(64, 32, 16, 0.1) 50%);    
     background-size: 8px 32px;
     font-size: 16px;
     font-weight: bold;
@@ -114,6 +116,7 @@ p:last-child {
     border-bottom: 1px solid rgb(96, 48, 32);
     background-color: rgb(192, 96, 48);
     background-image: -webkit-linear-gradient(0, transparent 50%, rgba(64, 32, 16, 0.1) 50%);    
+    background-image: -moz-linear-gradient(0, transparent 50%, rgba(64, 32, 16, 0.1) 50%);    
     background-size: 12px 48px;
     font-size: 24px;
     font-weight: bold;
@@ -129,7 +132,7 @@ p:last-child {
     padding: 32px;
     border-bottom-left-radius: 16px;
     border-bottom-right-radius: 16px;
-    background: rgb(224, 224, 224);
+    background: rgb(240, 240, 224);
     font-size: 14px;
     line-height: 20px;
     -moz-user-select: text;
@@ -179,6 +182,16 @@ div.text {
     margin: 8px 0 32px 0;
 }
 
+div.tour {
+    width: 576px;
+    height: 360px;
+    border-radius: 8px;
+    box-shadow: 0 0 2px rgba(64, 64, 32, 0.5);
+    overflow: hidden;
+}
+img.tour {
+}
+
 .large {
     font-size: 18px;
 }

js/pandora.js

@@ -2,19 +2,7 @@ Ox.getJSON('json/pandora.json', function(pandora) {
     $(function() {
 
         var $body = $('body'),
-            $icon = $('#icon')
+            $icon = $('#icon'),
-                .bind({
-                    click: function() {
-                        $('#menu > div').removeClass('selected');
-                        $page.empty()
-                            .append($('<div>').html('pan.do/ra'))
-                            .append(
-                                $('<img>').attr({
-                                    src: 'http://0x2620.org/jpg/jpg/0xDB/Screenshots/IMG_0009.jpg'
-                                })
-                            )
-                    }
-                }),
             $menu = $('<div>').attr({id: 'menu'}).appendTo($body),
             $page = $('<div>').attr({id: 'page'}).appendTo($body),
             $head = $('<div>').appendTo($page);
@@ -37,7 +25,6 @@ Ox.getJSON('json/pandora.json', function(pandora) {
                     .appendTo($body);
             } else {
                 $element = $('<div>')
-                    .addClass(page)
                     .html(page)
                     .appendTo($menu);
             }
@@ -61,7 +48,9 @@ Ox.getJSON('json/pandora.json', function(pandora) {
                 if (page == 'news') {
                     text = pandora.pages.news.map(function(item) {
                         return '<div class="title">' + item[0] + '</div>'
-                            + '<div class="date">' + Ox.formatDate(item[1], '%A, %B %e, %Y') + '</div>'
+                            + '<div class="date">'
+                            + Ox.formatDate(item[1], '%A, %B %e, %Y')
+                            + '</div>'
                             + '<div class="text">' + item[2] + '</div>';
                     }).join('');
                 } else if (page == 'faq') {
@@ -72,7 +61,113 @@ Ox.getJSON('json/pandora.json', function(pandora) {
                 } else if (page == 'tour') {
                     text = $('<div>')
                         .append(
-                            $('<img>').attr({src: pandora.pages.tour[tourIndex][0]})
+                            $('<div>')
+                                .addClass('tour')
+                                .append(
+                                    $('<img>')
+                                        .addClass('tour')
+                                        .attr({
+                                            src: pandora.pages.tour[tourIndex][0]
+                                        })
+                                )
+                                .bind({
+                                    click: function(e) {
+                                        var $this = $(this), timeout;
+                                        if (!$this.hasClass('zoom')) {
+                                            $($this.children()[0]).stop().animate({
+                                                width: '1280px',
+                                                height: '800px',
+                                                marginLeft: Math.round(
+                                                    (384 - window.scrollX - e.clientX) * 11/9
+                                                ) + 'px',
+                                                marginTop: Math.round(
+                                                    (113 - window.scrollY - e.clientY) * 11/9
+                                                ) + 'px'
+                                            }, 250, function() {
+                                                var event;
+                                                $this.addClass('zoom').bind({
+                                                    mouseenter: function(e) {
+                                                        timeout && clearTimeout(timeout);
+                                                        $this.bind({
+                                                            mousemove: function(e) {
+                                                                event = e;
+                                                            }
+                                                        })
+                                                        $($this.children()[0]).animate({
+                                                            width: '1280px',
+                                                            height: '800px',
+                                                            marginLeft: Math.round(
+                                                                (384 - window.scrollX - e.clientX) * 11/9
+                                                            ) + 'px',
+                                                            marginTop: Math.round(
+                                                                (113 - window.scrollY - e.clientY) * 11/9
+                                                            ) + 'px'
+                                                        }, 250, function() {
+                                                            $($this.children()[0]).animate({
+                                                                marginLeft: Math.round(
+                                                                    (384 - window.scrollX - (event || e).clientX) * 11/9
+                                                                ) + 'px',
+                                                                marginTop: Math.round(
+                                                                    (113 - window.scrollY - (event || e).clientY) * 11/9
+                                                                ) + 'px'
+                                                            }, 250, function() {
+                                                                $this.unbind('mousemove').bind({
+                                                                    mousemove: function(e) {
+                                                                        $($this.children()[0]).stop().css({
+                                                                            width: '1280px',
+                                                                            height: '800px',
+                                                                            marginLeft: Math.round(
+                                                                                (384 - window.scrollX - e.clientX) * 11/9
+                                                                            ) + 'px',
+                                                                            marginTop: Math.round(
+                                                                                (113 - window.scrollY - e.clientY) * 11/9
+                                                                            ) + 'px'
+                                                                        });
+                                                                    }
+                                                                });
+                                                            });
+                                                        });
+                                                    },
+                                                    mousemove: function(e) {
+                                                        $($this.children()[0]).stop().css({
+                                                            width: '1280px',
+                                                            height: '800px',
+                                                            marginLeft: Math.round(
+                                                                (384 - window.scrollX - e.clientX) * 11/9
+                                                            ) + 'px',
+                                                            marginTop: Math.round(
+                                                                (113 - window.scrollY - e.clientY) * 11/9
+                                                            ) + 'px'
+                                                        });
+                                                    },
+                                                    mouseleave: function() {
+                                                        timeout = setTimeout(function() {
+                                                            $($this.children()[0]).stop().animate({
+                                                                width: '576px',
+                                                                height: '360px',
+                                                                marginLeft: 0,
+                                                                marginTop: 0
+                                                            }, 250, function() {
+                                                                $this.unbind('mousemove');
+                                                            });
+                                                            timeout = 0;
+                                                        }, 500);
+                                                    }
+                                                });
+                                            });
+                                        } else {
+                                            $this.unbind('mouseenter').unbind('mousemove').unbind('mouseleave');
+                                            $($this.children()[0]).stop().animate({
+                                                width: '576px',
+                                                height: '360px',
+                                                marginLeft: 0,
+                                                marginTop: 0
+                                            }, 250, function() {
+                                                $this.removeClass('zoom');
+                                            });
+                                        }
+                                    }
+                                })
                         )
                         .append($('<br>'))
                         .append($('<br>'))
@@ -93,7 +188,7 @@ Ox.getJSON('json/pandora.json', function(pandora) {
                         })
                     : page
                 );
-                $text.addClass(page).empty().append(text);
+                $text.empty().append(text);
                 if (page == 'tour') {
                     $prevButton
                         .click(function() {
@@ -136,6 +231,13 @@ Ox.getJSON('json/pandora.json', function(pandora) {
                 });
             $img.css({opacity: 0.25});
             $p.css({opacity: 0.25});
+        }
+
+        function zoomIn($element, event) {
+            
+        }
+
+        function zoomOut($element, e) {
             
         }
 

json/pandora.json

@@ -1,7 +1,7 @@
 {
     "pages": {
-        "": "<p class=\"serif large\"><b>pan.do/ra</b> |panˈdôrə| <span class=\"sans\">Greek Mythology</span></p><p class=\"serif\">The first mortal woman. She was created by Zeus and sent to earth with a box of evils in revenge for Prometheus' having brought the gift of fire back to the world. Pandora let out all the evils from the box to infect the earth; hope alone remained to assuage the lot of humankind.<br><br></p><img src=\"png/home.png\">",
+        "": "<p class=\"serif large\"><b>pan.do/ra</b> |panˈdôrə| <span class=\"sans\">Greek Mythology</span></p><p class=\"serif\">Pandora (Πανδώρα, \"all-gifted\" or \"all-giving\", from πᾶς \"all\" and δῶρον \"gift\") was the first mortal woman. She was created by Zeus and sent to earth with a box of evils in revenge for Prometheus' theft of fire. Out of curiosity, Pandora opened the box and released all the evils &mdash; leaving only hope inside.</p><p><img src=\"jpg/home.jpg\"></p>",
-        "about": "<p><b>pan.do/ra</b> is a free, open source media archive. It allows you to manage large, decentralized collections of video, to collaboratively create metadata and time-based annotations, and to serve your archive as a cutting-edge web application.</p><p><img src=\"png/about.png\"></p>",
+        "about": "<p><b>pan.do/ra</b> is a free, open source media archive. It allows you to manage large, decentralized collections of video, to collaboratively create metadata and time-based annotations, and to serve your archive as a cutting-edge web application.</p><p><img src=\"jpg/about.jpg\"></p>",
         "news": [
             [
                 "pan.do/ra has a website",
@@ -21,8 +21,16 @@
         ],
         "faq": [
             [
-                "Q: What's with the FAQ?",
+                "Q: What can I do with <b>pan.do/ra</b>, and how?",
-                "A: Coming soon..."
+                "A: With <b>pan.do/ra</b> you can browse, annotate, search and watch videos - be it your own archive, or someone else's. <b>pan.do/ra</b> is a web site that runs in your browser, so you can either put your collection online, or just use it in your local network. All you have to do is download <b>pan.do/ra</b> and install it on a Linux machine, or just get it pre-installed on a Virtual Machine that will run on most other computers too, quite likely including your laptop. And if you don't have your own video collection, you can use it to explore <a href=\"https://0xDB.org\">someone</a> <a href=\"https://pad.ma\">else's</a>."
+            ],
+            [
+                "Q: What does <b>pan.do/ra</b> cost?",
+                "A: Maybe some time, but zero money (and only if your time is worth a lot, you can <a href=\"#support\">invert</a> that relation). <b>pan.do/ra</b> is free, open source software, licensed under the <a href=\"http://en.wikipedia.org/wiki/GNU_General_Public_License\">GNU General Public License</a>, so you can download it for free, run, explore and modify it in any way you wish, make as many copies as you like and give them to whoever you want."
+            ],
+            [
+                "Q: Is <b>pan.do/ra</b> ready for production?",
+                "A: It depends. It's already being used in production, but as of now, there is no \"official\" or \"stable\" first release. There will be one, later this year. The <a href=\"#download\">latest version</a> should work fine, so you can already try it out, but if you really need to use it immediately for something important, you should <a href=\"#contact\">get in touch</a> with us before, just to make sure that whatever you put into it now doesn't just go up in flames once there is a first proper release."
             ]
         ],
         "tour": [
@@ -130,7 +138,7 @@
         "demo": "<p>While we're still working on a sandbox to demonstrate <b>pan.do/ra</b>'s admin features, you can already try out the sites below to see how <b>pan.do/ra</b> works as a regular user:</p><p><a href=\"https:0xDB.org\"><img class=\"logo\" src=\"png/0xdb256.png\"></a><a href=\"https:0xDB.org\">0xDB</a> is an experimental online movie database. At its core, it provides full text search for more than a hundred years of cinema.</p><br clear=\"all\"><br><p><a href=\"https:Pad.ma\"><img class=\"logo\" src=\"png/padma256.png\"></a><a href=\"https:Pad.ma\">Pad.ma</a>, short for Public Access Digital Media Archive, is an online repository of densely annotated video materials, primarily documentary footage.<br></p>",
         "download": "<b>pan.do/ra</b> will be officially released later in 2012. Until then, you can download and install the latest version <a href=\"https://wiki.0x2620.org/browser/pandora\">here</a>.</p><p><b>pan.do/ra</b> can be installed on most Linux distributions, preferably Ubuntu. It works fine on many other systems, for example on a MacBook, using a virtual machine.</p>",
         "documentation": "<p>As <b>pan.do/ra</b> has not yet been released, documentation is still a work in progress.</p><p>A lot of information can be found on our <a href=\"https://wiki.0x2620.org\">Wiki</a>. If you need instructions for setting up <b>pan.do/ra</b>, check out the <a href=\"https://wiki.0x2620.org/browser/pandora/README\">readme</a> file that comes with it.</p><p><b>pan.do/ra</b>'s public API includes its own documentation. You can browse it at any live instance of <b>pan.do/ra</b>, for example at <a href=\"http://0xdb.org/api\">0xDB.org/api</a>.</p><p>Detailed documentation of <b>OxJS</b>, the JavaScript library used to build <b>pan.do/ra</b>'s frontend, can be found at <a href=\"https://OxJS.org\">OxJS.org</a>.</p>",
-        "development": "<p>In a nutshell, <b>pan.do/ra</b> is a python backend, based on <b>Django</b>, a JavaScript frontend, using <b>OxJS</b>, and a variety of tools around it.</p><p>To browse or check out the source, take a look at our <a href=\"https://wiki.0x2620.org/browser/pandora\">repository</a>. If you want to report bugs or request features, please use our <a href=\"https://wiki.0x2620.org/report\">tracker</a>. For everything else, there's <a href=\"irc://irc.freenode.net#pan.do/ra\">IRC</a>, and our <a href=\"https://mailb.org/cgi-bin/mailman/listinfo/dev\">development mailing list</a>.</p><p><a href=\"https://OxJS.org\"><img src=\"png/oxjs256.png\" class=\"logo\"></a><b>pan.do/ra</b>'s interface was made with <b>OxJS</b>, a new JavaScript library for web applications. To learn more about <b>OxJS</b>, check out <a href=\"https://OxJS.org\">OxJS.org</a>.</p><br><br><p><a href=\"https://firefogg.org\"><img src=\"png/firefogg256.png\" class=\"logo\" style=\"width: 128px\"></a><b>pan.do/ra</b> comes with <b>Firefogg</b>, a browser extension for client-side video encoding and upload. Please visit <a href=\"https://firefogg.org\">firefogg.org</a> for more information.</p><br>",
+        "development": "<p>In a nutshell, <b>pan.do/ra</b> is a python backend, based on <b>Django</b>, a JavaScript frontend, using <b>OxJS</b>, a variety of tools around it, and a JSON API in between. This API is 100% public, and apart from static files, like images or videos, nothing but JSON ever crosses the wire. Anything more web-specific, in fact anything that has to do with resolving URLs and rendering HTML, happens on the client.</p><p>This means that there is virtually no limit to what you can do with <b>pan.do/ra</b>: Use it as it comes out of the box, deploy it as an internal tool and put a completely different public website in front of it, run bots or command-line clients to automate specific tasks, just script it from the console, or even build a native application on top of it.</p><p>To browse or check out the source, take a look at our <a href=\"https://wiki.0x2620.org/browser/pandora\">repository</a>. If you want to report bugs or request features, please use our <a href=\"https://wiki.0x2620.org/report\">tracker</a>. For everything else, there's <a href=\"irc://irc.freenode.net#pan.do/ra\">IRC</a>, and our <a href=\"https://mailb.org/cgi-bin/mailman/listinfo/dev\">development mailing list</a>. Your feedback is welcome.</p><p><a href=\"https://OxJS.org\"><img src=\"png/oxjs256.png\" class=\"logo\"></a><b>pan.do/ra</b>'s interface was made with <b>OxJS</b>, a new JavaScript library for web applications. To learn more about <b>OxJS</b>, check out <a href=\"https://OxJS.org\">OxJS.org</a>.</p><br><br><p><a href=\"https://firefogg.org\"><img src=\"png/firefogg256.png\" class=\"logo\" style=\"width: 128px\"></a><b>pan.do/ra</b> comes with <b>Firefogg</b>, a browser extension for client-side video encoding and upload. Please visit <a href=\"https://firefogg.org\">firefogg.org</a> for more information.</p><br>",
         "support": "<img class=\"logo\" src=\"png/box256.png\"><p>In case you just need help with installing, configuring or running <b>pan.do/ra</b> yourself, don't hesitate to <a href=\"#contact\">get in touch</a> with us.</p><p>Beyond that, we provide support and offer hosting for individual instances of <b>pan.do/ra</b>. For more details, please <a href=\"#contact\">send us an e-mail</a>.<br><br><br><br></p>",
         "credits": "<p><b>pan.do/ra</b> is being developed and maintained by Jan Gerber and Sebastian Lütgert at <a href=\"https://0x2620.org\">0x2620</a> in Berlin and Sanjay Bhangar at <a href=\"http://camputer.org\">CAMP</a> in Bombay.</p><p>From its early stages on, <b>pan.do/ra</b> has received valuable feedback, especially from Zinnia Ambarpardiwala, Shaina Anand and Ashok Sukumaran.</p><p><a href=\"http://bohen.org\"><img class=\"logo\" src=\"png/bohen256.png\"></a>Last but not least, <b>pan.do/ra</b> would not have been possible without the support of the <a href=\"http://bohen.org\">Bohen Foundation</a>.<br><br></p>",
         "contact": "<p><img class=\"logo\" src=\"png/0x2620256.png\" style=\"width: 128px\">E-mail: <a mailto:\"0x2620@0x2620.org\">0x2620@0x2620.org</a></p><p>IRC: <a href=\"irc://irc.freenode.net#pan.do/ra\">irc.freenode.net#pan.do/ra</a></p><p>Twitter: <a href=\"https://twitter.com/#!/0x2620\">@0x2620</a></p><p>0x2620<br>Memhardtstrasse 2<br>10178 Berlin<br>Germany</p>"