tour
This commit is contained in:
j
parent
4b31e217a1
commit
be3296e472
5 changed files with 148 additions and 25 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
BIN
jpg/about.jpg
Normal file
BIN
jpg/about.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
jpg/home.jpg
Normal file
BIN
jpg/home.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
136
js/pandora.js
136
js/pandora.js
|
|
@ -2,19 +2,7 @@ Ox.getJSON('json/pandora.json', function(pandora) {
|
|||
$(function() {
|
||||
|
||||
var $body = $('body'),
|
||||
$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'
|
||||
})
|
||||
)
|
||||
}
|
||||
}),
|
||||
$icon = $('#icon'),
|
||||
$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) {
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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\">",
|
||||
"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>",
|
||||
"": "<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 — 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=\"jpg/about.jpg\"></p>",
|
||||
"news": [
|
||||
[
|
||||
"pan.do/ra has a website",
|
||||
|
|
@ -21,8 +21,16 @@
|
|||
],
|
||||
"faq": [
|
||||
[
|
||||
"Q: What's with the FAQ?",
|
||||
"A: Coming soon..."
|
||||
"Q: What can I do with <b>pan.do/ra</b>, and how?",
|
||||
"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>"
|
||||
|
|
|
|||
Loading…
Reference in a new issue