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

more beautiful examples index.html & fixes

Browse Source
This commit is contained in:
Janis Hutz
2023-02-23 20:47:20 +01:00
parent a1f5da363f
commit 50a83798d1
7 changed files with 122 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
website/css/style.css
View File

@@ -119,8 +119,29 @@ body {
} }
/* This div will have crazy cool style, as this should represent that you can use (almost) all the CSS you want.*/ /* This div will have crazy cool style, as this should represent that you can use (almost) all the CSS you want.*/
.create .crazy-styled { .create .special-style {
background-color: aqua; background-color: aqua;
border-radius: 50px;
font-family: cursive;
padding: 5%;
animation-name: background;
animation-duration: 5s;
animation-iteration-count: 500;
}
@keyframes background {
0% {
background-color: aqua;
border-radius: 50px;
}
50% {
background-color: rgba(0, 255, 255, 0.2);
border-radius: 200px;
}
100% {
background-color: aqua;
border-radius: 50px;
}
} }
.centered { .centered {

53
website/demo/examples/index.html
View File

@@ -1,16 +1,41 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<title>Example presentations</title> <meta charset="utf-8">
</head> <link rel="stylesheet" href="/css/style.css">
<body><h1>Example presentations</h1> <title>Example presentations</title>
<ul><br /> <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<li><a href="undefined/">undefined</a></li> <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<li><a href="undefined/">undefined</a></li> <script defer src="/js/index.js"></script>
<li><a href="undefined/">undefined</a></li> <style>
<li><a href="undefined/">undefined</a></li> .list {
<li><a href="undefined/">undefined</a></li> margin-top: 10%;
<li><a href="undefined/">undefined</a></li> font-size: 1.5rem;
<li><a href="undefined/">undefined</a></li> list-style: none;
</ul> }
</body> .list-element {
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div id="navbar"></div>
<div class="title">
<div class="title-content">
<h1 class="heading">Examples</h1>
</div>
<ul class="list"><br>
<li class="button"><a class="list-element" href="2D-navigation/">2D-navigation</a></li>
<li class="button"><a class="list-element" href="3D-positions/">3D-positions</a></li>
<li class="button"><a class="list-element" href="3D-rotations/">3D-rotations</a></li>
<li class="button"><a class="list-element" href="classic-slides/">classic-slides</a></li>
<li class="button"><a class="list-element" href="cube/">cube</a></li>
<li class="button"><a class="list-element" href="markdown/">markdown</a></li>
</ul>
</div>
<div id="footer"></div>
</body>
</html> </html>

2
website/docs/nav.html
View File

@@ -13,7 +13,7 @@
<a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a> <a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
<a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a> <a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a>
<div class="dropdown" id="reference"> <div class="dropdown" id="reference">
<a class="nav-subitem" id="root" href="/docs/reference">Home</a><a class="nav-subitem" id="CSS" href="/docs/reference/CSS.html">CSS</a><a class="nav-subitem" id="HTML" href="/docs/reference/HTML.html">HTML</a><a class="nav-subitem" id="JavaScript" href="/docs/reference/JavaScript.html">JavaScript</a><a class="nav-subitem" id="Plugins" href="/docs/reference/Plugins.html">Plugins</a></div> <a class="nav-subitem" id="root" href="/docs/reference">Home</a><a class="nav-subitem" id="CSS" href="/docs/reference/CSS.html">CSS</a><a class="nav-subitem" id="HTML" href="/docs/reference/HTML.html">HTML</a><a class="nav-subitem" id="JavaScript" href="/docs/reference/JavaScript.html">JavaScript</a><a class="nav-subitem" id="Plugins" href="/docs/reference/Plugins.html">Plugins</a><a class="nav-subitem" id="index" href="/docs/reference/index.html">index</a></div>
<a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a> <a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
<div class="dropdown" id="plugins"> <div class="dropdown" id="plugins">
<a class="nav-subitem" id="autoplay" href="/docs/plugins/autoplay.html">autoplay</a><a class="nav-subitem" id="blackout" href="/docs/plugins/blackout.html">blackout</a><a class="nav-subitem" id="extras" href="/docs/plugins/extras.html">extras</a><a class="nav-subitem" id="form" href="/docs/plugins/form.html">form</a><a class="nav-subitem" id="fullscreen" href="/docs/plugins/fullscreen.html">fullscreen</a><a class="nav-subitem" id="goto" href="/docs/plugins/goto.html">goto</a><a class="nav-subitem" id="help" href="/docs/plugins/help.html">help</a><a class="nav-subitem" id="impressConsole" href="/docs/plugins/impressConsole.html">impressConsole</a><a class="nav-subitem" id="media" href="/docs/plugins/media.html">media</a><a class="nav-subitem" id="mobile" href="/docs/plugins/mobile.html">mobile</a><a class="nav-subitem" id="mouse-timeout" href="/docs/plugins/mouse-timeout.html">mouse-timeout</a><a class="nav-subitem" id="navigation" href="/docs/plugins/navigation.html">navigation</a><a class="nav-subitem" id="navigation-ui" href="/docs/plugins/navigation-ui.html">navigation-ui</a><a class="nav-subitem" id="progress" href="/docs/plugins/progress.html">progress</a><a class="nav-subitem" id="rel" href="/docs/plugins/rel.html">rel</a><a class="nav-subitem" id="resize" href="/docs/plugins/resize.html">resize</a><a class="nav-subitem" id="skip" href="/docs/plugins/skip.html">skip</a><a class="nav-subitem" id="stop" href="/docs/plugins/stop.html">stop</a><a class="nav-subitem" id="substep" href="/docs/plugins/substep.html">substep</a><a class="nav-subitem" id="toolbar" href="/docs/plugins/toolbar.html">toolbar</a><a class="nav-subitem" id="touch" href="/docs/plugins/touch.html">touch</a></div> <a class="nav-subitem" id="autoplay" href="/docs/plugins/autoplay.html">autoplay</a><a class="nav-subitem" id="blackout" href="/docs/plugins/blackout.html">blackout</a><a class="nav-subitem" id="extras" href="/docs/plugins/extras.html">extras</a><a class="nav-subitem" id="form" href="/docs/plugins/form.html">form</a><a class="nav-subitem" id="fullscreen" href="/docs/plugins/fullscreen.html">fullscreen</a><a class="nav-subitem" id="goto" href="/docs/plugins/goto.html">goto</a><a class="nav-subitem" id="help" href="/docs/plugins/help.html">help</a><a class="nav-subitem" id="impressConsole" href="/docs/plugins/impressConsole.html">impressConsole</a><a class="nav-subitem" id="media" href="/docs/plugins/media.html">media</a><a class="nav-subitem" id="mobile" href="/docs/plugins/mobile.html">mobile</a><a class="nav-subitem" id="mouse-timeout" href="/docs/plugins/mouse-timeout.html">mouse-timeout</a><a class="nav-subitem" id="navigation" href="/docs/plugins/navigation.html">navigation</a><a class="nav-subitem" id="navigation-ui" href="/docs/plugins/navigation-ui.html">navigation-ui</a><a class="nav-subitem" id="progress" href="/docs/plugins/progress.html">progress</a><a class="nav-subitem" id="rel" href="/docs/plugins/rel.html">rel</a><a class="nav-subitem" id="resize" href="/docs/plugins/resize.html">resize</a><a class="nav-subitem" id="skip" href="/docs/plugins/skip.html">skip</a><a class="nav-subitem" id="stop" href="/docs/plugins/stop.html">stop</a><a class="nav-subitem" id="substep" href="/docs/plugins/substep.html">substep</a><a class="nav-subitem" id="toolbar" href="/docs/plugins/toolbar.html">toolbar</a><a class="nav-subitem" id="touch" href="/docs/plugins/touch.html">touch</a></div>

48
website/docs/src/build.js
View File

@@ -372,16 +372,48 @@ function buildExamplesPage () {
/* Auto generate an index.html that lists all the directories under examples/ /* Auto generate an index.html that lists all the directories under examples/
* This is useful for gh-pages, so you can link to http://impress.github.io/impress.js/examples * This is useful for gh-pages, so you can link to http://impress.github.io/impress.js/examples
*/ */
var html_list = '<ul><br />\n' console.log( 'building examples page' );
let dirList = fs.readdirSync( path.join( __dirname + '/../../demo/examples' ) ) let html_list = '<ul class="list"><br>\n';
let dirList = fs.readdirSync( path.join( __dirname + '/../../demo/examples' ) );
dirList.forEach( function( dir ) { dirList.forEach( function( dir ) {
html_list += ' <li><a href="' + dir['file'] + '/">' + dir[ 'name' ] + '</a></li>\n'; if ( dir === 'index.html' ) {} else {
html_list += ' <li class="button"><a class="list-element" href="' + dir + '/">' + dir + '</a></li>\n';
};
}); });
html_list += '</ul>\n' let html = `
<!DOCTYPE html>
var html = '<html>\n<head>\n<title>Example presentations</title>\n</head>\n<body>' <html>
html += '<h1>Example presentations</h1>\n' + html_list <head>
html += '</body>\n</html>' <meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<title>Example presentations</title>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="/js/index.js"></script>
<style>
.list {
margin-top: 10%;
font-size: 1.5rem;
list-style: none;
}
.list-element {
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div id="navbar"></div>
<div class="title">
<div class="title-content">
<h1 class="heading">Examples</h1>
</div>
${ html_list }
</ul>
</div>
<div id="footer"></div>
</body>
</html>`;
fs.writeFileSync( path.join( __dirname + '/../../demo/examples/index.html' ), html ); fs.writeFileSync( path.join( __dirname + '/../../demo/examples/index.html' ), html );
} }

22
website/index.html
View File

@@ -9,8 +9,8 @@
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="/js/index.js"></script> <script defer src="/js/index.js"></script>
<!--I will be using highlight.js to highlight the syntax, but I still need to figure out how to use it.--> <!--I will be using highlight.js to highlight the syntax, but I still need to figure out how to use it.-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script> <script>hljs.highlightAll();</script>
</head> </head>
<body> <body>
@@ -42,9 +42,21 @@
</code> </code>
</pre> </pre>
</div> </div>
<div class="crazy-styled"> <div class="special-style">
<h3>And CSS</h3> <h3 style="font-size: 200%;">And CSS</h3>
<!--TODO: Add CSS demo-code--> <pre>
<code>
.impress-supported .fallback-message {
display: none;
}
.step {
width: 80vw;
height: 80vh;
background-color: white;
}
</code>
</pre>
</div> </div>
<p>To create stunning presentations</p> <p>To create stunning presentations</p>
</div> </div>

4
website/js/index.js
View File

@@ -1,6 +1,6 @@
$( document ).ready( function () { $( document ).ready( function () {
$( '#navbar' ).load( 'nav.html' ); $( '#navbar' ).load( '/nav.html' );
$( '#footer' ).load( 'footer.html' ); $( '#footer' ).load( '/footer.html' );
$( document ).ready(function () { $( document ).ready(function () {
$( '.button' ).mouseenter( function () { $( '.button' ).mouseenter( function () {

2
website/nav.html
View File

@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./css/menustyle.css"> <link rel="stylesheet" href="/css/menustyle.css">
</head> </head>
<body> <body>
<div class="nav-container"> <div class="nav-container">