Skip to content

S
shower-presentation
Commit be0172de authored by Vadim Makeev's avatar Vadim Makeev
Browse files
Options

initial structure

parent c8481df6
Expand all Show whitespace changes
Inline Side-by-side
Showing with 725 additions and 0 deletions
index.htm 0 → 100755
View file @ be0172de
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Shower</title>
<meta charset="UTF-8">
<link rel="stylesheet" title="screen" href="styles/screen.css">
<link rel="stylesheet" title="projection" disabled href="styles/projection.css">
<script src="scripts/jquery.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<div class="shower">
<section class="slide back" id="Cover">
<article>
<h1>Shower Presentaion Template</h1>
</article>
<img src="pictures/evolution.jpg" alt="">
</section>
<section class="slide" id="Header">
<article>
<h2>Heading</h2>
<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive, or e-mail those naughty pictures you hid in the Utilities folder to your mother.</p>
</article>
</section>
<section class="slide" id="TwoLinesHeader">
<article>
<h2>Two rows.<br>Mighty heading</h2>
<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive, or e-mail those naughty pictures you hid in the Utilities folder to your mother.</p>
</article>
</section>
<section class="slide" id="SevenItemsList">
<article>
<h2>Seven Items List</h2>
<ul>
<li>This tool is provided</li>
<li>Without warranty, guarantee</li>
<li>Or much in the way of explanation</li>
<li>Note that use of this tool</li>
<li>May or may not crash your browser</li>
<li>Lock up your machine</li>
<li>Erase your hard drive…</li>
</ul>
</article>
</section>
<section class="slide" id="NumberedList">
<article>
<h2>Numbered List</h2>
<ol>
<li>This tool is provided</li>
<li>Without warranty, guarantee</li>
<li>Or much in the way of explanation</li>
<li>Note that use of this tool</li>
<li>May or may not crash your browser</li>
<li>Lock up your machine</li>
<li>Erase your hard drive…</li>
</ol>
</article>
</section>
<section class="slide" id="SevenRowsCode">
<article>
<h2>Seven Rows Code</h2>
<pre>
<code>&lt;html lang="en-US"&gt;</code>
<code><em>&lt;head&gt;</em></code>
<code> &lt;title&gt;Shower&lt;/title&gt;</code>
<code> &lt;meta charset="<strong>UTF-8</strong>"&gt;</code>
<code> &lt;link rel="stylesheet" href="s/screen.css"&gt;</code>
<code> &lt;script src="j/jquery.js"&gt;&lt;/script&gt;</code>
<code><em>&lt;/head&gt;</em></code>
</pre>
</article>
</section>
<section class="slide" id="CodeAndNote">
<article>
<h2>Code And Its Note</h2>
<pre>
<code>&lt;html lang="en-US"&gt;</code>
<code><em>&lt;head&gt;</em></code>
<code> &lt;title&gt;Shower&lt;/title&gt;</code>
<code> &lt;meta charset="<strong>UTF-8</strong>"&gt;</code>
<code><em>&lt;/head&gt;</em></code>
</pre>
<p class="note">May or may not crash your browser</p>
</article>
</section>
<section class="slide" id="CodeAndTwoNotes">
<article>
<h2>Code And Two Notes</h2>
<pre>
<code><em>&lt;html</em> lang="en-US"&gt;</code>
</pre>
<p class="note">May or may not crash your browser</p>
<pre>
<code><em>&lt;meta</em> charset="<strong>UTF-8</strong>"&gt;</code>
</pre>
<p class="note">Lock up your machine</p>
</article>
</section>
<section class="slide" id="Quote">
<article>
<h2>Block Quote</h2>
<blockquote cite="Anonymous">
<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive, or e-mail those naughty pictures you hid in the Utilities folder to your mother.</p>
</blockquote>
</article>
</section>
<section class="slide back" id="Image">
<article>
<h2>Picture</h2>
</article>
<img src="pictures/bricks.jpg" alt="">
</section>
<section class="slide frame" id="Frame">
<iframe src="http://github.com/pepelsbey/shower" frameborder="0" scrolling="no"></iframe>
</section>
<section class="slide shout" id="JustAshout">
<article>
<h2>Shout!</h2>
</article>
</section>
<section class="slide shout" id="ShoutLink">
<article>
<h2><a href="#ThankYou">Link!</a></h2>
</article>
</section>
<section class="slide last" id="ThankYou">
<article>
<h2>Shower Presentaion Template</h2>
<p>Vadim Makeev, Opera Software</p>
<ul>
<li><a href="http://pepelsbey.net">pepelsbey.net</a></li>
<li><a href="http://twitter.com/pepelsbey">twitter.com/pepelsbey</a></li>
<li><a href="mailto:pepelsbey@gmail.com">pepelsbey@gmail.com</a></li>
</ul>
<p>Shower project: <a href="http://github.com/pepelsbey/shower">http://github.com/pepelsbey/shower</a></p>
</article>
</section>
</div>
</body>
</html>
\ No newline at end of file
scripts/jquery.js 0 → 100644
View file @ be0172de
This diff is collapsed.
scripts/script.js 0 → 100755
View file @ be0172de
$(function() {
var slides = $( 'section.slide' );
function fullScreen() {
return (
window.screenX == 0 &&
window.screenY == 0 &&
screen.width == window.outerWidth &&
screen.height == window.outerHeight
) ? true : false;
}
function turnSlide( e ) {
if( !fullScreen() ) return;
var current = $( document.location.hash );
switch ( e.which ) {
case 33 : // PgUp
case 38 : // Up
case 37 : // Left
var target = current.prev( slides );
break;
case 32 : // Space
case 34 : // PgDown
case 40 : // Down
case 39 : // Right
var target = current.next( slides );
break;
default:
return;
}
e.preventDefault();
if( !target.length ) return;
else document.location.hash = '#' + target.attr( 'id' );
}
function updateView() {
var screen = $( 'link[title=screen]' ),
projection = $( 'link[title=projection]' ),
fullscreen = fullScreen();
screen.attr( 'disabled', fullscreen );
projection.attr( 'disabled', !fullscreen );
if( !fullscreen || $( document.location.hash ).length ) return;
else document.location.hash = '#' + slides.first().attr( 'id' );
}
$( document ).
keyup( turnSlide );
$( window ).
ready( updateView ).
resize( updateView );
});
\ No newline at end of file
styles/fonts.css 0 → 100755
View file @ be0172de
/* PTSans */
@font-face {
font-family:'PTSans';
src:local('PTSans'), url(../fonts/PTSans.ttf) format('truetype');
}
@font-face {
font-family:'PTSans';
font-weight:bold;
src:local('PTSans'), url(../fonts/PTSans.Bold.ttf) format('truetype');
}
@font-face {
font-family:'PTSans';
font-style:italic;
src:local('PTSans'), url(../fonts/PTSans.Italic.ttf) format('truetype');
}
@font-face {
font-family:'PTSans';
font-weight:bold;
font-style:italic;
src:local('PTSans'), url(../fonts/PTSans.Bold.Italic.ttf) format('truetype');
}
@font-face {
font-family:'PTSans Caption';
src:local('PTSans'), url(../fonts/PTSans.Caption.ttf) format('truetype');
}
@font-face {
font-family:'PTSans Caption';
font-weight:bold;
src:local('PTSans Caption'), url(../fonts/PTSans.Caption.Bold.ttf) format('truetype');
}
@font-face {
font-family:'PTSans Narrow';
src:local('PTSans Narrow'), url(../fonts/PTSans.Narrow.ttf) format('truetype');
}
@font-face {
font-family:'PTSans Narrow';
font-weight:bold;
src:local('PTSans Narrow'), url(../fonts/PTSans.Narrow.Bold.ttf) format('truetype');
}
/* Consolas */
@font-face {
font-family:'Consolas';
src:local('Consolas'), url(../fonts/Consolas.ttf) format('truetype');
}
@font-face {
font-family:'Consolas';
font-weight:bold;
src:local('Consolas'), url(../fonts/Consolas.Bold.ttf) format('truetype');
}
@font-face {
font-family:'Consolas';
font-style:italic;
src:local('Consolas'), url(../fonts/Consolas.Italic.ttf) format('truetype');
}
@font-face {
font-family:'Consolas';
font-weight:bold;
font-style:italic;
src:local('Consolas'), url(../fonts/Consolas.Bold.Italic.ttf) format('truetype');
}
\ No newline at end of file
styles/projection.css 0 → 100755
View file @ be0172de
@import url(reset.css);
@import url(fonts.css);
BODY {
background:#000;
color:#FFF;
font:75px 'PTSans', sans-serif;
counter-reset:paging;
}
A {
text-decoration:none;
}
/* Slide
---------------------------------------- */
.slide {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin-left:100%;
overflow:hidden;
-webkit-border-radius:0 2em 2em 0;
-moz-border-radius:0 2em 2em 0;
border-radius:0 2em 2em 0;
background:#FFF;
color:#000;
}
.slide:target {
margin-left:0;
}
.slide:before {
position:absolute;
top:0;
right:3em;
width:1em;
height:3em;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAEsCAMAAAACQObTAAAAz1BMVEXMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAAAS27ylAAAARHRSTlMA+QMGCfb8D/BFw+3GEgzP8zM8zLdUhKufYDY5SDDJsXJjvVGZeKVLFZOKP2ldfm9a6rScwNKulqhXTpCNdWy6h6JCgQMMiNQAAAGxSURBVHhe7M2xCcJgFAbA1xkJPzGkU7S2tXAD959JxOJbIE8Q7ha4ev3APyUSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCSSx/HZnszXui9dSY7K0pPMa32MpTGZ1voaW0OSI0tPMp0rDtvuSY4st4bkdKnIsmvyrm0+VyKIoQCMfskUcRERWXdXFKwFu6hYe3n/Z1LwxxVmTCa5N+cFjhyyLBgnS8sQXvRJ03fA4sCFnEOWkVnSHINqQXVAPTJJmg9C6muDpJknrN5WJHJEF2Xi1omrX2OJ/oB6rEjcAVgsWBxQjTMT98Bw1WVW4nZIUW0EEvUhS3LiVkhV3SQmbfoB1TQhkcNoofe4J4+fDk7aC3L5u4FJe0o+vx9J5DBe6Byr6Pj3eKI9wM8CiRzqJZxsYWLWSewPuPo/OcHMbieRw3jpJi+Yuu1LzjF2KEmpQxZJNingUZJiBzz9TZ4p5EiSPSi6UPaAt9/kjKImP4kc5RY+KW7yDcDGg0ekTkUOAAAAAElFTkSuQmCC) 0 100% no-repeat;
-webkit-background-size:100%;
-moz-background-size:100%;
background-size:100%;
content:'';
}
.slide:after {
position:absolute;
bottom:4em;
left:6em;
color:#AAA;
font-size:0.5em;
counter-increment:paging;
content:counter(paging, decimal-leading-zero);
}
/* Article */
.slide ARTICLE {
position:absolute;
top:2em;
right:3em;
bottom:3em;
left:3em;
line-height:1.7;
}
/* Elements */
.slide ARTICLE H1,
.slide ARTICLE H2 {
margin:0 0 1.2em;
color:#666;
font:bold 1em/1.2 'PTSans Narrow', sans-serif;
}
.slide ARTICLE P {
margin:0 0 1.7em;
font-size:0.65em;
}
.slide ARTICLE P.note {
color:#888;
}
.slide ARTICLE A {
border-bottom:0.07em solid;
color:#0174A7;
}
.slide ARTICLE B,
.slide ARTICLE STRONG {
font-weight:bold;
}
.slide ARTICLE I,
.slide ARTICLE EM {
font-style:italic;
}
/* Quote */
.slide ARTICLE BLOCKQUOTE {
font-style:italic;
font-size:0.65em;
}
.slide ARTICLE BLOCKQUOTE P {
font-size:1em;
}
.slide ARTICLE BLOCKQUOTE:before {
position:absolute;
margin:-0.1em 0 0 -0.44em;
width:2.5em;
height:5em;
color:#BBB;
line-height:1;
font-size:8em;
content:'\201C';
}
.slide ARTICLE BLOCKQUOTE:after {
display:block;
margin:-1em 0 0;
color:#444;
font-weight:bold;
content:attr(cite);
}
/* Lists */
.slide ARTICLE OL,
.slide ARTICLE UL {
margin:0 0 1.7em;
counter-reset:list;
font-size:0.65em;
}
.slide ARTICLE OL LI:before,
.slide ARTICLE UL LI:before {
position:absolute;
width:2em;
color:#BBB;
text-align:right;
}
.slide ARTICLE UL LI:before {
margin-left:-2.6em;
line-height:1;
font-size:1.6em;
content:'\2022';
}
.slide ARTICLE OL LI:before {
margin-left:-3em;
counter-increment:list;
content:counter(list)'\002E';
}
/* Code */
.slide ARTICLE PRE {
margin:0 0 1.7em;
counter-reset:code;
white-space:normal;
font-size:0.65em;
}
.slide ARTICLE PRE CODE {
display:block;
white-space:pre;
font-family:Consolas, monospace;
}
.slide ARTICLE PRE CODE:before {
position:absolute;
margin:0 0 0 -2.7em;
width:2em;
color:#BBB;
text-align:right;
counter-increment:code;
content:counter(code, decimal-leading-zero)'.';
}
.slide ARTICLE PRE EM,
.slide ARTICLE PRE STRONG {
padding:0.1em 0.3em;
-webkit-border-radius:.3em;
-moz-border-radius:.3em;
border-radius:.3em;
}
.slide ARTICLE PRE EM {
background:#FAFAA2;
color:#000;
font-style:normal;
}
.slide ARTICLE PRE STRONG {
background:#C00;
color:#FFF;
font-weight:normal;
}
/* Back
---------------------------------------- */
.slide.back {
background:#000;
}
.slide.back ARTICLE {
z-index:2;
}
.slide.back IMG {
position:absolute;
top:0;
left:50%;
z-index:1;
height:100%;
-webkit-transform-origin:50% 0;
-webkit-transform:translate(-50%, 0);
-moz-transform-origin:50% 0;
-moz-transform:translate(-50%, 0);
-ms-transform-origin:50% 0;
-ms-transform:translate(-50%, 0);
-o-transform-origin:50% 0;
-o-transform:translate(-50%, 0);
}
.slide.back:after {
content:'';
}
/* Shout
---------------------------------------- */
.slide.shout {
}
.slide.shout ARTICLE H2 {
position:absolute;
top:50%;
margin:-0.5em 0 0;
width:100%;
text-align:center;
font-size:4em;
opacity:0;
-moz-transform:scale(0.1) translate(0, 2em);
-moz-transition:all 0.8s ease-out;
-ms-transform:scale(0.1) translate(0, 2em);
-ms-transition:all 0.8s ease-out;
-o-transform:scale(0.1) translate(0, 2em);
-o-transition:all 0.8s ease-out;
}
.slide.shout:target ARTICLE H2 {
opacity:1;
-moz-transform:scale(1) translate(0, 0);
-ms-transform:scale(1) translate(0, 0);
-o-transform:scale(1) translate(0, 0);
}
.slide.shout:before {
display:none;
}
.slide.shout:after {
content:'';
}
/* Frame
---------------------------------------- */
.slide.frame {
background:#000;
}
.slide.frame IFRAME {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.slide.frame:after {
content:'';
}
\ No newline at end of file
styles/reset.css 0 → 100755
View file @ be0172de
ABBR,ARTICLE,ASIDE,AUDIO,BB,CANVAS,DATAGRID,DATALIST,
DETAILS,DIALOG,FIGURE,FOOTER,HEADER,MARK,MENU,
METER,NAV,OUTPUT,PROGRESS,SECTION,TIME,VIDEO {
display:block;
}
HTML,BODY,DIV,SPAN,APPLET,OBJECT,IFRAME,H1,H2,H3,H4,H5,H6,P,
BLOCKQUOTE,PRE,A,ABBR,ACRONYM,ADDRESS,BIG,CITE,CODE,DEL,DFN,
EM,FONT,IMG,INS,KBD,Q,S,SAMP,SMALL,STRIKE,STRONG,SUB,SUP,
TT,VAR,HR,B,U,I,CENTER,DL,DT,DD,OL,UL,LI,FIELDSET,FORM,
LABEL,LEGEND,TABLE,CAPTION,TBODY,TFOOT,THEAD,TR,TH,TD {
padding:0;
margin:0;
border:none;
outline:none;
vertical-align:baseline;
font-family:inherit;
font-size:100%;
}
DFN,I,CITE,VAR,ADDRESS,EM {
font-style:normal;
}
TH,B,STRONG,H1,H2,H3,H4,H5,H6{
font-weight:normal;
}
TEXTAREA,INPUT,SELECT{
font-family:inherit;
font-size:1em;
}
BLOCKQUOTE,Q {
quotes:none;
}
OL,UL {
list-style:none;
}
CAPTION,TH,TD {
text-align:left;
}
styles/screen.css 0 → 100755
View file @ be0172de
@import url(reset.css);
@import url(fonts.css);
BODY {
background:#EEE;
color:#000;
font:13px 'PTSans', sans-serif;
}
A {
text-decoration:none;
}
\ No newline at end of file
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