Web Paper

Part a
Html/CSS Form
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,60
0italic">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<style>
.input-group-addon{border-color:#00a65a;box-shadow:none}
.form-group.has-success
.help-block{color:#00a65a}
.form-group.has-warning label{color:#f39c12}
.form-group.has-warning .form-control,
.form-group.has-warning
.input-group-addon{border-color:#f39c12;box-shadow:none}
.form-group.has-warning
.help-block{color:#f39c12}
.form-group.has-error label{color:#dd4b39}
.form-group.has-error .form-control,
.form-group.has-error
.input-group-addon{border-color:#dd4b39;box-shadow:none}
.form-group.has-error
.help-block{color:#dd4b39}
.input-group .input-group-addon{border-radius:0;border-color:#d2d6de;background-color:#fff}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<img src="img.jpeg" style="height: 100%; width: 100%;"/>
</div>
<div class="col-md-4" style="background-color: rgb(1, 44, 1); color: white; padding: 50px;">
<div class="row">
<h1>BECOME A PROTECTOR</h1>
<br/>
<h5>OCTOBER 18TH 2015</h5>
<span>Registration is now closed. Thank</span>
<br/>
<span>you to everyone who contributed.</span>
</div>
Phone *
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone"></span>
<input type="text" class="form-control">
</div>
</div>
<button class="btn btn-success">Register</button>
</div>
First Name *
<span class="input-group-addon"><i class="fa fa-envelope"></span>
</div>
</div>
Last Name *
</div>
</div>
Street *
</div>
</div>
No

</div>
</div>
Zip code *
</div>
</div>
State *
</div>
</div>
E-mail *
</div>
</div>
<button class="btn btn-success">Register</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Part b
Code:
<!DOCTYPE html>


 <html id="html" class="no-js" lang="nb-NO"> 
<head>
<script>
window.tvaksjonenTimeStampAtStartup = new Date();
</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="assets/v32/css/main.min.css" media="only screen"/>
<link href="https://rainforest.arkivert.no/opensearch.xml" rel="search" title="Søk"

type="application/opensearchdescription+xml">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script src="ajax/libs/jquery/2-1-4/jquery.min.js"></script>
<script src="assets/v32/js/libs.js"></script>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-11427662-49', 'auto');
</script>
</head>
<body>
<div id="mapView" class="view show" style="background: url('./assets/download.png'); background-

size: cover">
<div id="guardianOverlay" class="name-overlay">
<h3 class="label">Protected by</h3>
<h2 class="name-box">Helene</h2>
<button id="bliSkogvokter">Become a protector</button>
</div>
<div id="userOverlay" class="name-overlay">
<button id="fbShare" class="fb-share">Recruit more protectors</button>
</div>
<div id="introOverlay" class="name-overlay">
</div>
<div id="introTexts" class="intro-texts">
<p>We need 100 000 volunteers to protect this area.</p>
<p>Become a rainforest protector.</p>
<p>Become a volunteer<br>on October 18th.</p>
</div>
<div id="counter">
<div class="counter-number">98.367/100.000</div>
<div class="counter-label">Protectors so far</div>
<a href="http://blimed.no/tv-aksjonen-2015/" class="counter-link" target="_blank">Read more

about this project</a>
</div>
</div>
<div id="panoramaView" class="view draggable">
<div id="pano2vr"></div>
<button class="close-panorama">Back to map</button>
<div id="panoHelper" class="pano-helper">
<h3 class="desktop">Click and drag to navigate</h3>
<h3 class="mobile">Move the phone to look around</h3>
<div class="icon"></div>
<button id="closeHelper">Ok</button>
</div>

</div>
<div id="trailMenu" class="trailmenu view">

<li><a href="#panorama/1" class="btn-1"><span class="left">The Village</span></a></li>
<li><a href="#panorama/2" class="btn-2"><span class="left">The Riverbank</span></a></li>
<li><a href="#panorama/3" class="btn-3"><span class="right">The Trail</span></a></li>
<li><a href="#panorama/4" class="btn-4"><span class="left">The Natives</span></a></li>
<li><a href="#panorama/5" class="btn-5"><span class="right">The Forest</span></a></li>
</div>
<div id="intro">
<div class="staticbg"></div>
<div class="clouds tiles"></div>
<div class="message">
<div class="m1"></div>
<div class="m2"></div>
</div>
<div id="loader">
<div class="progress"></div>
</div>
</div>

<script>(function () {
var clouds = [],maps = [];
var INTERNAL_WIDTH, TOTAL_WIDTH,TOTAL_HEIGHT, PERSPECTIVE = 100, SIZE =

400,CLOUD_SCALE = 3, CLOUD_WIDTH = 400, CLOUD_HEIGHT = 253, CLOUDS = 10,
HAS_3D_TRANSFORM;
var rows = 3,cols;
var RANDOM =
[.12,.53,.05,.48,.22,.38,.23,.92,.78,.88,.94,.63,.22,.51,.80,.77,.27,.31,.18,.60,.98,.28,.19,.17,.00,.96,.73,.25
,.13,.32,.65,.42,.40,.72,.42,.54,.56,.08,.90,.13,.15,.85,.60,.56,.77,.92,.91,.89,.16,.51,.39,.03,.31,.28,.59,.67
,.12,.21,.67,.84,.34,.18,.46,.13,.84,.22,.09,.59,.72,.87,.02,.28,.31,.60,.72,.93,.60,.80,.24,.26,.34,.26,.26,.86
,.35,.20,.60,.67,.88,.39,.83,.51,.09,.61,.37,.86,.83,.62,.20,.53];
var playing = true;
var currentMessage = 0;
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) { window.setTimeout(function()

{ callback(); }, 16); };
CLOUDS = Math.ceil( $(window).width() / 200);
var $containerMaps = $('#intro .maps');
var $containerClouds = $('#intro .clouds');
var $messages = $('#intro .message div');
window.tvaksjonenCloudPicture = 'assets/images/intro/cloud_fluff_double400_64.png';
var Cloud = function (i,x,y,scale) {
this.offsetX = x;this.x = x;this.y = y;this.scale = scale;this.i = i;
$containerClouds.append('<img class="cloud anim" id="c' + i + '" src="' +

window.tvaksjonenCloudPicture + '" onload="tvaksjonenLoadApplication();">');
this.$el = $containerClouds.find('#c' + i);
this.$el.css('opacity', (0.5 + Math.random()*0.3).toFixed(1)); //Opacity creates bugs in

Firefox with large scaling
Cloud.prototype.resize = function () {
this.width = CLOUD_WIDTH * this.scale;
this.height = CLOUD_HEIGHT * this.scale;
this.travelWidth = $(window).width() + this.width;
this.translatedY = Math.round(this.y * $(window).height() - this.height * 0.5);
this.speed = this.scale * 0.5 * 0.1;
this.resize();
Cloud.prototype.update = function () {
var tempX = this.offsetX + Date.now() * this.speed;
this.x = (tempX % this.travelWidth ) - this.width;
this.$el.css('transform', 'translate(' + this.x.toFixed(1) + 'px, ' + this.translatedY +

'px) scale(' + this.scale + ')');
}
function resize() {
var scale = window.innerHeight/(SIZE*rows); //Calculate scale from height
$containerMaps.css('transform', 'scale('+ scale.toFixed(2) +')');
INTERNAL_WIDTH = $(window).width() / scale;
CLOUD_TRAVEL_WIDTH = $(window).width();
width = INTERNAL_WIDTH / SIZE;
cols = Math.ceil(width) + 1;
TOTAL_WIDTH = cols * SIZE;
TOTAL_HEIGHT = rows * SIZE;
var MAPS = cols * rows;
for (var i = 0, len = clouds.length; i < len; i++) {
clouds[i].resize();
$('#intro').find('.map').remove();
//OnLoad
$(function(){
if (window.location.hash === '') {
init();
} else {
window.tvaksjonenLoadApplication();
$('#intro').remove();
});
function nextMessage() {
var oldMessage = currentMessage;
currentMessage = (currentMessage + 1) % $messages.length;
$messages.eq(oldMessage).fadeOut(1000,
function () {
$messages.eq(currentMessage).fadeIn(1000);
);
if (currentMessage > 0 && window.tvaksjonenIntroIsComplete == undefined) {
window.tvaksjonenIntroIsComplete = true;
if (window.hasOwnProperty('app')) {
app.introComplete();
console.log('Har vist 2 meldinger');
setTimeout(nextMessage, 5000);
function init() {
var space = $(window).width() / CLOUDS * 2;
resize();
for (var i = 0; i < CLOUDS; i++) {
var p = i / (CLOUDS);
var c = new Cloud(i, p * CLOUD_TRAVEL_WIDTH, RANDOM[i], (0.5 + RANDOM[i]

* 0.5) * CLOUD_SCALE);
clouds.push(c);
render();
$(window).on('resize',resize);
$(window).on("orientationchange", resize);
setTimeout(function () {$messages.eq(currentMessage).fadeIn();},2000);
setTimeout(nextMessage, 5000);
function render() {
if (playing) {
for (var i = 0, len = clouds.length; i < len; i++) {
clouds[i].update();
requestAnimationFrame(render);
window.tvaksjonenStopIntro = function () {
playing = false;
$('#intro').remove();
$(window).off('resize',resize);
$(window).off("orientationchange", resize);
})();</script>
<div id="cloudView"></div>
<div id="contentView" class=""><div class="circle-bg"></div><div class="content-picture content-

left"><div class="content-video-container"><button class="content-video-play"><svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="46.5px" height="53.7px" viewBox="0 0 46.5 53.7" enable-

background="new 0 0 46.5 53.7"
xml:space="preserve"><defs></defs><polygon fill="#FFFFFF" stroke="#FFFFFF" stroke-

miterlimit="10" points="0.5,0.9 45.5,26.8 0.5,52.8 "/></svg></button></div></div><div class="content-
right"><div class="dialog-view-container"><button class="sidepanel-close-button" alt="Lukk"><svg
version="1.1"
x="0px" y="0px" width="27.8px" height="31.7px" viewBox="0 0 27.8 31.7" enable-background="new 0

0 27.8 31.7"
xml:space="preserve"><defs></defs><line fill="none" stroke="#FFFFFF" stroke-miterlimit="10"

x1="0.4" y1="0.3" x2="27.4" y2="31.3"/><line fill="none" stroke="#FFFFFF" stroke-miterlimit="10"
x1="27.4" y1="0.3" x2="0.4" y2="31.3"/></svg></button><div class="content-
heading"><h2>Volunteer</h2><img class="content-heading-image"
src="assets/images/content/1/folk/folk_heading.png"></div><p class="body-text content"></p><a
href="#" class="content-register">Volunteer</a></div><button class="content-next-button"
alt="Neste"><span class="btn-bg"></span><span class="btn-txt">Next
fact</span></button></div></div><img src="assets/images/logo.png" id="logo"><div
id="menuView"><div class="topmenu"><div class="social menuButton ib"><button class="mute"><svg
version="1.1"
x="0px" y="0px" width="15px" height="15px" viewBox="0 0 15 15" enable-background="new 0 0 0 0"

xml:space="preserve"><defs></defs><path id="White_1_" fill="#FFFFFF"
d="M14.2,0H0.8C0.4,0,0,0.4,0,0.8v13.3C0,14.6,0.4,15,0.8,15H8V9.2h-2V6.9h2V5.3
c0-1.9,1.2-3,2.9-3c0.8,0,1.5,0.1,1.7,0.1v2h-1.2c-0.9,0-1.1,0.4-1.1,1.1v1.4h2.2l-0.3,2.3h-
2V15h3.8c0.5,0,0.8-0.4,0.8-0.8V0.8
C15,0.4,14.6,0,14.2,0z"/></svg><span>SHARE</span></button></div><div class="formbutton
menuButton ib"><button class="textbutton">Become a protector</button></div></div><div
id="registrationView" class="formcontainer ib dialog-view show" style="transform: matrix(1, 0, 0, 1, 0,
0);"><button class="sidepanel-close-button" alt="Lukk"><svg version="1.1"
<script>
window.tvaksjonenDebug = false;
function tvaksjonenLoadApplication() {
if (window.tvaksjonenApplicationLoaded === undefined) {
window.tvaksjonenApplicationLoaded = true;
if (window.tvaksjonenDebug) {
if (console && console.log && typeof console.log === "function") {
console.log('send', 'event','System', 'Loading', 'tvaksjonenLoadApplication', (new Date() -

window.tvaksjonenTimeStampAtStartup))
} else {
ga('send', 'event','System', 'Loading', 'onMapLoadComplete', (new Date() -

window.tvaksjonenTimeStampAtStartup))
window.asyncLoader = function (url, cb) {

var s = document.createElement('script')
, f = document.getElementsByTagName('script')[0];
s.async = true; s.src = url;
if ('function' === typeof(cb)) {
s.onload = function() { cb();
s.onload = s.onreadystatechange = null;
};
s.onreadystatechange = function() { if ('loaded' === s.readyState || 'complete' ===

s.readyState) s.onload(); };
f.parentNode.insertBefore(s, f);
};
var count = 0;
function onAsyncLoaded() {
if (++count === 1) {
var config = {
debug: window.tvaksjonenDebug,
assetsVersion: 32,
assetsPath: '/assets/v32/',
domain: 'http://regnskogvokter.blimed.no'
var app = new Application(config);
window.asyncLoader('assets/v32/js/app.js', onAsyncLoaded);
};
</script>

</html>

Web Paper

Uploaded by

Copyright:

Available Formats

Web Paper

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Paper

Uploaded by

Copyright:

Available Formats

Part a

<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">

<img src="img.jpeg" style="height: 100%; width: 100%;"/>

<h5>OCTOBER 18TH 2015</h5>

<span>Registration is now closed. Thank</span>

<span>you to everyone who contributed.</span>

<span class="input-group-addon"><i class="fa fa-phone"></span>

<input type="text" class="form-control">

<button class="btn btn-success">Register</button>

<span class="input-group-addon"><i class="fa fa-envelope"></span>

<input type="text" class="form-control">

<span class="input-group-addon"><i class="fa fa-envelope"></span>

<input type="text" class="form-control">

<span class="input-group-addon"><i class="fa fa-envelope"></span>

<input type="text" class="form-control">

<span class="input-group-addon"><i class="fa fa-envelope"></span>

<input type="text" class="form-control">

<span class="input-group-addon"><i class="fa fa-envelope"></span>

<input type="text" class="form-control">

<span class="input-group-addon"><i class="fa fa-envelope"></span>

<input type="text" class="form-control">

<span class="input-group-addon"><i class="fa fa-envelope"></span>

<input type="text" class="form-control">

<button class="btn btn-success">Register</button>

<html id="html" class="no-js" lang="nb-NO">

window.tvaksjonenTimeStampAtStartup = new Date();

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta charset="UTF-8" />

<link rel="icon" type="image/x-icon" href="favicon.ico" />

<link rel="stylesheet" href="assets/v32/css/main.min.css" media="only screen"/>

<!-- <link rel="stylesheet" href="/assets/v32/css/enhanced.min.css" media="only screen and (min-

--><link href="https://rainforest.arkivert.no/opensearch.xml" rel="search" title="Søk"

<link rel="icon" type="image/x-icon" href="favicon.ico" />

i[r] = i[r] || function() {

(i[r].q = i[r].q || []).push(arguments)

}, i[r].l = 1 * new Date();

})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-11427662-49', 'auto');

<div id="mapView" class="view show" style="background: url('./assets/download.png'); background-

<div id="guardianOverlay" class="name-overlay">

<h3 class="label">Protected by</h3>

<button id="bliSkogvokter">Become a protector</button>

<div id="userOverlay" class="name-overlay">

<h3 class="label">Protected by</h3>

<button id="fbShare" class="fb-share">Recruit more protectors</button>

<div id="introOverlay" class="name-overlay">

<h3 class="label">Protected by</h3>

<div id="introTexts" class="intro-texts">

<p>We need 100 000 volunteers to protect this area.</p>

<p>Become a rainforest protector.</p>

<p>Become a volunteer<br>on October 18th.</p>

<div class="counter-label">Protectors so far</div>

<a href="http://blimed.no/tv-aksjonen-2015/" class="counter-link" target="_blank">Read more

<div id="panoramaView" class="view draggable">

<button class="close-panorama">Back to map</button>