XGamePos - LAN-Party CAG-SNS 2016
XGamePos - LAN-Party CAG-SNS 2016 -A collection of child games in iFrames
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<link rel="shortcut icon" type="image/x-icon" href="icons/fertig.ico">
<html>
<head>
<title>LAN-Party CAG-SNS 2016</title>
<style type="text/css">
.cover{font-weight:bold; color:silver; text-decoration:none;}
a:link { font-weight:bold; color:blue; text-decoration:none;
}
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }
h1:focus { background-color:red; }
h1:hover { background-color:silver; }
h1:active { background-color:green; }
#slider {
position: fixed;
height: 100%;
left: 0;
padding-top:10px;
border-left: 0;
border-radius: 20px;
left:0px;
width:90%;
background-color:white;
}
.xx{
position:fixed; top:45px; left:0px; width:25px; height:25px;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.message_body{
font-weight:bold;
color:silver;
text-decoration:none;
background-color:red;
text-color:gree;
}
.message-input {
color:red;
}
.highlight {
font-weight:bold;
color:silver;
text-decoration:none;
background-color:red;
text-color:green;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
border-top: 0;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}
.stickyf {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
border-top: 0;
}
#games {
margin-top:65px;
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}
#information {
margin-top:65px;
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}
.cat
{
text-align:center;
width:100%;
float:left;
}
.rahmen
{
margin:25px;
float:left;
margin-left:50px;
width:175px;
}
img
{
}
.icon{
height:92px;
width:92px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
.iconheader{
height:92px;
width:720px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
img:hover{
-moz-box-shadow: 0 0 15px 5px #fff;
-webkit-box-shadow: 0 0 5px 5px #fff;
box-shadow: 0 0 15px 5px #fff;
}
body
{
text-align:center;
background-color:black;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0;
minimum-scale=1.0; user-scalable=no;">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js">
</script>
</head>
<body>
<!-------------------------------------------------------------------------------------------------------------------------------->
<div class="toggle" style="width:100%;height:10000px;background-color:blue;">
<image class="" src="icons/sitzplan.jpg" style="width:70%;height:500px;background-color:blue;margin-top:80px"/>
</br>
<p><span style="color:red;font-size:150%;font-weight:bold">Ready To Go? YES -> Klick BIRD!</strong></span></p>
<onclick=<input class="" id="sss" class="sss"</input>
<img src="icons/bird.png" style="width:64px;height:64px"/>
</div>
<!--
<div class="toggle" style="width:100%;height:10000px;background-color:blue;">
<image class="" src="icons/sitzplan.jpg" style="width:70%;height:420px;background-color:blue;margin-top:112px"/>
<div class ="cover">Bitte Namen eingeben: </div>
<div class="asd">
<input type="text" size="60" id="ddd" style=""/>
<input class="" type="button" id="sss" class="sss" style="width:27px;height:27px;"></input>
</div>
</div>
-->
<div class="sticky" style="background-color:blue; font-weight:bold;z-index:100;">
<p><span style="color:red;font-size:200%">LAN-Party CAG-SNS 2016</strong></span></p>
</div>
<!-- * BEGINN Games ..... * -->
<div id="games">
<!--- Beginn Suchmaschinen für Kinder..... -->
<div id="cat">
<div class="rahmen">
<a href="http://www.internet-abc.de/kinder" target="lgame" >
<image class="lbutton icon" src="icons/internetabc.jpg"/>
<div class="desc" style="text-align:center;">Willkommen im</br>Internet-ABC</div>
</a>
</div>
<div class="rahmen">
<a href="http://www.fragfinn.de/" target="_blank" >
<image class="xlbutton icon" src="icons/fragFlyn.svg"/>
<div class="desc" style="text-align:center;">Suchmaschine</br>Frag den Fynn</div>
</a>
</div>
<div class="rahmen">
<a href="http://www.blinde-kuh.de/" target="lgame" >
<image class="lbutton icon" src="icons/bksearch-app.png"/>
<div class="desc" style="text-align:center;">Suchmaschine</br>Blinde Kuh</div>
</a>
</div>
</div>
<!-- ENDE Suchmaschinen für Kinder.....>
<!--- Beginn Spieleplattformen-->
<div id="cat">
<div class="rahmen">
<a href="https://www.internet-abc.de/kinder/spiel-spass/" target="lgame" >
<image class="lbutton icon" src="icons/navi1_7b_2x.png"/>
<div class="desc" style="text-align:center;">Internet-ABC</br>Spiele und mehr</div>
</a>
</div>
<div class="rahmen">
<a href="http://www.toggo.de/" target="lgame">
<image class="lbutton icon" src="icons/toggo-logo-standard-26-10110.png"/>
<div class="desc" style="text-align:center;">Toggo</br>Spieleplattform</div>
</a>
</div>
<div class="rahmen">
<a href="http://www.esa.int/esaKIDSde/index.html" target="lgame" >
<image class="lbutton icon" src="icons/KIDdeHome.jpg"/>
<div class="desc" style="text-align:center;">esa</br>Kids</div>
</a>
</div>
</div>
<!-- ENDE Spieleplattformen-->
<!--- Beginn WDR - Maus ..... -->
<div class="cat">
<div class="rahmen">
<a href="http://www.wdrmaus.de/" target="lgame" >
<image class="lbutton icon" src="icons/maus.png"/>
<div class="desc" style="text-align:center;">WDR Maus</div>
</a>
</div>
<div class="rahmen">
<a href="http://www.toniklix.de/maus.html" target="game" >
<image class="button icon" src="icons/Toni Klix Maus.jpg"/>
<div class="desc" style="text-align:center;">Maustraining</div>
</a>
</div>
<div class="rahmen">
<a href="http://www.toniklix.de/tastatur.html" target="lgame" >
<image class="lbutton icon" src="icons/Toni Klix Tastatur.jpg"/>
<div class="desc" style="text-align:center;">Tastaturtraining </div>
</a>
</div>
</div>
<!-- ENDE WDR - Maus -->
<!--- Beginn Spiele I..... -->
<div class="cat">
<div class="rahmen">
<a href="http://www.spielaffe.de" target="lgame" >
<image class="lbutton icon" src="icons/spielaffe.jpg"/>
<div class="desc" style="text-align:center;">Spielaffe </div>
</a>
</div>
<div class="rahmen">
<a href="http://www.wdrmaus.de/spielen/spiele/elfmeterschiessen.php5" target="lgame" >
<image class="lbutton icon" src="icons/bigteaser_fussball_em2016.jpg"/>
<div class="desc" style="text-align:center;">Elfmeter EM 2016 </div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/portalgame/271/271500/22349_renegade-racing-german.swf" target="game" >
<image class="button icon" src="icons/340917_317792_re.jpg"/>
<div class="desc" style="text-align:center;">Verrücktes Stuntrennen</div>
</a>
</div>
</div>
<!-- ENDE Spiele I -->
<!--- Beginn Spiele II..... -->
<div class="cat">
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/15/15613/09616700014000568808248/spongebob_road_trip_loader.swf" target="game" >
<image class="button icon" src="icons/big_game_Oh_Snap_alternativ.jpg"/>
<div class="desc" style="text-align:center;">Sponge Bob</div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/13/13045/robots.swf" target="game" >
<image class="button icon" src="icons/339611_gorobots-thumb.jpg"/>
<div class="desc" style="text-align:center;">Roboter Logic</div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/2/2524/6158_agyptenpuzzle.swf" target="game" >
<image class="button icon" src="icons/16896_agyptenpuzzle.jpg"/>
<div class="desc" style="text-align:center;">Ägypten Puzzle</div>
</a>
</div>
</div>
<!-- ENDE Spiele II -->
<!--- Beginn Spiele III..... -->
<div class="cat">
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/0/288/pckaputt.swf" target="game" >
<image class="button icon" src="icons/14660_pckaputt.jpg"/>
<div class="desc" style="text-align:center;">PC Hämmern</div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/15/15600/footballheadspl.swf" target="game" >
<image class="button icon" src="icons/354015_footballheadspl.jpg"/>
<div class="desc" style="text-align:center;">Kickende Köpfe</div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/14/14128/spl_2013_kaiser.swf" target="game" >
<image class="button icon" src="icons/320353_spl_2013_kaiser.jpg"/>
<div class="desc" style="text-align:center;">Kickende Köpfe </br> Meisterliga</div>
</a>
</div>
</div>
<!-- ENDE Spiele III -->
<!-- Anfang Spiele IV -->
<div class="cat">
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/9/9704/heavytruck.swf" target="game" >
<image class="button icon" src="icons/85088_heavytruck.jpg "/>
<div class="desc" style="text-align:center;">Monster Truck</div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/12/12776/attiabano.swf" target="game" >
<image class="button icon" src="icons/286027_attiabano.jpg"/>
<div class="desc" style="text-align:center;">Attia Schminken</div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/5/5105/katzenmadchenanziehen.swf" target="game" >
<image class="button icon" src="icons/19477_katzenmadchenanziehen.jpg"/>
<div class="desc" style="text-align:center;">Katzenmädchen anziehen</div>
</a>
</div>
</div>
<!-- ENDE Spiele IV -->
<!-- Anfang Spiele V -->
<div class="cat">
<div class="rahmen">
<a href="http://www8.agame.com/mirror/flash/m/mane_pony_dressup.swf" target="game" >
<image class="button icon" src="icons/fragFlyn.svg"/>
<div class="desc" style="text-align:center;">Pony-Ankleidespiel</div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/1/1313/katzevshund.swf" target="game" >
<image class="button icon" src="icons/15685_katzevshund.jpg"/>
<div class="desc" style="text-align:center;">Katze gegen Hund</div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/portalgame/267/267840/19726_homeslackinggermany_secure.swf" target="game" >
<image class="button icon" src="icons/home-slacking.jpg"/>
<div class="desc" style="text-align:center;">Faul sein - pass auf!</div>
</a>
</div>
</div>
<!-- ENDE Spiele V -->
<!-- Anfang Spiele VII -->
<div class="cat">
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/11/11247/glowspace.swf" target="game" >
<image class="button icon" src="icons/248239_glowspace.jpg"/>
<div class="desc" style="text-align:center;">Der Weltraum - Erlebnis </div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/6/6744/spacetruck.swf" target="game" >
<image class="button icon" src="icons/64086_spacetruck.jpg"/>
<div class="desc" style="text-align:center;">Weltraum - Truck</div>
</a>
</div>
<!--- BEGINN MP4 Grusi..... -->
<div class="rahmen">
<a href="filme/astronaut.mp4" target="vgame" >
<image class="vbutton icon" src="icons/GrisuDerAstronaut.JPG"/>
<div class="desc" style="text-align:center;">Grisu - Der Astronaut</div>
</a>
</div>
<!-- ENDE MP4 Grusi.....-->
</div>
<!-- ENDE Spiele VII -->
<!-- * ************************************************************ * -->
<!-- * Ab hier Kommentare und Beispiele * -->
<!-- * Ein div calss=cat entspricht hier einer Zeile * -->
<!-- * Ein div class=rahmen einem Eintrag (Spiel, Link oder Video) * -->
<!-- * Es folgen jeweils ein Beispiel fuer Links, Videos und Spiele * -->
<!-- * ************************************************************ * -->
<!-- * Beginn class=cat Zeile mit drei Eintraegen ..... * -->
<!-- * Beginn class=cat Zeile mit drei Eintraegen Filme ..... * -->
<div class="cat">
<!--- BEGINN MP4 Nilpferd 01..... -->
<div class="rahmen">
<a href="filme/Nilpferd.mp4" target="vgame" >
<image class="vbutton icon" src="icons/nilpferd.jpg"/>
<div class="desc" style="text-align:center;">Ich glaub' mein</br>Nilpferd singt</div>
</a>
</div>
<!-- ENDE MP4 Nilpferd 01.....-->
<!--- BEGINN MP4 moodvideo 01..... -->
<div class="rahmen">
<a href="filme/erinnerungen.mp4" target="vgame" >
<image class="vbutton icon" src="icons/moodvideo.jpg"/>
<div class="desc" style="text-align:center;">Erinnerung</br>Unsere Schule</div>
</a>
</div>
<!--- ENDE MP4 moodvideo 01..... -->
<div class="rahmen">
<a href="http://www.wdrmaus.de/kaeptnblaubaerseite/bloed_und_floet/Bloed_und_Floet_Meeresspiegel.swf" target="vgame" >
<image class="vbutton icon" src="icons/heinbloed.jpg"/>
<div class="desc" style="text-align:center;">Hein</br>...</div>
</a>
</div>
<!-- * ENDE class=cat Zeile mit drei Eintraegen Filme ..... * -->
</div>
<!-- * ENDE Games ..... * -->
<!-- * Ende class=cat Zeile mit drei Eintraegen Filme ..... * -->
<!--- ENDE Zeile mit drei Eintraegen ..... div calss="cat" -->
<!-- * ENDE des Beispiels * -->
<!-- * ******************************************************** * -->
<!-- * ***** TEMPLATE ****** * -->
<!-- * ***** ALLES WAS GROSS IST ERSETZEN ****** * -->
<!-- * ******************************************************** * -->
<!-- * Beginn class=cat Zeile mit drei Eintraegen ..... * -->
<!---
<div class="cat">
<div class="rahmen">
<a href="LINK_ZUR_SEITE" target="lgame" >
<image class="lbutton icon" src="LINK_ZUM_ICON"/>
<div class="desc" style="text-align:center;">BESCHREIBUNG</div>
</a>
</div>
<div class="rahmen">
<a href="LINK_ZUM_FILM" target="vgame" >
<image class="vbutton icon" src="LINK_ZUM_ICON"/>
<div class="desc" style="text-align:center;">BESCHREIBUNG</div>
</a>
</div>
<div class="rahmen">
<a href="LINK_ZUR_SEITE" target="game">
<image class="button icon" src="LINK_ZUM_ICON"/>
<div class="desc" style="text-align:center;">BESCHREIBUNG</div>
<!-- Fuer neue Sternchen name=NAME_ZUM_STERNCHEN durch z.B. name=chk1002 tauschen an 3 Stellen 3x
<iframe style="height:50px; width:100%;" id="pageNAME_ZUM_STERNCHEN" name="page" src="http://websynthesis.org/tools/stars/iframe.php?quantity=5&color=000000&img1=&img2=&name=NAME_ZUM_STERNCHEN" frameborder="0" scrolling="no"></iframe><script type="text/javascript" src="http://websynthesis.org/tools/stars/js.php?id=NAME_ZUM_STERNCHEN"></script>
</a>
</div>
-->
<!--- ENDE Zeile mit drei Eintraegen ..... div calss="cat" -->
<!-- * ******************************************************** * -->
<!-- * ******************************************************** * -->
<!-- * ******************************************************** * -->
<!-- Dialog HTML Frame Mit Navigation -->
<div id="ldialog" title="Navigiere...
<a href='javascript:history.forward()'>Vor </a>
<a href='javascript:history.back()'>Zurück</a>">
<iframe id="gameframe" src="" name="lgame" style="" width="100%" height="100%"></iframe>
</div>
<!-- ENDE Dialog HTML Frame Mit Navigation -->
<!-- Dialog Spiel -->
<div id="dialog" title="Und los geht es...">
<iframe id="gameframe" src="" name="game" style="" width="100%" height="100%"></iframe>
</div>
<!-- Dialog Video -->
<div id="vdialog" title="Und los geht es...">
<iframe id="gameframe" src="" name="vgame" style="" width="100%" height="100%"></iframe>
</div>
<!-- * ******************************************************** * -->
<!-- * ******************************************************** * -->
<!-- * ******************************************************** * -->
</div><!-- ENDE DIV GAMES -->
<script>
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function(title) {
if (!this.options.title ) {
title.html(" ");
} else {
title.html(this.options.title);
}
}
}));
<!-- -->
<!-- -->
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
<!-- -->
$(document).ready(
toggleFullScreen();
function(){
$('#menu').click(
function(){
$('#slider').toggle('slide',{direction:'left'},1000);
$( ".book" ).slideUp( "slow", function() {
// Animation complete.
});
});
});
<!-- -->
<!-- -->
<!-- -->
<!-- -->
document.addEventListener("#vdialog", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
</script>
</body>
<script>
var adWidth = $(window).width();
var adHeight = $(window).height();
if (window.SpeechSynthesisUtterance === undefined) {
// Not supported
} else {
// Read my text
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'Google Deutsch';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hallo';
msg.lang = 'de-DE';
msg.onend = function(e) {
console.log('Finished in ' + event.elapsedTime + ' seconds.');
};
speechSynthesis.speak(msg);
}
$(function() {
$("#sss").on("click", function() {
if (window.SpeechSynthesisUtterance === undefined) {
// Not supported
} else {
var msgs = $( "#ddd" ).val();
msg.text = 'Willkommen zur Lan Party '+msgs;
speechSynthesis.speak(msg);
}
$(".toggle").toggle( "explode",{pieces: 16 }, 800);
<!-- -->
});
$("#dialog").dialog({
autoOpen: false,
});
$(".button").on("click", function() {
var wWidth = $(window).width();
var dWidth = wWidth * 0.98;
var wHeight = $(window).height();
var dHeight = wHeight * 0.98;
$("#dialog").dialog("open");
$("#dialog").dialog({ position: 'left;top' });
$("#dialog").dialog({width: dWidth,height:dHeight});
});
$("#ldialog").dialog({
autoOpen: false
});
$(".lbutton").on("click", function() {
var wWidth = $(window).width();
var dWidth = wWidth * 0.98;
var wHeight = $(window).height();
var dHeight = wHeight * 0.98;
$("#ldialog").dialog("open");
$("#ldialog").dialog({ position: 'left;top' });
$("#ldialog").dialog({width: dWidth,height:dHeight});
});
$("#vdialog").dialog({
autoOpen: false,
show: 'explode',
hide:'explode',
closeOnEscape: true
});
$(".vbutton").on("click", function() {
var wWidth = $(window).width();
var vdWidth = wWidth * 0.98;
var wHeight = $(window).height();
var vdHeight = wHeight * 0.95;
$.blockUI({ message: "", css: { width: '275px' } });
$("#vdialog").dialog("open");
$("#vdialog").dialog({ position: 'left;top' });
$("#vdialog").dialog({width: vdWidth,height:vdHeight});
$("#vdialog").dialog({
animate:'slow',
show: 'explode',
closeOnEscape: true,
close: function(event, ui) {
$("#img").toggleClass( 'highlight');
$.unblockUI();
}
});
});
$( ".sticky" ).click(function() {
$( ".book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
});
<!-- -->
</script>
</html>
<!--
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<source src="movie.MP4" type="video/MP4">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
-->
Kommentare
Kommentar veröffentlichen