Meine Codepens ,My Codepens ,Eigenes Kontexmenue noch nicht fertig gestellt

kontextmenue.php

Quell Code

<!-- HTML -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
 
<ul class='custom-menu'>
  <span id="zoom"><span id="zoomin">-</span><span id="zoommitte">Zoom</span><span id="zoomout">+</span></span>
  <li id="first">Zeige Element an</li>
  <li id="second">Zeige den Quelltext</li>
  <li id="third">Drehe das Element</li>
    <li id="four">Lösche das Elemente</li> 
  <li id="five">Seiten Quelltext</li>
  <li id="six">Neues Fenster</li>
  
</ul>
<div id="sss"><span>X</span><h1>Anleitung</h1>
  Mit der Maus macht man einen Rechtsklick und ann kommt mein Kontextmenü.
  <br><br>
 1.Zeige Elemente heißt,wenn man mit der Maus durch Fenster geht werden die Unteren Elemente unter der Maus mit einen Roten Border gekenzeichnet.<br><br>
  2.Zeige den Quelltext. Das heißt das man genau von den Element was gerade rot gekenzeichnet ist den Quelltext angezeigt bekommt.<br><br>
  3.Drhe Das Element. Hiermit kann man das gekennzeichnete Element drehen um 180 grad.<br><br>
  4.Lösche das Element. Mit der Funktion kann man das Element aus den DOM Baum löschen.<br><br>
  5.Zeige Quelltext der Seite sagt ja alles.<br><br>
  6 Neues Fenster Öffnen heist das ein neues Fenster geöffnet wird was leer ist.
  
  <br><br> So jetzt viel Spaß beim spielen.<br>
  
  
  
  
  </div>









































<!DOCTYPE html> <html lang="de">
<head>
<meta charset="utf-8">
<title>Soforthilfe bei Html,Css,und Javascript probleme im Chat und Forum 24 Stunden</title>
<link rel="Shortcut Icon" href="/hauptseite/favicon.png" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="author" content="Sebastian koester">
<meta name="publisher" content="Sebastian Koester">
<meta name="copyright" content="Sebastian Koester">
<meta name="description" content="Soforthilfe-Chat,Soforthilfe-Forum bei html,css,javascript und php probleme,Anleitungen,Generatoren,und vieles  mehr.Sie suchen ein Screipt.-Wir helfen Ihnen bein Programmieren.Sofort im Chat und Kostenlos">
<meta name="keywords" content="Javascript,Soforthilfe-chat,soforthilfe-forum,hilfe bei webseiten programierung,kostenlose sofort hilfe ,Userscript,Javascripte, Userscripte,Tutorials,Generatoren,Php, Sql, MySql,Basti1012,Sebastian1012,Pennerhack,Pennerhackisback,Pennergame, Scripte">
<meta name="page-type" content="Private Homepage">
<meta name="audience" content="Alle, Anfaenger, Experten, Fortgeschrittene, Jugendliche, Profis, Schueler, Studenten">
<meta name="robots" content="index, follow">
<meta name="DC.Description" content="sofort hilfe im chat und forum bei html,css,php und javascript problemen,Anleitungen,Generatoren,und vieles  mehr">
<meta name="DC.Language" content="de">
<meta name="title" content="basti1012">
<meta name="revisit-after" content="after 20 days">
<meta name="date" content="2018-06-4">
<meta name="page-topic" content="scripte">
<meta name="generator" content="http://sebastian1012.bplaced.net/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="hauptseite/uhr.css">
<link rel="stylesheet" type="text/css" href="hauptseite/navigation.css">
<link rel="stylesheet" type="text/css" href="hauptseite/hauptseitencss.css">
<link rel="stylesheet" type="text/css" href="hauptseite/email.css">
<!-- <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/hammer.min.js"></script> -->
<script src="hauptseite/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_cMR3YBDntYYS4WlVyqSNFXWKI89k0q0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.2.3/css-doodle.js"></script>
 
 


 
<style>

</style>
</head>
<body>  
  <header id="pageheader" class="pageheader">    
  <img src="http://www.minden-fewo.de/fileadmin/img/2013_layout2_1.jpg" alt="Logo ESN">   
  <section class="section1">       
    <h2>Basti1012</h2>   
    <p></p>    
    <p>Über mich</p>   
  </section>  
  <div class="section2" id="section2" title="Mit einen klick ,Laß dir die Zeit Ansagen"> 
    <div id="haupt">
      <div class="led">   
        <div class="board">   
          <div id="led">    
            <div id="time-hh" class="block-digital num-0"></div>    
            <div id="time-h"  class="block-digital num-0"></div>		
            <div id="time-h-colon" class="block-digital colon"></div>	
            <div id="time-mm" class="block-digital num-0"></div>
            <div id="time-m" class="block-digital num-0"></div>	
            <div id="time-m-colon" class="block-digital colon"></div>		
            <div id="time-ss" class="block-digital num-0"></div>	
            <div id="time-s" class="block-digital num-0"></div>		
            <div id="time-padding" class="block-padding"></div>  
          </div> 
        </div>
      </div>
    </div>
  </div>  
  <div id="allmail">   
    <div id="mail" > 
      <div class="top bg-white"></div>    
      <div class="right bg-white"></div> 	
      <div class="bottom bg-white">
        <p id="big">Email</p>
      </div>
      <div class="left bg-white"></div> 	
      <div class="letter">
        <span id="letterXX">X</span>      
        <label>Name/Nickname *</label>
        <br> 
        <input name="vorname" id="vorname" type="text" class="inputField" value=""><br>    
        <label>Email/Telefon *</label><br>          
        <input id="name" name="name" type="text" class="inputField"> <br>     
        <label>Verbesserungen ,Vorschläge ,Anregungen ,Wünsche an Seitenbetreiber</label><br>      
        <textarea id="info" class="inputField"></textarea><br>       
        <input id="senden" type="button" class="button" value="Abschicken">
        <br>  Keine Pflichtfelder        </div>   
        <div id="btn"></div>   
      </div>   
      <div  class="bg-overlay"></div>    
      <a id="bewertungsstern" href="/homepagebasti1012/bewertunsScript/bewerte_mich_neu.php">
      <img src="/hauptseite/bewertungsstern.png" alt="gehe zu den bewertungen"><p>   
6           

     </p></a><a href="http://sebastian1012.bplaced.net/homepagebasti1012/chat/eigener_chat/index.php">
     <img id="chatbild" src="/hauptseite/chat.png" alt="Chat betretten">
    </a>
    <a id="chatgo" href="/soforthilfe-forum/index.php">
    <img src="/hauptseite/forum.png" alt="zum Forum"></a>  
   </div>
  </header> 
  <nav id="navigation" class="navigation">      
<div class="containermenu" id="main" role="main">     
<ul class="menu">         
<li><a href="/">Home</a>    
<ul class="submenu">     
<li><a data-link="/hauptseite/html/start.php">Über mich</a></li> 
<li class="link"><a data-link="/hauptseite/html/webminden.php">Webcams Minden</a></li>
<li class="link link3"><a data-link="/hauptseite/html2/wetter1.php">Mein Wetter</a></li>
<li><a href="http://sebastian1012.bplaced.net/homepagebasti1012/gastebuch/gastebuch.php">Gästebuch</a></li>
    <li><a href="lite-version/index.php">Forum</a></li>
    <li><a href="/homepagebasti1012/chat/eigener_chat/index.php">Chat</a></li>
<li class="link link3"><a data-link="/hauptseite/suche/suche.php">Seite durchsuchen</a></li>
    <li><a href="upload.php">File Upload</a></li>    

    
</ul> </li>  
<li><a href="#s1">Tutorials/Info</a>     
<ul class="submenu">    
<li class="link link3"><a data-link="/hauptseite/html/speedtest.php">Speedtest</a></li>   
<li class="link link3"><a data-link="homepagebasti1012/besucherzahler/durchsuche_alles.php">------</a></li>    
<li class="link link3"><a data-link="/hauptseite/html/repo.php">@Media queries</a></li>  
<li class="link link3"><a data-link="/hauptseite/html/hintergrund.php">Background Animation</a></li>  
<li class="link link3"><a data-link="/hauptseite/html2/hintergrund1.php">Canvas Background</a></li>
<li class="link link3"><a data-link="/hauptseite/html2/hintergrund2.php">Canvas Background 2</a></li>
<li class="link link3"><a data-link="/hauptseite/html2/hintergrund3.php">Canvas Background 3</a></li>
<li class="link link3"><a data-link="/hauptseite/html2/hintergrund4.php">Canvas Background 4</a></li>

<li class="link link3"><a data-link="/hauptseite/html2/spirale.php">ANDERE Spirale</a></li>

</ul> 
</li>
<li class="active"><a href="#s2">Api/Frameworks</a>
<ul class="submenu">  
<li class="link"><a data-link="/hauptseite/html/wiealt.php">Wie alt bist du </a></li> 
<li class="link"><a data-link="/hauptseite/html/wohnort.php">Wohnort</a></li>   
<li class="link"><a data-link="/hauptseite/html/bmi.php">Bmi Rechner</a></li>
<li class="link"><a data-link="/hauptseite/html/einblend.php">Bilder einblenden</a></li>
<li class="link"><a data-link="/hauptseite/html/cssdoddle.php">Css Doddle</a></li>
    <li><a href="#">Basti1012</a></li>  
    <li><a href="#">Laufbild</a></li>   
    <li><a href="#">TopMenü</a></li>   
    <li><a href="#">Submenu h</a></li>    
    
<li class="link"><a data-link="/hauptseite/html/flextutorial.php">Tutorial Flex-Boxen</a></li>
<li class="link" ><a data-link="/hauptseite/html/geometrisch.php">Geometrische Figuren</a></li>
<li class="link" ><a data-link="/hauptseite/html/loader.php">Css Loader</a></li>     
<li class="link" ><a href="/hauptseite/html/parallax.php">Demo Parallax</a></li>  
<li class="link" ><a data-link="/hauptseite/html/iframespiele.php">Iframe Spiele</a></li>   
<li class="link" ><a data-link="/hauptseite/html/maus.php">Bekloppte Maus</a></li>  
<li class="link" ><a data-link="/hauptseite/html/canvasuhr.php">Canvas Uhr</a></li>  
<li class="link" ><a data-link="/hauptseite/html/jsuhr.php">Javascript Uhr</a></li>       
     <li class="link" ><a data-link="/hauptseite/html/steigenelinks.php">---------</a></li>    
<li class="link" ><a data-link="/hauptseite/html/farbmischer.php">Farbmischer</a></li> 
<li class="link" ><a data-link="/hauptseite/html/herz.php">Css Herz Anleitung</a></li>  
<li class="link" ><a data-link="/hauptseite/html/radiobuttons.php">Css Radio buttons</a></li>  
<li class="link" ><a data-link="/hauptseite/html/checkbox.php">Css Checkboxen</a></li> 
<li class="link" ><a data-link="/hauptseite/html/wurfelgenerator.php">Quadrat Generator</a></li> 
<li class="link" ><a data-link="/hauptseite/html/modal.php">Modals</a></li>  
</ul>              
</li> 
    
    
    
    
    
    
    
    
    
<li><a href="#">Scripte</a> 
    <ul class="submenu">
    <li><a href="http://userscripts-mirror.org/users/99502/scripts">userscripts-mirror(Pennerhack)</a></li>
    <li><a href="http://userscripts-mirror.org/users/88959/scripts">userscripts-mirror(basti1012)</a></li>
    <li><a href="https://greasyfork.org/pt-BR/users/150605-pennerhackisback"> greasyfork</a></li>  
    <li class="link"><a href="http://retinaspritegenerator.com/">Srite Generator</a></li>
    <li class="link"><a href="https://werner-zenk.de/tools/css_forms.php">Css-Formen-Generator</a></li>
    <li class="link" ><a href="https://www.base64encode.org/">Base64 Encoder</a></li>
    <li class="link"><a href="https://coveloping.com/tools/css-box-shadow-generator">Box-Shadow Generator</a></li>
    <li class="link"><a href="http://www.selfhtml5.org/html5-diagramme/saeulendiagramm/html5-saeulendiagramm.php">Säulen Generator</a></li>
    <li class="link"><a href="http://www.colorzilla.com/gradient-editor/">Gradient Generator</a></li>
    <li class="link" ><a href="http://www.cssportal.com/css-tooltip-generator/">Tooltip Generator</a></li>  
<li class="link" ><a data-link="/hauptseite/html/qrcode.php">Qr Code Generator</a></li>  
<li class="link" ><a data-link="/hauptseite/html/kamera1.php">Kameraspiel</a></li> 
    <li><a href="kamera2.html">Kameraspiel2</a></li>
<li class="link" ><a data-link="/hauptseite/html2/polizei.php">Polizei Licht</a></li>  
<li class="link" ><a data-link="/hauptseite/html/pola.php">Polaroid Bilder</a></li>
<li class="link" ><a data-link="/hauptseite/html/dasweisich.php">Das Weiss ich</a></li> 

    <li><a href="wetter2.html">Wetter2</a></li> 
    <li><a href="wetter3.html">Wetter3</a></li> 
<li><a data-link="/hauptseite/html/piano.php">Piano</a></li> 
<li><a data-link="/hauptseite/html/crazy.php">Crazy</a></li> 
<li class="link link3"><a data-link="/hauptseite/html/silvester.php">Bis Silvester</a></li>  
    <li class="link link3"><a href="pdftest.html">pdf Test</a></li>  
    <li class="link link3"><a href="speditions_test.html">Spedition Test</a></li> 
    <li class="link link3"><a href="xxxxxxxxxmuell_und_test">Papierkorp</a></li>
<li class="link"><a data-link="/hauptseite/html/dreieckgenerator.php">Dreieck Generator</a></li>
    <li class="link"><a href="testyourcode.html">Teste deinen  Code</a></li>
<li class="link" ><a data-link="/hauptseite/html/playcss.php">Css Spielerei</a></li>
<li class="link" ><a data-link="/hauptseite/html/boxshadow.php">Shadow-Generator</a></li>
<li class="link" ><a data-link="/hauptseite/html/fontgenerator.php">Reponsive Font Generator</a>
<li class="link" ><a data-link="/hauptseite/html/mp3player.php">Mp3 Player</a>
<li class="link" ><a data-link="/hauptseite/html/digitaluhr1.php">Css Digitaluhr</a></li> 
<li class="link" ><a data-link="/hauptseite/html2/digitaluhr.php"> Digitaluhr 2</a></li>  
<li class="link" ><a data-link="/hauptseite/html2/digitaluhr1.php"> Digitaluhr 1</a></li>  

<li class="link" ><a data-link="/hauptseite/html/neon.php">Neon Licht</a></li> 
<li class="link" ><a data-link="/hauptseite/html2/buchstabenpixel.php">Buchstaben Pixel auslesen</a></li>  
</ul>   
</li>  




<li><a href="#">Spiele</a>   
    <ul class="submenu"> <li><a href="spiel1.html">Denkspiel</a></li>
    <li><a href="spiel2.html">Jump and run</a></li> 
    <li><a href="spiel3.html">Snake 2</a></li> 
    <li><a href="spiel4.html">Geschicklichkeit</a></li> 
    <li><a href="spiel5.html">W&ouml;rter raten</a></li> 
    <li><a href="spiel6.html">Geschicklichkeit 2</a></li> 
    <li><a href="spiel7.html">Hangman</a></li> 
    <li><a href="spiel8.html">Jump and run 2</a></li> 
    <li><a href="spiel9.html">Reaktion/Schnelligkeit</a></li> 
    <li><a href="spiel10.html">Geschicklichkeit</a></li>   
    <li><a href="#">Submenu a</a></li>  
<li class="link" ><a data-link="/hauptseite/spiele/pacman.php">-----</a></li>   
<li class="link" ><a data-link="/hauptseite/spiele/memory.php">Memory</a></li>    
<li class="link" ><a data-link="/hauptseite/spiele/schissen.php">Shooting</a></li>    
<li class="link" ><a data-link="/hauptseite/spiele/broken.php">Broken</a></li>   
<li class="link" ><a data-link="/hauptseite/spiele/tipping.php">Tipping</a></li>  
<li class="link" ><a data-link="/hauptseite/spiele/biliard.php">Biliard</a></li> 
<li class="link" ><a data-link="/hauptseite/spiele/tasten.php">Tasten</a></li> 
</ul>  
</li>
</ul> 
</div>  
</nav>      <main id="content" class="content"> 

    <section  class="contentinhalt">     
      <div class="bodyaus" id="body1">
<div class="window">
  <div class="logo">
    <p class="top1">Am Laden</p>

    <p class="bottom1">Es geht sofort weiter...</p>
  </div>
  <div class="container1">
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
  </div>
</div>
</div>
    <section id="seiteninhalt_laden">
    <div id="aktuell"><h2>Aktuelles Pennergame Script</h2>
          <div id="slider"></div>
    <p>Da Pennergame neue Updats gemacht hat laufen mehrere Scripte nicht mehr.<p>
    <p>Ich habe jetzt angefangen die Scripte zu erneuern und werde euch schnellsmöglich hier bescheid geben</p>
    <h3>Schon bearbeitete Scripte</h3>
    <ul>


<li>17.05.2018 => <a href"http://sebastian1012.bplaced.net/soforthilfe-forum/showthread.php?tid=15">Highscoresuche 2018</a></li>


<li>12.6.2018 => <a href="https://greasyfork.org/de/scripts/33309-pennergame-losebot-mit-detalierter-auflistung">Losebot</a> => <a href="https://greasyfork.org/scripts/33309-pennergame-losebot-mit-detalierter-auflistung/code/Pennergame%20LoseBot%20mit%20Detalierter%20auflistung.user.js">Instalation</a></li>
    
    <li>25.5.2018 => <a href="https://greasyfork.org/de/scripts/33435-topmenü-mit-vielen-exra-funktionen-pennergame">Topmenü</a></li>
</ul>
<p>Fals noch Fehler gefunden werden bitte bescheid geben.</p>
    <p>Im<a href="http://sebastian1012.bplaced.net/homepagebasti1012/chat/eigener_chat/index.php">Chat</a>,
    <a href="http://sebastian1012.bplaced.net/homepagebasti1012/gastebuch/gastebuch.php">Gästebuch</a>
    oder Shotbox => könnt ihr euch immer bei mir melden<br>
     Mfg Basti</p>
    </div>
    
  <div class="section3" id="bau"><h5>Sorry diese Seite ist noch im Bau</h5> ab 1.juli ist der Soforthilfe Chat
    <br> voll Funktionstüchtig.Nutzen Sie solange das Forum,da bekommen Sie fast genau so schnell hilfe.<br>
    <a href="http://sebastian1012.bplaced.net/soforthilfe-forum/index.php">Soforthilfe-Forum</a>
    <a class="chataa" href="http://sebastian1012.bplaced.net/homepagebasti1012/chat/eigener_chat/index.php">Soforthilfe Chat</a>
    Hilfe bei HTML/CSS/ Javascript/Mysql und PHP.<br>Suche noch Programmierer die gerne anderen Leuten in Chat und Forum helfen wollen.Bitte bei mir melden .</div>  


       </section> 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </section>   
  <aside class="infos">    
    <h2>Shoutbox</h2>     
    <article id="unternavigation" class="unternavigation">
      <iframe id="frameshoutbox" src="http://sebastian1012.bplaced.net/homepagebasti1012/shoutbox/demo.php"></iframe> 
      <br><table id='besucherzahler'><tr><td>Besucherzähler</td></tr><tr><td>1415</td></tr></table>      <br>
      <br> 
      <div id="onliste">
        <h2>Hier Bin ich gerade<br>On/Offline</h2> 
        <iframe src="http://sebastian1012.bplaced.net/homepagebasti1012/bin_ich_online/Forum_online_abfrage.php" width="280" height="380" style="overflow:hidden;border:none"></iframe>
      </div>   
    </article>  
   </aside>   
 </main>    
    
 <script>  
    window.cookieconsent_options = {"message":"Diese Seite speichert Cookies,gerade im Forum,oder bei andere aktivitäten mit Eingabefelder.Ich schreibe diesen Text auch nur weil das Gesetz es so verlangt.Wir werden keine Cookies oder andere Daten weitergeben. <br>Mit der Nutzung unserer Dienste erkl?ren Sie sich damit einverstanden, dass wir Cookies verwenden.","dismiss":"OK","learnMore":"Mehr Infos","link":"https://www.wetter.de/cms/datenschutzerklaerung-101243.html?c=caa4&i=19","theme":"dark-bottom"};
 </script>
 <script src="//cdn.static-fra.de/lib/vendor/silktide/cookieconsent2/1.0.9/build/cookieconsent.min.js"></script>
 <script>    
 $(document).ready(function () {    
        $(document).on("click", "a.cc_btn_accept_all", function() {    
            ga('send', 'event', 'CookieConsent', 'ClickAccept', $(this).attr('href'));  
            }); 
            });
 </script>
 <script>
            var led = document.getElementById('led'),   
            els = led.childNodes,  uid=0, size=15, w=0, h=0, row=0, col=0,    arr_lights=[];
            var hh = document.getElementById('time-hh'),     
            hx = document.getElementById('time-h'),   
            mm = document.getElementById('time-mm'),
            mx = document.getElementById('time-m'),	 
            ss = document.getElementById('time-ss'),
            sx = document.getElementById('time-s');
            for(var k=0, len=els.length; k<len; k++){ 
                if(els[k].nodeType!=1)    continue;
                w = parseInt(els[k].clientWidth); 
                h	= parseInt(els[k].clientHeight); 
                row	= parseInt(h/size);	
                col	= parseInt(w/size); 
                var t, l, sum=0; 
                for(var i=0; i<row; i++){   	
                    for(var j=0; j<col; j++){   
                    uid++;    
                    t = size*i;   
                    l = size*j;    
        arr_lights.push( '<div uid="'+uid+'" id="l-'+uid+'" class="light row-'+i+' col-'+j+'" style="top:'+t+'px;left:'+l+'px"></div>');  
                    }    
                }  
                els[k].innerHTML = arr_lights.join(""); 
                arr_lights=[];}setInterval(function(){
                        var now = new Date(),	 
                        time_hh = parseInt(now.getHours()),	 
                        time_mm = parseInt(now.getMinutes()),	
                        time_ss = parseInt(now.getSeconds());
                        hh.className = "block-digital num-"+parseInt(time_hh/10);
                        hx.className = "block-digital num-"+parseInt(time_hh%10);
                        mm.className = "block-digital num-"+parseInt(time_mm/10);
                        mx.className = "block-digital num-"+parseInt(time_mm%10);
                        ss.className = "block-digital num-"+parseInt(time_ss/10);
                        sx.className = "block-digital num-"+parseInt(time_ss%10);
                }, 1000);
  </script>
  <script> 
                        update();function update() {  
                        let time = new Date(),    
                        hr = time.getHours(),	
                        min = time.getMinutes(),
                        sec = time.getSeconds();
                        if (hr < 10)		hr = "0" + hr;	if (min < 10)		min = "0" + min;	if (sec < 10)	
                        sec = "0" + sec;	let timeStr = `${hr}${min}${sec}`,
                        digits = document.querySelectorAll(".digit"),	
                        digitArr = [];
                        for (let d in digits) {	
                        d = +d;	
                        if (d < digits.length) {		
                            digitArr[d] = timeStr.substr(d,1);	
                            digits[d].className = "digit _" + digitArr[d];	
                            }
                        }
                        setTimeout(function(){
                            update()},1000);
                            
                        }
  </script>
  <script>
                        var open = false;
                        $('#btn').click(function(){ 
                                $('.letter').addClass('letter');  
                                if(open){    
                                }else{    
                                    $('#mail').removeClass('mailsmall');  
                                    $('#mail').addClass('mailbig');		
                                    $('.top').addClass('open');	
                                    $('#btn').css('opacity','0');
                                    $('.bg-overlay').css('opacity','1','z-index','3');	
                                    setTimeout(function(){				
                                        $('.letter').addClass('out');				
                                        setTimeout(function(){						   
                                            $('.letter').css('zIndex','1914');	
                                        },1000);	
                                            open = true;	
                                   },200);	
                               }    
                                            $('#senden,#letterXX').click(function(){    
                                                $('#mail').removeClass('mailbig');    
                                                $('#mail').addClass('mailsmall'); 
                                                $('.letter').addClass('in');
                                            setTimeout(function(){	
                                                    setTimeout(function(){	
                                                    $('.top').removeClass('open');
                                                    },600);	
                                             },100);	 
                                                    $('#btn').css('opacity','91'); 	  
                                                    $('.bg-overlay').css('opacity','0','z-index','-3');	  
                                                    $('.letter').css('zIndex','-1');
                                                    open = false;   
                                                    name=$('#name').val();   
                                                    vorname=$('#vorname').val();  
                                                    info=$('#info').val();
                                                    $.ajax({   
                                                        type: "POST",        url: "http://sebastian1012.bplaced.net/homepagebasti1012/kontakt_mit_basti/kontakt_mit_basti1012.php",    
                                                        data: {name: name,info:info,vorname:vorname},  
                                                        success: function(data){   
                                                            }     
                                                            });
                                                            
                                            });
                                            
                        });  
 
  </script>  
                 
  <style>
 #copy{
 float:right;
 margin-top:10px;
   font-size:20px;
 flex:2;
 }
 #datenschutz{
display:flex;
flex:1;
 }
 #datenschutz:hover{
 color:red;
 background:yellow;
 cursor:pointer;
 }

footer {
  background-color:#123456;

  width:97vw;
  height:50px;
  border:2px solid black;
  display:flex;
  font-size:20px;
  color:white;
}

footer > div{
  display:flex;
  flex:6;
  margin-top:10px;
  text-align:center;
} 


 
#infolinks {
  display: flex;
  text-align: center;
}

#infolinks a {
  margin-left: 5vw;
  margin-right: 5vw;
}

#infolinks a:hover {
  color: red;
  cursor: help;
}

 


#hintergrund{
  margin: -10px;
  padding: 10px;
  display: none;
  position: fixed;
  top:0px;
  left:0px;
  height: 100vh;
  width: 100vw;
  background:black;
  opacity: 0.8;
  text-align:center;
  z-index: 1000;
  border:10px solid black;
}





#boxinfo {
  position: fixed;
  display: none;
  height: 70vh;
  width: 70vw;
  top: 15vh;
  left: 15vw;
  text-align: center;
  background:black;
  border: 2px solid red;
  color: white;
  overflow: auto;
  z-index:1001;
 
}



#close {
  display: block;
  position:fixed;
  top: 0px;
  left: 0px;
  width: 5vw;
  height: 5vw;
  Background: red;
  color: white;
  font-weight: 900;
  font-size: 4vw;
  z-index: 1002;
  cursor: pointer;
}
#dateninfo{
display:none;
margin:0;
padding:10px;
position:fixed;
z-index:1001;
top:0;
left:0;
width:calc(100% - 40px);
height:calc(100% - 40px);
overflow:auto;
background:rgba(0,0,0,0.7);
color:white;
font-size:18px;
border:10px solid red;
}
#dateninfo #xx1{
width:25px;
height:30px;
background:red;
color:white;
font-weight:bolder;
font-size:25px;
cursor:pointer;
left:0;
top:0;
position:fixed;
}
</style>



<footer id="pagefooter" class="pagefooter">  
<div>
    <a   onmouseover="mouseon();" onmouseout="mouseoff();" class="back-to-top">Nach oben</a>   

    <div id="hintergrund">  
    <div id="close">X</div></div>  
    <div id="boxinfo"></div>
    <div id="infolinks">
    <a id="impressum">Impressum</a></div>   

    
        <div id="server"></div>

</div>
<div id="datenschutz">Datenschutz</div>
<div id="dateninfo">
<div id="xx1">X</div>
<h1>Datenschutz</h1>

<p>Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p>
<p>Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder E-Mail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben.</p>
<p>Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.</p>
<p><strong>Cookies</strong></p>
<p>Die Internetseiten verwenden teilweise so genannte Cookies. Cookies richten auf Ihrem Rechner keinen Schaden an und enthalten keine Viren. Cookies dienen dazu, unser Angebot nutzerfreundlicher, effektiver und sicherer zu machen. Cookies sind kleine Textdateien, die auf Ihrem Rechner abgelegt werden und die Ihr Browser speichert.</p>
<p>Die meisten der von uns verwendeten Cookies sind so genannte „Session-Cookies“. Sie werden nach Ende Ihres Besuchs automatisch gelöscht. Andere Cookies bleiben auf Ihrem Endgerät gespeichert, bis Sie diese löschen. Diese Cookies ermöglichen es uns, Ihren Browser beim nächsten Besuch wiederzuerkennen.</p>
<p>Sie können Ihren Browser so einstellen, dass Sie über das Setzen von Cookies informiert werden und Cookies nur im Einzelfall erlauben, die Annahme von Cookies für bestimmte Fälle oder generell ausschließen sowie das automatische Löschen der Cookies beim Schließen des Browser aktivieren. Bei der Deaktivierung von Cookies kann die Funktionalität dieser Website eingeschränkt sein.</p>
<p><strong>Server-Log-Files</strong></p>
<p>Der Provider der Seiten erhebt und speichert automatisch Informationen in so genannten Server-Log Files, die Ihr Browser automatisch an uns übermittelt. Dies sind:</p>
<ul>
<li>Browsertyp/ Browserversion</li>
<li>verwendetes Betriebssystem</li>
<li>Referrer URL</li>
<li>Hostname des zugreifenden Rechners</li>
<li>Uhrzeit der Serveranfrage</li>
</ul>
<p>Diese Daten sind nicht bestimmten Personen zuordenbar. Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen. Wir behalten uns vor, diese Daten nachträglich zu prüfen, wenn uns konkrete Anhaltspunkte für eine rechtswidrige Nutzung bekannt werden.</p>
<p><strong>Kontaktformular</strong></p>
<p>Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p>
 <p><strong>Datenschutzerklärung für die Nutzung von Facebook-Plugins<br />
(Like-Button)</strong></p>
<p>Auf unseren Seiten sind Plugins des sozialen Netzwerks Facebook, Anbieter Facebook Inc., 1 Hacker Way, Menlo Park, California 94025, USA, integriert. Die Facebook-Plugins erkennen Sie an dem Facebook-Logo oder dem „Like-Button“ („Gefällt mir“) auf unserer Seite. Eine Übersicht über die Facebook-Plugins finden Sie hier: <a href="http://developers.facebook.com/docs/plugins/" rel="nofollow" class="external">http://developers.facebook.com/docs/plugins/</a>.</p>
<p>Wenn Sie unsere Seiten besuchen, wird über das Plugin eine direkte Verbindung zwischen Ihrem Browser und dem Facebook-Server hergestellt. Facebook erhält dadurch die Information, dass Sie mit Ihrer IP-Adresse unsere Seite besucht haben. Wenn Sie den Facebook „Like-Button“ anklicken während Sie in Ihrem Facebook-Account eingeloggt sind, können Sie die Inhalte unserer Seiten auf Ihrem Facebook-Profil verlinken. Dadurch kann Facebook den Besuch unserer Seiten Ihrem Benutzerkonto zuordnen. Wir weisen darauf hin, dass wir als Anbieter der Seiten keine Kenntnis vom Inhalt der übermittelten Daten sowie deren Nutzung durch Facebook erhalten. Weitere Informationen hierzu finden Sie in der Datenschutzerklärung von Facebook unter <a href="http://de-de.facebook.com/policy.php" rel="nofollow" class="broken_link external">http://de-de.facebook.com/policy.php</a>.</p>
<p>Wenn Sie nicht wünschen, dass Facebook den Besuch unserer Seiten Ihrem Facebook- Nutzerkonto zuordnen kann, loggen Sie sich bitte aus Ihrem Facebook-Benutzerkonto aus.</p>
<p><strong>Auskunft, Löschung, Sperrung</strong></p>
<p>Sie haben jederzeit das Recht auf unentgeltliche Auskunft über Ihre gespeicherten personenbezogenen Daten, deren Herkunft und Empfänger und den Zweck der Datenverarbeitung sowie ein Recht auf Berichtigung, Sperrung oder Löschung dieser Daten. Hierzu sowie zu weiteren Fragen zum Thema personenbezogene Daten können Sie sich jederzeit unter der im Impressum angegebenen Adresse an uns wenden.</p>
<p><strong>Widerspruch Werbe-Mails</strong></p>
<p>Gibt es bei mir nicht.Nur auf Ihren Wunsch beantworte ich ihre Anfragen per Mail.Keine Werbung!.</p>
<h4>Mfg Basti1012 ( Seiteninhaber ) </h4>
</div>
    <span id="copy"></span>  

</footer>






<script>
 
    document.getElementById('copy').innerHTML='&copy; Basti1012   2017 - '+new Date().getFullYear();

function Serverzeit(date) {
      this.date = date;
      this.kalenderwoche = function() {
        var Datum = this.date;
        var DoDat = donnerstag(Datum);
        var kwjahr = DoDat.getFullYear();
        var DoKW1 = donnerstag(new Date(kwjahr, 0, 4)); // Anm. 2
        return Math.floor(1.5 + (DoDat.getTime() - DoKW1.getTime()) / 86400000 / 7) 
      };
      function donnerstag(datum) {
        var Do = new Date();
        Do.setTime(datum.getTime() + (3 - ((datum.getDay() + 6) % 7)) * 86400000);
        return Do;
      };
      this.update = function(dom_id) {
        var Datumsanzeige = "";
        var Wochentage = new Array('Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag');
        var Wochentag = Wochentage[this.date.getDay()];
        var Tag = this.date.getDate();
        var Monate = new Array("Januar", "Februar", "M?rz", "April", "Mai", "Juni", "Juli", "August", "Septemper", "Oktober", "November", "Dezember");
        var Monat = Monate[this.date.getMonth()];
        var Jahr = this.date.getFullYear();
        var Stunden = this.date.getHours();
        var Minuten = this.date.getMinutes();
        var Sekunden = this.date.getSeconds();
        this.date.setSeconds(Sekunden + 1);
        if (Stunden <= 9) {
          Stunden = "0" + Stunden;
        }
        if (Minuten <= 9) {
          Minuten = "0" + Minuten;
        }
        if (Sekunden <= 9) {
          Sekunden = "0" + Sekunden;
        }
        Datumzeitanzeige = Wochentag + ', ' + Tag + '. ' + Monat + ' ' + Jahr + ' - ' + Stunden + ':' + Minuten + ':' + Sekunden;
        Datumzeitanzeige = "Woche: " + this.kalenderwoche() + " - " + Datumzeitanzeige;
 
        document.getElementById('server').innerHTML = Datumzeitanzeige
        setTimeout(function(x, dom_id) {
          return function() {
            x.update(dom_id);
          };
        }(this, dom_id), 1000);
      };
    };
    var x = new Serverzeit(new Date());
    x.update('Datumzeit');
 
</script>
<script>

 
    $(".back-to-top").hide();
    
 
	$(function () {
 
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
				$('.back-to-top').fadeIn();
			} else {
				$('.back-to-top').fadeOut();
			}
		});

		$('.back-to-top').click(function () { // Klick auf den Button
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});
    $(".back-to-top").css({'position':'fixed','display':'none','bottom':'10px','right':'20px','z-index':'99','border':'1px solid black','outline': 'none','background-color':' red','color':' white','cursor': 'pointer','padding': '15px','border-radius':' 10px'});
 
 
function mouseon(){
 $(".back-to-top").css('background','green');
}
 
function mouseoff(){
 $(".back-to-top").css('background','red');
}
</script>

   <script>
          $('#datenschutz').click(function(){
          $('#dateninfo').css('display','block');
          })     
          
           $('#xx1').click(function(){
          $('#dateninfo').css('display','none');
          })  
          
          
      $('#section2').click(function(){                             
       ansage();                                        
     });                                     
                                                
                                     
    $('#impressum').click(function() {
   $('#boxinfo').html(' <h1>Impressum</h1><p>Angaben gemï¿½ï¿½ ï¿½ 5 TMG</p><p>Max Muster <br> Musterweg<br> 12345 Musterstadt <br> </p><p> <strong>Vertreten durch: </strong><br>Max Muster<br></p><p><strong>Kontakt:</strong> <br>Telefon: 01234-789456<br>Fax: 1234-56789<br>E-Mail: <a href="peter1012@gmx.de">max@muster.de</a><br></p><p><strong>Umsatzsteuer-ID: </strong> <br>Umsatzsteuer-Identifikationsnummer gemï¿½ï¿½ ï¿½27a Umsatzsteuergesetz: Musterustid.<br><br><strong>Wirtschafts-ID: </strong><br>Musterwirtschaftsid<br></p><p><strong>Aufsichtsbehï¿½rde:</strong><br>Musteraufsicht Musterstadt<br></p><p><strong>Haftungsausschluss: </strong><br><br><strong>Haftung fï¿½r Inhalte</strong><br><br>Die Inhalte unserer Seiten wurden mit grï¿½ï¿½ter Sorgfalt erstellt. Fï¿½r die Richtigkeit, Vollstï¿½ndigkeit und Aktualitï¿½t der Inhalte kï¿½nnen wir jedoch keine Gewï¿½hr ï¿½bernehmen. Als Diensteanbieter sind wir gemï¿½ï¿½ ï¿½ 7 Abs.1 TMG fï¿½r eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach ï¿½ï¿½ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, ï¿½bermittelte oder gespeicherte fremde Informationen zu ï¿½berwachen oder nach Umstï¿½nden zu forschen, die auf eine rechtswidrige Tï¿½tigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberï¿½hrt. Eine diesbezï¿½gliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung mï¿½glich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.<br><br><strong>Haftung fï¿½r Links</strong><br><br>Unser Angebot enthï¿½lt Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb kï¿½nnen wir fï¿½r diese fremden Inhalte auch keine Gewï¿½hr ï¿½bernehmen. Fï¿½r die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mï¿½gliche Rechtsverstï¿½ï¿½e ï¿½berprï¿½ft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.<br><br><strong>Urheberrecht</strong><br><br>Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfï¿½ltigung, Bearbeitung, Verbreitung und jede Art der Verwertung auï¿½erhalb der Grenzen des Urheberrechtes bedï¿½rfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur fï¿½r den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.<br><br><strong>Datenschutz</strong><br><br>Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten mï¿½glich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit mï¿½glich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrï¿½ckliche Zustimmung nicht an Dritte weitergegeben. <br>Wir weisen darauf hin, dass die Datenï¿½bertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslï¿½cken aufweisen kann. Ein lï¿½ckenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht mï¿½glich. <br>Der Nutzung von im Rahmen der Impressumspflicht verï¿½ffentlichten Kontaktdaten durch Dritte zur ï¿½bersendung von nicht ausdrï¿½cklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrï¿½cklich widersprochen. Die Betreiber der Seiten behalten sich ausdrï¿½cklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor. </p>  </div> ');
   $('#hintergrund,#boxinfo').css('display', 'block');
   $('#boxinfo').css('display', 'block');
 })



 $('#close').click(function() {
   $('#hintergrund,#boxinfo').css('display', 'none');
   $('#boxinfo').css('display', 'none');
 })


 $('#Kontakt').click(function() {
   $('#boxinfo').html(' <div id="emailconti"> <div style="width:100%;color:black;" class="wmfg_layout_2"> <ul class="wmfg_questions">    <li class="wmfg_q">        <label class="wmfg_label" for="email">Email bitte hier schreiben.</label><input type="text" id="EMAIL" placeholder="mustermann@hallo.de" size="40">    	<textarea class="wmfg_textarea" name="email" id="email" style="height:80px" placeholder="Ausser Betrieb.Bei Fragen bitte das Forum oder Gï¿½stebuch benutzen"></textarea>	</li>	<li class="wmfg_q">		<label class="wmfg_label">Datenschutz gelesen ?</label>		<table class="wmfg_answers">			<tr class="wmfg_a">				<td class="wmfg_a_td"><input type="checkbox" class="checkbox" name="check" id="check" value="" /></td>				<td><label class="checker" id="checker" >Click for Ok</label></td>			</tr>		</table>	</li>	<li class="wmfg_q">	<div id="error"></div>	<input type="button" class="wmfg_btn" name="s4nd" id="send" value="Senden" />	</li></ul></div>   </div>    ');
   $('#hintergrund,#boxinfo').css('display', 'block');
 $('#boxinfo').css('display', 'block');

  $('#send').click(function(){
  f=$('#check').is(':checked');
if(f==false){
$('#error').html('<span style="color:red;">Bitte Datenschutz lesen</span>');
}else if(f==true){
function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

  var email = $("#EMAIL").val();
  if (validateEmail(email)) {
$('#error').html('<span style="color:green;">Email wird an Basti1012 gesendet</span>');
  } else {
$('#error').html('<span style="color:red;">Email ist nicht Korekt</span>');
  }
  return false;
}
  });
  });
                                                
  </script>
  <script>
          $('a').click(function(){
          test=$('#body1').hasClass('bodyaus');
          if(test==true){
          $('#body1').removeClass('bodyaus');
          $('#body1').addClass('bodyan');
          } 
         var page=$(this).data('link');
         
       
          los(page);
          });
          
  //  los('/hauptseite/html/start.html');    
  function los(page){
 
           $.ajax({
                type: "GET",
                url: "http://sebastian1012.bplaced.net/"+page+"",
     
                success: function(data){ 
               //     location.reload(); 
                 $('#seiteninhalt_laden').html(data); 
                 setTimeout(function(){
      
                 test1=$('#body1').hasClass('bodyan');      
          if(test1==true){
          $('#body1').removeClass('bodyan');
          $('#body1').addClass('bodyaus');
          } 
                   
                   
                 },500);
                }
           });
  }
  
  
  </script>

  
  
  <script>
 
//(/  alert()
//  $.getScript('hauptseite/links.js', function () {
    // foto_galerie.js wurde geladen
    // Die Funktionen sind jetzt nutzbar
  //$("#seiteninhalt_laden").load("https://www.cssscript.com/demo/animated-tag-cloud-generator-tagscloud/tagsCloud.js");
//});
 

 

  </script>
  
  
  
  
  
  
  
  
  
  
  
  <script src="hauptseite/zeitansage.js"></script>
  </body>
</html>