Commit 9e6faf48 authored by David Loiret's avatar David Loiret Committed by Jean-Baptiste Kempf

vdd18: redesign

Signed-off-by: Jean-Baptiste Kempf's avatarJean-Baptiste Kempf <jb@videolan.org>
parent a78291e2
<?php
$title = "Video Dev Days 2018, September 21 - 23, 2018";
$body_color = "green";
$body_color = "orange";
$new_design = true;
$show_vdd_banner = false;
......@@ -11,6 +11,64 @@
$additional_css = array("/js/css/slimbox2.css", "/style/slick.min.css", "/videolan/events/vdd18/style.css");
require($_SERVER["DOCUMENT_ROOT"]."/include/header.php");
?>
<script>
countdownManager = {
targetTime: new Date(),
element: {
day: null,
hour: null,
min: null,
sec: null
},
interval: null,
init: function(targetTime) {
this.targetTime = targetTime || new Date();
this.element.day = $('#countdown-day');
this.element.hour = $('#countdown-hour');
this.element.min = $('#countdown-min');
this.element.sec = $('#countdown-sec');
this.tick();
this.interval = setInterval('countdownManager.tick();', 1000);
},
tick: function() {
var timeNow = new Date();
if (timeNow > this.targetTime) {
timeNow = this.targetTime;
$('#countdown').hide();
clearInterval(this.interval);
return;
}
var diff = this.dateDiff(timeNow, this.targetTime);
this.element.day.text(diff.day);
this.element.hour.text(diff.hour);
this.element.min.text(diff.min);
this.element.sec.text(diff.sec);
},
dateDiff: function(date1, date2) {
var diff = {};
var tmp = date2 - date1;
tmp = Math.floor(tmp / 1000);
diff.sec = tmp % 60;
tmp = Math.floor((tmp-diff.sec) / 60);
diff.min = tmp % 60;
tmp = Math.floor((tmp-diff.min) / 60);
diff.hour = tmp % 24;
tmp = Math.floor((tmp-diff.hour) / 24);
diff.day = tmp;
return diff;
}
};
$(function($){
countdownManager.init(new Date('2018-09-21 00:00:00'));
});
</script>
<header class="header-bg">
<div class="container">
<div class="row">
......@@ -19,35 +77,73 @@
<h1>Video Dev Days 2018</h1>
<h3>The Open Multimedia Conference that frees the cone in you!</h3>
<h4>21 - 23 September 2018, Paris</h4>
<a href="https://goo.gl/forms/8WGREy2hMxRNfGzv2" class="btn btn-border vbtn-link">Register<span class="arrow right vdd-icon"></span></a>
</div>
</div>
<div class="row">
<div id="countdown">
<div class="countdown-box">
<span id="countdown-day" >--</span>
<div class="countdown-unit">Days</div>
</div>
<div class="countdown-box">
<span id="countdown-hour">--</span>
<div class="countdown-unit">Hours</div>
</div>
<div class="countdown-box">
<span id="countdown-min" >--</span>
<div class="countdown-unit">Minutes</div>
</div>
<div class="countdown-box">
<span id="countdown-sec" >--</span>
<div class="countdown-unit">Seconds</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- <div class="container">
<div id="sponsors">
<h5>Sponsors</h5>
<p>We are looking for sponsors</p>
</div>
</div>
</div> -->
</header>
<section id="overview">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2 class="uppercase">About Video Dev Days 2018</h2>
<hr class="spacer">
<h2 class="uppercase">
About
<span class="spacer-inline">Video Dev Days 2018</span>
</h2>
<p>The <a href="/videolan/">VideoLAN non-profit organisation</a> is happy to
invite you to the multimedia open-source event of the summer!</p>
<p>For its <b>tenth edition</b>, people from the VideoLAN and open source multimedia communities will meet in <strong>Paris</strong>
to discuss and work on the future of the open-source multimedia community</p>
<p>This is a <strong>technical</strong> conference.</p>
<br />
<p>Date: <strong>21st - 23rd of September 2018</strong>, Location: Paris</p>
<div class="row">
<div class="col-md-6">
<div class="text-box when-box">
<h4 class="text-box-title">When?</h4>
<p class="text-box-content">21st - 23rd of September 2018</p>
</div>
</div>
<div class="col-md-6">
<div class="text-box where-box">
<h4 class="text-box-title">Where?</h4>
<p class="text-box-content">Paris</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="where" class="bg-gray">
<!-- <section id="where" class="bg-gray">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
......@@ -56,14 +152,14 @@
</div>
</div>
</div>
</section>
</section> -->
<section id="schedule">
<div class="container">
<div class="row">
<div class="text-center">
<h2 class="uppercase">Schedule</h2>
<hr class="spacer">
<hr class="spacer-2">
</div>
<div class="col-lg-10 col-lg-offset-1">
<!-- Nav tabs -->
......@@ -95,15 +191,76 @@
</div>
</div>
<div role="tabpanel" class="tab-pane fade active in" id="saturday">
<div class="event event-bg">
<div class="event event-welcome">
<h4 class="event-time">
09:00 - 12:30
09:15 - 09:40
</h4>
<p class="event-author">Jean-Baptiste Kempf, VideoLAN</p>
<div class="event-description">
<h3>Talks</h3>
<h3>Welcome</h3>
</div>
</div>
<div class="event">
<div class="event event-talk">
<h4 class="event-time">
09:40 - 10:10
</h4>
<p class="event-author">Jean-Baptiste Kempf, VideoLAN</p>
<div class="event-description">
<h3>VLC 4.0</h3>
</div>
</div>
<div class="event event-talk">
<h4 class="event-time">
10:10 - 10:40
</h4>
<p class="event-author">Rostislav Pehlivanov, FFmpeg</p>
<div class="event-description">
<h3>FFv2</h3>
</div>
</div>
<div class="event event-coffee">
<h4 class="event-time">
10:40 - 11:00
</h4>
<div class="event-description">
<h3>Coffee Break</h3>
</div>
</div>
<div class="event event-talk">
<h4 class="event-time">
11:00 - 11:30
</h4>
<p class="event-author">Ronald & Jean-Baptiste Kempf</p>
<div class="event-description">
<h3>Dav1d: a fast AV1 decoder</h3>
</div>
</div>
<div class="event event-talk">
<h4 class="event-time">
11:30 - 12:00
</h4>
<p class="event-author">Pradeep</p>
<div class="event-description">
<h3>x265: an update</h3>
</div>
</div>
<div class="event event-talk">
<h4 class="event-time">
12:00 - 12:30
</h4>
<p class="event-author">Thomas Daede</p>
<div class="event-description">
<h3>AV1: the final talk</h3>
</div>
</div>
<div class="event event-lunch">
<h4 class="event-time">
12:30 - 14:00
</h4>
......@@ -111,7 +268,7 @@
<h3>Lunch Break</h3>
</div>
</div>
<div class="event">
<div class="event event-meetups">
<h4 class="event-time">
14:00 - 18:00
</h4>
......@@ -130,7 +287,7 @@
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="sunday">
<div class="event event-bg">
<div class="event event-welcome">
<h4 class="event-time">
09:00 - 09:30
</h4>
......@@ -138,16 +295,25 @@
<h3>Welcome</h3>
</div>
</div>
<div class="event">
<div class="event event-talk">
<h4 class="event-time">
09:30 - 12:00
</h4>
<div class="event-description">
<h3>Lightning talks</h3>
<p>Welcoming talks!</p>
<ul>
<li>An update about LLVM + Mingw (<i>Martin Storsjo</i>)</li>
<li>Rust & Multimedia (<i>Luca Barbato</i>)</li>
<li>TTML subtitles (<i>Stefan Pöschel</i>)</li>
<li>HDR & placebo (<i>Hanna</i>)</li>
<li>FFv1 update (<i>Dave Rice</i>)</li>
<li>GSoC report: VLMC web (<i>Derek</i>)</li>
</ul>
</div>
</div>
<div class="event event-bg">
<div class="event event-bg event-lunch">
<h4 class="event-time">
12:00 - 14:00
</h4>
......@@ -177,55 +343,70 @@
</div>
</section>
<section class="bg-gray">
<section id="who-come">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class="uppercase">Who can come?</h2>
<div class="col-md-8 col-md-offset-2 text-box" id="who-come-box">
<h2 class="uppercase">Who can come?
</h2>
<p><strong>Anyone</strong> who cares about open source multimedia technologies and development. Remember that it targets a technical crowd!</p>
<p>If you are representing a <b>company</b> caring about open-source multimedia software, we would be <b>very interested</b> if you could co-sponsor the event.</p>
</div>
<div class="col-md-6 ">
<h2 class="uppercase">Register!</h2>
<p><b>Register <a href="https://goo.gl/forms/8WGREy2hMxRNfGzv2">HERE!</a></b></p>
<p>Also, consider sponsoring!</p>
</div>
</div>
</div>
</section>
<section>
<section id="register-section">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class="uppercase">Cost and sponsorship </h2>
<p>The cost for attendance is <b>free</b>.</p>
<p>Like previous years, active developers can get a full sponsorship covering travel costs. We will also provide accomodation.</p>
</div>
<div class="col-md-6">
<h2 class="uppercase">Accommodation </h2>
<p>For active members of the open-source multimedia communities who registered until August 25 and got a confirmation, your hotel will be:</p>
</b></p>
<h2 class="uppercase">Register</h2>
<div class="row">
<div class="col-md-6">
<div class="text-box register-box">
<h3 class="text-box-title">
COST AND SPONSORSHIP
</h3>
<h3>FREE</h3>
<p class="text-box-content">
The cost for attendance is free.
Like previous years, active developers can get a full sponsorship covering travel costs. We will also provide accomodation.
</p>
<div class="ticket">
Register <a href="https://goo.gl/forms/8WGREy2hMxRNfGzv2">HERE!</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="text-box register-box">
<h3 class="text-box-title">Accommodation</h3>
<p>For active members of the open-source multimedia communities who registered until August 25 and got a confirmation, your hotel will be:</p>
</b></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gray">
<section>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2 class="uppercase">Code of Conduct </h2>
<p>This community activity is running under the <a href="https://wiki.videolan.org/CoC/">VideoLAN Code of Conduct</a>. We expect all attendees to respect our <a href="https://wiki.videolan.org/VideoLAN_Values/">Shared Values</a>.</p>
</div>
</div>
<h2 class="text-center uppercase">Sponsors</h2>
<hr class="spacer-2">
<p class="big-p text-center">
We are looking for sponsors
</p>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<div class="col-md-6">
<h2 class="uppercase">Code of Conduct </h2>
<p>This community activity is running under the <a href="https://wiki.videolan.org/CoC/">VideoLAN Code of Conduct</a>. We expect all attendees to respect our <a href="https://wiki.videolan.org/VideoLAN_Values/">Shared Values</a>.</p>
</div>
<div class="col-md-6">
<h2 class="uppercase">Contact </h2>
<p>The VideoLAN Dev Days are organized by the board members of the VideoLAN non-profit organization, Jean-Baptiste Kempf, Felix Paul K&uuml;hne and Hugo Beauz&eacute;e-Luyssen. You can reach us at <span style="color: #39b549">board@videolan.org</span>.</p>
</div>
......@@ -234,4 +415,5 @@
</section>
<?php footer('$Id: index.php 5400 2009-07-19 15:37:21Z jb $'); ?>
.header-bg {
background: url('/images/events/vdd17/vdd17-blurred.jpg') center no-repeat;
background: url('/images/events/vdd18/paris-night.jpg') center no-repeat;
padding: 180px 0;
margin-top: -91px;
background-size: cover;
}
#nonprofitOrganizationDiv2 {
display: none;
}
p {
text-align: left;
}
.spacer-inline::before {
content: "";
display: inline-block;
vertical-align: middle;
width: 50px;
height: 2px;
background-color: #e7e7e7;
margin-right: 10px;
}
.text-box {
margin-bottom: 10px;
color: white;
background-color: white;
border-radius: 4px;
box-shadow: 0 0 6px rgba(25,25,34,.16);
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
padding: 30px;
text-shadow: 0 2px 2px rgba(0,0,0,0.5), -1px -1px 0 rgba(0,0,0,0.15), 1px -1px 0 rgba(0,0,0,0.15), -1px 1px 0 rgba(0,0,0,0.15), 1px 1px 0 rgba(0,0,0,0.15);
}
.vbtn-link {
color: white;
background-color: transparent;
background: rgba(0,0,0,0.3) !important;
}
.vbtn-link:hover,
.vbtn-link:focus,
.vbtn-link:active {
color: white;
}
.vdd-icon {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.text-box-title {
font-weight: bold;
text-transform: uppercase;
font-size: 22px;
}
.text-box-content {
text-align: center;
color: white;
font-size: 20px;
}
.spacer-inline {
color: #7d7d7d;
font-size: 16px;
display: block;
margin-left: 130px;
margin-top: 10px;
}
h2 {
font-size: 28px;
margin-bottom: 20px !important;
}
h3 {
margin-bottom: 10px !important;
color: #4D4D4D;
}
.header-bg {
clip-path: polygon(0 0, 102% 0, 100% 90%, 0% 112%);
color: white !important;
text-shadow: 0 2px 2px rgba(0,0,0,0.5), -1px -1px 0 rgba(0,0,0,0.15), 1px -1px 0 rgba(0,0,0,0.15), -1px 1px 0 rgba(0,0,0,0.15), 1px 1px 0 rgba(0,0,0,0.15);
}
#register {
margin-top:-40px;
}
#who-come {
background: url('/images/events/vdd16/crowd-of-people.jpg') center no-repeat;
background-size: cover;
}
.ticket {
display: inline-block;
box-sizing: content-box;
filter: drop-shadow(0 2px 5px rgba(black,.5));
position: relative;
height: 1em;
padding: 1em;
color: black;
font-size: 16px;
background-size: 51% 100%;
background-repeat: no-repeat;
background-image: radial-gradient(circle at 0 50%, rgba(255,255,224,0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 100% 50%, rgba(255,255,224,0) 0.4em, #ffffe0 0.5em);
background-position: top left, top right;
}
#register-section {
background: #f7f7f7;
clip-path: polygon(0 0, 102% 0, 100% 90%, 0% 112%);
}
@media (max-width: 992px) {
#register-section {
clip-path: none;
}
}
.spacer-2 {
width: 100px;
border-top: 2px solid #e7e7e7;
margin: 24px auto;
}
.register-box {
text-align: center;
text-shadow: none;
}
.register-box .text-box-content {
color: #4D4D4D;
font-size: 14px;
border-bottom: 1px solid #e7e7e7;
padding-bottom: 10px;
}
#register-2 {
margin-top: 30px;
}
#register-2 h2 {
text-transform: uppercase;
}
#register-2 h2,
#register-2 p {
color: white !important;
}
#who-come-box {
background: rgba(0,0,0,0.3) !important;
}
#who-come-box p,
#who-come-box h2,
#who-come-box .spacer-inline {
color: white !important;
}
.when-box {
background: url('/images/events/vdd18/time.jpg') center no-repeat;
background-size: cover;
}
.where-box {
background: url('/images/events/vdd18/paris.jpg') center no-repeat;
background-size: cover;
}
.header-bg h1 {
......@@ -34,7 +205,7 @@
}
section {
padding: 35px 0;
padding: 30px 0;
}
p {
......@@ -67,11 +238,47 @@ h2 {
}
.event {
border-left: 2px solid #E47B00;
color: #4d4d4d;
margin-top: 6px;
border-radius: 6px;
border-radius: 3px;
padding: 1.8em 1.6em;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
}
.event-description > ul > li {
margin: 8px 0;
}
.event-talk {
border-left-color: #39b549;
}
.event-coffee {
border-left-color: black;
}
.event-meetups {
border-left-color: red;
}
.event-welcome {
border-left-color: orange;
}
.event-lunch {
border-left-color: #4D4D4D;
}
.big-p {
font-size: 26px;
}
.event:hover {
opacity: 0.8;
}
.event h3 {
......@@ -205,12 +412,27 @@ h2 {
padding:20px
}
.event-bg {
background-color: #fbfbfb;
}
p {
line-height: 22px;
margin: 0 0 10px;
padding: 0;
}
#countdown {
margin-top: 20px;
text-align: center;
}
.countdown-box {
background: rgba(0,0,0,0.3) !important;
border: 1px solid white;
display: inline-block;
padding: 10px 20px;
border-radius: 3px;
text-align: center;
}
.countdown-unit {
font-size: 12px;
text-transform: uppercase;
}
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