Commit af67c20e authored by Freddy's avatar Freddy

Initial commit

parents
bg.jpg

232 KB

<?php
if (getallheaders()['X-Forwarded-Proto'] == "http") {
header("Location: https://".$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']);
}
file_put_contents("../log.txt", date("d.m.Y - H:i") . " - " . getallheaders()['X-Forwarded-For'] . " - " . getallheaders()['user-agent'] . "\n", FILE_APPEND);
?>
<!DOCTYPE html>
<html>
<head>
<title>Hey, mach mit!</title>
<meta name="description" content="Wikipedia fr Jugendliche">
<meta name="author" content="Freddy2001">
<!-- and coded with love... -->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Noto+Serif|Lato:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.0.js"></script>
</head>
<body>
<div id="background"></div>
<div id="navigation">
<div id="logo">Wikipedia fr Jugendliche</div>
<div id="navi">
<span id="navpoint">Startseite</span>
<span class="navstop"></span>
<span id="navpoint">Unterseite</span>
<span class="navstop"></span>
<span id="navpoint">Unterseite</span>
</div>
</div>
<div id="navibackground"></div>
<div id="bigimage">
<div id="bigimageblur">
<div id="text">
<h1>Hey, mach mit!</h1>
<h3>Neues Musikalbum drauen? Neuer Fuballspieler in der Bundesliga? Neuer Asteroid entdeckt? Neue Spielekonsole verffentlicht?<br />
Endlich gibt es einen Platz, wo du diese Informationen sammeln und an andere weitergeben kannst.<br />
Erstelle einen Artikel zu einem Thema, das dich wirklich interessiert. </h3>
</div><a href="#content2">
<div class="scrollcontent2" id="tellmemore">Erzhl mir mehr!</div>
<div class="scrollcontent2" id="arrow"></div></a>
<div id="imageattibution">DerHexer, Wikimedia Commons, CC-by-sa 4.0, <a href="https://commons.wikimedia.org/wiki/File:Jungwikipedianer-Treffen_2015_(DerHexer)_2015-06-06_01.jpg" target="_blank">Jungwikipedianer-Treffen 2015 (DerHexer)</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/legalcode" target="_blank">CC BY-SA 4.0</a> </div>
</div>
</div>
<div id="content2">
<div id="content2body">
<h1 class="ueberschrift">Was macht Wikipedia?</h1>
<div class="content">Wikipedia ist ein im Aufbau befindliches, frei zugngliches Online-Lexikon. Das Projekt wurde 2001 von Jimmy Wales gegrndet. Die deutschsprachige Version umfasst inzwischen mehr als zwei Millionen Artikel, welche von ehrenamtlichen und freiwilligen Autoren gepflegt werden. </div>
<h1 class="ueberschrift">Unsere Grundprinzipien</h1>
<div class="content">Unser Projekt ist frei von Wertung, Selbstdarstellung und persnliche Betrachtungen. Wir stehen fr frei zugngliches Wissen, welches die kommerzielle Nachnutzung erlaubt. Persnliche Angriffe, Herabwrdigungen und sonstige Vorhaben, die dem Projekt schaden, werden nicht toleriert und geahndet. </div>
<h1 class="ueberschrift">Wir brauchen Nachwuchs!</h1>
<div class="content">Wie oft hast du schon mithilfe der Wikipedia einen Vortrag fr die Schule vorbereitet? Was wre, wenn es irgendwann Wikipedia nicht mehr gbe? Wo bekommt man dann all diese Informationen her?<br />
<br />Fakt ist: Wir brauchen dringend Nachwuchs. Unsere aktiven Autoren werden immer weniger. Wer soll sich dann irgendwann um die Artikel kmmern?<br />
<br />Auch ist es eine unbestreitbare Tatsache, dass in der Wikipedia fr jeden was dabei ist. Auch du kannst einen Artikel schreiben. <b>So schwer ist das doch gar nicht.</b> Wie das geht und wo du Hilfe bekommst, erfhrst du bei den untenstehenden Link. </div>
<h1 class="ueberschrift"></h1>
<div class="content"></div>
<iframe id="youtube" width="1600" height="900" src="https://www.youtube-nocookie.com/embed/AcGdxuoVDJQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="footer">
Jungwikipedianer-Team 2016, <br />verantwortlich fr den Inhalt: <br />Namen hier...<br />(freddy2001@tools.wmflabs.org)
</div>
<script>
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var height = $(window).height();
var opacity=((scrollTop - height) / height + 1);
if(opacity>=1){
$('#navibackground').css({
'opacity': 1
});
$('#logo').css({
'opacity': 1
});
}else
{
$('#navibackground').css({
'opacity': opacity
});
$('#logo').css({
'opacity': opacity
});
}
});
$(document).ready(function(){
var youtubewidth = ($(window).width() / 100 * 80);
var youtubeheight = (youtubewidth / 16 * 9);
$('#youtube').css({
'height': youtubeheight
});
$('#youtube').css({
'width': youtubewidth
});
//** notice we are including jquery and the color plugin at
//** http://code.jquery.com/color/jquery.color-2.1.0.js
var scroll_pos = 0;
var animation_begin_pos = 0; //where you want the animation to begin
var animation_end_pos = $(window).height(); //where you want the animation to stop
var beginning_color = new $.Color( 'rgb(255,255,255)' );
var beginning_color_navi = new $.Color( 'rgb(255,255,255)' );
var ending_color = new $.Color( 'rgb(0,0,0)' ); ;
var ending_color_navi = new $.Color( 'rgb(19, 156, 128)' ); ;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) {
//we want to calculate the relevant transitional rgb value
var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos );
var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
var newRed_navi = beginning_color_navi.red() + ( ( ending_color_navi.red() - beginning_color_navi.red() ) * percentScrolled );
var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
var newGreen_navi = beginning_color_navi.green() + ( ( ending_color_navi.green() - beginning_color_navi.green() ) * percentScrolled );
var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
var newBlue_navi = beginning_color_navi.blue() + ( ( ending_color_navi.blue() - beginning_color_navi.blue() ) * percentScrolled );
var newColor = new $.Color( newRed, newGreen, newBlue );
var newColor_navi = new $.Color( newRed_navi, newGreen_navi, newBlue_navi );
//console.log( newColor.red(), newColor.green(), newColor.blue() );
$('#navi').animate({ color: newColor }, 0);
$('.navstop').css({ 'border-left-color' : newColor_navi }, 0);
} else if ( scroll_pos > animation_end_pos ) {
$('#navi').animate({ color: ending_color }, 0);
$('.navstop').animate({ color: ending_color_navi }, 0);
} else if ( scroll_pos < animation_begin_pos ) {
$('#navi').animate({ color: beginning_color }, 0);
$('.navstop').animate({ color: beginning_color_navi }, 0);
} else { }
});
});
</script>
</body>
</html>
body {
overflow-y: scroll;
height: 100%;
width: 100%;
margin:0;
}
#background {
width: 100%;
color: green;
background-color: lightgrey;
top: 0px;
left: 0px;
display: block;
position: fixed;
min-height: 100%;
z-index: -1;
}
#navigation {
height: 100px;
width: 100%;
z-index: 3;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#navibackground {
height: 100px;
width: 100%;
background-color: #E9E9E9;
z-index: 2;
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 0;
}
#logo {
position:relative;
top:1em;
height:100px;
left: 1em;
font-size: 40px;
line-height: 0;
font-family: Open Sans;
color: rgb(20, 204, 167);
font-weight: 700;
text-shadow: 0px 0px 5px lightgrey;
opacity: 0;
}
#navi {
position: absolute;
text-align: right;
right: 1em;
font-size: 20px;
top: 35px;
color:white;
}
#text {
vertical-align: middle;
text-align: center;
top:100px;
position:relative;
padding-bottom: 100px;
padding-top: 10vh;
box-sizing: border-box;
font-family: 'Linux Libertine';
color: white;
text-shadow: grey 0px 0px 25px;
}
#imageattibution{
font-size: small;
color: white;
text-shadow: 0px 0px 10px grey;
opacity: 0.8;
position: absolute;
bottom: 5px;
right: 0px;
margin-right: 10px;
text-decoration: none;
font-family: Open Sans;
z-index: 3;
}
#imageattibution a {
text-decoration: none;
color: #aeb7ff;
}
#text h1 {
font-variant: small-caps;
font-size: 500%;
line-height: 0;
}
#text h3 {
font-family: 'Lato';
/*font-family: 'Noto Serif';*/
padding-left: 10%;
padding-right: 10%;
}
.navstop {
/*border-left: 2px solid #f00;*/
width: 2px;
margin: 8px;
padding-top: 4px;
padding-bottom: 4px;
border-left: 2px solid #ffffff;
/* border-left: 2px solid #139c80;*/
}
#bigimageblur {
background-color:rgba(235, 240, 250, 0.35);
/*background-color: rgba(255,255,255,0.5);*/
height: 100vh;
}
#bigimage {
height: 100vh;
width: 100%;
position: relative;
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#tellmemore {
background-color: rgba(51, 102, 204,0.5);
text-align: center;
color: #fff;
letter-spacing: .1em;
text-decoration: none;
font-size: 20px;
line-height: 1;
font-family: Open Sans;
margin-left: -160px;
left: 50%;
width: 280px;
position: absolute;
bottom: 15vh;
text-shadow: 0px 0px 10px black;
border-radius: 10px;
font-weight: 700;
padding: 20px;
}
@-webkit-keyframes sdb04 {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
20% {
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
}
@keyframes sdb04 {
0% {
transform: rotate(-45deg) translate(0, 0);
}
20% {
transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
transform: rotate(-45deg) translate(0, 0);
}
}
#arrow {
position: absolute;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb04 2s infinite;
animation: sdb04 2s infinite;
box-sizing: border-box;
border-color: darkslateblue;
bottom: 8vh;
}
@font-face {
font-family: 'Linux Libertine'; /* bold */
src: url('LinLibertine_RB.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#content2body {
top: 100px;
position: relative;
padding-top: 1em;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
#content2 {
margin-bottom:250px;
}
.ueberschrift{
font-family: Linux Libertine;
font-size: 250%;
position: relative;
margin-bottom: 0.5em;
}
.content{
font-family: Open Sans;
font-size: large;
margin-bottom: 2em;
}
#footer {
position: relative;
bottom: 0px;
height: 100px;
left: 0px;
right: 0px;
background-color: #efefef;
padding-left: 10em;
color: rgb(19, 156, 128);
text-shadow: 0px 0px 5px lightgrey;
padding-right: 10em;
text-align: center;
font-family: Open Sans;
font-size: smaller;
padding-top: 30px;
}
@media only screen and (max-width: 600px) and (max-height:600px) {
#text h3 {
visibility: hidden;
}
}
@media only screen and (max-width: 825px){
#navi {
visibility: hidden;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment