@patternslib/patternslib
Version:
Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la
300 lines (288 loc) • 16 kB
HTML
<html lang="en-US">
<head>
<title>Patterns — Slides</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/style/common.css" />
<script src="/bundle.min.js"></script>
<meta name="viewport" content="width=1274, user-scalable=no" />
<link rel="stylesheet" href="style/slides.css" />
</head>
<body>
<div class="pat-slides">
<div class="slide cover" id="Cover">
<div class="slide-content">
<section>
<hgroup>
<h1>Slides</h1>
<h2>Create slideshows in HTML 5</h2>
</hgroup>
</section>
</div>
<footer>
<p>Notes go here…</p>
</footer>
</div>
<div class="slide full" id="first-slide">
<div class="slide-content">
<section>
<h1>Case study: Dutch government</h1>
<img src="/src/pat/slides/media/binnenhof.jpg" alt="" />
</section>
</div>
<footer>
<p>Notes go here…</p>
</footer>
</div>
<div class="slide full" id="second-slide">
<div class="slide-content">
<section>
<hgroup>
<h1 class="animated bounceInLeft">Dialogues</h1>
<h2
class="animated bounceInLeft"
style="-webkit-animation-delay: 0.2s"
>
The brick and mortar of UX Design
</h2>
</hgroup>
<img src="/src/pat/slides/media/dialogues.jpg" />
<p
id="plato"
class="animated fadeIn"
style="-webkit-animation-delay: 1s"
>
But Socrates, how do we communicate with our
customers?
</p>
<p
id="socrates"
class="animated fadeIn"
style="-webkit-animation-delay: 3s"
>
Through dialogues…
</p>
</section>
</div>
<footer>
<p>
Contrary to popular belief, Lorem Ipsum is not simply
random text. It has roots in a piece of classical Latin
literature from 45 BC, making it over 2000 years old.
Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia, looked up one of the more obscure
Latin words, consectetur, from a Lorem Ipsum passage,
and going through the cites of the word in classical
literature, discovered the undoubtable source.
</p>
</footer>
</div>
<div class="slide clean no-logo" id="third-slide">
<div class="slide-content">
<section>
<h1>Animations</h1>
<figure class="middle">
<div
class="compound"
style="height: 640px; width: 1024px"
>
<img
style="
margin-top: -30px;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 1s;
"
width="1024"
height="640"
class="animated bounceInDown"
src="/src/pat/slides/media/pearl-bar.jpg"
/>
<img
style="
-webkit-animation-delay: 0.5s;
-webkit-animation-duration: 1s;
"
width="1024"
height="640"
class="animated fadeIn"
src="/src/pat/slides/media/pearl-slogan.png"
/>
<div
class="animated fadeInLeftBig"
style="
width: 1024px;
height: 640px;
-webkit-animation-delay: 1s;
-webkit-animation-duration: 1s;
"
>
<img
width="1024"
height="640"
src="/src/pat/slides/media/pearl-jewel.png"
/>
<img
style="
-webkit-animation-delay: 2.8s;
-webkit-animation-duration: 1s;
"
width="1024"
height="640"
class="animated fadeInRightBig"
src="/src/pat/slides/media/pearl-model.png"
/>
<img
width="1024"
height="640"
src="/src/pat/slides/media/pearl-pearl.png"
id="single-pearl"
/>
<img
style="
-webkit-animation-delay: 2.8s;
-webkit-animation-duration: 1s;
"
width="1024"
height="640"
class="animated fadeInRightBig"
src="/src/pat/slides/media/pearl-model-fingers.png"
/>
</div>
</div>
</figure>
</section>
</div>
<footer>
<p>
There are many variations of passages of Lorem Ipsum
available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which
don't look even slightly believable.
</p>
</footer>
</div>
<div class="slide" id="fourth-slide">
<div class="slide-content">
<section>
<h1>Play your cards well…</h1>
<figure class="fan">
<img src="/src/pat/slides/media/joker.png" />
<img src="/src/pat/slides/media/joker.png" />
<img src="/src/pat/slides/media/joker.png" />
<img src="/src/pat/slides/media/joker.png" />
<img src="/src/pat/slides/media/joker.png" />
</figure>
</section>
</div>
<footer>
<p>
If you are going to use a passage of Lorem Ipsum, you
need to be sure there isn't anything embarrassing hidden
in the middle of text.
</p>
</footer>
</div>
<div class="slide video" id="fifth-slide">
<div class="slide-content">
<section>
<h1>Big Buck Bunny</h1>
<video
preload="metadata"
controls="controls"
poster="/src/pat/slides/video/poster.jpg"
>
<source
src="/src/pat/slides/video/BigBuck.theora.ogv"
type="video/ogg"
/>
<source src="/src/pat/slides/video/BigBuck.m4v" />
</video>
</section>
</div>
<footer>
<p>
This video was made by the
<a href="http://www.blender.org/">Blender project</a>.
</p>
</footer>
</div>
<div class="slide">
<div class="slide-content">
<section>
<h1>Αριθμός Slide τρεις</h1>
<p>
Ευ φιξ φασερ ραθιονιβυς δετερρυισεθ. Ει περ σινθ
λιβερ δισεντιυνθ. Ατ νοσθρω λαβιθυρ ασομμοδαρε υσυ,
νυλλα λαβιθυρ ιν σεδ. Ναμ αδ ρεκυε δεσερυντ,
δελεσθυς αδιπισι νο ναμ, νο ηις φασερ μωδερατιυς.
Κυι υθ θαμκυαμ πλασεραθ, ιν σασε λαβορες φολυμυς
φελ.
</p>
<p>
Ναμ φεριθυς μινιμυμ εξ. Εα μελ ρεκυε φιρις, φις σασε
σονσεσθεθυερ ατ, δοσθυς ωπωρθεαθ πρωβατυς πρω αν.
Λωρεμ ινθεγρε φιφενδυμ σιθ ετ, δυο αδ πριμις πωσιθ
αλιενυμ. Μελ ευ φερι θαθιων. Διστα σιμυλ εα δυο, συμ
ιδ λιβερ φιθαε, πρω νυσκυαμ σαδιψσινγ ευ. Υσυ ιν
κυαεκυε μαλυισετ, κυι θριθανι φιθυπεραθα αν.
</p>
</section>
</div>
<footer class="notes">
<p>
Ευ φιξ φασερ ραθιονιβυς δετερρυισεθ. Ει περ σινθ λιβερ
δισεντιυνθ. Ατ νοσθρω λαβιθυρ ασομμοδαρε υσυ, νυλλα
λαβιθυρ ιν σεδ. Ναμ αδ ρεκυε δεσερυντ, δελεσθυς αδιπισι
νο ναμ, νο ηις φασερ μωδερατιυς. Κυι υθ θαμκυαμ
πλασεραθ, ιν σασε λαβορες φολυμυς φελ.
</p>
</footer>
</div>
<div class="slide">
<div class="slide-content">
<section>
<h1>幻燈片編號“三</h1>
<p>
周北見読評更暮咲記限馬応南政象。聞違富購府自回渡受書結新。写間違判合目融緊申供量上資恋人具健新日。水検的受副線真戦権来目古究部弁年。購覧期能土説情新候極金東情員散誤農株織。見見祭図記所冠題地載言保八。景義情被至献憶階輪思情無索一見海。井能小暮問倫入出子崎聞甘発本高年真産線雑。報出企先弘旅識経鑑夜庭帯業著写活京。
</p>
<p>
夏豊門師策属警況旭年載棋会護掲儀禁南終道。玉塁断生補蘭科応人彦究拝曲政別田子呼誌教。版氏問霊仄木告結京施読官流握算介。挙復検華携調人安芸申配民葛億演。成田広気野活次京自題判未。空質未平探名分打内温職和閣路行連。果課初企並伊推体治役然賢員間入。見電化点部柳日得講捜皇電月朝専取放岡。木混以造間避暮翌能万直格間推飲違業田。
</p>
</section>
</div>
<footer class="notes">
<p>
周北見読評更暮咲記限馬応南政象。聞違富購府自回渡受書結新。写間違判合目融緊申供量上資恋人具健新日。水検的受副線真戦権来目古究部弁年。購覧期能土説情新候極金東情員散誤農株織。見見祭図記所冠題地載言保八。景義情被至献憶階輪思情無索一見海。井能小暮問倫入出子崎聞甘発本高年真産線雑。報出企先弘旅識経鑑夜庭帯業著写活京。
</p>
</footer>
</div>
<div class="slide" dir="rtl">
<div class="slide-content">
<section>
<h1>رقم الشريحة ثلاثة</h1>
<p>
ان بعض قررت ونستون الأوروبيّون, بحث إذ هناك يونيو
فاتّبع, دار في سليمان، الحيلولة. ولم معركة انذار
الحروب لم. حدى سليمان، الأمامية عل. يتم بأذى أطراف
والديون كل.
</p>
<p>
جندي المحيط ذات في, لمّ ان بقعة التغييرات, ان أما
مايو غضون العناد. وقد جنود عسكري وتتحمّل من. بحث
سابق حلّت ساعة ما, وقد ما بقيادة إتفاقية. حالية
الدنمارك المتساقطة، حول بل, أم انتهت المحور تلك.
اللا أراض أثره، وصل أي, كل على الأوضاع لتقليعة.
</p>
</section>
</div>
<footer class="notes">
<p>
ان بعض قررت ونستون الأوروبيّون, بحث إذ هناك يونيو
فاتّبع, دار في سليمان، الحيلولة. ولم معركة انذار الحروب
لم. حدى سليمان، الأمامية عل. يتم بأذى أطراف والديون كل.
</p>
</footer>
</div>
</div>
</body>
</html>