Commit c3902bb3 authored by Simen Moen Storvik's avatar Simen Moen Storvik
Browse files

Adds SU2/

parent 7243f4f6
<!doctype html>
<html>
<head>
<!-- Kanseller initiell skalering p sm enheter -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsiv Design</title>
<style type="text/css">
/* Frst definerer vi standard CSS */
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
header {
height: 180px;
margin-bottom: 5px;
}
article {
width: 600px;
float: left;
background: #f8f8f8;
margin-bottom: 5px;
}
aside {
width: 300px;
float: right;
background: #f0efef;
margin-bottom: 5px;
}
footer {
clear: both;
}
#pagewrap, header, article, aside, footer {
border: solid 1px #ccc;
}
/* Her kommer det responsive: */
/* hvis bredde er 980px eller mindre */
@media (min-width: 701px) and (max-width: 980px) {
#pagewrap {
width: 94%;
}
article {
width: 65%;
}
aside {
width: 30%;
}
}
/* hvis bredde er 700px eller mindre */
@media (min-width: 481px) and (max-width: 700px) {
article {
width: auto;
float: none;
}
aside {
width: auto;
float: none;
}
}
/* hvis bredde er 480px eller mindre */
@media (max-width: 480px) {
header {
height: auto;
}
h1 {
font-size: 24px;
}
aside {
display: none;
}
}
</style>
</head>
<body>
<div id="pagewrap">
<header id="header">
<h1>Responsiv Design</h1>
</header>
<article id="content">
<h2>Innhold</h2>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</article>
<aside id="sidebar">
<h3>Sidebar</h3>
<p>text</p>
<p>text</p>
</aside>
<footer id="footer">
<h4>Footer</h4>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#">Side 1</a></li>
<li><a href="#">Side 2</a></li>
<li><a href="#">Side 3</a></li>
<li><a href="#">Side 4</a></li>
</ul>
<p>Dette er et eksempel p en menyside</p>
</body>
</html>
\ No newline at end of file
ul {
float: left;
width: 100%;
padding: 0px;
margin: 0px;
list-style-type: none;
}
li {
float: left;
border: 1px solid black;
padding: 8px;
background-color: blue;
margin: 2px;
}
li:hover {
background-color: darkblue;
}
a {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="eksempel1b.css">
</head>
<body>
<ul>
<li><a href="#">Side 1</a></li>
<li><a href="#">Side 2</a></li>
<li><a href="#">Side 3</a></li>
<li><a href="#">Side 4</a></li>
</ul>
<p>Dette er et eksempel p en menyside</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="eksempel1b.css">
</head>
<body>
<ul>
<li><a href="#">Side 1</a></li>
<li><a href="#">Side 2</a></li>
<li><a href="#">Side 3</a></li>
<li><a href="#">Side 4</a></li>
</ul>
<p>Dette er et eksempel p en menyside</p>
<p>Under er en vanlig punktliste</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
</body>
</html>
.meny {
float: left;
width: 100%;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.menyelement {
float: left;
border: 1px solid black;
padding: 8px;
background-color: blue;
margin: 2px;
}
.menyelement:hover {
background-color: darkblue;
}
a {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="eksempel1d.css">
</head>
<body>
<ul class=meny>
<li class=menyelement><a href="#">Side 1</a></li>
<li class=menyelement><a href="#">Side 2</a></li>
<li class=menyelement><a href="#">Side 3</a></li>
<li class=menyelement><a href="#">Side 4</a></li>
</ul>
<p>Dette er et eksempel p en menyside</p>
<p>Under er en vanlig punktliste</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Canvas-eksempel</title>
</head>
<body>
<canvas id="lerret" width="300" height="250" style="border:2px solid #000000;">
Nettleseren din st&oslash;tter ikke canvas-taggen i HTML5.
</canvas>
<script>
// Finn elementet
var c=document.getElementById("lerret");
// Lag tegneobjekt
var ctx=c.getContext("2d");
// Tegn rdt rektangel
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
// Lag gradient
var gradient=ctx.createRadialGradient(200,150,100,0,0,200);
gradient.addColorStop("0","red");
gradient.addColorStop("0.5","green");
gradient.addColorStop("1.0","blue");
// Knytt objektet til gradienten og tegn
ctx.fillStyle=gradient;
ctx.arc(200,150,100,0,2*Math.PI);
ctx.fill();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Nettsiden min</title>
<style>
p, h1 {
color : #FF6666;
background-color: yellow;
}
img {
border: 1px solid black;
padding: 10px;
}
#content {
position: relative;
border: 1px dotted black;
width: 80%;
min-width: 200px;
max-width:800px;
margin: auto;
}
header {
border: 2px solid red;
}
.kolonne {
border: 2px solid green;
float: left;
width: 200px;
}
#favoritter {
position: relative;
left: 2px;
top: 2px;
}
.clear {clear: both;}
</style>
</head>
<body>
<div id="content">
<header>
<h1>Velkommen til nettsiden min!</h1>
</header>
<div id="om_meg" class="kolonne">
<p>Her er et bilde av meg:</p>
<img src="bildeavmeg.jpg" height="150" />
</div>
<div id="min_hobby" class="kolonne">
<h2>Min hobby</h2>
<p>Min store hobby er &aring; samle p&aring; frimerker. <br/> Les mer om frimerker
<a href="http://no.wikipedia.org/wiki/Frimerke">her</a>.
</p>
</div>
<div id="favoritter" class="kolonne">
<h3>Mine favorittfrimerker</h3>
<ol id="bindersliste">
<li>Det r&oslash;de frimerket</li>
<li>Det rosa frimerket</li>
</ol>
</div>
<div class="clear"></div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<style>
.side {
width: 80%;
height: 200px;
border: 2px solid black;
}
.boks {
background-color: lightgray;
width: 100px;
padding: 5px;
border: 2px solid black;
float: right;
margin: 2px;
}
</style>
</head>
<body>
<div class="side">
<div class="boks">1</div>
<div class="boks">2</div>
<div class="boks">3</div>
<div class="boks">4</div>
</div>
</body>
</html>
<html>
<head>
<title>Mitt frste JavaScript</title>
</head>
<body>
<script language="javascript">
alert('<p>En liten test</p>');
</script>
</body>
</html>
<project>
<modelVersion>4.0.0</modelVersion>
<name>klient3</name>
<groupId>SU2</groupId>
<artifactId>klient3</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<repositories>
</repositories>
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.ws.rs</groupId>
<artifactId>javax.ws.rs-api</artifactId>
<version>2.0.1</version>
</dependency>
<dependency>
<groupId>org.glassfish.jersey.containers</groupId>
<artifactId>jersey-container-servlet</artifactId>
<version>2.25.1</version>
</dependency>
<dependency>
<groupId>org.glassfish.jersey.core</groupId>
<artifactId>jersey-server</artifactId>
<version>2.25.1</version>
</dependency>
<dependency>
<groupId>org.glassfish.jersey.core</groupId>
<artifactId>jersey-client</artifactId>
<version>2.25.1</version>
</dependency>
<dependency>
<groupId>org.glassfish.jersey.media</groupId>
<artifactId>jersey-media-json-jackson</artifactId>
<version>2.25.1</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
</plugin>
<plugin>
<groupId>org.jacoco</groupId>
<artifactId>jacoco-maven-plugin</artifactId>
<version>0.7.9</version>
<executions>
<execution>
<goals>
<goal>prepare-agent</goal>
</goals>
</execution>
<execution>
<id>report</id>
<phase>test</phase>
<goals>
<goal>report</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
package minpakke;
/**
* @author nilstes
*/
public class DB {
public static String find(String searchString) {
if(searchString.equalsIgnoreCase("finn")) {
return "Finn Finsen";
} else {
return "Fant ingenting";
}
}
}
package minpakke;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
/**
* @author nilstes
*/
@Path("/search/")
public class SearchService {
@GET
@Path("/{query}")
@Produces(MediaType.TEXT_PLAIN)
public String findSomething(@PathParam("query") String query) {
return DB.find(query);
}
}
package minpakke;
/**
* @author nilstes
*/
public class TemperatureSeries {
private String name;
private double[] data;
public TemperatureSeries() {
}
public TemperatureSeries(String name, double[] data) {
this.name = name;
this.data = data;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double[] getData() {
return data;
}
public void setData(double[] data) {
this.data = data;
}
}
package minpakke;
import java.util.ArrayList;
import java.util.List;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
/**
* @author nilstes
*/
@Path("/temperatures/")
public class TemperatureService {
@GET
@Produces(MediaType.APPLICATION_JSON)
public List<TemperatureSeries> getTemperatures() {
List<TemperatureSeries> temp = new ArrayList<TemperatureSeries>();
temp.add(new TemperatureSeries("Trondheim siste 12 mnd", new double[] {
13.8, 11.0, 5.9, 2.5, 2.5, -2.3, 3.7, 3.4, 5.7, 9.5, 12.0, 19.1}));
temp.add(new TemperatureSeries("Trondheim Normalt", new double[] {
12.5, 9.0, 5.5, 0.5, -2.0, -3.0, -2.5, 0.0, 3.0, 9.0, 12.0, 13.0}));
return temp;
}
}
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Restful Web Application</display-name>
<servlet>
<servlet-name>jersey-serlvet</servlet-name>
<servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
<init-param>
<param-name>jersey.config.server.provider.packages</param-name>
<param-value>minpakke</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>jersey-serlvet</servlet-name>
<url-pattern>/rest/*</url-pattern>
</servlet-mapping>
</web-app>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Eksempel 1</title>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#myid").click(function(){
alert("Hei!");
});
});
</script>
</head>
<body>
<div id="myid">Hei</div>
</body>
</html>