Commit d91034ad authored by Jean-Baptiste Kempf's avatar Jean-Baptiste Kempf

VDD19: early page

parent 88d2c228
<?php
$title = "Video Dev Days 2019, Novemver 9-10, 2019";
$body_color = "orange";
$new_design = true;
$show_vdd_banner = false;
$lang = "en";
$menu = array( "videolan", "events" );
$additional_js = array("/js/slimbox2.js", "/js/slick-init.js", "/js/slick.min.js");
$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('2019-11-09'));
});
</script>
<div class="sponsor-box-2">
<h4>Sponsors</h4>
<a href="https://www.google.com" target="_blank">
<?php image( 'events/vdd18/sponsors/google-logo.png' , 'Google', 'sponsors-logo'); ?>
</a>
<a href="https://www.mozzila.org" target="_blank">
<?php image( 'events/vdd18/sponsors/mozilla-logo.png', 'Mozilla', 'sponsors-logo'); ?>
</a>
</div>
<header class="header-bg">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<img src="//images.videolan.org/images/VLC-IconSmall.png">
<h1>Video Dev Days 2019</h1>
<h3>The Open Multimedia Conference that frees the cone in you!</h3>
<h4>9 - 10 November, 2019, Tokyo</h4>
<!-- <a href="https://goo.gl/forms/8WGREy2hMxRNfGzv2" class="btn btn-border vbtn-link">Register<span class="arrow right vdd-icon"></span></a>-->
<p>Registration opens soon.</p>
</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 id="sponsors">
<h5>Sponsors</h5>
<p>We are looking for sponsors</p>
</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">
Video Dev Days 2019
<span class="spacer-inline">About</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>eleventh edition</b>, people from the VideoLAN and open source multimedia communities will meet in <strong>Tokyo</strong>
to discuss and work on the future of the open-source multimedia community</p>
<p>This is a <strong>technical</strong> conference.</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">9 - 10 November 2019</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">Tokyo</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <section id="where" class="bg-gray">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2 class="uppercase">Where?</h2>
<p>The venue is in Paris!</p>
</div>
</div>
</div>
</section> -->
<section id="schedule">
<div class="container">
<div class="row">
<div class="text-center">
<h2 class="uppercase">Schedule</h2>
<hr class="spacer-2">
</div>
<div class="col-lg-10 col-lg-offset-1">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a href="#friday" aria-controls="friday" role="tab" data-toggle="tab">Friday 8</a></li>
<li role="presentation" class="active"><a href="#saturday" aria-controls="saturday" role="tab" data-toggle="tab">Saturday 9</a></li>
<li role="presentation"><a href="#sunday" aria-controls="sunday" role="tab" data-toggle="tab">Sunday 10</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade" id="friday">
<div class="event">
<h4 class="event-time">09:30 - 18:30</h4>
<div class="event-description">
<h3>Community Bonding Day: Surprise!</h3>
<p>This year we'll do a <b>??????????</b>!<br/>
The VideoLAN organization will pay for whatever costs associated with the event.<br/></p>
</div>
</div>
<div class="event">
<h4 class="event-time">19:30</h4>
<div class="event-description">
<h3>Evening drinks</h3>
<p>On <strong>Friday at 19h30</strong>, people are welcome to come and
share a few good drinks, with all attendees. <!--, at the <a href="https://goo.gl/maps/tTTAPwjzHe62" target="_blank">King George pub</a>. --></p>
<p>Alcoholic and non-alcoholic drinks will be available!</b>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade active in" id="saturday">
<div class="event event-breakfast">
<h4 class="event-time">
08:30 - 09:00
</h4>
<div class="event-description">
<h3>Registration & Breakfast</h3>
</div>
</div>
<div class="event event-talk">
<h4 class="event-time">
09:00 - 12:30
</h4>
<p class="event-author">
<span class="avatar avatar-jb"></span>Jean-Baptiste Kempf, VideoLAN
</p>
<div class="event-description">
<h3>Talks</h3>
</div>
</div>
<div class="event event-lunch">
<h4 class="event-time">
12:30 - 14:00
</h4>
<div class="event-description">
<h3>Lunch Break</h3>
</div>
</div>
<div class="event event-meetups">
<h4 class="event-time">
14:00 - 18:00
</h4>
<div class="event-description">
<h3>Meetups</h3>
</div>
</div>
<div class="event">
<h4 class="event-time">
19:30 - ??:??
</h4>
<div class="event-description">
<h3>Community Dinner</h3>
<p> Location: Tokyo</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="sunday">
<div class="event event-breakfast">
<h4 class="event-time">
09:00 - 09:30
</h4>
<div class="event-description">
<h3>Breakfast</h3>
</div>
</div>
<div class="event event-talk">
<h4 class="event-time">
09:30 - 12:00
</h4>
<div class="event-description">
<h3>Lightning talks</h3>
<ul>
</ul>
</div>
</div>
<div class="event event-bg event-lunch">
<h4 class="event-time">
12:00 - 14:00
</h4>
<div class="event-description">
<h3>Lunch</h3>
</div>
</div>
<div class="event">
<h4 class="event-time">
14:00 - 18:00
</h4>
<div class="event-description">
<h3>Unconferences</h3>
</div>
</div>
<div class="event">
<div class="event-inner">
<div class="event-description">
<p>The actual content of the unconference track is being decided on Saturday evening. For the live schedule, check the <a href="https://wiki.videolan.org/VDD19#Unconference_schedule">designated page on the wiki</a>.</p>
</div>
</div>
</div>
<div class="event">
<h4 class="event-time">
20:00 - ??:??
</h4>
<div class="event-description">
<h3>Unofficial Dinner</h3>
<p>Karaoke + Fishing?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="who-come">
<div class="container">
<div class="row">
<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>
</div>
</section>
<section id="register-section">
<div class="container">
<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">
Registration opens soon. <!-- <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 one of the following:</p>
<ul>
<li>Hotel Monsieur, 62 rue des Mathurins, Paris 8
<li>Mercure Paris Opéra Faubourg Montmartre, 5 Rue De Montyon, Paris 9
</ul>
</b></p> -->
<p>Stay tuned</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h2 class="text-center uppercase">Sponsors</h2>
<hr class="spacer-2">
<p class="big-p text-center">
We are looking for sponsors!
</p>
<section class="text-center">
<a href="https://www.mozilla.org" target="_blank">
<?php image( 'events/vdd18/sponsors/mozilla-logo.png' , 'Mozilla', 'sponsors-logo-2'); ?>
</a>
</section>
</div>
</section>
<section>
<div class="container">
<h2 class="text-center uppercase">Locations</h2>
<hr class="spacer-2">
<div class="row">
<div class="col-md-6">
<div class="text-box conference-box">
<div class="text-box-title">
Conference
</div>
<div class="text-box-content">
Internet Initiative Japan Inc.
Iidabashi Grand Bloom, 2-10-2 Fujimi, Chiyoda-ku, Tokyo 102-0071, JAPAN
</div>
</div>
</div>
<!--<div class="col-md-6">
<div class="text-box dinner-box">
<div class="text-box-title">
Saturday Dinner
</div>
<div class="text-box-content">
</div>
</div>
</div> -->
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<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, Denis Charmet, Konstantin Pavlov and Hugo Beauz&eacute;e-Luyssen. You can reach us at <span style="color: #39b549">board@videolan.org</span>.</p>
</div>
</div>
</div>
</section>
<?php footer('$Id: index.php 5400 2009-07-19 15:37:21Z jb $'); ?>
.header-bg {
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);
}
.text-box > ul > li {
color: #4D4D4D;
text-align: left;
list-style: circle;
font-weight: bold;
}
.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-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;
}
.dinner-box {
background: url('/images/events/vdd18/dinner.jpg') center no-repeat;
background-size: cover;
}
.conference-box {
background: url('/images/events/vdd18/conference.jpg') center no-repeat;
background-size: cover;
}
.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 {
font-size: 44px;
}
.header-bg h1, .header-bg h3, .header-bg a {
color: white;
}
.header-bg a:hover, a:active, a:focus {
color: #e0e0e0;
}
.header-bg h4 {
font-weight: bold;
}
#nonprofitOrganizationDiv2 {
color: #e0e0e0;
}
#nonprofitOrganizationDiv2 a {
color: #d0d0d0;
}
section {
padding: 30px 0;
}
p {
font-size: 14px;
}
h2 {
margin-bottom: 10px;
}
.uppercase {
text-transform: uppercase;
}
#where {
background: url('/images/events/vdd16/crowd-of-people.jpg') center no-repeat fixed;
color: white;
}
#where a, #where h2, #where p {
color: white;
}
.btn-border {
border: 1px solid #fff;
}
.tab-content {
margin-left: 1px;
}
.event {
border-left: 2px solid #E47B00;
color: #4d4d4d;
margin-top: 6px;
border-radius: 3px;
padding: 8px 12px;
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;
}