  <head>
    <meta http-equiv="refresh" content="300">
    <link rel="stylesheet" href="./woocommerce-FlexSlider/flexslider.css" type="text/css">
    <script src="./woocommerce-FlexSlider/jquery.min.js"></script>
    <script src="./woocommerce-FlexSlider/jquery.flexslider.js"></script>

    <script type="text/javascript" charset="utf-8" src="load.js"></script>
    <meta charset="utf-8">
    <title>Infoscreen</title>
    <style media="screen">
        pre.code {
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            padding: 10px;
            height: 280px;
            overflow: auto;
            background: #181818;
            border: solid 2px #181818;
        }

        #codelines {
            display: none;
        }

        #svg {
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            border: solid 2px #ccc;
            width: 300px;
            height: 300px;
            float: left;
            margin-right: 10px;
            font: 1em source-sans-pro, Source Sans Pro, Helvetica, sans-serif;
        }


        html {
            background-color: #fff;
            overflow: hidden;
        }

        img{
            max-width: 100%;
            max-height: 40vh;
            margin-left: auto;
            margin-right: auto;
            display: block; /* remove extra space below image */
        }

        .header {
            height: 300px;
            width: 100%
        }

        /* Split the screen in half */
        .split {
            height: 50%;
            width: 100%;
            position: fixed;
            overflow-x: hidden;
            padding-top: 10px;
        }

        
        /* Control the top side */
        .top {
            top: 0;
        }

        /* Control the bottom side */
        .bottom {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #00FF00;
            color: white;
            text-align: center;
        }



        .impulsPath {
            fill: none;
            stroke: #04669c;
            stroke-miterlimit: 1;
            stroke-width: 6px;
            stroke-dasharray: 1946.243;
            stroke-dashoffset: 0;
            stroke-linejoin: round;
            stroke-linecap: round;
            animation: dash 7s ease-out infinite;
            animation-direction: normal;
        }

        .FET-logotext-stroke {
            fill: #fff;
        }

        #FET-logotext {
            opacity: 0;
            animation: logotext 7s ease-in infinite;

        }


        .content-area {
            width: 100%;

            margin: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-40%);
        }


        .footer {
            position: fixed;
            width: 100%;
            height: 6vh;
            background-color: #04669c;
            padding-bottom: 20px;
            bottom: 0;

            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            color: #fff;
            flex-basis: bottom;
        }

        .footer h3,
        p {
            margin: 0;
            padding: 0 20px;
            font-family: Helvetica, Arial;
            letter-spacing: 0.1em;
        }

        .footer h3 {
            padding-top: 20px;
        }

        .footer .adress {
            margin: auto;
            text-align: left;
        }

        .footer .contact {
            margin: auto;
            text-align: center;
        }

        .footer .servicecontainer{
            display: inline-flex;
            margin: auto;

        }
        .footer .servicecontainer .servicetime {
            margin: auto;
            text-align: right;
        }

        .footer .servicecontainer .servicetime #time {
            font-size: 0.7em
        }

        .footer .servicecontainer .servicestatus{
            margin: auto;
            width:20px;
            height: 100%
            padding-right: 30px;
            background-color: #fff;
        }




        /*K E Y F R A M E S*/

        @keyframes dash {
            from {
                stroke-dashoffset: 1946.243;
                opacity: 0;
                stroke-width: 0.5;
            }
            to {
                opacity: 1;
                stroke-dashoffset: 0;
                stroke-width: 5px;
            }
        }

        @keyframes logotext {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }


    </style>

	</head>
	<body>
    <div class="split top">
        <?php require("slideshow.php"); ?>
        <div class="header">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 220"><path id="impulsPath" class="impulsPath" d="M0,61.43H1018c2.41,0,6.77-2.28,9.12-2.28,2.66,0,8.3,6.58,11.65,6.58,3.16,0,7.47-15.07,10-15.07,4.3,0,10.38,29.62,14.18,29.62s11.89-55.47,13.67-55.47c5.32,0,10.63,86.34,14.18,86.34,4.3,0,10.63-111.15,13.42-111.15,3.54,0,8.86,123.56,13.17,123.56,3.8,0,8.36-116.85,13.55-116.85,3.42,0,8.74,100,13.67,100,3.67,0,9.24-71.15,12.91-71.15,3.42,0,10.51,41.78,12.91,41.78,3.42,0,8.48-24.56,12.41-24.56,4.43,0,7.93,12.91,12.41,12.91,5.7,0,8.3-6.58,11.65-6.58s6.77,2.28,9.12,2.28h64"/><g id="FET-logotext"><g id="F"><path d="M1042,82.71l12.7-35.9v-.1c.2-.3,3.8-8.5,13.1-9.6h37.9l-4,11.6h-25.8a7.19,7.19,0,0,0-4.8,3.7l-.6,1.6h14.1l-4.1,11.7h-14l-6.1,17Z"/><path class="FET-logotext-stroke" d="M1102.9,39l-2.6,7.6h-24.6a9.18,9.18,0,0,0-6.4,5l-1.6,4.4h14.1l-2.7,7.7h-14l-6.1,17h-14.2l11.7-33.2s3.3-7.5,11.5-8.5h34.9m5.7-4h-40.9c-10.4,1.3-14.5,10.4-14.7,10.8l-.1.1V46L1041,79.31l-1.9,5.3h22.7l.9-2.7,5.1-14.4H1082l.9-2.7,2.7-7.7,1.9-5.3h-13.7a5.48,5.48,0,0,1,2.3-1.4h27.1l.9-2.7,2.6-7.6,1.9-5.1Z"/></g><g id="E"><path d="M1101.3,82.71h-.2a8.59,8.59,0,0,1-6.2-3.8,9.86,9.86,0,0,1-.7-7.9l8.8-24.9.1-.1c.2-.3,4.3-8.1,13.3-9H1154l-4,11.7-26-.1a7.1,7.1,0,0,0-4.6,3.7l-.6,1.7h14.1l-4.1,11.7h-14.2l-1.1,3.1a2.37,2.37,0,0,0,.2,1.6,2.23,2.23,0,0,0,1.2.7h27l-4,11.7h-36.6Z"/><path class="FET-logotext-stroke" d="M1151.2,39l-2.6,7.7-24.8-.1a9.21,9.21,0,0,0-6.2,5l-1.7,4.4H1130l-2.7,7.7h-14.1l-1.6,4.5s-1.1,4.1,3,4.9H1139l-2.6,7.7h-35c-7.8-1.3-5.3-9.1-5.3-9.1l8.7-24.6s3.7-7.1,11.7-7.9l34.7-.2m5.6-4h-40.6c-10.1,1-14.7,9.7-14.9,10l-.1.3-.1.3-8.7,24.6v.2c-.2.5-1.6,5.4.9,9.6a10.41,10.41,0,0,0,7.5,4.7l.3.1h38.2l.9-2.7,2.6-7.7,1.8-5.3h-29l.5-1.4h14.1l.9-2.7,2.7-7.7,1.9-5.3H1122a6.42,6.42,0,0,1,2.2-1.4l24.3.1h2.9l.9-2.7,2.6-7.7,1.9-5.3Z"/></g><g id="T"><path d="M1154.3,82.71l12-34-15.1-.1.9-2.6a14.39,14.39,0,0,1,11.5-9H1204l-4.1,11.7h-15l-12.1,34.1h-18.5Z"/><path class="FET-logotext-stroke" d="M1201.2,38.91l-2.7,7.7h-15l-12.1,34.1h-14.3l12-34-15.1-.1a12.54,12.54,0,0,1,9.9-7.7h37.3m5.7-4h-43.6a16.53,16.53,0,0,0-13.1,10.3l-1.8,5.3h5.6l9.5.1-10.1,28.7-1.9,5.3h22.7l.9-2.7,11.1-31.4h15l.9-2.7,2.7-7.7,2.1-5.2Z"/></g></g>
            </svg>
        </div>
        <div class="content-area">
         <!-- Inhaltsbereich -->
            <div class="flexslider">
                <ul class="slides">
                <?php
                foreach ($javascriptArray as $image) {
                    echo $image;
                    echo"<li>";
                    echo"<img class='images' src=./slideshow/".$image.">";
                    echo"</li>";
                }
                ?>
                </ul>
            </div>
        </div>


    </div>


    <div class="split bottom">


        <div class="content-area">
         <!-- Inhaltsbereich -->
                <img src="tobi.jpg" height='50%'><br>
        </div>

        <div class="footer">
           <div class="adress">
               <h3>Fachschaft Elektrotechnik</h3>
               <p>Gußhausstraße 25-27<br>Room CD 01 09 (1st floor)<br>1040 Vienna</p>
           </div>
           <div class="contact">
               <h3>Kontakt</h3>
               <p>
                 E-Mail: service@fet.at<br>
                 Web: fet.at<br>
                 Phone: +43-1-58801 49553<br></p>
           </div>
           <div class="servicecontainer">
                <div class="servicetime">
                    <h3>Beratung</h3><br>
                    <p style="text-align: right">Mon to Thur: 9am to 2pm<br>Fri: 9am to 12am<br>
                        <span id="time"></span>
                    </p>
                </div>

                <div class="servicestatus">
                    <!--  <svg class="servicestatusled">
                        <circle id="servicestatusled" cx="10" cy="15" r="10" style="fill: red" />
                    </svg> -->
                </div>
            </div>
        </div>


    </div>



    </body>
