janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add another demo presentation: examples/classic-slides

Browse Source 
Add one presentation that provides a very simple demo, using
impress.js to create a very traditional "slide show". Possibly
it's an easier way to learn impress.js (it's commented, just like
the official demo.) It uses the relative positioning plugin and
uses "speaker notes", which aren't shown in the presentation,
but are picked up and shown in the speaker console (press 'P').
Also uses autoplay, forms... and includes short demo of all the extra
addons from extras/. (Highlight.js, Markdown.js, Mathjax.js, Mermaid.js)
This commit is contained in:
Henrik Ingo
2017-10-30 18:07:48 +02:00
parent 478a572294
commit e847fb4fb4
11 changed files with 2121 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

464
examples/classic-slides/css/classic-slides.css Normal file
View File

@@ -0,0 +1,464 @@
/*
A common approach is to use googleapis.com to generate css for the webfonts you want to use.
The downside of this approach is that you have to be online. So below I have simply saved
the output of the googleapis url into a file. Then you of course also have to make sure
the webfonts are locally installed to make offline usage work. For Ubuntu (or Debian) I
successfully used the script from here to do that:
http://www.webupd8.org/2011/01/automatically-install-all-google-web.html
*/
/* @import url(http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic|Cutive+Mono); */
@import url(fonts.css);
/*
We display a fallback message for users with browsers that don't support
all the features required by it. All of the content will be still fully
accessible for them, but some more advanced effects would be missing.
When impress.js detects that browser supports all necessary CSS3 features,
the fallback-message style is hidden.
*/
.fallback-message {
font-family: sans-serif;
line-height: 1.3;
width: 780px;
padding: 10px 10px 0;
margin: 20px auto;
border: 1px solid #E4C652;
border-radius: 10px;
background: #EEDC94;
}
.fallback-message p {
margin-bottom: 10px;
}
.impress-supported .fallback-message {
display: none;
}
/*
The body background is the bacgkround of "everything". Many
impress.js tools call it the "surface". It could also be a
picture or pattern, but we leave it as light gray.
*/
body {
font-family: 'PT Sans', sans-serif;
min-height: 740px;
background: rgb(215, 215, 215);
color: rgb(102, 102, 102);
}
/*
Now let's style the presentation steps.
*/
.step {
position: relative;
width: 900px;
padding: 40px;
margin: 20px auto;
box-sizing: border-box;
font-family: 'PT Serif', georgia, serif;
font-size: 48px;
line-height: 1.5;
}
/*
Make inactive steps a little bit transparent.
*/
.impress-enabled .step {
margin: 0;
opacity: 0.3;
transition: opacity 1s;
}
.impress-enabled .step.active { opacity: 1 }
/*
Speaker notes allow you to write comments within the steps, that will not
be displayed as part of the presentation. However, they will be picked up
and displayed by impressConsole.js when integrated.
*/
.notes {
display: none;
}
/*
These 'slide' step styles were heavily inspired by HTML5 Slides:
http://html5slides.googlecode.com/svn/trunk/styles.css
Note that we also use a background image, again just to facilitate a common
feature from PowerPoint and LibreOffice worlds. In this case the background
image is just the impress.js favicon - as if it were a company logo or something.
*/
.slide {
display: block;
width: 900px;
height: 700px;
padding: 40px 60px;
background-image: url(../images/background.png);
background-color: white;
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
font-family: 'Open Sans', Arial, sans-serif;
font-size: 30px;
letter-spacing: -1px;
}
.slide h1,
.slide h2,
.slide h3 {
margin-bottom: 0.5em;
margin-top: 0.5em;
text-align: center;
}
.slide p {
text-align: center;
margin: 0.7em;
}
.slide li {
margin: 0.2em;
}
/* Highlight.js used for coloring pre > code blocks. */
.slide pre > code {
font-size: 14px;
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
/* Inline code, no Highlight.js */
code {
font-family: "Cutive mono","Courier New", monospace;
}
a {
color: inherit;
text-decoration: none;
padding: 0 0.1em;
background: rgba(200,200,200,0.2);
text-shadow: -1px 1px 2px rgba(100,100,100,0.9);
border-radius: 0.2em;
border-bottom: 1px solid rgba(100,100,100,0.2);
border-left: 1px solid rgba(100,100,100,0.2);
transition: 0.5s;
}
a:hover,
a:focus {
background: rgba(200,200,200,1);
text-shadow: -1px 1px 2px rgba(100,100,100,0.5);
}
blockquote {
font-family: 'PT Serif';
font-style: italic;
font-weight: 400;
}
em {
text-shadow: 0 2px 2px rgba(0, 0, 0, .3);
}
strong {
text-shadow: -1px 1px 2px rgba(100,100,100,0.5);
}
q {
font-family: 'PT Serif';
font-style: italic;
font-weight: 400;
text-shadow: 0 2px 2px rgba(0, 0, 0, .3);
}
strike {
opacity: 0.7;
}
small {
font-size: 0.4em;
}
img {
width: 300px
}
.slide .right {
float: right;
margin-left: 40px;
margin-right: 0px;
margin-top: 20px;
margin-bottom: 20px;
}
.slide .left {
float: left;
margin-right: 40px;
margin-left: 0px;
margin-top: 20px;
margin-bottom: 20px;
}
.slide .top {
position: absolute;
top: 20px;
margin-bottom: 20px;
margin-top: 0px;
}
.slide .bottom {
position: absolute;
bottom: 20px;
margin-bottom: 0px;
margin-top: 20px;
}
/*
Specific styles for: .title slides
*/
.title {
background-image: url(../images/background-title.png);
}
.title h1,
.title h2,
.title h3 {
position: absolute;
left: 45px; /* slide width is 900px, so this is like a 5% margin on both sides */
width: 90%;
text-align: center;
}
.title h1 { top: 50px; }
.title h2 { top: 400px; }
.title h3 { top: 500px; }
/* Styles for animating the contents of a slide, such as a img, p, li or span element. ********/
/*
fly-in class starts from a position outside the slide, then flies into it's correct position.
*/
.future .fly-in {
transform: translateY(-700px);
opacity: 0.0; /* Make it invisible, just so it doesn't clutter some other slide that might be in the position where we moved it */
}
.present .fly-in {
transform: translateY(0px);
opacity: 1.0;
transition: 2s;
}
.past .fly-out {
transform: translateY(700px);
opacity: 0.0;
transition: 2s;
}
/*
Fade-in/out is a straightforward fade. Give it enough seconds that all browsers render it clearly.
*/
.future .fade-in {
opacity: 0.0;
}
.present .fade-in {
opacity: 1.0;
transition: 3s;
}
.past .fade-out {
opacity: 0.0;
transition: 3s;
}
/*
Zoom-in.
*/
.future .zoom-in {
transform: scale(10);
opacity: 0.0;
}
.present .zoom-in {
transform: scale(1);
opacity: 1.0;
transition: 3s;
}
.past .zoom-out {
transform: scale(10);
opacity: 0.0;
}
/*
This version of impress.js supports plugins, and in particular, a UI toolbar
plugin that allows easy navigation between steps and autoplay.
*/
.impress-enabled div#impress-toolbar {
position: fixed;
right: 1px;
bottom: 1px;
opacity: 0.6;
z-index: 10;
}
.impress-enabled div#impress-toolbar > span {
margin-right: 10px;
}
/*
With help from the mouse-timeout plugin, we can hide the toolbar and
have it show only when you move/click/touch the mouse.
*/
body.impress-mouse-timeout div#impress-toolbar {
display: none;
}
/*
In fact, we can hide the mouse cursor itself too, when mouse isn't used.
*/
body.impress-mouse-timeout {
cursor: none;
}
/* Progress bar */
.impress-progressbar {
position: absolute;
right: 118px;
bottom: 1px;
left: 118px;
border-radius: 7px;
border: 2px solid rgba(100, 100, 100, 0.2);
}
.impress-progressbar DIV {
width: 0;
height: 2px;
border-radius: 5px;
background: rgba(75, 75, 75, 0.4);
transition: width 1s linear;
}
.impress-progress {
position: absolute;
left: 59px;
bottom: 1px;
text-align: left;
font-size: 10pt;
opacity: 0.6;
}
/* Help popup plugin */
.impress-enabled #impress-help {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
color: #EEEEEE;
font-size: 80%;
position: fixed;
left: 2em;
bottom: 2em;
width: 24em;
border-radius: 1em;
padding: 1em;
text-align: center;
z-index: 100;
font-family: Verdana, Arial, Sans;
}
.impress-enabled #impress-help td {
padding-left: 1em;
padding-right: 1em;
}
/* Substep plugin */
#impress .step .substep {
opacity: 0;
}
#impress .step .substep.substep-visible {
opacity: 1;
transition: opacity 1s;
}
/*
Styles for specific slides.
*/
/* The bar graph for Acme Inc profits */
#acme-graph-bottom {
position: absolute;
bottom: 100px;
left: 440px;
background-color: black;
width: 410px;
height: 2px;
}
/* height: is set from javascript */
#acme-graph-q1,
#acme-graph-q2,
#acme-graph-q3,
#acme-graph-q4 {
border: solid 1px black;
width: 70px;
margin-left: 10px;
position: absolute;
bottom: 100px;
}
#acme-graph-q1 {
background-color: red;
left: 450px;
}
#acme-graph-q2 {
background-color: blue;
left: 550px;
}
#acme-graph-q3 {
background-color: green;
left: 650px;
}
#acme-graph-q4 {
background-color: purple;
left: 750px;
}
/*
And as the last thing there is a workaround for quite strange bug.
It happens a lot in Chrome. I don't remember if I've seen it in Firefox.
Sometimes the element positioned in 3D (especially when it's moved back
along Z axis) is not clickable, because it falls 'behind' the <body>
element.
To prevent this, I decided to make <body> non clickable by setting
pointer-events property to `none` value.
Value if this property is inherited, so to make everything else clickable
I bring it back on the #impress element.
If you want to know more about `pointer-events` here are some docs:
https://developer.mozilla.org/en/CSS/pointer-events
There is one very important thing to notice about this workaround - it makes
everything 'unclickable' except what's in #impress element.
So use it wisely ... or don't use at all.
*/
.impress-enabled { pointer-events: none }
.impress-enabled #impress { pointer-events: auto }
.impress-enabled #impress-toolbar { pointer-events: auto }

497
examples/classic-slides/css/fonts.css Normal file
View File

@@ -0,0 +1,497 @@
/* latin-ext */
@font-face {
font-family: 'Cutive Mono';
font-style: normal;
font-weight: 400;
src: local('Cutive Mono'), local('CutiveMono-Regular'), url(http://fonts.gstatic.com/s/cutivemono/v4/N5odNRruTwjvCM8y77PhQSYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cutive Mono';
font-style: normal;
font-weight: 400;
src: local('Cutive Mono'), local('CutiveMono-Regular'), url(http://fonts.gstatic.com/s/cutivemono/v4/N5odNRruTwjvCM8y77PhQY4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSq-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShWV49_lSm1NYrwo-zkhivY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSv8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBjTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBjUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBkbcKLIaa1LC45dFaAfauRA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBmo_sUJ8uO4YLWRInS22T3Y.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBr6up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBiYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxmgpAmOCqD37_tyH_8Ri5MM.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxsPNMTLbnS9uQzHQlYieHUU.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxgyhumQnPMBCoGYhRaNxyyY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxhUVAXEdVvYDDqrz3aeR0Yc.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxlf4y_3s5bcYyyLIFUSWYUU.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxnywqdtBbUHn3VPgzuFrCy8.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxl2umOyRU7PgRiv8DXcgJjk.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/JX7MlXqjSJNjQvI4heMMGvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/vtwNVMP8y9C17vLvIBNZI_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/9kaD4V2pNPMMeUVBHayd7vY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/ATKpv8nLYAKUYexo8iqqrg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://fonts.gstatic.com/s/ptsans/v8/kTYfCWJhlldPf5LnG4ZnHCEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://fonts.gstatic.com/s/ptsans/v8/g46X4VH_KHOWAAa-HpnGPiEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://fonts.gstatic.com/s/ptsans/v8/hpORcvLZtemlH8gI-1S-7iEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://fonts.gstatic.com/s/ptsans/v8/0XxGQsSc1g4rdRdjJKZrNPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://fonts.gstatic.com/s/ptsans/v8/GpWpM_6S4VQLPNAQ3iWvVRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://fonts.gstatic.com/s/ptsans/v8/7dSh6BcuqDLzS2qAASIeuhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://fonts.gstatic.com/s/ptsans/v8/DVKQJxMmC9WF_oplMzlQqRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://fonts.gstatic.com/s/ptsans/v8/PIPMHY90P7jtyjpXuZ2cLFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 700;
src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://fonts.gstatic.com/s/ptsans/v8/lILlYDvubYemzYzN7GbLkK-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 700;
src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://fonts.gstatic.com/s/ptsans/v8/lILlYDvubYemzYzN7GbLkJX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 700;
src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://fonts.gstatic.com/s/ptsans/v8/lILlYDvubYemzYzN7GbLkD0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 700;
src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://fonts.gstatic.com/s/ptsans/v8/lILlYDvubYemzYzN7GbLkOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
src: local('PT Serif'), local('PTSerif-Regular'), url(http://fonts.gstatic.com/s/ptserif/v8/5hX15RUpPERmeybVlLQEWBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
src: local('PT Serif'), local('PTSerif-Regular'), url(http://fonts.gstatic.com/s/ptserif/v8/fU0HAfLiPHGlZhZpY6M7dBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
src: local('PT Serif'), local('PTSerif-Regular'), url(http://fonts.gstatic.com/s/ptserif/v8/CPRt--GVMETgA6YEaoGitxTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
src: local('PT Serif'), local('PTSerif-Regular'), url(http://fonts.gstatic.com/s/ptserif/v8/I-OtoJZa3TeyH6D9oli3ifesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 700;
src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://fonts.gstatic.com/s/ptserif/v8/QABk9IxT-LFTJ_dQzv7xpDTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 700;
src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://fonts.gstatic.com/s/ptserif/v8/QABk9IxT-LFTJ_dQzv7xpDUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 700;
src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://fonts.gstatic.com/s/ptserif/v8/QABk9IxT-LFTJ_dQzv7xpCYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 700;
src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://fonts.gstatic.com/s/ptserif/v8/QABk9IxT-LFTJ_dQzv7xpI4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'PT Serif';
font-style: italic;
font-weight: 400;
src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://fonts.gstatic.com/s/ptserif/v8/O_WhD9hODL16N4KLHLX7xSEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'PT Serif';
font-style: italic;
font-weight: 400;
src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://fonts.gstatic.com/s/ptserif/v8/3Nwg9VzlwLXPq3fNKwVRMCEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'PT Serif';
font-style: italic;
font-weight: 400;
src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://fonts.gstatic.com/s/ptserif/v8/b31S45a_TNgaBApZhTgE6CEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'PT Serif';
font-style: italic;
font-weight: 400;
src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://fonts.gstatic.com/s/ptserif/v8/03aPdn7fFF3H6ngCgAlQzPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
font-family: 'PT Serif';
font-style: italic;
font-weight: 700;
src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://fonts.gstatic.com/s/ptserif/v8/Foydq9xJp--nfYIx2TBz9ede9INZm0R8ZMJUtfOsxrw.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'PT Serif';
font-style: italic;
font-weight: 700;
src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://fonts.gstatic.com/s/ptserif/v8/Foydq9xJp--nfYIx2TBz9bpHcMS0zZe4mIYvDKG2oeM.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'PT Serif';
font-style: italic;
font-weight: 700;
src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://fonts.gstatic.com/s/ptserif/v8/Foydq9xJp--nfYIx2TBz9RHJTnCUrjaAm2S9z52xC3Y.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'PT Serif';
font-style: italic;
font-weight: 700;
src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://fonts.gstatic.com/s/ptserif/v8/Foydq9xJp--nfYIx2TBz9YWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

BIN
examples/classic-slides/images/3476636111_c551295ca4_b.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
examples/classic-slides/images/background-title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

337
examples/classic-slides/images/background-title.svg Normal file
View File

@@ -0,0 +1,337 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="900"
height="700"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="background-title.svg"
inkscape:export-filename="/home/hingo/hacking/impress.js/examples/classic-slides/images/background-title.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs4">
<linearGradient
id="linearGradient3972">
<stop
style="stop-color:#d7d7d7;stop-opacity:1;"
offset="0"
id="stop3974" />
<stop
id="stop4001"
offset="0.5"
style="stop-color:#e4e4eb;stop-opacity:0.49803922;" />
<stop
style="stop-color:#f2f2ff;stop-opacity:0;"
offset="1"
id="stop3976" />
</linearGradient>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.7"
inkscape:cx="442.96588"
inkscape:cy="486.34297"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="845"
inkscape:window-x="-2"
inkscape:window-y="-3"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-352.36218)">
<path
sodipodi:type="star"
style="fill:#f7f7f7;fill-opacity:1;stroke:#dccbcb;stroke-opacity:1"
id="path3195"
sodipodi:sides="5"
sodipodi:cx="-432.85715"
sodipodi:cy="448.57144"
sodipodi:r1="36.617161"
sodipodi:r2="29.623903"
sodipodi:arg1="1.2120257"
sodipodi:arg2="1.8403442"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -420.00001,482.85716 -41.49172,-11.46298 -1.9197,-43.00323 40.30527,-15.11447 26.82974,33.66196 z"
transform="matrix(0.49829507,0,0,0.49829507,1175.0086,227.72198)"
inkscape:transform-center-x="-1.50147"
inkscape:transform-center-y="-0.2514516" />
<path
sodipodi:type="star"
style="fill:#d7d7d7;fill-opacity:1;stroke:#c8b7b7"
id="path3197"
sodipodi:sides="5"
sodipodi:cx="-478.57144"
sodipodi:cy="288.57144"
sodipodi:r1="47.573788"
sodipodi:r2="38.488003"
sodipodi:arg1="0.72165485"
sodipodi:arg2="1.3499734"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -442.85716,320.00001 -54.56831,12.2497 -28.51269,-48.11219 36.94651,-41.98466 51.34688,22.16424 z"
transform="matrix(0.49829507,0,0,0.49829507,1183.5508,278.97519)"
inkscape:transform-center-x="1.6045478"
inkscape:transform-center-y="-0.68274238" />
<path
sodipodi:type="star"
style="fill:#f2f2f2;fill-opacity:1;stroke:#c8b7b7"
id="path3199"
sodipodi:sides="5"
sodipodi:cx="-358.57144"
sodipodi:cy="152.85715"
sodipodi:r1="39.512333"
sodipodi:r2="31.966148"
sodipodi:arg1="2.4329664"
sodipodi:arg2="3.0612849"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -388.57144,178.57143 -3.72625,-46.29983 42.88228,-17.8513 30.22896,35.26711 -24.19976,39.64758 z"
transform="matrix(0.49829507,0,0,0.49829507,1144.399,329.51655)"
inkscape:transform-center-x="-1.409826"
inkscape:transform-center-y="-0.48807819" />
<image
y="-881.14282"
x="775.50507"
id="image4083"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAABP9JREFU
WIWdl11oW2UYx3/P+WiSpknHsi2MNgtkGNbVVryoisJkA+sYjG3MG2GwQdEhuxB2M4ThBGGCjLFR
pkPZhYIwNrCom+iK9GJ4sVIdumnRdh/CbEu1o7ZZ6UdyHi+aU9+cnqyNLzyQc973/b//5/98vDmi
qqx2qCqWZaGq7N69e6/neU/atj0bi8X6Ll269EOxWMRxHFpaWhgcHFw9aC0WiUQARkVEAQW0/Pua
quJ53qod+l8EgJTjOCX/cN8cx5lQ1c2e59VEwqqNLiQSiQlV/Sf4Pp1OzwCzIoKIsOrQ1qqAqhKP
x/8koABwwVyzWhWqKvA4D4rFYp/5LCKsWbPmNxGpeGdiGCEklUqFEzh69Cgi8oWIvCsilEqlUAJz
c3PXzGfbtnEc57sw0g8fPkRVEZF3RKT3wIEDTExMVHq6sLBAX18fwK+AWpalwMcDAwMUi8VlIdiw
YcOzdXV1pvyFsFBNTU35x5wrYypw58yZM5UEyszPlhd4BvC327Zts4PAzc3NOI4z5a9zXfePMAJN
TU0AXxl4PvZrS2qpKsePH2+JRCLBpPLt1qZNm5pDyvGOv6axsfH74HwymQQYCMMUkZnW1tb/CADP
mI0laNFodNp13af97FZVMpnMTcOj0+ac67o5y7LCKkX9EO/YsSNvEsgkk0kFljUYXzrbtueBTj8n
gBOA2ratwKuGMu22bc8FQmnK70WjUW1ra0sD4HkepVKJ8fHxLNABfJpIJLzAJt+KwBuFQgFgSyKR
+An4JplMxsuH7wXmw5yor69X4GsR2X7jxo2mU6dOVSah2UDi8TjATuBqeWOw77eqKvfv32d0dNT3
/PmAgl557Y8i0gUwNDSEqnLs2DGWRlj2+rFUVbq6utqBN23b/jkajarrugth+4Cs4zh+jP+uq6vr
FpG2mzdvpsNwXdetTiDM+vv7AdqAtjDC5aa1B9i5f//+FfF6enpYu3ZtbXfB+vXrN7a2ttZVm+/s
7MQ8fHJysirW0l2xUggOHz6cAV4RkSupVEoty7rT1dW1bM+uXbsQkdvAiOu6Z4GO3t7eZf3DtHv3
7oUTKI+XgE+CSVi2fMie9mDJWZY1ISIngC3VnDXjB/Ac8Hk0Gg3WrlmGRxYWFshms3XASeA00FTu
bB9Wq/90Ol0E3gNyg4ODstRPyuw7yguDmysakYhsNzx+3Zg/qao8evQI4MgKWCWgcPDgwbSqLl3H
cUDKFjbGI5HIU57n9fkhyuVye/zJVCr1AkB9fT2qeg542SAQHJbruvGRkZEGYDEE3d3d7SIyV4Vx
/9atW5fFrqGh4bbvaSwWG1JV20zgWCz2BDBRBfOvJSUNSd83Yuaz/+z69esb5+fnwxL1gQE4GZZg
uVyuCbgVzAfgxQoCpVKJu3fvbgR+Nxa/rbr4ZyUInM1mc47jLPV827a9TCazrOSKxSJjY2MAVw3c
Hv/MCgVUlfPnzwN8CRwK9gOzR6xbt26nKalt25pOpw+FqTA7O4uqxoGPgAsA09PTVCiwUjMKkf+t
YFwbGho+qLa+XHK28XtlAo+zfD7/gOVldkVVN6+0FyrPdKqUXehQXfw2dBevMrNktbGxsQNorAUP
QIzWu6qRSCSYmZmZ8jwvUQEkMuV5Xs0Eav40KxQKeJ43FnyvqoOXL1+uFa42BVQV/+tn3759LcPD
w3nXdcnn879cvHhx2PM8LKs2n/4Ful6n5lJtlzQAAAAASUVORK5CYII=
"
height="50.57143"
width="50.57143"
transform="matrix(0,1,-1,0,0,0)" />
<path
sodipodi:type="star"
style="fill:#d7d7d7;fill-opacity:1;stroke:#c8b7b7"
id="path3197-6"
sodipodi:sides="5"
sodipodi:cx="-478.57144"
sodipodi:cy="288.57144"
sodipodi:r1="47.573788"
sodipodi:r2="38.488003"
sodipodi:arg1="0.72165485"
sodipodi:arg2="1.3499734"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -442.85716,320.00001 -54.56831,12.2497 -28.51269,-48.11219 36.94651,-41.98466 51.34688,22.16424 z"
transform="matrix(0.44159933,0.23084195,-0.23084195,0.44159933,89.555741,918.94346)"
inkscape:transform-center-x="-1.8892484"
inkscape:transform-center-y="-0.39033876" />
<path
sodipodi:type="star"
style="fill:#f7f7f7;fill-opacity:1;stroke:#dccbcb;stroke-opacity:1"
id="path3195-8"
sodipodi:sides="5"
sodipodi:cx="-432.85715"
sodipodi:cy="448.57144"
sodipodi:r1="36.617161"
sodipodi:r2="29.623903"
sodipodi:arg1="1.2120257"
sodipodi:arg2="1.8403442"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -420.00001,482.85716 -41.49172,-11.46298 -1.9197,-43.00323 40.30527,-15.11447 26.82974,33.66196 z"
transform="matrix(0.49829507,0,0,0.49829507,38.474821,733.37841)"
inkscape:transform-center-x="-1.50147"
inkscape:transform-center-y="-0.2514516" />
<path
sodipodi:type="star"
style="fill:#f2f2f2;fill-opacity:1;stroke:#c8b7b7"
id="path3199-9"
sodipodi:sides="5"
sodipodi:cx="-358.57144"
sodipodi:cy="152.85715"
sodipodi:r1="39.512333"
sodipodi:r2="31.966148"
sodipodi:arg1="2.4329664"
sodipodi:arg2="3.0612849"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -388.57144,178.57143 -3.72625,-46.29983 42.88228,-17.8513 30.22896,35.26711 -24.19976,39.64758 z"
transform="matrix(0.49829507,0,0,0.49829507,30.121671,876.6823)"
inkscape:transform-center-x="-1.409826"
inkscape:transform-center-y="-0.48807819" />
<path
sodipodi:type="star"
style="fill:#f2f2f2;fill-opacity:1;stroke:#c8b7b7"
id="path3199-3"
sodipodi:sides="5"
sodipodi:cx="-358.57144"
sodipodi:cy="152.85715"
sodipodi:r1="39.512333"
sodipodi:r2="31.966148"
sodipodi:arg1="2.4329664"
sodipodi:arg2="3.0612849"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -388.57144,178.57143 -3.72625,-46.29983 42.88228,-17.8513 30.22896,35.26711 -24.19976,39.64758 z"
transform="matrix(0.34408672,0,0,0.34408672,-3.3081587,917.1069)"
inkscape:transform-center-x="-0.97352805"
inkscape:transform-center-y="-0.33703252" />
<path
sodipodi:type="star"
style="fill:#f2f2f2;fill-opacity:1;stroke:#c8b7b7"
id="path3199-3-0"
sodipodi:sides="5"
sodipodi:cx="-358.57144"
sodipodi:cy="152.85715"
sodipodi:r1="39.512333"
sodipodi:r2="31.966148"
sodipodi:arg1="2.4329664"
sodipodi:arg2="3.0612849"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -388.57144,178.57143 -3.72625,-46.29983 42.88228,-17.8513 30.22896,35.26711 -24.19976,39.64758 z"
transform="matrix(0.34408672,0,0,0.34408672,29.548981,922.96025)"
inkscape:transform-center-x="-0.97352805"
inkscape:transform-center-y="-0.33703252" />
<path
sodipodi:type="star"
style="fill:#f7f7f7;fill-opacity:1;stroke:#dccbcb;stroke-opacity:1"
id="path3195-8-0"
sodipodi:sides="5"
sodipodi:cx="-432.85715"
sodipodi:cy="448.57144"
sodipodi:r1="36.617161"
sodipodi:r2="29.623903"
sodipodi:arg1="1.2120257"
sodipodi:arg2="1.8403442"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -420.00001,482.85716 -41.49172,-11.46298 -1.9197,-43.00323 40.30527,-15.11447 26.82974,33.66196 z"
transform="matrix(0.3204918,0,0,0.3204918,79.533061,832.48569)"
inkscape:transform-center-x="-0.96571172"
inkscape:transform-center-y="-0.16173851" />
<path
sodipodi:type="star"
style="fill:#f7f7f7;fill-opacity:1;stroke:#dccbcb;stroke-opacity:1"
id="path3195-0"
sodipodi:sides="5"
sodipodi:cx="-432.85715"
sodipodi:cy="448.57144"
sodipodi:r1="36.617161"
sodipodi:r2="29.623903"
sodipodi:arg1="1.2120257"
sodipodi:arg2="1.8403442"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -420.00001,482.85716 -41.49172,-11.46298 -1.9197,-43.00323 40.30527,-15.11447 26.82974,33.66196 z"
transform="matrix(-0.50808944,0,0,0.49826547,-279.52146,234.09512)"
inkscape:transform-center-x="1.5309823"
inkscape:transform-center-y="-0.25143993" />
<path
sodipodi:type="star"
style="fill:#d7d7d7;fill-opacity:1;stroke:#c8b7b7"
id="path3197-4"
sodipodi:sides="5"
sodipodi:cx="-478.57144"
sodipodi:cy="288.57144"
sodipodi:r1="47.573788"
sodipodi:r2="38.488003"
sodipodi:arg1="0.72165485"
sodipodi:arg2="1.3499734"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -442.85716,320.00001 -54.56831,12.2497 -28.51269,-48.11219 36.94651,-41.98466 51.34688,22.16424 z"
transform="matrix(-0.50808944,0,0,0.49826547,-288.23156,285.34529)"
inkscape:transform-center-x="-1.6360872"
inkscape:transform-center-y="-0.68270036" />
<path
sodipodi:type="star"
style="fill:#f2f2f2;fill-opacity:1;stroke:#c8b7b7"
id="path3199-90"
sodipodi:sides="5"
sodipodi:cx="-358.57144"
sodipodi:cy="152.85715"
sodipodi:r1="39.512333"
sodipodi:r2="31.966148"
sodipodi:arg1="2.4329664"
sodipodi:arg2="3.0612849"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -388.57144,178.57143 -3.72625,-46.29983 42.88228,-17.8513 30.22896,35.26711 -24.19976,39.64758 z"
transform="matrix(-0.50808944,0,0,0.49826547,-248.3102,335.88365)"
inkscape:transform-center-x="1.437537"
inkscape:transform-center-y="-0.48804535" />
<text
xml:space="preserve"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="829.30469"
y="-856.37756"
id="text4226"
sodipodi:linespacing="125%"
transform="matrix(0,1,-1,0,0,0)"><tspan
sodipodi:role="line"
id="tspan4228"
x="829.30469"
y="-856.37756"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:PT Serif;-inkscape-font-specification:PT Serif">impress.js</tspan></text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
examples/classic-slides/images/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

323
examples/classic-slides/images/background.svg Normal file
View File

@@ -0,0 +1,323 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="900"
height="700"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="background.svg"
inkscape:export-filename="/home/hingo/hacking/impress.js/examples/classic-slides/images/background-title.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs4">
<linearGradient
id="linearGradient3972">
<stop
style="stop-color:#d7d7d7;stop-opacity:1;"
offset="0"
id="stop3974" />
<stop
id="stop4001"
offset="0.5"
style="stop-color:#e4e4eb;stop-opacity:0.49803922;" />
<stop
style="stop-color:#f2f2ff;stop-opacity:0;"
offset="1"
id="stop3976" />
</linearGradient>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.7"
inkscape:cx="442.96588"
inkscape:cy="486.34297"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="845"
inkscape:window-x="-2"
inkscape:window-y="-3"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-352.36218)">
<path
sodipodi:type="star"
style="fill:#f7f7f7;fill-opacity:1;stroke:#dccbcb;stroke-opacity:1"
id="path3195"
sodipodi:sides="5"
sodipodi:cx="-432.85715"
sodipodi:cy="448.57144"
sodipodi:r1="36.617161"
sodipodi:r2="29.623903"
sodipodi:arg1="1.2120257"
sodipodi:arg2="1.8403442"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -420.00001,482.85716 -41.49172,-11.46298 -1.9197,-43.00323 40.30527,-15.11447 26.82974,33.66196 z"
transform="matrix(0.49829507,0,0,0.49829507,1080.7229,232.00769)"
inkscape:transform-center-x="-1.50147"
inkscape:transform-center-y="-0.2514516" />
<path
sodipodi:type="star"
style="fill:#d7d7d7;fill-opacity:1;stroke:#c8b7b7"
id="path3197"
sodipodi:sides="5"
sodipodi:cx="-478.57144"
sodipodi:cy="288.57144"
sodipodi:r1="47.573788"
sodipodi:r2="38.488003"
sodipodi:arg1="0.72165485"
sodipodi:arg2="1.3499734"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -442.85716,320.00001 -54.56831,12.2497 -28.51269,-48.11219 36.94651,-41.98466 51.34688,22.16424 z"
transform="matrix(0.49829507,0,0,0.49829507,1089.2651,283.2609)"
inkscape:transform-center-x="1.6045478"
inkscape:transform-center-y="-0.68274238" />
<path
sodipodi:type="star"
style="fill:#f2f2f2;fill-opacity:1;stroke:#c8b7b7"
id="path3199"
sodipodi:sides="5"
sodipodi:cx="-358.57144"
sodipodi:cy="152.85715"
sodipodi:r1="39.512333"
sodipodi:r2="31.966148"
sodipodi:arg1="2.4329664"
sodipodi:arg2="3.0612849"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -388.57144,178.57143 -3.72625,-46.29983 42.88228,-17.8513 30.22896,35.26711 -24.19976,39.64758 z"
transform="matrix(0.49829507,0,0,0.49829507,1050.1133,333.80226)"
inkscape:transform-center-x="-1.409826"
inkscape:transform-center-y="-0.48807819" />
<image
y="999.21936"
x="852.57141"
id="image4083"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAABP9JREFU
WIWdl11oW2UYx3/P+WiSpknHsi2MNgtkGNbVVryoisJkA+sYjG3MG2GwQdEhuxB2M4ThBGGCjLFR
pkPZhYIwNrCom+iK9GJ4sVIdumnRdh/CbEu1o7ZZ6UdyHi+aU9+cnqyNLzyQc973/b//5/98vDmi
qqx2qCqWZaGq7N69e6/neU/atj0bi8X6Ll269EOxWMRxHFpaWhgcHFw9aC0WiUQARkVEAQW0/Pua
quJ53qod+l8EgJTjOCX/cN8cx5lQ1c2e59VEwqqNLiQSiQlV/Sf4Pp1OzwCzIoKIsOrQ1qqAqhKP
x/8koABwwVyzWhWqKvA4D4rFYp/5LCKsWbPmNxGpeGdiGCEklUqFEzh69Cgi8oWIvCsilEqlUAJz
c3PXzGfbtnEc57sw0g8fPkRVEZF3RKT3wIEDTExMVHq6sLBAX18fwK+AWpalwMcDAwMUi8VlIdiw
YcOzdXV1pvyFsFBNTU35x5wrYypw58yZM5UEyszPlhd4BvC327Zts4PAzc3NOI4z5a9zXfePMAJN
TU0AXxl4PvZrS2qpKsePH2+JRCLBpPLt1qZNm5pDyvGOv6axsfH74HwymQQYCMMUkZnW1tb/CADP
mI0laNFodNp13af97FZVMpnMTcOj0+ac67o5y7LCKkX9EO/YsSNvEsgkk0kFljUYXzrbtueBTj8n
gBOA2ratwKuGMu22bc8FQmnK70WjUW1ra0sD4HkepVKJ8fHxLNABfJpIJLzAJt+KwBuFQgFgSyKR
+An4JplMxsuH7wXmw5yor69X4GsR2X7jxo2mU6dOVSah2UDi8TjATuBqeWOw77eqKvfv32d0dNT3
/PmAgl557Y8i0gUwNDSEqnLs2DGWRlj2+rFUVbq6utqBN23b/jkajarrugth+4Cs4zh+jP+uq6vr
FpG2mzdvpsNwXdetTiDM+vv7AdqAtjDC5aa1B9i5f//+FfF6enpYu3ZtbXfB+vXrN7a2ttZVm+/s
7MQ8fHJysirW0l2xUggOHz6cAV4RkSupVEoty7rT1dW1bM+uXbsQkdvAiOu6Z4GO3t7eZf3DtHv3
7oUTKI+XgE+CSVi2fMie9mDJWZY1ISIngC3VnDXjB/Ac8Hk0Gg3WrlmGRxYWFshms3XASeA00FTu
bB9Wq/90Ol0E3gNyg4ODstRPyuw7yguDmysakYhsNzx+3Zg/qao8evQI4MgKWCWgcPDgwbSqLl3H
cUDKFjbGI5HIU57n9fkhyuVye/zJVCr1AkB9fT2qeg542SAQHJbruvGRkZEGYDEE3d3d7SIyV4Vx
/9atW5fFrqGh4bbvaSwWG1JV20zgWCz2BDBRBfOvJSUNSd83Yuaz/+z69esb5+fnwxL1gQE4GZZg
uVyuCbgVzAfgxQoCpVKJu3fvbgR+Nxa/rbr4ZyUInM1mc47jLPV827a9TCazrOSKxSJjY2MAVw3c
Hv/MCgVUlfPnzwN8CRwK9gOzR6xbt26nKalt25pOpw+FqTA7O4uqxoGPgAsA09PTVCiwUjMKkf+t
YFwbGho+qLa+XHK28XtlAo+zfD7/gOVldkVVN6+0FyrPdKqUXehQXfw2dBevMrNktbGxsQNorAUP
QIzWu6qRSCSYmZmZ8jwvUQEkMuV5Xs0Eav40KxQKeJ43FnyvqoOXL1+uFa42BVQV/+tn3759LcPD
w3nXdcnn879cvHhx2PM8LKs2n/4Ful6n5lJtlzQAAAAASUVORK5CYII=
"
height="32"
width="32" />
<path
sodipodi:type="star"
style="fill:#d7d7d7;fill-opacity:1;stroke:#c8b7b7"
id="path3197-6"
sodipodi:sides="5"
sodipodi:cx="-478.57144"
sodipodi:cy="288.57144"
sodipodi:r1="47.573788"
sodipodi:r2="38.488003"
sodipodi:arg1="0.72165485"
sodipodi:arg2="1.3499734"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -442.85716,320.00001 -54.56831,12.2497 -28.51269,-48.11219 36.94651,-41.98466 51.34688,22.16424 z"
transform="matrix(0.44159933,0.23084195,-0.23084195,0.44159933,328.12717,970.37203)"
inkscape:transform-center-x="-1.8892484"
inkscape:transform-center-y="-0.39033876" />
<path
sodipodi:type="star"
style="fill:#f7f7f7;fill-opacity:1;stroke:#dccbcb;stroke-opacity:1"
id="path3195-8"
sodipodi:sides="5"
sodipodi:cx="-432.85715"
sodipodi:cy="448.57144"
sodipodi:r1="36.617161"
sodipodi:r2="29.623903"
sodipodi:arg1="1.2120257"
sodipodi:arg2="1.8403442"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -420.00001,482.85716 -41.49172,-11.46298 -1.9197,-43.00323 40.30527,-15.11447 26.82974,33.66196 z"
transform="matrix(0.49829507,0,0,0.49829507,277.04625,784.80698)"
inkscape:transform-center-x="-1.50147"
inkscape:transform-center-y="-0.2514516" />
<path
sodipodi:type="star"
style="fill:#f2f2f2;fill-opacity:1;stroke:#c8b7b7"
id="path3199-9"
sodipodi:sides="5"
sodipodi:cx="-358.57144"
sodipodi:cy="152.85715"
sodipodi:r1="39.512333"
sodipodi:r2="31.966148"
sodipodi:arg1="2.4329664"
sodipodi:arg2="3.0612849"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -388.57144,178.57143 -3.72625,-46.29983 42.88228,-17.8513 30.22896,35.26711 -24.19976,39.64758 z"
transform="matrix(0.49829507,0,0,0.49829507,268.6931,928.11087)"
inkscape:transform-center-x="-1.409826"
inkscape:transform-center-y="-0.48807819" />
<path
sodipodi:type="star"
style="fill:#f2f2f2;fill-opacity:1;stroke:#c8b7b7"
id="path3199-3"
sodipodi:sides="5"
sodipodi:cx="-358.57144"
sodipodi:cy="152.85715"
sodipodi:r1="39.512333"
sodipodi:r2="31.966148"
sodipodi:arg1="2.4329664"
sodipodi:arg2="3.0612849"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -388.57144,178.57143 -3.72625,-46.29983 42.88228,-17.8513 30.22896,35.26711 -24.19976,39.64758 z"
transform="matrix(0.34408672,0,0,0.34408672,235.26327,968.53547)"
inkscape:transform-center-x="-0.97352805"
inkscape:transform-center-y="-0.33703252" />
<path
sodipodi:type="star"
style="fill:#f2f2f2;fill-opacity:1;stroke:#c8b7b7"
id="path3199-3-0"
sodipodi:sides="5"
sodipodi:cx="-358.57144"
sodipodi:cy="152.85715"
sodipodi:r1="39.512333"
sodipodi:r2="31.966148"
sodipodi:arg1="2.4329664"
sodipodi:arg2="3.0612849"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -388.57144,178.57143 -3.72625,-46.29983 42.88228,-17.8513 30.22896,35.26711 -24.19976,39.64758 z"
transform="matrix(0.34408672,0,0,0.34408672,268.12041,974.38882)"
inkscape:transform-center-x="-0.97352805"
inkscape:transform-center-y="-0.33703252" />
<path
sodipodi:type="star"
style="fill:#f7f7f7;fill-opacity:1;stroke:#dccbcb;stroke-opacity:1"
id="path3195-8-0"
sodipodi:sides="5"
sodipodi:cx="-432.85715"
sodipodi:cy="448.57144"
sodipodi:r1="36.617161"
sodipodi:r2="29.623903"
sodipodi:arg1="1.2120257"
sodipodi:arg2="1.8403442"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -420.00001,482.85716 -41.49172,-11.46298 -1.9197,-43.00323 40.30527,-15.11447 26.82974,33.66196 z"
transform="matrix(0.3204918,0,0,0.3204918,318.10449,883.91426)"
inkscape:transform-center-x="-0.96571172"
inkscape:transform-center-y="-0.16173851" />
<path
sodipodi:type="star"
style="fill:#f7f7f7;fill-opacity:1;stroke:#dccbcb;stroke-opacity:1"
id="path3195-0"
sodipodi:sides="5"
sodipodi:cx="-432.85715"
sodipodi:cy="448.57144"
sodipodi:r1="36.617161"
sodipodi:r2="29.623903"
sodipodi:arg1="1.2120257"
sodipodi:arg2="1.8403442"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -420.00001,482.85716 -41.49172,-11.46298 -1.9197,-43.00323 40.30527,-15.11447 26.82974,33.66196 z"
transform="matrix(-0.50808944,0,0,0.49826547,-180.95003,232.66655)"
inkscape:transform-center-x="1.5309823"
inkscape:transform-center-y="-0.25143993" />
<path
sodipodi:type="star"
style="fill:#d7d7d7;fill-opacity:1;stroke:#c8b7b7"
id="path3197-4"
sodipodi:sides="5"
sodipodi:cx="-478.57144"
sodipodi:cy="288.57144"
sodipodi:r1="47.573788"
sodipodi:r2="38.488003"
sodipodi:arg1="0.72165485"
sodipodi:arg2="1.3499734"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -442.85716,320.00001 -54.56831,12.2497 -28.51269,-48.11219 36.94651,-41.98466 51.34688,22.16424 z"
transform="matrix(-0.50808944,0,0,0.49826547,-189.66013,283.91672)"
inkscape:transform-center-x="-1.6360872"
inkscape:transform-center-y="-0.68270036" />
<path
sodipodi:type="star"
style="fill:#f2f2f2;fill-opacity:1;stroke:#c8b7b7"
id="path3199-90"
sodipodi:sides="5"
sodipodi:cx="-358.57144"
sodipodi:cy="152.85715"
sodipodi:r1="39.512333"
sodipodi:r2="31.966148"
sodipodi:arg1="2.4329664"
sodipodi:arg2="3.0612849"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -388.57144,178.57143 -3.72625,-46.29983 42.88228,-17.8513 30.22896,35.26711 -24.19976,39.64758 z"
transform="matrix(-0.50808944,0,0,0.49826547,-149.73877,334.45508)"
inkscape:transform-center-x="1.437537"
inkscape:transform-center-y="-0.48804535" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

463
examples/classic-slides/index.html Normal file
View File

@@ -0,0 +1,463 @@
<!doctype html>
<!--
This is a simple example / template impress.js slide show. The goal is to be
easier to read for a first timer than the official and very feature rich
demo by bartaz (http://bartaz.github.io/impress.js/). It's also a very
traditional presentation that looks like slides (square screens with bullet
points...), again to make a first timer feel more at home. From this simple
presentation you can then go on to more powerful impress.js presentations!
This example is hopefully helpful for people that want to create both
simple and (eventually) awesome presentations in impress.js and comfortable
doing that directly in HTML.
By: @henrikingo (Still based on the HTML from bartaz' demo.)
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Classic Slides with impress.js | Simple example impress.js slide show | by Henrik Ingo @henrikingo</title>
<meta name="description" content="Simple example impress.js slide show" />
<meta name="author" content="Henrik Ingo" />
<!--
Impress.js doesn't depend on any external stylesheets. It adds all of the styles it needs for the
presentation to work.
However, some of the `extras/` modules do come with their own CSS, and we load
them here. You can read about each extras module separately in their directory.
-->
<link rel="stylesheet" href="../../extras/highlight/styles/github.css">
<link rel="stylesheet" href="../../extras/mermaid/mermaid.forest.css">
<!--
This file contains styles specific for this example presentation.
-->
<link href="css/classic-slides.css" rel="stylesheet" />
</head>
<!--
Body element is used by impress.js to set some useful class names, that will allow you to detect
the support and state of the presentation in CSS or other scripts.
First very useful class name is `impress-not-supported`. This class means, that browser doesn't
support features required by impress.js, so you should apply some fallback styles in your CSS.
It's not necessary to add it manually on this element. If the script detects that browser is not
good enough it will add this class, but keeping it in HTML means that users without JavaScript
will also get fallback styles.
When impress.js script detects that browser supports all required features, this class name will
be removed.
Another class name on body element also depends on currently active presentation step.
-->
<body class="impress-not-supported">
<!--
This fallback message is only visible when there is `impress-not-supported` class on body.
-->
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<!--
This is the core element used by impress.js: the wrapper for your presentation steps.
In this element all the impress.js magic happens.
data-transition-duration sets the time in microseconds that is used for the
animation when transtitioning between slides.
data-autoplay can be used to set the time in seconds, after which presentation
automatically moves to next slide. It can also be set individually for each
slide, but here we just set a common duration for all slides.
-->
<div id="impress" data-transition-duration="1000" data-autoplay="10">
<!--
Each step of the presentation should be an element inside the `#impress` with a class name
of `step`. These step elements are positioned, rotated and scaled by impress.js, and
the 'camera' shows them on each step of the presentation.
The `id` attribute of the step element is used to identify it in the URL, but it's optional.
If it is not defined, it will get a default value of `step-N` where N is a number of slide.
This step is auto-assigned the id "step-1". You can also use `#step-1` in a link, to
point directly to this particular step.
Positioning information is passed through data-* attributes.
In the example below we only specify x and y position of the step element with `data-x="-1000"`
and `data-y="-1500"` attributes. This means that **the center** of the element (yes, the center)
will be positioned in point x = -1000px and y = -1500px of the presentation 'canvas'. It will not
be rotated or scaled.
The "step" class is what *must* be used for every "slide". In this example we also use the "slide"
class, which adds a rectangle with some background and makes this presentation look like a traditional
powerpoint slide show. The "slide" class is entirely optional and indeed you wouldn't use it for
your cooler impress.js presentations.
-->
<div class="step slide title" data-x="-1000" data-y="-1500">
<h1>Example Presentation: <br />
Classic Slides</h1>
<h2>Henrik Ingo</h2>
<h3>2015</h3>
<div class="notes">
Any element with the class="notes" will not be displayed. This can
be used for speaker notes. In fact, the impressConsole plugin will
show it in the speaker console!
</div>
</div>
<div class="step slide" data-rel-x="1000" data-rel-y="0">
<h1>Table of Contents</h1>
<ul>
<li><a href="#step-1">A title slide</a></li>
<li><a href="#step-2">Table of Contents</a></li>
<li><a href="#step-3">Text slide</a></li>
<li><a href="#step-4">Bullet points</a></li>
<li><a href="#step-5">Blockquote &amp; image</a></li>
<li><a href="#step-6">More basic text styles</a></li>
<li><a href="#step-7">Motion effects 101</a></li>
<li><a href="#addons">Add-ons</a></li>
<li><a href="#moreinfo">More info</a></li>
</ul>
<div class="notes">
<p>Table of Contents, with links to other slides of this same presentation.</p>
<p>Note that instead of absolute positioning we use relative positioning,
with the data-rel-x and data-rel-y attributes. This means the step is
positioned relative to the foregoing step. In other words, this is
equivalent to data-x="0" data-y="-1500".</p>
</div>
</div>
<div class="step slide">
<h1>A slide with text</h1>
<p>This slide has a few paragraphs <br />(p element) of normal text.</p>
<p>Personally I like centered or even justified text, as it looks less boring. This can of course be set in <a href="css/classic-slides.css">the css file</a>.</p>
<p>I really like the style on links in these presentations. I modified the border to be beveled, but it's mostly from <a href="http://henrikingo.github.io/impress.js/">@bartaz' original demo</a>. <a href="https://twitter.com/bartaz">@bartaz</a> is the creator of impress.js.</p>
<div class="notes">
In this slide, we don't even specify the relative position, rather
that too is inherited. So this slide will again be 1000px to the
right of the previous one.
</div>
</div>
<div class="step slide">
<h1>Bullet points</h1>
<ul>
<li>A slide with bullet points. This is the first point.</li>
<li>Second point</li>
<li>Third point. Under this point we also have some sub-bullets:
<ul>
<li>Sub-bullet 1</li>
<li>Sub-bullet 2</li>
</ul>
</li>
</ul>
<div class="notes">
</div>
</div>
<!--
This element introduces rotation.
Notation shouldn't be a surprise. We use `data-rotate="30"` attribute, meaning that this
element should be rotated by 30 degrees clockwise.
-->
<div class="step slide" data-rel-x="1100" data-rel-y="300" data-rotate="30">
<h1>A blockquote &amp; image</h1>
<img src="images/3476636111_c551295ca4_b.jpg"
alt="Mother Teresa holding a newborn baby"
class="right"/>
<blockquote>
Spread love everywhere you go. <br />Let no one ever come to you without leaving happier.
<p style="text-align: right">Mother Teresa</p>
<p class="left bottom"><small>Image credit: <a href="https://www.flickr.com/photos/peta-de-aztlan/3476636111/">Peta_de_Aztlan</a>@Flickr. CC-BY 2.0</small></p>
</blockquote>
<div class="notes">
</div>
</div>
<div class="step slide" data-rel-x="800" data-rel-y="800" data-rotate="60">
<h1>More text styles</h1>
<p>As usual, use <em>em</em> to emphasize, <br />
<strong>strong</strong> for strong, <u>u</u> for underline,<br />
<strike>strike</strike> for strikethrough and <q>q for inline quotations</q>.</p>
<p>If you're a software engineer like me, you will often use the
<code>&lt;code&gt;</code> tag for monospaced inline text.</p>
<div class="notes">
</div>
</div>
<div class="step slide" data-rel-x="300" data-rel-y="1100" data-rotate="90">
<h1>Motion effects 101</h1>
<p>Items on the slide can</p>
<p class="fly-in fly-out">Fly in</p>
<p class="fade-in fade-out" style="transition-delay: 2s">Fade in</p>
<p class="zoom-in zoom-out" style="transition-delay: 4s">And zoom in</p>
<p class="left bottom"><small>...just like in PowerPoint. Yeah, I know I'm being lame, but it was fun to learn to do this in CSS3.</small></p>
<div class="notes">
<p>This step here doesn't introduce anything new when it comes to data attributes, but you
should notice in the demo that some words of this text are being animated.
It's a very basic CSS transition that is applied to the elements when this step element is
reached.
</p><p>
At the very beginning of the presentation all step elements are given the class of `future`.
It means that they haven't been visited yet.
</p><p>
When the presentation moves to given step `future` is changed to `present` class name.
That's how animation on this step works - text moves when the step has `present` class.
</p><p>
Finally when the step is left the `present` class is removed from the element and `past`
class is added.
</p><p>
So basically every step element has one of three classes: `future`, `present` and `past`.
Only one current step has the `present` class.
</p>
</div>
</div>
<div id="addons" class="step slide title" data-rel-x="-300" data-rel-y="1100" data-rotate="120">
<h2>Add-ons</h2>
<div class="notes">
<p>This version of impress.js includes several add-ons, striving to make this a
full featured presentation app.</p>
</div>
</div>
<div class="step slide" data-rel-x="-800" data-rel-y="800" data-rotate="150" data-autoplay="3">
<h1>Impress.js plugins</h1>
<ul>
<li>A new <a href="https://github.com/henrikingo/impress.js/blob/myfork/src/plugins/README.md">plugin framework</a> allows for rich extensibility,
without bloating the core rendering library.
<ul>
<li class="substep">Press 'P' to open a presenter console.</li>
<li class="substep">When you move the mouse, navigation controls are visible on your bottom left</li>
<li class="substep">Autoplay makes the slides advance after a timeout</li>
<li class="substep">Relative positioning plugin is often a more convenient way to position your slides when editing. (<a href="https://github.com/henrikingo/impress.js/blob/myfork/examples/classic-slides/index.html">See html for this presentation.</a>)</li>
</ul>
</li>
</ul>
<div class="notes">
<p>This presentation also uses speaker notes. They are not visible in the presentation, but shown in the impress console.</p>
<p>If you pressed P only now, this is the first time you see these notes. In fact, there has been notes on preceding slides as well.
You can use the navigation controls at the bottom of the impress console to browse back to them.</p>
<p>And did you notice how those bullet points appear one by one as you press space/arrow? That's another plugin, called substeps.</p>
</div>
</div>
<div class="step slide" data-rel-x="-1100" data-rel-y="300" data-rotate="180">
<h1>Highlight.js</h1>
<pre><code>
// `init` API function that initializes (and runs) the presentation.
var init = function () {
if (initialized) { return; }
execPreInitPlugins();
// First we set up the viewport for mobile devices.
// For some reason iPad goes nuts when it is not done properly.
var meta = $("meta[name='viewport']") || document.createElement("meta");
meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no";
if (meta.parentNode !== document.head) {
meta.name = 'viewport';
document.head.appendChild(meta);
}
</code></pre>
<div class="notes">
<p>The Highlight.js library provides really nice color coding of source code.
It automatically applies to any code inside a &lt;pre&gt;&lt;code&gt; element.</p>
<p>Highlight.js is found under the <a href="https://github.com/henrikingo/impress.js/tree/myfork/extras">extras/</a>
directory, since it is an independent third party plugin, not really an impress.js plugin. You have
to include it via it's own &lt;link&gt; and &lt;script&gt; tags.</p>
</div>
</div>
<div class="step slide" data-rel-x="-1100" data-rel-y="-300" data-rotate="210">
<h1>Mermaid.js</h1>
<div class="mermaid">
%% This is a comment in mermaid markup
graph LR
A(Support for<br />diagrams)
B[Provided by<br />mermaid.js]
C{Already<br />know<br />mermaid?}
D(<a href=&quot;http://knsv.github.io/mermaid/index.html#usage&quot;>Tutorial</a>)
E(Great, hope you enjoy!)
A-->B
B-->C
C--No-->D
C--Yes-->E
classDef startEnd fill:#fcc,stroke:#353,stroke-width:2px;
class A,D,E startEnd;
</div>
<h1><a href="http://docs.mathjax.org/en/latest/start.html">MathJax.js</a></h1>
<p>Use \(\LaTeX\), MathML or AsciiMath to properly show mathematical formula.</p>
<div class="notes">
Mermaid.js, likewise in a href="https://github.com/henrikingo/impress.js/tree/myfork/extras">extras/</a>
directory, draws SVG diagrams from a MarkDown-like syntax. To learn
more about it <a href="http://knsv.github.io/mermaid/index.html#usage">read the fine manual</a>.
</div>
</div>
<div id="markdown" class="step slide markdown" data-rel-x="-800" data-rel-y="-800" data-rotate="240">
# Markdown.js
* [Markdown.js](https://github.com/evilstreak/markdown-js) integration: for authors in a hurry!
* ...or lazy ;-)
* Jot down bullet points in *Markdown*
* ...have it automatically converted to HTML
* Markdown is converted into a presentation client side, in the browser. This is unlike
existing tools like [Hovercraft](https://github.com/regebro/hovercraft) and
[markdown-impress](http://binbinliao.com/markdown-impress/) where you generate a new
html file on the command line.
* [A more advanced Markdown presentation is here.](../markdown/)
</div>
<div id="acme" class="step slide" data-rel-x="-300" data-rel-y="-1100" data-rotate="270">
<ul>
<li>Remember, in <em>impress.js</em> the full power of HTML5, CSS3 &amp; JavaScript is always at your fingertips!</li>
<li>For example, you can use tables, forms, or dynamic charts as you would on any web page:</li>
</ul>
<h2>Acme Inc Quarterly Profits</h2>
<!-- Improvised bar graph of divs, to avoid copying something like NVD3 into the repo. -->
<div id="acme-graph">
<div id="acme-graph-bars">
<div id="acme-graph-q1"></div>
<div id="acme-graph-q2"></div>
<div id="acme-graph-q3"></div>
<div id="acme-graph-q4"></div>
</div>
<div id="acme-graph-bottom"></div>
</div>
<table border="1">
<tr><td>Q1</td><td id="acme-q1">234€</td></tr>
<tr><td>Q2</td><td id="acme-q2">255€</td></tr>
<tr><td>Q3</td><td><input id="acme-q3" size="5" oninput="acmeDrawGraph();" />€ <small>(insert here)</small></td></tr>
<tr><td>Q4</td><td><input id="acme-q4" size="5" oninput="acmeDrawGraph();" />€</td></tr>
</table>
<div class="notes">
</div>
</div>
<script type="text/javascript">
var acmeDrawGraph = function() {
var profits = {};
// Q1-Q2: get innerHTML, remove €
var value = document.getElementById('acme-q1').innerHTML;
if( value[value.length-1] == "€" ) value = value.substring(0, value.length-1);
profits['q1'] = value;
var value = document.getElementById('acme-q2').innerHTML;
if( value[value.length-1] == "€" ) value = value.substring(0, value.length-1);
profits['q2'] = value;
// Q3-Q4: get input.value
profits['q3'] = document.getElementById('acme-q3').value;
profits['q4'] = document.getElementById('acme-q4').value;
// Convert all to numeric value, and remember max value for scaling purposes.
var max = profits['q1'];
for ( var q in profits ) {
profits[q] = isNaN(profits[q]) ? 0 : Number(profits[q]);
if( profits[q] > max ) {
max = profits[q];
}
}
// Draw the bar graph
for ( var q in profits ) {
var h = 200 * profits[q] / max;
var div = document.getElementById('acme-graph-'+q);
div.style = 'height: ' + h + 'px';
}
};
// This draws the first 2 bars during page load
acmeDrawGraph();
</script>
<!--
This step also sets a custom data-transition-duration. All of the above steps used the value set
in the root div#impress element, but it is also allowed to set it for each step. Since transitioning
to this step will rotate twice around it's axis, we give the transition a bit more time here.
-->
<div id="moreinfo" class="step slide" data-x="2020" data-y="700" data-rotate="720" data-transition-duration="2000">
<h1>More info</h1>
<ul>
<li><a href="https://github.com/henrikingo/impress.js/blob/myfork/DOCUMENTATION.md">DOCUMENTATION.md</a> is the API reference.
</li>
<li><a href="https://github.com/henrikingo/impress.js/blob/myfork/examples/classic-slides/index.html">Source of this presentation itself</a> is commented</li>
<li><a href="http://henrikingo.github.io/impress.js/">Advanced Impress.js demo</a> by <a href="http://twitter.com/bartaz">@bartaz</a>
<ul>
<li>Again, the <a href="http://github.com/henrikingo/impress.js/blob/myfork/index.html">html</a>
and <a href="https://github.com/henrikingo/impress.js/blob/myfork/css/impress-demo.css">css</a> source is well commented.</li>
</ul>
</li>
<li>More examples and demos:
<ul>
<li><a href="https://github.com/henrikingo/impress.js/tree/myfork/examples">examples/</a> in this repository</li>
<li><a href="https://github.com/impress/impress.js/wiki/Examples-and-demos">on the impress.js wiki</a></li>
</ul>
</li>
<li>Check out <a href="https://github.com/henrikingo/impressionist">Impressionist</a>: a 3D GUI to create impress.js presentations</li>
</ul>
<div class="notes">
</div>
</div>
<!-- This last, empty "slide" is set to be very large using the data-scale attribute,
so that it covers all the other slides you just saw.
It's a common way of zooming out at the end, to show the whole presentation.
In CSS, we set pointer-events:none to make this slide non-clickable.
It makes a difference at least for SVG content, such as the mermaid diagram. -->
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10" style="pointer-events: none;">
</div>
</div>
<!--
Add navigation-ui controls: back, forward and a select list.
Add a progress indicator bar (current step / all steps)
Add the help popup plugin
-->
<div id="impress-toolbar"></div>
<div class="impress-progressbar"><div></div></div>
<div class="impress-progress"></div>
<div id="impress-help"></div>
<!-- Extra modules
Load highlight.js, mermaid.js, markdown.js and MathJax.js from extras.
If you're curious about details, these are initialized in src/plugins/extras/extras.js -->
<script type="text/javascript" src="../../extras/highlight/highlight.pack.js"></script>
<script type="text/javascript" src="../../extras/mermaid/mermaid.min.js"></script>
<script type="text/javascript" src="../../extras/markdown/markdown.js"></script>
<script type="text/javascript" src="../../extras/mathjax/MathJax.js?config=TeX-AMS_CHTML"></script>
<!--
To make all described above really work, you need to include impress.js in the page.
You also need to call a `impress().init()` function to initialize impress.js presentation.
And you should do it in the end of your document.
-->
<script type="text/javascript" src="../../js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>

14
examples/index.html Normal file
View File

@@ -0,0 +1,14 @@
<html>
<head>
<title>Example presentations</title>
</head>
<body><h1>Example presentations</h1>
<ul><br />
<li><a href="2D-navigation/">2D-navigation</a></li>
<li><a href="3D-rotations/">3D-rotations</a></li>
<li><a href="classic-slides/">classic-slides</a></li>
<li><a href="cube/">cube</a></li>
<li><a href="markdown/">markdown</a></li>
</ul>
</body>
</html>