+
+ The language using the '' code isn't supported yet!
+If you like, you can be the one to translate "Niels' nature" into this language. Simply contact Niels at ns@metanohi.org.
+ +Hvad er naturen? Hvordan endte verden med at blive, som den er i +dag? Hvorfor dukker alfer normalt ikke op foran mennesker?
+Disse spørgsmål er svære at svare på. De, ligesom mange andre +naturrelaterede spørgsmål, kræver meget tænkning, teorigenerering og +hjernevask for at svare på. Selv de største filosoffer vil aldrig være +i stand til at komme med et definitivt svar på så komplekse +spørgsmål. Selv ikke Niels er i stand til at forklare +det.
+Så, hvem er denne Niels? Og hvad med det +der natur -- hvad er det egentligt? Tja, Niels er en +person, og naturen er det sted Niels optager sine film -- +sine film om naturen. Indtil videre har han optaget tre film i +naturen, hvert med et specifikt og ret relevant tema.
+Så, helt basalt: "Niels' natur" er en tv-serie -- bortset fra, at +det er mere sandsynligt, at den bliver afspillet på en computer.
+Niels har indtil videre produceret 3 afsnit, hvoraf kun den tredje +(altså den nyeste) er oppe. Dette vil blive ændret i fremtiden.. på et +eller andet tidspunkt.
+I alle tre afsnit snakker Niels på sin tur i skoven. Han snakker om +træer, Bigfoots, lokal opvarmning og bambus.
+For at tillade folk, der ikke kan forstå dansk, at se "Niels' +natur", sørger Niels for at undertekste sine afsnit. Indtil videre er +kun det tredje afsnit blevet undertekstet, og det kun på engelsk. Hvis +nogen vil undertekste et afsnit i et andet sprog, så vil Niels +glædeligt acceptere. Niels kan kontaktes +på ns@metanohi.org.
+Alle 3 afsnit er licenserede under CC BY-SA, en fri +licens. Læs mere om dette +på Detaljer-siden.
Hvis du kører en moderne webbrowser, er der en chance for, at du +bare kan klikke på et afsnits billede og så se afsnittet i din +browser. Hvis du ikke er i stand til at gøre det, eller hvis du bare +ikke har lyst, så kan du altid bare downloade et afsnit for at se det +offline -- bare klik på downloadlinksene.
+Videoerne varer mellem 25 og 35 minutter hver og +bruger OGG-formatet +-- Theora for video +og Vorbis for lyd. Du kan +læse mere om dette på Detaljer-siden.
+Dette blev optaget i december 2009.
+ +
+
+
+Afspil i browser (uden undertekster) +(188MB)
+Afspil i browser (med engelske undertekster) +(188MB)
+Download (ingen undertekster +inkluderet) (188MB)
+Download engelske +undertekster
+ + +Dette blev optaget i april 2009.
+
+Video ikke oppe endnu.
+ + +Dette blev optaget i december 2008.
+
+Video ikke oppe endnu.
+EOD; + +$CONTENT_DETAILS = <<Det har ikke været nemt at komme så langt som til her. Man skal +både filme, instruere, planlægge, tænke.. Alle ting meget svære. Denne +side vil forsøge at give detaljerede forklaringer af forskellige +halvkomplekse.. ting.
+ +Filmene foregår i naturen. Det' det.
+ +Copyright -- +se Wikipedias +artikel for en forklaring -- har nået et niveau, hvor kun få +mennesker har den ret. Hvis man kigger på en almindelig film, et +stykke musik eller endda et computerprogram, er det ofte ulovligt bare +at kopiere det. Hvis en person har brugt 5MB af sin harddisk på et +stykke musik og derefter vælger at kopiere det, så det fylder 5MB på +en vens harddisk, er der en stor risiko for, at den person gør noget +ulovligt, fordi hvis musikken er dækket af en tung copyright (som en +masse film, musik, bøger, osv. er), er det kun de, der har retten til +at kopiere et værk, som må kopiere det. Dette virker måske fint, når +copyrightejererne kun bruger deres magt i kommercielle sammenhænge, +men når de begynder at begrænse almindelige menneskers mulighed for at +dele kunst, så er det gået for vidt.
+Så..
+"Niels' natur"-afsnit er fri, i det, at alle må dele +dem. Som en bonus, er alle også tilladt at ændre på afsnittene og dele +deres ændrede afsnit, så endnu flere mennesker kan få noget ud af +det. Alt dette er muligt +vha. Creative Commons Navngivelse-Del på samme vilkår 3.0 +Unported (også kaldet Attribution-ShareAlike). Wikipedia bruger +også denne licens. "Niels' natur" -- både filmene og teksten på denne +hjemmeside -- er tilgængelige under den licens. For at licensen skal +virke, skal der være en copyrightejer. Dette er fordi det er +en copyleft +licens.
Copyright © 2008, 2009, 2010 Niels Serup
Al
+tekst-, billed- (bortset fra 'stop.svg' and
+'stop.png', som er fælleseje i public domain) og filmmateriale på
+denne hjemmeside er tilgængeligt under Creative Commons
+Navngivelse-Del på samme vilkår 3.0 Unported.
Billedet 'stop.svg' er taget +fra Tango Desktop Project +og så lidt ændret. Tangos standardikoner er i public domain, så der er +ikke noget, der stopper mig fra at gøre dem tilgængelige under CC +BY-SA. Men jeg vil respektere projektets ideologi og lade være med at +gøre det.
For at kreditere mig, er et link til denne hjemmeside +('http://natur.metanohi.org/') samt mit navn ('Niels Serup') fint.
+Forresten: Denne hjemmeside bruger en lille +smule JavaScript-kode +til at gøre nogle ting lidt mere fancy. Du skal ikke kreditere mig, +hvis du genbruger noget af koden +eller HTML-formatteringen +fra denne hjemmeside. Jeg synes, at det er for trivielt til at behøve +en copyleft licens -- bare kopier og del som det passer dig.
+ +Du kan kontakte mig +på ns@metanohi.org.
+ +Niels' natur'-afsnit er +i OGG-formatet, +med Theora til video +og Vorbis til lyd. OGG er +et frit multimediecontainerformat. Det er nemt at implementere OGG, da +specifikationen er frit tilgængelig for alle. Samtidig skal man ikke +betale royalties til nogen.
+Du kan læse mere om OGG +i manualen af +FLOSS Manuals, enten online eller som en pdf.
+YouTube bruger stadig hovedsageligt H.264 til deres videoer. Det + kan godt være at det teknisk er et godt codec, men det er noget + rod med alle dets patentproblemer. Det er derfor godt at YouTube + begynder at bruge det nye format WebM med VP8, da det er et frit + format. Det er dog stadig mest almindeligt med Flash-baserede + afspillere (i stedet for HTML5-baserede), og da Flash kun til + fulde kan afspilles af det proprietære Adobe Flash-software, er + det et problem. Dog ser det ud til at den frie Flash-afspiller + Gnash bliver bedre og bedre til det. Men selv om Gnash kan køre + videoprogrammet, er videoprogrammet jo stadig ikke nødvendigvis + frit. Og eftersom det nok ikke ligefrem er trivielt, burde + Flash-kildekoden være fri. Så selv hvis Gnash bliver perfekt, + kræver det også at videoafspilleren er det.
+Umiddelbart ser det ud til at YouTube bruger en del ikke-trivielt, + ikke-frit JavaScript, samtidig med at selve kernen i hele deres + system kun er tilgængelig via en API. Det er et problem. YouTube + har også reklamer, hvilket er irriterende. Ens brug af YouTube er + i typisk Google-facon nok ikke så privat igen + (se http://www.youtube.com/t/privacy).
+Læs mere om fri software, alternativet til proprietær software, på + gnu.org.
+ +Hvis du bruger en rimelig ny browser, burde det være muligt at
+afspille afsnittene indeni din browser. De er sat ind
+vha. HTML5s <video>-tag,
+som virker i Firefox 3.5+ og også nogle andre browsere. Hvis det ikke
+virker,
+træder Cortado-afspilleren
+i kræft. Undertekster virker nok ikke med Cortado, da det er et
+applet.
Hvis du ikke kan eller vil afspille afsnittene direkte i din +browser, så kan du bare downloade dem og se dem i din +favoritmedieafspiller.
+ +Bortset fra, at denne side
+bruger <video>-tagget, så bruger hjemmesiden også
+andre nye tilføjelser til HTML. I browsere der har support for det
+(Firefox 3.5+, GNU IceCat 3.5+, etc.) er der i baggrunden et
+SVG-billede (bgflow.svg). Også
+gennemsigtighed sammen med andre ny fancy CSS-effekter bliver brugt
+hist og her. Alt dette er bare pynt, og selv hvis det ikke vises, så
+virker hjemmesiden stadig. Den virker også fint uden
+JavaScriptkoden. Om ikke andet virker den i hvert fald ok i Lynx.
Jeg bruger en speciel skrifttype kaldt "Domestic Manners" nogle +steder på siden (det vises ikke nødvendigvis i alle +browsere). Her +står der, at skrifttypen er tilgængelig +under GPL. Der står +dog ikke hvilken version af GPL.
+ +Jeg hedder Niels Serup, og jeg lavede disse film. Jeg bor ved siden +af en skov. Læs mere om +mig.
+ +Det kan godt være ret svært at kreere en film, der ser flot ud, +især hvis man vil have, at den skal se profesionel ud. Det gør det +ikke nemmere, hvis man bruger en langsom, gammel computer. Det +lykkedes dog for mig.
+For mit tredje afsnit tænkte jeg, at det kunne være rart at klippe +lidt. Jeg fandt PiTiVi. Det er +måske stadig ret nyt, men det var meget nemt at arbejde med.
+PiTiVi kan også bruges til at "render" ens video, men på mysterisk +vis blev det ved med at crashe og stoppe på underlige tidspunkter på +min computer. Mens jeg kiggede efter hjælp, lagde jeg mærke til, +at Kino ikke havde nogen +problemer med at lave en endelig videofil. For at på Kino til at læse +min PiTivifil lavede jeg en converter. De to videoprogrammer bruger +forskellige formater, så det var nødvendigt. Du kan hente min +converter her.
+For at ændre mine film til OGG bruger
+jeg ffmpeg2theora. Min
+kommando ser ud nogenlunde sådan her:
+ffmpeg2theora -o niels-naturX-small.ogv --deinterlace --optimize -v 4 -a 4 -x 448 -y 360 --aspect 16:9 --artist "Niels Serup" --title "Niels' nature X: Y" --date "2009-12-19" --location "Northern Denmark" --copyright "20XX Niels Serup" --license "CC BY-SA (http://creativecommons.org/licenses/by-sa/3.0/)" niels-naturX.dv
+
+
+Hvorfor ikke?
+ +EOD; +?> diff --git a/subsites/natur/langs/en.php b/subsites/natur/langs/en.php new file mode 100644 index 0000000..58688c0 --- /dev/null +++ b/subsites/natur/langs/en.php @@ -0,0 +1,255 @@ +Nay-ture or yeah-ture? +What is nature? How did the world end up being what it is today? +Why do elfs generally not appear before humans?
+These questions are difficult to answer; they, like many other +nature-related questions, require much thinking, theorizing and +brainwashing to answer. Even the greatest philosophers will never be +able to come with a definite answer to such complex questions. Not +even Niels is able to explain it.
+So, who is this Niels? And what about this nature +-- what is it really? Well, Niels is a person, +and nature is where Niels records his films -- his films +about nature. So far he has recorded three films in the nature, each +one with a specific and quite relevant theme.
+So, basically, "Niels' nature" is a TV show -- except that it is +more likely to be played on a computer.
Niels has currently produced 3 episodes, of which currently only +the third (i.e. the newest) is online. This will change at some point, +though it is unclear when.
+In all of the three episodes Niels talks as he walks. He talks +about trees, Bigfeet, local warming and bamboos.
+Niels speaks Danish, so these episodes are also in Danish. As +Danish isn't a widely understood language, Niels subtitles his +episodes. For now, only the third episode has been subbed, and it has +only been subbed in English. If someone volunteers to sub an episode +in another language, Niels will gladly accept. Niels can be contacted +at ns@metanohi.org.
+Note that all of the episodes are licensed under CC BY-SA, +a free license. Read more about this on +the Details page.
If you're using a modern web browser, there's a chance you'll be +able to simply click on the image of an episode and then watch that +episode inside your browser. If you're unable to do that, or if you +don't want to do that, you can always just download an episode for +offline watching -- just click on the download links.
+The videos last between 25 and 35 minutes each and are encoded into +the OGG format, +using Theora for video +and Vorbis for sound. You +can read more about this on the Details +page.
This was recorded in December 2009.
+ +
+
+
+Play in browser (without subtitles) +(188MB)
+Play in browser (with English subtitles) +(188MB)
+Download (no included +subtitles) (188MB)
+ + + +This was recorded in April 2009.
+
+Video not up yet.
+ + +This was recorded in December 2008.
+
+Video not up yet.
+EOD; + +$CONTENT_DETAILS = <<It has not been a simple task to arrive at this point. Filming, +directing, encoding, planning, thinking.. All very difficult things to +do. This page will attempt to give detailed explanations of various +semicomplex.. things.
+ +The films take place in the nature. That's it.
+ +Copyright -- +see Wikipedia's +article for an explanation -- has reached a level where only a few +people have that right. Looking at an ordinary film, a piece of music +or even a computer program, it it often illegal to simply copy +it. If a person has used up 5MB of their hard disk for a piece of +music and then chooses to copy it, so that it takes up 5MB on a +friend's hard disk, there's a high risk that person is doing something +illegal, because if the music is covered by a heavy copyright (like a +lot of films, music, books, etc. are), only the ones who reserve the +right to copy it may copy it. This might work okay when the copyright +holders only reinforce their right to copy a work in commercial +contexts, but when they start to restrict ordinary people from simply +sharing art, it's gone too far.
+So..
+"Niels' nature" episodes are free, in the sense that +everybody is allowed to share them. As a bonus, everybody is also +allowed to modify them and share their modifications, so that even +more people can benefit. All this is made possible by +the Creative Commons Attribution-ShareAlike 3.0 Unported +license (also used by Wikipedia). Niels' nature' -- both the films +and the textual content of the website -- is licensed under that +license. For the license to work, there must be a copyright +owner. This is because it's +a copyleft +license.
Copyright © 2008, 2009 Niels Serup
All
+text, pictures (except 'stop.svg' and
+'stop.png', which are in the public domain) and films on this
+website are available under the Creative Commons
+Attribution-ShareAlike 3.0 Unported license.
The image 'stop.svg' is taken from +the Tango Desktop Project +and slightly modified. Tango base icons are in the public domain, so +nothing's stopping me from releasing my modified version under CC +BY-SA. But I'll respect the project's ideology and not do that.
+To attribute me, a link to this website +('http://nature.metanohi.org/') and a string with my name ('Niels +Serup') is enough.
+Note that this website uses a small amount +of JavaScript +code to make some things a bit fancier. You shouldn't attribute me +when reusing code +and HTML formatting +from this website. I find it too trivial to have it require a real +copyleft license; just copy it as you wish.
+ +You can contact me +at ns@metanohi.org.
+ +"Niels' nature" episodes are encoded into +the OGG format, +using Theora for video +and Vorbis for sound. OGG +is a free video/sound/subtitle container format. Implementing OGG is +easy, as its specification is freely available to everyone. It's also +royalty-free.
+You can read more about OGG in +the manual +published by FLOSS Manuals, either online or as a pdf.
+YouTube still mainly uses H.264 for their videos. It may be that it + is technically a good codec, but patent-wise it's a mess. That's + why it's a good thing that YouTube is beginning to use WebM with + VP8, as that is a free format. It is however still most common + with Flash-based video players (instead of HTML5-based), and + considering that Flash can only be perfectly run by the + proprietary Adobe Flash, it's a problem. Gnash, a free Flash + player, seems to be steadily solving this problem, but even if it + eventually becomes capable of running Flash programs perfectly, + the Flash programs may still not be free. And they should.
+It seems that YouTube uses some non-trivial, non-free JavaScript as + well as a non-free core only partly available through an API. This + is a problem. YouTube also has ads, which is annoying. One's use + of YouTube is in typical Google-way probably not very private + (see http://www.youtube.com/t/privacy).
+Read more about free software, the alternative to proprietary + software, on gnu.org.
+ + +If you're using a fairly new browser, it should be possible to play
+the episodes inside your browser. They are embedded using
+the <video>
+tag of HTML5, which is supported in Firefox 3.5+ as well as other
+browsers. As a fallback,
+the Cortado Java player
+is used. Subtitles are unlikely to work with Cortado, because it's an
+applet.
If playing the episodes directly in the browser doesn't work, or if +you simply don't want to do that, just download the episodes and watch +them in your favourite media player.
+ +Apart from using the <video> tag, this website
+also uses other new additions to HTML. On browsers that support it
+(Firefox 3.5+, GNU IceCat 3.5+, etc.), the background features an SVG
+image (bgflow.svg) and transparency as
+well as other new CSS things are used at various places. All of this
+is nothing but eyecandy, and if it doesn't work because of a browser
+that doesn't support it, fear not! The site should still work just
+fine. It also works just fine without the JavaScript code. It seems to
+work ok in Lynx, anyway.
I'm using a special font called "Domestic Manners" in some areas of +the website (it might not show on all browsers). According +to this +site, the font +is GPL'd, though it +doesn't state what version of the GPL it's under.
+ +Denmark is a small, cold country.
+ +My name is Niels Serup, and I created these films. I live next to a +forest. Read more about +me.
+ +Creating a nice-looking film can be difficult, especially if you +want to make it look professional. Using a slow, old computer doesn't +make things easier. I did manage it, however.
+For my third episode I thought to myself that it could be nice to + do a bit of cutting. I + found PiTiVi. While still in + its early fases, I found it to be very easy to work with.
+PiTiVi can also be used to render one's video, but it mysteriously +kept crashing and stopping at odd times on my computer. While looking +for help, I noticed that Kino +didn't have any rendering problems. To make Kino render render my +PiTiVi file, I created a converter. The two programs use different +file formats for saving data, so it was necessary. You can download +it here.
+To convert my films to OGG I
+use ffmpeg2theora. Something
+like this:
+ffmpeg2theora -o niels-naturX-small.ogv --deinterlace --optimize -v 4 -a 4 -x 448 -y 360 --aspect 16:9 --artist "Niels Serup" --title "Niels' nature X: Y" --date "2009-12-19" --location "Northern Denmark" --copyright "20XX Niels Serup" --license "CC BY-SA (http://creativecommons.org/licenses/by-sa/3.0/)" niels-naturX.dv
+
+
+Why not?
+ +EOD; +?> diff --git a/subsites/natur/script.js b/subsites/natur/script.js new file mode 100644 index 0000000..0359160 --- /dev/null +++ b/subsites/natur/script.js @@ -0,0 +1,481 @@ +/* + This program is free software. It comes without any warranty, to + the extent permitted by applicable law. You can redistribute it + and/or modify it under the terms of the Do What The Fuck You Want + To Public License, Version 2, as published by Sam Hocevar. See + http://sam.zoy.org/wtfpl/COPYING for more details. +*/ + +/* I'm sorry I never got around to beautifying the code, but I was + * simply more focused on encoding and subbing my films. + */ + +function empty(){} + + +HTMLElement.prototype.set_opacity = function(val) { + this.style.opacity = val + this.style.filter = 'alpha(opacity=' + val*100 + ')' +} + +HTMLElement.prototype.fade = function(fade_in, increase, speed, afterfunc) { + if (increase == undefined || increase == -1) + var increase = 5 + if (speed = undefined || speed == -1) + var speed = 50 + if (afterfunc == undefined) + var afterfunc = empty + + this.style.display = 'block' + if (fade_in) { + this.fade_opacity = 0 + this.set_opacity(0) + } + else { + this.fade_opacity = 100 + this.set_opacity(1) + } + this.fade_increase = increase + this.fade_afterfunc = afterfunc + this.fade_in = fade_in + this.fade_interval = setInterval(this.fade_run, speed, this) +} + +HTMLElement.prototype.fade_in = function(increase, speed, afterfunc) { + this.fade(true, increase, speed, afterfunc) +} + +HTMLElement.prototype.fade_out = function(increase, speed, afterfunc) { + this.fade(false, increase, speed, afterfunc) +} + +HTMLElement.prototype.fade_run = function(obj) { + var end + if (obj.fade_in) { + obj.fade_opacity += obj.fade_increase + end = obj.fade_opacity >= 100 + } + else { + obj.fade_opacity -= obj.fade_increase + end = obj.fade_opacity <= 0 + } + if (!end) + obj.set_opacity(obj.fade_opacity/100) + else + obj.fade_end() +} + +HTMLElement.prototype.fade_end = function() { + clearInterval(this.fade_interval) + if (this.fade_in) + this.set_opacity(1) + else { + this.set_opacity(0) + this.style.display = 'none' + } + delete this.fade_interval + delete this.fade_opacity + delete this.fade_increase + delete this.fade_in + var func = this.fade_afterfunc + delete this.fade_afterfunc + func() +} + + +function get_window_size() { + if (window.innerWidth) { + w = window.innerWidth + h = window.innerHeight + } + else if (document.body.clientWidth) { + w = document.body.clientWidth + h = document.body.clientHeight + } +} + +function update_csssvg() { + get_window_size() + + try { + // More logical resize + if (h < w * 0.45) + svg.setAttribute('preserveAspectRatio', 'xMidYMid slice') + else + svg.setAttribute('preserveAspectRatio', 'xMidYMid meet') + } catch (error) {} + // Just for looks + text_box.style.minHeight = h - 101 + 'px' + text_content.style.minHeight = h - 215 - menu_height + 'px' +} + +function in_list(obj, lst) { + for (var x in lst) { + if (lst[x] == obj) + return x + } + + return -1 +} + +function set_title_based_on_page(num) { + if (pages_titles[num]) + document.title = root_title + ' :: ' + pages_titles[num] +} + + + + + +function pagescroll_start() { + if (page_scrolling) + return false + + var newelem = pages_elems[new_num] + var oldelem = pages_elems[old_num] + + newelem.style.position = 'absolute' + newelem.style.top = '6px' + newelem.style.marginLeft = '525px' + newelem.className = 'focus' + + if (newelem.scrollHeight > oldelem.scrollHeight) { + newelem.style.position = '' + newelem.style.marginLeft = '525px' + oldelem.style.position = 'absolute' + oldelem.style.top = '6px' + } + + page_moved = 0 + + increase = 10 + page_change_increase = 400 + + page_scrolling = true + pagescroll() +} + +function pagescroll() { + var tmp_increase = increase + 15 + if (page_moved + tmp_increase < page_change_increase) + increase = tmp_increase + else + increase -= 25 + mv = page_moved + increase + if (mv < PAGE_WIDTH) { + page_moved = mv + text_content.style.left = -mv + 'px' + setTimeout("pagescroll()", 50) + } + else + pagescroll_end() +} + +function pagescroll_end() { + var newelem = pages_elems[new_num] + var oldelem = pages_elems[old_num] + + current_page = pages_refs[new_num] + set_title_based_on_page(new_num) + + text_content.removeAttribute('style') + newelem.removeAttribute('style') + oldelem.removeAttribute('style') + oldelem.className = 'hidden' + + text_content.style.left = '0' + newelem.style.left = '0' + oldelem.style.left = '0' + + pages_menu_elems[old_num].className = '' + pages_menu_elems[new_num].className = 'focus' + + page_scrolling = false +} + + + + + + +function cinema_start(num, subs_lang) { + if (video_playing) { + if (num != video_playing) { + video_playing = num + cininf.fade_out(10, -1, function() {cinema_set_description(); cininf.fade_in(10)}) + cinema_play() + } + return + } + + if (subs_lang) { + var ok = false + for (var x in subtitles) { + if (subtitles[x][0] == num) { + ok = true + subtitles[x][1].resume() + break + } + } + if (!ok) + subtitles.push([num, new subtitle(cinvid, 'vid/niels-natur'+num+'-'+subs_lang+'.srt', cinelm)]) + } + video_playing = num + cinema_set_description() + cinelm.fade_in(7, -1, cinema_start_continue) +} + +function cinema_set_description() { + cininf.innerHTML = root_title + ' ' + video_playing +} + +function cinema_start_continue() { + cininf.fade_in(10) + cinelm_close.fade_in(10) + + text_wrapper.style.display = 'none' + bgflow.style.display = 'none' + + cinema_play() +} + +function cinema_play() { + var url = 'vid/niels-natur' + video_playing + '-small.ogv' + + if (cinvid.currentTime != undefined) { + cinvid.src = url + cinvid.play() + } + else { + add_cortado(url) + } +} + +function cinema_end() { + text_wrapper.style.display = '' + bgflow.style.display = '' + + if (cinvid.currentTime != undefined) { + cinvid.pause() + } + else { + remove_cortado() + } + for (var x in subtitles) { + if (subtitles[x][0] == video_playing) { + subtitles[x][1].stop() + break + } + } + video_playing = 0 + + cininf.fade_out(7) + cinelm_close.fade_out() + cinelm.fade_out(-1, -1, function(){}) +} + + + + +function do_action(href) { + var action, x + action = href.substr(href.indexOf('#')+1) + if (!page_scrolling && action != current_page && in_list(action, pages_refs) != -1) { + // It is a hidden page (to be shown) + + var name, elem, menu_elem, parent + for (x in pages_refs) { + name = pages_refs[x] + elem = pages_elems[x] + menu_elem = pages_menu_elems[x] + if (name == action) { + // Put element after other elements + parent = elem.parentNode + parent.removeChild(elem) + parent.appendChild(elem) + + new_num = x + } + else if (name == current_page) { + old_num = x + } + } + + pagescroll_start() + } + else if (action.indexOf('play') == 0) { + var play = action.substr(4) + var dot = play.indexOf('.') + var subs + if (dot != -1) { + subs = play.substr(dot+1) + play = play.substr(0, dot) + } + else + subs = false + play = play*1 + if (play) { + do_action(pages_refs[1]) + cinema_start(play, subs) + } + } +} + +function remove_cortado(url) { + cinvid.removeChild(cinapp) + delete cinapp +} + +function add_cortado(url) { + cinapp = document.createElement('applet') + cinapp.setAttribute('code', 'com.fluendo.player.Cortado.class') + cinapp.setAttribute('archive', 'http://theora.org/cortado.jar') + cinapp.width = '640' + cinapp.height = '360' + + namval = { + 'url': url, + 'local': 'false', + 'duration': '', + 'bufferSize': '200', + 'autoPlay': 'true', + 'statusHeight': '16' + } + + for (x in namval) { + elem = document.createElement('param') + elem.setAttribute('name', x) + elem.setAttribute('value', namval[x]) + if (x == 'url') + cinapp_url = elem + cinapp.appendChild(elem) + } + + cinvid.appendChild(cinapp) +} + + +window.onload = function() { + // Get elements + bgflow = document.getElementById('bgflow') + text_wrapper = document.getElementById('text_wrapper') + text_box = document.getElementById('text_box') + text_menu = document.getElementById('text_menu') + text_content = document.getElementById('text_content') + + + PAGE_WIDTH = 525 + HALF_PAGE = Math.round(PAGE_WIDTH / 2) + 10 // With a little extra + + // Set default values (also for debugging) + w = -1 + h = -1 + old_num = -1 + new_num = -1 + page_scrolling = false + video_playing = 0 + + // Get menu height if menu exists + try { + menu_height = text_menu.offsetHeight + } catch(err) { + menu_height = 0 + } + + // Get root element of background SVG + try { + svg = bgflow.getSVGDocument().rootElement + } catch (error) {} + + root_title = document.title + + var elems, elem, x, y, name, urlhash, hash_in_list, elem_num, menu_elem + var elems2, elem2 + urlhash = window.location.hash.substr(1) + + pages_refs = new Array() + pages_elems = new Array() + pages_menu_elems = new Array() + pages_titles = new Array() + + elems = text_menu.childNodes + for (x in elems) { + elem = elems[x] + if (elem.nodeName && elem.nodeName.toLowerCase() == 'li') { + pages_menu_elems.push(elem) + elem = elem.childNodes[0] + pages_titles.push(elem.innerHTML) + pages_refs.push(elem.href.substr(elem.href.indexOf('#')+1)) + } + } + + hash_in_list = in_list(urlhash, pages_refs) + if (hash_in_list != -1) { + current_page = urlhash + elem_num = hash_in_list + } + else { + current_page = pages_refs[0] + elem_num = 0 + } + + // Hide non-current pages + for (x in pages_refs) { + name = pages_refs[x] + elem = document.getElementById('content_' + name) + menu_elem = pages_menu_elems[x] + pages_elems.push(elem) + if (name == current_page) { + elem.className = 'focus' + menu_elem.className = 'focus' + } + else { + elem.className = 'hidden' + menu_elem.className = '' + } + } + + set_title_based_on_page(elem_num) + + // Set up alternate handling of '#' links and prepare video shots + elems = document.getElementsByTagName('a') + for (x in elems) { + elem = elems[x] + if (elem.href != undefined && elem.href.indexOf('#') != -1) + elem.onclick = function() {do_action(this.href)} + } + + // Prepare page for viewing video + cinelm = document.createElement('div') + cinelm.id = 'cinema' + + cinelm_close = document.createElement('div') + cinelm_close.id = 'cinema-close' + cinelm_close.onclick = function() {cinema_end()} + cinelm.appendChild(cinelm_close) + + cinvid = document.createElement('video') + cinvid.id = 'cinema-film' + cinvid.width = '640' + cinvid.height = '360' + cinvid.setAttribute('controls', 'controls') + cinvid.addEventListener('ended', function() {cinema_end()}, true) + + cinelm.appendChild(cinvid) + + cininf = document.createElement('div') + cininf.id = 'cinema-info' + cinelm.appendChild(cininf) + + document.body.appendChild(cinelm) + + // Prepare for loading of subtitles + subtitles = new Array() + + // Do whatever the hash tells you to do + do_action(urlhash) + + // Prepare to update css and svg (and do it) + window.onresize = function() {update_csssvg()} + update_csssvg() +} diff --git a/subsites/natur/style.css b/subsites/natur/style.css new file mode 100644 index 0000000..255d012 --- /dev/null +++ b/subsites/natur/style.css @@ -0,0 +1,309 @@ +@font-face { + font-family: 'Hand'; + font-weight: normal; + src: local("Domestic Manners"), + url("Domestic_Manners.ttf") format("truetype"); +} + +* { + margin: 0; + padding: 0; +} + +body { + font-family: 'DejaVu Serif', 'Bitstream Vera Serif', 'Liberation Serif', + 'Times New Roman', 'serif', 'sans'; + font-size: 14px; + color: #dbf6d0; + background-color: #00e500; + overflow: hidden; +} + +object#bgflow { + position: fixed; + overflow: hidden; + width: 100%; + height: 100%; + background: #8c0000; +} + +div#text_wrapper { + position: absolute; + width: 100%; + height: 100%; + overflow-y: scroll; + overflow-x: auto; +} + +div#text_box { + width: 525px; + margin: 48px auto; + min-height: 50%; + background: rgba(0, 0, 0, 0.7) url(img/eyes.jpg) no-repeat; + border-width: 2px; + border-style: solid; + border-color: rgba(125, 75, 25, 0.7); + overflow: hidden; +} + +a#text_header { + display: block; + position: absolute; + width: 525px; + height: 100px; + cursor: pointer; +} + +div#text_header_content { + position: absolute; + bottom: 3px; + left: 7px; + color: #8ec813; + font-family: Hand, 'Domestic Manners'; + font-size: 30px; + text-shadow: #000 1px -1px 1px; +} + +div#text_header_space { + margin-top: 100px; + height: 2px; + background: #000; +} + +ul#text_menu { + display: block; + width: 513px; + background: #000; + padding: 4px 6px 6px 6px; + color: #fff; +} + +ul#text_menu li { + list-style: none; + float: left; + width: 167px; + margin-left: 6px; + font-weight: bold; + font-size: 18px; + text-align: center; + position: relative; +} + +ul#text_menu li:first-child { + margin-left: 0; +} + +ul#text_menu a { + display: block; + width: 100%; + height: 100%; + padding: 4px 0; +} + +ul#text_menu a:link, ul#text_menu a:visited { + text-decoration: none; + color: #ccc; + background-color: #222; +} + +ul#text_menu a:hover { + color: #222; + background-color: #ccc; +} + +ul#text_menu li.focus a { + color: #111; + background-color: #eee; +} + +div#text_content { + width: 513px; + padding: 6px; + position: relative; +} + +div#text_content > div { + width: 513px; + overflow: hidden; + margin-bottom: 20px; +} + +div#text_content > div.focus, div#text_content > div:last-child { + margin-bottom: 0; +} + +div#text_content > div.hidden { + display: none; +} + +h1 { + font-weight: normal; + font-size: 28px; +} + +h2 { + margin-top: 10px; + font-weight: normal; + font-size: 24px; +} + +h3 { + font-weight: normal; + font-size: 20px; +} + +p { + text-indent: 6px; +} + +img { + border: 0; + padding: 0; +} + +img.left { + float: left; + margin: 2px 6px 3px 2px; +} + +.bottom-page { + position: absolute; + bottom: 0; + left: 0; + width: 525px; + height: 289px; + border-top: 2px solid #333; +} + +.large { + font-size: 20px; +} + +.error { + color: #440000; + background-color: rgba(255, 155, 55, 0.5); + padding: 0 3px; +} + +.center { + text-align: center; +} + +.noindent { + text-indent: 0; +} + +hr { + border: 1px dashed #8f97e8; + margin: 5px 0; +} + +a:link, a:visited { + color: #a2ecff; + padding: 0 3px; + background-color: rgba(223, 251, 212, 0.2); + text-decoration: none; +} + +a:hover { + color: #44f6c5; + background-color: rgba(123, 251, 212, 0.2); +} + +a.img:link, a.img:visited, a.img:hover { + padding: 0; + background-color: transparent; + display: block; +} + +a.shotimg:link, a.shotimg:visited, a.shotimg:hover { + padding: 0; + background-color: transparent; + display: block; + width: 513px; + height: 282px; + margin-bottom: 4px; +} + +a.shotimg img { + width: 100%; + height: 100%; + opacity:.8; + -moz-opacity:.8; + -khtml-opacity: .8; + //-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + //filter:alpha(opacity=80); +} + +a.shotimg:hover img { + opacity:1; + -moz-opacity:1; + -khtml-opacity: 1; + //-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + //filter:alpha(opacity=100); +} + +div.end { + clear: both; +} + + + +#cinema { + position: fixed; + left: 50%; + top: 50%; + width: 650px; + height: 440px; + margin-left: -325px; + margin-top: -250px; + background-color: #000; + display: none; + z-index: 2; +} + +#cinema-close { + position: absolute; + right: 10px; + bottom: 10px; + width: 50px; + height: 50px; + background: url(img/stop.png) no-repeat; + cursor: pointer; + display: none; +} + +#cinema-close:hover { + background-position: 0 -50px; +} + +#cinema-film { + position: absolute; + left: 5px; + top: 5px; + width: 640px; + height: 360px; +} + +#cinema-info { + position: absolute; + left: 20px; + bottom: 10px; + font-family: Hand, 'Domestic Manners'; + font-size: 30px; + color: #f9dfdf; + display: none; +} + +#subtitle { + position: absolute; + bottom: 0; + left: 50%; + width: 400px; + margin-left: -200px; + text-align: center; + padding: 3px; + background-color: rgba(0, 0, 0, 0.5); + font-family:Dejavu Sans, Arial, sans; + color: #fff; +} diff --git a/subsites/natur/subtitler-test.htm b/subsites/natur/subtitler-test.htm new file mode 100644 index 0000000..ce0d1a3 --- /dev/null +++ b/subsites/natur/subtitler-test.htm @@ -0,0 +1,42 @@ + + + +Niels is not that fond of JavaScript, but he can't help but play with it. He thinks it's a disease.
The logo (also available in SVG) is licensed under the Attribution-Share Alike 3.0 Unported license. Niels is the author.
The PHP source code is available here.
You might not also want to check out this, which was the inspiration for nohiX.
You might not also want to check out this, which was the inspiration for nohiX.
