Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Damn You Niels A

  • Loading branch information...
commit d7154fd9d9be49277883745a28480d2c5025d900 1 parent 1f05e96
@karstenda authored
View
2  war/WEB-INF/.gitignore
@@ -1,2 +0,0 @@
-deploy/*
-classes/*
View
24 war/WEB-INF/web.xml
@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE web-app
- PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
- "http://java.sun.com/dtd/web-app_2_3.dtd">
-
-<web-app>
-
- <!-- Servlets -->
- <servlet>
- <servlet-name>greetServlet</servlet-name>
- <servlet-class>delta.site.server.GreetingServiceImpl</servlet-class>
- </servlet>
-
- <servlet-mapping>
- <servlet-name>greetServlet</servlet-name>
- <url-pattern>/deltasite/greet</url-pattern>
- </servlet-mapping>
-
- <!-- Default page to serve -->
- <welcome-file-list>
- <welcome-file>DeltaSite.html</welcome-file>
- </welcome-file-list>
-
-</web-app>
View
2  war/delta.html
@@ -76,7 +76,7 @@
onmouseout="this.src='images/button_standpunten.png'">
</a>
- <a href="#movie" class="menubutton">
+ <a href="movie.html" class="menubutton">
<img src="images/button_promo.png"
onmouseover="this.src='images/button_promo_hover.png'"
onmouseout="this.src='images/button_promo.png'">
View
438 war/index.html
@@ -1,438 +0,0 @@
-<!doctype html>
-
-<!--
-
- Welcome to the light side of the source, young padawan.
-
- One step closer to learn something interesting you are...
-
- ____
- _.' : `._
- .-.'`. ; .'`.-.
- __ / : ___\ ; /___ ; \ __
- ,'_ ""--.:__;".-.";: :".-.":__;.--"" _`,
- :' `.t""--.. '<@.`;_ ',@:` ..--""j.' `;
- `:-.._J '-.-'L__ `-- ' L_..-;'
- "-.__ ; .-" "-. : __.-"
- L ' /.------.\ ' J
- "-. "--" .-"
- __.l"-:_JL_;-";.__
- .-j/'.; ;"""" / .'\"-.
- .' /:`. "-.: .-" .'; `.
- .-" / ; "-. "-..-" .-" : "-.
- .+"-. : : "-.__.-" ;-._ \
- ; \ `.; ; : : "+. ;
- : ; ; ; : ; : \:
- ; : ; : ;: ; :
- : \ ; : ; : ; / ::
- ; ; : ; : ; : ;:
- : : ; : ; : : ; : ;
- ;\ : ; : ; ; ; ;
- : `."-; : ; : ; / ;
- ; -: ; : ; : .-" :
- :\ \ : ; : \.-" :
- ;`. \ ; : ;.'_..-- / ;
- : "-. "-: ; :/." .' :
- \ \ : ;/ __ :
- \ .-`.\ /t-"" ":-+. :
- `. .-" `l __/ /`. : ; ; \ ;
- \ .-" .-"-.-" .' .'j \ / ;/
- \ / .-" /. .'.' ;_:' ;
- :-""-.`./-.' / `.___.'
- \ `t ._ /
- "-.t-._:'
-
--->
-
-<!--
-
- So you'd like to know how to use impress.js?
-
- You've made the first, very important step -- you're reading the source code.
- And that's how impress.js presentations are built -- with HTML and CSS code.
-
- Believe me, you need quite decent HTML and CSS skills to be able to use impress.js effectively.
- And what is even more important, you need to be a designer, too, because there are no default
- styles for impress.js presentations, there is no default or automatic layout for them.
-
- You need to design and build it by hand.
-
- So...
-
- Would you still like to know how to use impress.js?
-
--->
-
-<html lang="en">
-<head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=1024" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <title>impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title>
-
- <meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com." />
- <meta name="author" content="Bartek Szopka" />
-
- <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
-
- <!--
-
- Impress.js doesn't depend on any external stylesheet. Script adds all styles it needs for
- presentation to work.
-
- This style below contains styles only for demo presentation. Browse it to see how impress.js
- classes are used to style presentation steps, or how to apply fallback styles, but I don't want
- you to use them directly in your presentation.
-
- Be creative, build your own. We don't really want all impress.js presentations to look the same,
- do we?
-
- When creating your own presentation get rid of this file. Start from scratch, it's fun!
-
- -->
- <link href="css/impress-demo.css" rel="stylesheet" />
-
- <link rel="shortcut icon" href="favicon.png" />
- <link rel="apple-touch-icon" href="apple-touch-icon.png" />
-</head>
-
-<!--
-
- Body element is used by impress.js to set some useful class names, that will allow you to detect
- the support and state of the presentation in CSS or other scripts.
-
- First very useful class name is `impress-not-supported`. This class means, that browser doesn't
- support features required by impress.js, so you should apply some fallback styles in your CSS.
- It's not necessary to add it manually on this element. If the script detects that browser is not
- good enough it will add this class, but keeping it in HTML means that users without JavaScript
- will also get fallback styles.
-
- When impress.js script detects that browser supports all required features, this class name will
- be removed.
-
- The class name on body element also depends on currently active presentation step. More details about
- it can be found later, when `hint` element is being described.
-
--->
-<body class="impress-not-supported">
-
-<!--
- For example this fallback message is only visible when there is `impress-not-supported` class on body.
--->
-<div class="fallback-message">
- <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
- <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
-</div>
-
-<!--
-
- Now that's the core element used by impress.js.
-
- That's the wrapper for your presentation steps. In this element all the impress.js magic happens.
- It doesn't have to be a `<div>`. Only `id` is important here as that's how the script find it.
-
- You probably won't need it now, but there are some configuration options that can be set on this element.
-
- To change the duration of the transition between slides use `data-transition-duration="2000"` giving it
- a number of ms. It defaults to 1000 (1s).
-
- You can also control the perspective with `data-perspective="500"` giving it a number of pixels.
- It defaults to 1000. You can set it to 0 if you don't want any 3D effects.
- If you are willing to change this value make sure you understand how CSS perspective works:
- https://developer.mozilla.org/en/CSS/perspective
-
- But as I said, you won't need it for now, so don't worry - there are some simple but interesing things
- right around the corner of this tag ;)
-
--->
-<div id="impress">
-
- <!--
-
- Here is where interesting thing start to happen.
-
- Each step of the presentation should be an element inside the `#impress` with a class name
- of `step`. These step elements are positioned, rotated and scaled by impress.js, and
- the 'camera' shows them on each step of the presentation.
-
- Positioning information is passed through data attributes.
-
- In the example below we only specify x and y position of the step element with `data-x="-1000"`
- and `data-y="-1500` attributes. This means that **the center** of the element (yes, the center)
- will be positioned in point x = -1000px and y = -1500px of the presentation 'canvas'.
-
- It will not be rotated or scaled.
-
- -->
- <div id="bored" class="step slide" data-x="-1000" data-y="-1500">
- <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
- </div>
-
- <!--
-
- The `id` attribute of the step element is used to identify it in the URL, but it's optional.
- If it is not defined, it will get a default value of `step-N` where N is a number of slide.
-
- So in the example below it'll be `step-2`.
-
- The hash part of the url when this step is active will be `#/step-2`.
-
- You can also use `#step-2` in a link, to point directly to this particular step.
-
- Please note, that while `#/step-2` (with slash) would also work in a link it's not recommended.
- Using classic `id`-based links like `#step-2` makes these links usable also in fallback mode.
-
- -->
- <div class="step slide" data-x="0" data-y="-1500">
- <q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q>
- </div>
-
- <div class="step slide" data-x="1000" data-y="-1500">
- <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
- </div>
-
- <!--
-
- This is an example of step element being scaled.
-
- Again, we use a `data-` attribute, this time it's `data-scale="4"`, so it means that this
- element will be 4 times larger than the others.
- From presentation and transitions point of view it means, that it will have to be scaled
- down (4 times) to make it back to it's correct size.
-
- -->
- <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
- <span class="try">then you should try</span>
- <h1>impress.js<sup>*</sup></h1>
- <span class="footnote"><sup>*</sup> no rhyme intended</span>
- </div>
-
- <!--
-
- This element introduces rotation.
-
- Notation shouldn't be a surprise. We use `data-rotate="90"` attribute, meaning that this
- element should be rotated by 90 degrees clockwise.
-
- -->
- <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
- <p>It's a <strong>presentation tool</strong> <br/>
- inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
- and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
- </div>
-
- <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
- <p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
- </div>
-
- <!--
-
- And now it gets really exiting! We move into third dimension!
-
- Along with `data-x` and `data-y`, you can define the position on third (Z) axis, with
- `data-z`. In the example below we use `data-z="-3000"` meaning that element should be
- positioned far away from us (by 3000px).
-
- -->
- <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
- <p>and <b>tiny</b> ideas</p>
- </div>
-
- <!--
-
- This step here doesn't introduce anything new when it comes to data attributes, but you
- should notice in the demo that some words of this text are being animated.
- It's a very basic CSS transition that is applied to the elements when this step element is
- reached.
-
- At the very beginning of the presentation all step elements are given the class of `future`.
- It means that they haven't been visited yet.
-
- When the presentation moves to given step `future` is changed to `present` class name.
- That's how animation on this step works - text moves when the step has `present` class.
-
- Finally when the step is left the `present` class is removed from the element and `past`
- class is added.
-
- So basically every step element has one of three classes: `future`, `present` and `past`.
- Only one current step has the `present` class.
-
- -->
- <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
- <p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p>
- </div>
-
- <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
- <p>the only <b>limit</b> is your <b class="imagination">imagination</b></p>
- </div>
-
- <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
- <p>want to know more?</p>
- <q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q>
- </div>
-
- <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
- <p>one more thing...</p>
- </div>
-
- <!--
-
- And the last one shows full power and flexibility of impress.js.
-
- You can not only position element in 3D, but also rotate it around any axis.
- So this one here will get rotated by -40 degrees (40 degrees anticlockwise) around X axis and
- 10 degrees (clockwise) around Y axis.
-
- You can of course rotate it around Z axis with `data-rotate-z` - it has exactly the same effect
- as `data-rotate` (these two are basically aliases).
-
- -->
- <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
- <p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
- <span class="footnote">* beat that, prezi ;)</span>
- </div>
-
- <!--
-
- So to make a summary of all the possible attributes used to position presentation steps, we have:
-
- * `data-x`, `data-y`, `data-z` -- they define the position of **the center** of step element on
- the canvas in pixels; their default value is 0;
- * `data-rotate-x`, `data-rotate-y`, 'data-rotate-z`, `data-rotate` -- they define the rotation of
- the element around given axis in degrees; their default value is 0; `data-rotate` and `data-rotate-z`
- are exactly the same;
- * `data-scale` -- defines the scale of step element; default value is 1
-
- These values are used by impress.js in CSS transformation functions, so for more information consult
- CSS transfrom docs: https://developer.mozilla.org/en/CSS/transform
-
- -->
- <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
- </div>
-
-</div>
-
-<!--
-
- Hint is not related to impress.js in any way.
-
- But it can show you how to use impress.js features in creative way.
-
- When the presentation step is shown (selected) its element gets the class of "active" and the body element
- gets the class based on active step id `impress-on-ID` (where ID is the step's id)... It may not be
- so clear because of all these "ids" in previous sentence, so for example when the first step (the one with
- the id of `bored`) is active, body element gets a class of `impress-on-bored`.
-
- This class is used by this hint below. Check CSS file to see how it's shown with delayed CSS animation when
- the first step of presentation is visible for a couple of seconds.
-
- ...
-
- And when it comes to this piece of JavaScript below ... kids, don't do this at home ;)
- It's just a quick and dirty workaround to get different hint text for touch devices.
- In a real world it should be at least placed in separate JS file ... and the touch content should be
- probably just hidden somewhere in HTML - not hard-coded in the script.
-
- Just sayin' ;)
-
--->
-<div class="hint">
- <p>Use a spacebar or arrow keys to navigate</p>
-</div>
-<script>
-if ("ontouchstart" in document.documentElement) {
- document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
-}
-</script>
-
-<!--
-
- Last, but not least.
-
- To make all described above really work, you need to include impress.js in the page.
- I strongly encourage to minify it first.
-
- In here I just include full source of the script to make it more readable.
-
- You also need to call a `impress().init()` function to initialize impress.js presentation.
- And you should do it in the end of your document. Not only because it's a good practice, but also
- because it should be done when the whole document is ready.
- Of course you can wrap it in any kind of "DOM ready" event, but I was too lazy to do so ;)
-
--->
-<script src="js/impress.js"></script>
-<script>impress().init();</script>
-
-<!--
-
- The `impress()` function also gives you access to the API that controls the presentation.
-
- Just store the result of the call:
-
- var api = impress();
-
- and you will get three functions you can call:
-
- `api.init()` - initializes the presentation,
- `api.next()` - moves to next step of the presentation,
- `api.prev()` - moves to previous step of the presentation,
- `api.goto( idx | id | element, [duration] )` - moves the presentation to the step given by its index number
- id or the DOM element; second parameter can be used to define duration of the transition in ms,
- but it's optional - if not provided default transition duration for the presentation will be used.
-
- You can also simply call `impress()` again to get the API, so `impress().next()` is also allowed.
- Don't worry, it wont initialize the presentation again.
-
- For some example uses of this API check the last part of the source of impress.js where the API
- is used in event handlers.
-
--->
-
-</body>
-</html>
-
-<!--
-
- Now you know more or less everything you need to build your first impress.js presentation, but before
- you start...
-
- Oh, you've already cloned the code from GitHub?
-
- You have it open in text editor?
-
- Stop right there!
-
- That's not how you create awesome presentations. This is only a code. Implementation of the idea that
- first needs to grow in your mind.
-
- So if you want to build great presentation take a pencil and piece of paper. And turn off the computer.
-
- Sketch, draw and write. Brainstorm your ideas on a paper. Try to build a mind-map of what you'd like
- to present. It will get you closer and closer to the layout you'll build later with impress.js.
-
- Get back to the code only when you have your presentation ready on a paper. It doesn't make sense to do
- it earlier, because you'll only waste your time fighting with positioning of useless points.
-
- If you think I'm crazy, please put your hands on a book called "Presentation Zen". It's all about
- creating awesome and engaging presentations.
-
- Think about it. 'Cause impress.js may not help you, if you have nothing interesting to say.
-
--->
-
-<!--
-
- Are you still reading this?
-
- For real?
-
- I'm impressed! Feel free to let me know that you got that far (I'm @bartaz on Twitter), 'cause I'd like
- to congratulate you personally :)
-
- But you don't have to do it now. Take my advice and take some time off. Make yourself a cup of coffee, tea,
- or anything you like to drink. And raise a glass for me ;)
-
- Cheers!
-
--->
-
View
62 war/index2.html
@@ -1,62 +0,0 @@
-<!doctype html>
-<!-- The DOCTYPE declaration above will set the -->
-<!-- browser's rendering engine into -->
-<!-- "Standards Mode". Replacing this declaration -->
-<!-- with a "Quirks Mode" doctype may lead to some -->
-<!-- differences in layout. -->
-
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-
- <!-- -->
- <!-- Consider inlining CSS to reduce the number of requested files -->
- <!-- -->
- <link type="text/css" rel="stylesheet" href="site_layout.css">
- <link type="text/css" rel="stylesheet" href="widget_layout.css">
-
-
- <!-- -->
- <!-- Any title is fine -->
- <!-- -->
- <title>Delta</title>
-
- <!-- -->
- <!-- This script loads your compiled module. -->
- <!-- If you add any GWT meta tags, they must -->
- <!-- be added before this line. -->
- <!-- -->
- <script type="text/javascript" language="javascript" src="deltasite/deltasite.nocache.js"></script>
- </head>
-
- <!-- -->
- <!-- The body can have arbitrary html, or -->
- <!-- you can leave the body empty if you want -->
- <!-- to create a completely dynamic UI. -->
- <!-- -->
- <body>
-
- <!-- OPTIONAL: include this if you want history support -->
- <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
-
- <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
- <noscript>
- <div style="width: 100%; height: 100%; background-color: #eedfcc; z-index: 100; position: absolute;">
- <div style="width: 22em; position: absolute; left: 50%; z-index: 101; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
- Your web browser must have JavaScript enabled
- in order for this website to display correctly.
- </div>
- </div>
- </noscript>
-
-
- <div id="header">
- <div id="headercontainer"></div>
- </div>
- <div id="content">
- <div id="contentcontainer"></div>
- </div>
-
-
- </body>
-</html>
View
76 war/movie.html
@@ -0,0 +1,76 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+
+<!-- Meta data. -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=1024" />
+
+<!-- Meta info. -->
+<title>Delta</title>
+<meta name="description"
+ content="Delta is a team coming up for election to run the VTK students association" />
+<meta name="author" content="Karsten Daemen" />
+
+<!-- Loading the stylesheets. -->
+<link type="text/css" rel="stylesheet" href="./css/custom.css" />
+<link type="text/css" rel="stylesheet" href="./css/impress-demo.css" />
+<link type="text/css" rel="stylesheet" href="./backupsite/backup.css" />
+
+<!-- Icons ... -->
+<link rel="shortcut icon" href="favicon.png" />
+<link rel="apple-touch-icon" href="apple-touch-icon.png" />
+
+</head>
+
+<body>
+
+ <div id="menu" class="menubar">
+
+ <div class="menubutton-container">
+
+ <a href="delta.html#/overview" class="menubutton"> <img
+ src="./images/button_overzicht.png"
+ onmouseover="this.src='./images/button_overzicht_hover.png'"
+ onmouseout="this.src='./images/button_overzicht.png'">
+ </a> <a href="delta.html#/activiOverview" class="menubutton"> <img
+ src="./images/button_activiteiten.png"
+ onmouseover="this.src='./images/button_activiteiten_hover.png'"
+ onmouseout="this.src='./images/button_activiteiten.png'">
+ </a> <a href="delta.html#/memberoverview" class="menubutton"> <img
+ src="./images/button_ploeg.png"
+ onmouseover="this.src='./images/button_ploeg_hover.png'"
+ onmouseout="this.src='./images/button_ploeg.png'">
+ </a> <a href="delta.html#/standpuntenoverzicht" class="menubutton"> <img
+ src="./images/button_standpunten.png"
+ onmouseover="this.src='./images/button_standpunten_hover.png'"
+ onmouseout="this.src='./images/button_standpunten.png'">
+ </a> <a href="movie.html" class="menubutton"> <img
+ src="./images/button_promo.png"
+ onmouseover="this.src='./images/button_promo_hover.png'"
+ onmouseout="this.src='./images/button_promo.png'">
+ </a> <a href="delta.html#/SponsorsOverview" class="menubutton"> <img
+ src="./images/button_sponsor.png"
+ onmouseover="this.src='./images/button_sponsor_hover.png'"
+ onmouseout="this.src='./images/button_sponsor.png'">
+ </a>
+
+ </div>
+
+
+ </div>
+
+ <div class="backupcontent">
+
+ <div id="movie" class="step movieslide slide lonelystep"
+ data-x="20000" data-y="0">
+ <div id="moviecontainer">
+ <iframe width="640" height="480"
+ src="http://www.youtube.com/embed/lQ3HV0lRMOo" frameborder="0"
+ allowfullscreen></iframe>
+ </div>
+ </div>
+
+ </div>
+</body>
Please sign in to comment.
Something went wrong with that request. Please try again.