Styling for OpenFest

This commit is contained in:
Petko Bordjukov 2014-11-01 04:33:12 +02:00
parent 88ef6a0ece
commit a8bae839e7
8 changed files with 11 additions and 558 deletions

View File

@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>YAPC::EU Interlude</title> <title>OpenFest 2014 Interlude</title>
<meta charset="utf-8"> <meta charset="utf-8">
@ -15,6 +15,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive.js/0.3.7/ractive.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ractive.js/0.3.7/ractive.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/lang/bg.min.js"></script>
<script src="schedule.js"></script> <script src="schedule.js"></script>
</head> </head>
<body> <body>
@ -69,7 +70,7 @@
<script id="current_talk_template" type="text/ractive"> <script id="current_talk_template" type="text/ractive">
<section id="current_talk"> <section id="current_talk">
<h3>At the Moment</h3> <h3>В момента</h3>
<h1>{{currentEvent.title}}</h1> <h1>{{currentEvent.title}}</h1>
<p>{{currentEvent.description}}</p> <p>{{currentEvent.description}}</p>
</section> </section>
@ -77,7 +78,7 @@
<script id="current_speaker_template" type="text/ractive"> <script id="current_speaker_template" type="text/ractive">
<section> <section>
<h3>Speaker</h3> <h3>Лектор</h3>
<h1>{{name}}</h1> <h1>{{name}}</h1>
<p>{{description}}</p> <p>{{description}}</p>
</section> </section>
@ -85,7 +86,7 @@
<script id="next_speaker_template" type="text/ractive"> <script id="next_speaker_template" type="text/ractive">
<section> <section>
<h3>Next Speaker</h3> <h3>Следващ лектор</h3>
<h1>{{name}}</h1> <h1>{{name}}</h1>
<p>{{description}}</p> <p>{{description}}</p>
</section> </section>
@ -93,7 +94,7 @@
<script id="next_talk_template" type="text/ractive"> <script id="next_talk_template" type="text/ractive">
<section id="next_talk"> <section id="next_talk">
<h3>Next</h3> <h3>Следва</h3>
<h1>{{nextEvent.title}}</h1> <h1>{{nextEvent.title}}</h1>
<p>{{nextEvent.description}}</p> <p>{{nextEvent.description}}</p>
<h4>({{nextEvent.startTime.fromNow()}})</h4> <h4>({{nextEvent.startTime.fromNow()}})</h4>
@ -102,8 +103,8 @@
<script id="slides_template" type="text/ractive"> <script id="slides_template" type="text/ractive">
<section data-state="update-safe"> <section data-state="update-safe">
<h1>YAPC::EU</h1> <h1>OpenFest</h1>
<h2>Sofia 2014</h2> <h2>2014</h2>
</section> </section>
{{#eventCount}} {{#eventCount}}
@ -130,7 +131,7 @@
<section> <section>
<h2>Tweet</h2> <h2>Tweet</h2>
<h1>#yapceu</h1> <h1>#OpenFest</h1>
</section> </section>
</script> </script>

View File

@ -1,140 +0,0 @@
<html>
<head>
<title>YAPC::EU Interlude</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/css/reveal.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/css/theme/night.css">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,300,400italic,400,700italic,700&subset=latin,cyrillic">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/lib/js/head.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/js/reveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive.js/0.3.7/ractive.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="schedule-musala.js"></script>
</head>
<body>
<div class="reveal">
<div class="slides">
</div>
</div>
<script id="agenda_template" type="text/ractive">
<section id="agenda">
<table class="reveal">
<tbody>
{{#pastEvents}}
<tr class="past_event">
<td>{{startTime.format('HH:mm')}}</td>
<td>{{title}}</td>
<td>
{{#speakers}}
{{name}}
{{/speakers}}
</td>
</tr>
{{/pastEvents}}
{{#nextEvent}}
<tr class="next_event">
<td>{{startTime.format('HH:mm')}}</td>
<td>{{title}}</td>
<td>
{{#speakers}}
{{name}}
{{/speakers}}
</td>
</tr>
{{/nextEvent}}
{{#futureEvents}}
<tr class="future_event">
<td>{{startTime.format('HH:mm')}}</td>
<td>{{title}}</td>
<td>
{{#speakers}}
{{name}}
{{/speakers}}
</td>
</tr>
{{/futureEvents}}
</tbody>
</table>
</section>
</script>
<script id="current_talk_template" type="text/ractive">
<section id="current_talk">
<h3>At the Moment</h3>
<h1>{{currentEvent.title}}</h1>
<p>{{currentEvent.description}}</p>
</section>
</script>
<script id="current_speaker_template" type="text/ractive">
<section>
<h3>Speaker</h3>
<h1>{{name}}</h1>
<p>{{description}}</p>
</section>
</script>
<script id="next_speaker_template" type="text/ractive">
<section>
<h3>Next Speaker</h3>
<h1>{{name}}</h1>
<p>{{description}}</p>
</section>
</script>
<script id="next_talk_template" type="text/ractive">
<section id="next_talk">
<h3>Next</h3>
<h1>{{nextEvent.title}}</h1>
<p>{{nextEvent.description}}</p>
<h4>({{nextEvent.startTime.fromNow()}})</h4>
</section>
</script>
<script id="slides_template" type="text/ractive">
<section data-state="update-safe">
<h1>YAPC::EU</h1>
<h2>Sofia 2014</h2>
</section>
{{#eventCount}}
<section>
{{> agenda_template}}
{{#currentEvent}}
{{> current_talk_template}}
{{/currentEvent}}
{{#currentEvent.speakers}}
{{> current_speaker_template}}
{{/currentEvent.speakers}}
{{#nextEvent}}
{{> next_talk_template}}
{{/nextEvent}}
{{#nextEvent.speakers}}
{{> next_speaker_template}}
{{/nextEvent.speakers}}
</section>
{{/eventCount}}
<section>
<h2>Tweet</h2>
<h1>#yapceu</h1>
</section>
</script>
<script type="text/javascript" src="ractive-init.js"></script>
<script type="text/javascript" src="reveal-init.js"></script>
</body>
</html>

BIN
openfest.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

View File

@ -42,7 +42,7 @@ Reveal.initialize({
autoSlide: 10000, autoSlide: 10000,
// Stop auto-sliding after user input // Stop auto-sliding after user input
autoSlideStoppable: true, autoSlideStoppable: false,
// Enable slide navigation via mouse wheel // Enable slide navigation via mouse wheel
mouseWheel: false, mouseWheel: false,
@ -74,7 +74,7 @@ Reveal.initialize({
minScale: 0.2, minScale: 0.2,
maxScale: 8.0, maxScale: 8.0,
parallaxBackgroundImage: 'yapc.png', parallaxBackgroundImage: 'openfest.png',
parallaxBackgroundSize: '1920px 1080px' parallaxBackgroundSize: '1920px 1080px'
}); });

View File

@ -1,140 +0,0 @@
<html>
<head>
<title>YAPC::EU Interlude</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/css/reveal.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/css/theme/night.css">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,300,400italic,400,700italic,700&subset=latin,cyrillic">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/lib/js/head.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/js/reveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive.js/0.3.7/ractive.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="schedule-rodopi.js"></script>
</head>
<body>
<div class="reveal">
<div class="slides">
</div>
</div>
<script id="agenda_template" type="text/ractive">
<section id="agenda">
<table class="reveal">
<tbody>
{{#pastEvents}}
<tr class="past_event">
<td>{{startTime.format('HH:mm')}}</td>
<td>{{title}}</td>
<td>
{{#speakers}}
{{name}}
{{/speakers}}
</td>
</tr>
{{/pastEvents}}
{{#nextEvent}}
<tr class="next_event">
<td>{{startTime.format('HH:mm')}}</td>
<td>{{title}}</td>
<td>
{{#speakers}}
{{name}}
{{/speakers}}
</td>
</tr>
{{/nextEvent}}
{{#futureEvents}}
<tr class="future_event">
<td>{{startTime.format('HH:mm')}}</td>
<td>{{title}}</td>
<td>
{{#speakers}}
{{name}}
{{/speakers}}
</td>
</tr>
{{/futureEvents}}
</tbody>
</table>
</section>
</script>
<script id="current_talk_template" type="text/ractive">
<section id="current_talk">
<h3>At the Moment</h3>
<h1>{{currentEvent.title}}</h1>
<p>{{currentEvent.description}}</p>
</section>
</script>
<script id="current_speaker_template" type="text/ractive">
<section>
<h3>Speaker</h3>
<h1>{{name}}</h1>
<p>{{description}}</p>
</section>
</script>
<script id="next_speaker_template" type="text/ractive">
<section>
<h3>Next Speaker</h3>
<h1>{{name}}</h1>
<p>{{description}}</p>
</section>
</script>
<script id="next_talk_template" type="text/ractive">
<section id="next_talk">
<h3>Next</h3>
<h1>{{nextEvent.title}}</h1>
<p>{{nextEvent.description}}</p>
<h4>({{nextEvent.startTime.fromNow()}})</h4>
</section>
</script>
<script id="slides_template" type="text/ractive">
<section data-state="update-safe">
<h1>YAPC::EU</h1>
<h2>Sofia 2014</h2>
</section>
{{#eventCount}}
<section>
{{> agenda_template}}
{{#currentEvent}}
{{> current_talk_template}}
{{/currentEvent}}
{{#currentEvent.speakers}}
{{> current_speaker_template}}
{{/currentEvent.speakers}}
{{#nextEvent}}
{{> next_talk_template}}
{{/nextEvent}}
{{#nextEvent.speakers}}
{{> next_speaker_template}}
{{/nextEvent.speakers}}
</section>
{{/eventCount}}
<section>
<h2>Tweet</h2>
<h1>#yapceu</h1>
</section>
</script>
<script type="text/javascript" src="ractive-init.js"></script>
<script type="text/javascript" src="reveal-init.js"></script>
</body>
</html>

View File

@ -1,129 +0,0 @@
function Schedule() {
var events = [];
this.addEvent = function(event) {
events.push(event);
events = _.sortBy(events, function(event) {
return event.startTime.unix()
});
}
this.upcomingEvents = function() {
return _.select(events, function(event) {
return event.startTime.isAfter(moment());
});
}
this.nextEvent = function() {
return _.first(this.upcomingEvents());
}
this.currentEvent = function() {
var latestEvent = _.last(this.pastEvents());
var nextEvent = this.nextEvent();
if (typeof nextEvent != 'undefined' && moment(nextEvent.startTime).subtract('minutes', 10).isAfter(moment())) {
return latestEvent;
} else {
return undefined;
}
}
this.futureEvents = function() {
return this.upcomingEvents().splice(1);
}
this.pastEvents = function() {
return _.select(events, function(event) {
return event.startTime.isBefore(moment());
});
}
this.allEvents = function() {
return events;
}
this.addDelay = function(time) {
_.each(this.upcomingEvents(), function(event, index, agenda) {
event.startTime.add(time);
});
}
}
var schedule = new Schedule();
schedule.addEvent({
title: 'SyContent - Content in the Cloud with V8',
startTime: moment({hour: 10, minute: 00}),
speakers: [
{
name: 'Torsten Raudssus (Getty)',
description: ''
}
]
});
schedule.addEvent({
title: 'Docker with Perl - an Introduction ',
startTime: moment({hour: 11, minute: 00}),
speakers: [
{
name: 'Denis Banovic (@bano99)',
description: ''
}
]
});
schedule.addEvent({
title: 'Create your containers with perl',
startTime: moment({hour: 11, minute: 30}),
speakers: [
{
name: 'Marian Marinov (HackMan)',
description: ''
}
]
});
schedule.addEvent({
title: 'Lunch 🍔',
startTime: moment({hour: 12, minute: 20})
});
schedule.addEvent({
title: 'Automatization Network infrastructure',
startTime: moment({hour: 13, minute: 20}),
speakers: [
{
name: 'Naim Shafiyev (shafiev)',
description: 'The student of MIREA. Interests: GCC, Linux kernel, OpenBSD, PERL, Parrot, Catalyst, Search engines'
}
]
});
schedule.addEvent({
title: 'Building an AWS SDK for Perl',
startTime: moment({hour: 13, minute: 50}),
speakers: [
{
name: 'Jose Luis Martinez Torres',
description: ''
}
]
});
schedule.addEvent({
title: 'Perl in the Cloud - Update',
startTime: moment({hour: 14, minute: 50}),
speakers: [
{
name: 'Denis Banovic (@bano99)',
description: 'Denis Banovic has over 13 years of experience as a senior software developer, system administrator and team leader. Currently he is busy creating and implementing Cloud Applications for the tourism industry in Austria. In his spare time, Denis\' interests include rockets, photography, traveling and psychology.'
}
]
});
schedule.addEvent({
title: 'Coffee Break ☕',
startTime: moment({hour: 15, minute: 40})
});

View File

@ -1,139 +0,0 @@
function Schedule() {
var events = [];
this.addEvent = function(event) {
events.push(event);
events = _.sortBy(events, function(event) {
return event.startTime.unix()
});
}
this.upcomingEvents = function() {
return _.select(events, function(event) {
return event.startTime.isAfter(moment());
});
}
this.nextEvent = function() {
return _.first(this.upcomingEvents());
}
this.currentEvent = function() {
var latestEvent = _.last(this.pastEvents());
var nextEvent = this.nextEvent();
if (typeof nextEvent != 'undefined' && moment(nextEvent.startTime).subtract('minutes', 10).isAfter(moment())) {
return latestEvent;
} else {
return undefined;
}
}
this.futureEvents = function() {
return this.upcomingEvents().splice(1);
}
this.pastEvents = function() {
return _.select(events, function(event) {
return event.startTime.isBefore(moment());
});
}
this.allEvents = function() {
return events;
}
this.addDelay = function(time) {
_.each(this.upcomingEvents(), function(event, index, agenda) {
event.startTime.add(time);
});
}
}
var schedule = new Schedule();
schedule.addEvent({
title: 'Using Perl for autogeneration physical formulas',
startTime: moment({hour: 10, minute: 00}),
speakers: [
{
name: 'Ignat Ignatov',
description: ''
}
]
});
schedule.addEvent({
title: 'SQL::Abstract::FromQuery',
startTime: moment({hour: 10, minute: 30}),
speakers: [
{
name: 'Laurent Dami (dami)',
description: ''
}
]
});
schedule.addEvent({
title: 'Extreme (Elastic)Search',
startTime: moment({hour: 11, minute: 00}),
speakers: [
{
name: 'Borislav Nikolov (jackdoe)',
description: ''
}
]
});
schedule.addEvent({
title: 'SQL for accountants: understanding the beast via SpreadSheets',
startTime: moment({hour: 11, minute: 30}),
speakers: [
{
name: 'Peter Rabbitson (ribasushi)',
description: ''
}
]
});
schedule.addEvent({
title: 'Lunch 🍔',
startTime: moment({hour: 12, minute: 20})
});
schedule.addEvent({
title: 'Recruitment in Perl - The State of the Perl Recruitment Market',
startTime: moment({hour: 13, minute: 20}),
speakers: [
{
name: 'Rick Deller',
description: ''
}
]
});
schedule.addEvent({
title: 'Creative Perlmongership',
startTime: moment({hour: 13, minute: 50}),
speakers: [
{
name: 'Salve J. Nilsen (sjn)',
description: 'One of the original Oslo.pm\'ers who seems to end up organizing stuff more often than hacking.'
}
]
});
schedule.addEvent({
title: 'CSV made easier for end-users',
startTime: moment({hour: 14, minute: 50}),
speakers: [
{
name: 'H.Merijn Brand (Tux)',
description: 'Using mainly open source utilities and C to exchange data between sources, porting open source to commercial OSes and support the Open Source community as widely as possible. perl5 Configure pumpking and CSV wizard.'
}
]
});
schedule.addEvent({
title: 'Coffee Break ☕',
startTime: moment({hour: 15, minute: 40})
});

BIN
yapc.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 85 KiB