page.ptl

#
# The quick-n-dirty LPC BBB frontend system
#   Copyright 2020 Jonathan Corbet <corbet@lwn.net>
#   Copyright 2020 Guy Lunardi <guy@linux.com>
# Redistributable under the terms of the GNU General Public License,
# version 2 or greater
#
#
# Try to capture overall stylistic elements here.
#
import config

Stylesheet = '''
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Big John";
    src: url("//db.onlinewebfonts.com/t/65512fc0c1cc10babc352afa2959c05a.eot");
    src: url("//db.onlinewebfonts.com/t/65512fc0c1cc10babc352afa2959c05a.eot?#iefix") format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/65512fc0c1cc10babc352afa2959c05a.woff2") format("woff2"),
    url("//db.onlinewebfonts.com/t/65512fc0c1cc10babc352afa2959c05a.woff") format("woff"),
    url("//db.onlinewebfonts.com/t/65512fc0c1cc10babc352afa2959c05a.ttf") format("truetype"),
    url("//db.onlinewebfonts.com/t/65512fc0c1cc10babc352afa2959c05a.svg#Big John") format("svg"); } 


* {
    font-family: "Montserrat";
}

body {
    margin: 0px;
    font-size: 1em;
}

.titlebox {
    color: white;
    min-height: 100px;
    background: transparent url(https://linuxplumbersconf.org/blog/2021/wp-content/uploads/2021/06/LPC2021_bannerFINAL.svg);
    background-size: auto 100%;
}

div.title {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    vertical-align: middle;
}

h1.title {
    vertical-align: text-top;
    color: white;
    background-color: transparent;
    font-size: 18pt;
    font-family: "Big John";
    text-transform: uppercase;
    display: inline-block;
    padding: 0pt 12pt 4pt 155pt;
    word-spacing: 10000px;
}

.room, input[type=submit] {
    padding: 6px;
    margin: 6px;
    font-size: 12pt;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    background-color: #865899;
    color: #FFFFFF;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    border-radius: 0.4em;
    cursor: pointer;
    display: block;
    margin: auto;
}

a, .fake-link, .ui-widget-content a {
    color: #000021;
    text-decoration: none;
}

a:hover, .fake-link:hover, .ui-widget-content a:hover {
    color: #865899;
}

.contributiontitle {
    line-height: 1.4em;
    font-weight: 600;
    margin-bottom: 4px;
}

.speakers {
    color: #000021;
    line-height: 1.1em;
}

/* Tables ripped off from lwn */
table.OddEven {
    border-collapse: separate;
}
table.OddEven tr:nth-child(even) { 
    background-color: white;
}
table.OddEven tr:nth-child(odd) {
    background-color: #eeeeee;
}
table.OddEven th { background-color: white; }
table.OddEven td { padding: 3px; }

/* Schedule table */
table.tt {
    border: black;
    padding: 2px;
    border-style: groove;
    border-width: 3px;
}

table.tt tr:hover {
    background-color: #f6f6f6;
}

table.tt td {
    border-width: 1px;
    border-style: solid;
    border-color: white;
}

table.tt tr:hover td {
    border-color: green;
}

table.tt tr:hover td.blank {
    border-color: white;
    background-color: white;
}

form { margin: 0px; }

/* Left menu, from LPC */
.conf_leftMenu {
    float: left;
    font-family: "Montserrat";
    font-size: 12px;
    margin: 0px 1em 0px 1em;
    width: 200px;
    vertical-align: top;
}
#outer {
    border: 1px solid #ccc;
    background: #f6f6f6;
    position: relative;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding: 0px;
    margin-top: 0px;
}
#outer li a:visited {
    color: #158ebb;
}
#outer li a {
    display: block;
    font-family:"Montserrat";
    color: #158ebb;
    padding: 7px 12px;
    font-size: 10pt;
}
#outer li.selected, #outer li a.selected {
    color: white;
    background: #4e94af;
}

#outer li a:hover {
    background: #e0e0e0;
}
#outer li {
    display: block;
    color: #158ebb;
    text-align: left;
}

div.SponsorClass:first-child h5 {
    margin-top: 1px;
}

div.SponsorClass img {
    width: 120px;
    vertical-align: middle;
    margin: 0px 3em;
}

div.SponsorBox {
    background: #f6f6f6;
    margin: 6px;
    border: 1px;
    border-style: solid;
    border-color: #ccc;
}

div.SponsorClass br {
    display: none;
}

div.SponsorBox h5 {
    font-size: 1.2em;
    margin-top: 4px;
}

div.SponsorBox h5, div.SponsorClass a, div.SponsorClass img {
    text-align: center;
}

div.SponsorClass h5 {
    font-size: 1em;
}

    div.SponsorClass {
	margin: 0;
	text-align: center;
        /* float: left; */
    }
    div.SponsorClass img {
        width: 120px;
        vertical-align: middle;
        margin: 0px 2em 1em 2em;
    }

/* The checkbox that controls the left menu; we never want to actually
   see it....*/
input.LeftMenuCtrl {
    display: none;
}


/* Wide-screen defaults. */
@media screen and (min-width: 768px) {
    label.LeftMenuCtrl:after,
    input[type=checkbox]:checked ~ label.LeftMenuCtrl:after {
	content: none;
    }

    input[type=checkbox]:checked ~ div.conf_leftMenu {
	display: block;
    }

    li.LeftMenuCtrl {
	display: none;
    }
    div.confBodyBox {
	margin-left: 225px;
	margin-right: 225px;
    }
    p.tttrack {
        display: none;
    }
}

/*
 * Small-screen stuff below here
 */
@media screen and (max-width: 767px) {
    div.conf_leftMenu {
	position: absolute;
	top: 150px;
	right: 1em;
	z-index: 20;
    }
    label.LeftMenuCtrl:after {
	content: "X";
    }

    label.LeftMenuCtrl {
	position: absolute;
	top: 130px;
	right: 5px;
	font-size: xx-large;
	color: black;
    }
    
    input[type=checkbox]:checked ~ label.LeftMenuCtrl:after {
	content: "☰";
    }

    input[type=checkbox]:checked ~ div.conf_leftMenu {
	display: none;
    }
    div.confBodyBox {
	margin-left: 1em;
	margin-right: 1em;
    }
    li.LeftMenuCtrl {
	padding-left: 7px;
    }
    img.confLogo {
	width: 68px;  /* Has to be px, not % */
	margin: 10px;
    }
    .confTitle {    
	height: 90px;
	line-height: 90px;
    }
    .conference-title-link {
	padding: 5px;
	height: 90px;
	line-height: 90px;
    }
    .conference-title {
	padding: 5px;
	font-size: 16pt;
    }
    span.conference-title-link span {
	background-color: black;
	color: white;
	padding: 10px;
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	font-size: 12pt;
	font-weight: 800;
    }
    div.centered-column {
	margin: 2em;
	width: 100%;
    }
    /* Timetable trickery */
    below-menu {
	margin: 6px;
    }
    table.tt  {
	width: 100%;
    }
    table.tt thead {
        display: none;
    }
    span.tt {
	display: inline;
    }
    table.tt tbody, table.tt th, table.tt td, table.tt tr {
        display: block;
    }

    table.tt tr.tthdr {
	display: none;
    }

    table.tt td {
        /* Behave  like a "row" */
        border: none;
        position: relative;
        /* padding-left: 50%;*/
    }

    table.tt td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    div.SponsorClass {
        width: 100%;
    }
    p.tttrack {
        display: inline;
    }
}

div.lead-text {
    max-width: 55em;
    margin: 6px;
}

#loginemail, #logincode, #guestname {
   height: 2.5rem;
}

'''

def header [html] (current, title, admin = False, menu = True):
    '''<html>
       <head>
         <title>%s</title>
         <link rel="stylesheet" type="text/css" href="/stylesheet">
         <link rel="shortcut icon"
               href="https://www.linuxplumbersconf.org/blog/2020/style/favicon.ico" />
       </head>
       <body>
         <div class="titlebox">
            <h1 class="title">%s</h1>
         </div>
         <br>
       ''' % (config.EVENT, config.EVENT)
    if menu:
        left_menu(admin, current)
    '''<div class="lead-text">
       <h2>%s</h2>
       ''' % (title)

def end_text_area [html] ():
    #
    # The new <div> doesn't do much other than give something for the
    # </div> in trailer() to close.
    #
    '''</div>
       <br clear="all">
       <div class="below-menu">'''

def trailer [html] ():
    '</div>\n'
    sponsor_box()
    '</body></html>'
       
def CSS [html] ():
    return Stylesheet

#
# Menu handling.
#
menu_items = [
    ('/', 'Timetable'),
    ('/hackrooms', 'Hackrooms'),
#    ('https://chat.2020.linuxplumbersconf.org/home', 'Chat area'),
    ("https://linuxplumbersconf.org/", 'Main LPC site'),
    ("https://www.linuxplumbersconf.org/event/7/page/48-anti-harassment-policy",
     'Anti-harrassment policy'),
    ("https://www.linuxplumbersconf.org/event/7/page/50-contact", 'Contact'),
    ("/logout", 'Log out') ]

priv_menu_items = [
    ('/status', 'Server/room status'),
    ('/staff_room', 'Private staff room'),
    ]

def render_menu_item [html] (item, current):
    sel = ''
    if item[0] == current:
        sel = ' class="selected"'
    '<li%s> <a href="%s"%s>%s</a>\n' % (sel, item[0], sel, item[1])

def left_menu [html] (privileged, current):
    '''<input type="checkbox" checked class="LeftMenuCtrl" id="LeftMenuCtrl">
       <label class="LeftMenuCtrl" for="LeftMenuCtrl"></label>
       <div class="conf_leftMenu">
       <ul id="outer">
       '''
    if privileged:
        for item in priv_menu_items:
            render_menu_item(item, current)
    for item in menu_items:
        render_menu_item(item, current)
    '</ul></div>\n'

def sponsor_box [html] ():
    '''<br clear="all">
       <div class="SponsorBox"><div id="sponsors-from-blog">
       <h5>Thank you to our sponsors!</h5>
<h5>Diamond Sponsor</h5>
<p>
<center>
<a href="http://www.facebook.com">
    <img class="SponsorImg alignleft"
         style="width: 200px; padding-bottom:20px;"
          src="https://linuxplumbersconf.org/blog/2021/wp-content/uploads/2021/04/facebook1.svg"
          alt="" /></a>
</p>


<h5>Platinum Sponsor</h5>
<p>
<a href="https://www.ibm.com">
    <img class="SponsorImg alignleft"
         style="width: 130px; padding-bottom:20px;"
         src="https://linuxplumbersconf.org/blog/2021/wp-content/uploads/2021/09/ibm-horizontal-color-2.svg"
         alt="" /></a></p>

    <p>

<div class="SponsorClass">
<h5>Gold Sponsors</h5>
<p><a href="https://www.arm.com"><img class="SponsorImg alignleft" style="width: 100px;" src="https://linuxplumbersconf.org/blog/2019/wp-content/uploads/2019/06/Arm_logo_CMYK.svg" alt="" /></a>
<a href="https://www.microsoft.com">
    <img class="SponsorImg alignleft"
         style="width: 100px;"
         src="https://linuxplumbersconf.org/blog/2021/wp-content/uploads/2021/08/microsoft.svg"
         alt="" /></a></p>
</div>

<div class="SponsorClass">
<h5>Silver Sponsors</h5>
<p>
    <a href="https://www.redhat.com">
    <img class="SponsorImg alignleft" style="width: 100px;"
         src="https://linuxplumbersconf.org/blog/2019/wp-content/uploads/2019/07/RedHat.svg"
         alt="" /></a>
<a href="https://www.nexflix.com">
    <img class="SponsorImg alignleft"
         style="width: 100px;"
         src="https://linuxplumbersconf.org/blog/2021/wp-content/uploads/2021/08/netflix.svg"
         alt="" /></a>
<a href="https://www.amazon.com">
    <img class="SponsorImg alignleft"
         style="width: 100px;"
         src="https://linuxplumbersconf.org/blog/2021/wp-content/uploads/2021/09/amazon-web-services-spn.svg"
         alt="" /></a></p>
</div>
<div class="SponsorClass">
<h5>Speaker Gift Sponsor</h5>
<p><a href="https://www.collabora.com"><img class="SponsorImg alignleft" style="width: 100px;" src="https://linuxplumbersconf.org/blog/2019/wp-content/uploads/2019/03/Collabora-logo-new-Feb2017.svg" alt="" /></a></p>
</div>
<div class="SponsorClass">
<h5>T-Shirt Sponsor</h5>
<p><a href="https://www.vmware.com"><img class="SponsorImg alignleft" style="width: 100px;" src="https://linuxplumbersconf.org/blog/2021/wp-content/uploads/2021/04/vmware2.svg" alt="" /></a></p>
</div>
</center>
       </div>
       </div>
       '''