forked from bofh/fetsite
Implemented Lackis infoscreen layout
This commit is contained in:
Pet
134
app/assets/stylesheets/infoscreenframe.css
Normal file
134
app/assets/stylesheets/infoscreenframe.css
Normal file
@@ -0,0 +1,134 @@
|
||||
html {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
height: 100vh;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 200px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
svg {
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
.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 10s ease-out infinite;
|
||||
animation-direction: normal;
|
||||
}
|
||||
|
||||
.FET-logotext-stroke {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
#FET-logotext {
|
||||
opacity: 0;
|
||||
animation: logotext 10s ease-in infinite;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.content-area {
|
||||
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: #04669c;
|
||||
padding-bottom: 10px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<%= stylesheet_link_tag "themes/"+theme_name+"/application", :media => "all" unless theme_name.empty? %>
|
||||
<%= stylesheet_link_tag "application", :media=>"all" if theme_name.empty? %>
|
||||
<%= stylesheet_link_tag "infoscreenframe.css" %>
|
||||
|
||||
<%= javascript_include_tag "application" %>
|
||||
<%= javascript_include_tag "jmpress" %>
|
||||
@@ -10,7 +11,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<%= image_tag "infoscreen_header_provisorisch.png" %> <%#header picture/animation %>
|
||||
<%= content_tag(:iframe,'', width: 300, height: 200, src: "/iframe/infoscreenframe.html") %> <%#header picture/animation %>
|
||||
<div id ="jmpress" style="padding-top: 100px">
|
||||
<% i=1 %>
|
||||
<% @neuigkeiten.each do |n| %>
|
||||
@@ -52,44 +53,9 @@
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
<%
|
||||
raw("zeitfunktion")
|
||||
require 'time'
|
||||
close_time = Time.parse "03:00 pm"
|
||||
open_time = Time.parse "09:00 am"
|
||||
current_time = Time.now
|
||||
if (current_time > open_time)
|
||||
raw("OPEN")
|
||||
else
|
||||
raw("CLOSED")
|
||||
end
|
||||
%>
|
||||
|
||||
<script>
|
||||
var d = new Date();
|
||||
var n = d.getDay();
|
||||
var now = d.getHours() + "." + d.getMinutes();
|
||||
var weekdays = [
|
||||
["Sunday"],
|
||||
["Monday", 9.00, 15.00],
|
||||
["Tuesday", 9.00, 15.00],
|
||||
["Wednesday", 9.00, 15.00],
|
||||
["Thursday", 9.00, 15.00],
|
||||
["Friday", 9.00, 12.00],
|
||||
["Saturday"] // we are closed, sorry!
|
||||
];
|
||||
var day = weekdays[n];
|
||||
if (now > day[1] && now < day[2]) {
|
||||
document.write("<div id='footer' style='background: green; height:100px; width:1280px; bottom:1px; position:absolute'>");
|
||||
document.write("OPEN");
|
||||
}
|
||||
else {
|
||||
document.write("<div id='footer' style='background: red; height:100px; width:1280px; bottom:1px; position:absolute'>");
|
||||
document.write("CLOSED");
|
||||
}
|
||||
</script>
|
||||
<div id='footer_text' style='text-align: center; height:900px; width:1280px'>
|
||||
<h1>Servicezeiten:9-15 blabla, service@fet blabla, content von lacki ;) Freitag 9-12</h1>
|
||||
<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" style="height:10px; z-index: 2000; left: 5px; right: 5px; bottom: 5px; height: 10px; position:absolute">
|
||||
<div id="" class="ui-progressbar-value ui-widget-header ui-corner-left" style=""></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
134
public/assets/infoscreenframe.css
Normal file
134
public/assets/infoscreenframe.css
Normal file
@@ -0,0 +1,134 @@
|
||||
html {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
height: 100vh;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 200px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
svg {
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
.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 10s ease-out infinite;
|
||||
animation-direction: normal;
|
||||
}
|
||||
|
||||
.FET-logotext-stroke {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
#FET-logotext {
|
||||
opacity: 0;
|
||||
animation: logotext 10s ease-in infinite;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.content-area {
|
||||
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: #04669c;
|
||||
padding-bottom: 10px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
104
public/iframe/infoscreenframe.html
Normal file
104
public/iframe/infoscreenframe.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<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;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<%= stylesheet_link_tag "infoscreenframe.css" %>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 200">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<div class="adress">
|
||||
<h3>Fachschaft Elektrotechnik</h3><br>
|
||||
<p>Gußhausstraße 25-27<br>Room CD 01 09 (1st floor)<br>1040 Vienna</p>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3>Contact</h3><br>
|
||||
<p>E-Mail: service@fet.at<br>Phone: +43-1-58801 49553<br></p>
|
||||
</div>
|
||||
<div class="servicecontainer">
|
||||
<div class="servicetime">
|
||||
<h3>Service times</h3><br>
|
||||
<p style="text-align: right">Mon to Thur: 9am to 02pm<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>
|
||||
<script>
|
||||
var today = new Date();
|
||||
today = today;
|
||||
document.getElementById('time').innerHTML = today;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user