mirror/RetroArch
1
0
Fork 0
mirror of https://github.com/libretro/RetroArch synced 2025-02-28 12:40:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Steps for web.libretro

Browse Source
This commit is contained in:
Ömercan Kömür 2019-08-17 19:25:18 +03:00
parent cb9a9e9525
commit 1bde4043a5
4 changed files with 309 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
pkg/emscripten/libretro/embed.html
View File

@ -13,15 +13,13 @@
<link href="//cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css" rel="stylesheet">
<link href="libretro.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./steps.css">
<link rel="shortcut icon" href="https://web.libretro.com/media/retroarch.ico" />
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
<div class="container">
<!--navbar content-->
<div class="navbar-toggleable-xs">
<!--Links-->
<ul class="nav navbar-nav">
<div class="dropdown">
@ -73,6 +71,22 @@
</div>
</div>
</div>
<!--navbar content-->
<div class="navbar-toggleable-xs">
<div class="how-to-guide js-container">
<button type="button" class="button-close">×</button>
<div class="slide-view">
</div>
<div class="navigation">
<button type="button" class="button-nav js-nav disabled" data-nav="prev">Back</button>
<div class="nav-state">
<span class="current js-slide-no">1</span>/<span class="total">5</span>
</div>
<button type="button" class="button-nav js-nav" data-nav="next">Next</button>
</div>
</div>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="//rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
@ -85,6 +99,10 @@
<div align="center">
<a href="https://www.patreon.com/libretro">
<img src="https://patreon_public_assets.s3.amazonaws.com/sized/becomeAPatronBanner.png" width="350" height="116"></a>
<!-- partial -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js'></script>
<script src="./steps.js"></script>
</div>
</body>
</html>

33
pkg/emscripten/libretro/index.html
View File

@ -12,6 +12,7 @@
<link href="//cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css" rel="stylesheet">
<link href="libretro.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./steps.css">
<link rel="shortcut icon" href="media/retroarch.ico" />
</head>
@ -119,7 +120,33 @@
<img class="webplayer-preview img-fluid" src="media/canvas.png" width="960px" height="720px" alt="RetroArch Logo">
</div>
</div>
<!--/.steps content-->
</div>
</nav>
<div class="bg-inverse webplayer-container">
<div class="container">
<div class="webplayer_border text-xs-center" id="canvas_div">
<canvas class="webplayer" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()" style="display: none"></canvas>
<img class="webplayer-preview img-fluid" src="media/canvas.png" width="960px" height="720px" alt="RetroArch Logo">
</div>
</div>
</div>
<!--navbar content-->
<div class="navbar-toggleable-xs">
<div class="how-to-guide js-container">
<button type="button" class="button-close">×</button>
<div class="slide-view">
</div>
<div class="navigation">
<button type="button" class="button-nav js-nav disabled" data-nav="prev">Back</button>
<div class="nav-state">
<span class="current js-slide-no">1</span>/<span class="total">5</span>
</div>
<button type="button" class="button-nav js-nav" data-nav="next">Next</button>
</div>
</div>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="//rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js"></script>
@ -131,6 +158,10 @@
<div align="center">
<a href="https://www.patreon.com/libretro">
<img src="https://patreon_public_assets.s3.amazonaws.com/sized/becomeAPatronBanner.png" width="350" height="116"></a>
<!-- partial -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js'></script>
<script src="./steps.js"></script>
</div>
</body>
</html>

188
pkg/emscripten/libretro/steps.css Normal file
View File

@ -0,0 +1,188 @@
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
background: #ecf0f1;
color: #444;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
padding: 10px;
}
.how-to-guide {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #34495e;
color: #ecf0f1;
margin: 0;
padding: 0 0 40px;
position: relative;
text-align: left;
width: 296px;
}
.how-to-guide:before {
border: 10px solid transparent;
border-right-color: #34495e;
content: '';
height: 0;
left: -20px;
position: absolute;
top: 20px;
width: 0;
}
.how-to-guide .button-close {
-webkit-transition: color 0.25s ease-out 0.1s;
-moz-transition: color 0.25s ease-out 0.1s;
-o-transition: color 0.25s ease-out 0.1s;
transition: color 0.25s ease-out 0.1s;
background: none;
border: none;
color: #ecf0f1;
font-size: 1em;
position: absolute;
right: 0;
top: 0;
z-index: 99;
}
.how-to-guide .button-close:hover,
.how-to-guide .button-close:focus {
color: #3498db;
cursor: pointer;
}
.how-to-guide .navigation {
background: #2c3e50;
border-top: 1px solid #414141;
bottom: 0;
font-size: 0.8em;
height: 40px;
left: 0;
line-height: 1em;
padding: 13px;
position: absolute;
width: 100%;
}
.how-to-guide .navigation .nav-state {
font-weight: bold;
text-align: center;
}
.how-to-guide .navigation .button-nav {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-transition: background 0.25s ease-out 0.1s;
-moz-transition: background 0.25s ease-out 0.1s;
-o-transition: background 0.25s ease-out 0.1s;
transition: background 0.25s ease-out 0.1s;
background: #34495e;
border: none;
color: #ecf0f1;
font-size: 0.9em;
padding: 5px 20px;
position: absolute;
top: 5px;
}
.how-to-guide .navigation .button-nav:hover,
.how-to-guide .navigation .button-nav:focus {
background: #3498db;
cursor: pointer;
}
.how-to-guide .navigation .button-nav.disabled {
color: #bdc3c7;
}
.how-to-guide .navigation .button-nav.disabled:hover,
.how-to-guide .navigation .button-nav.disabled:focus {
background: #34495e;
cursor: default;
}
.how-to-guide .navigation .button-nav[data-nav="prev"] {
left: 5px;
}
.how-to-guide .navigation .button-nav[data-nav="next"] {
right: 5px;
}
.how-to-guide .slide-view {
overflow: hidden;
}
.how-to-guide .slides {
-webkit-transition: -webkit-transform 0.25s ease-out 0.1s;
-moz-transition: -moz-transform 0.25s ease-out 0.1s;
-o-transition: -o-transform 0.25s ease-out 0.1s;
transition: transform 0.25s ease-out 0.1s;
width: 9999px;
}
.how-to-guide .slides[data-active-slide="1"] {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.how-to-guide .slides[data-active-slide="1"] .step[data-slide="1"] {
opacity: 1;
}
.how-to-guide .slides[data-active-slide="2"] {
-webkit-transform: translate(-296px, 0);
-moz-transform: translate(-296px, 0);
-ms-transform: translate(-296px, 0);
-o-transform: translate(-296px, 0);
transform: translate(-296px, 0);
}
.how-to-guide .slides[data-active-slide="2"] .step[data-slide="2"] {
opacity: 1;
}
.how-to-guide .slides[data-active-slide="3"] {
-webkit-transform: translate(-592px, 0);
-moz-transform: translate(-592px, 0);
-ms-transform: translate(-592px, 0);
-o-transform: translate(-592px, 0);
transform: translate(-592px, 0);
}
.how-to-guide .slides[data-active-slide="3"] .step[data-slide="3"] {
opacity: 1;
}
.how-to-guide .slides[data-active-slide="4"] {
-webkit-transform: translate(-888px, 0);
-moz-transform: translate(-888px, 0);
-ms-transform: translate(-888px, 0);
-o-transform: translate(-888px, 0);
transform: translate(-888px, 0);
}
.how-to-guide .slides[data-active-slide="4"] .step[data-slide="4"] {
opacity: 1;
}
.how-to-guide .slides[data-active-slide="5"] {
-webkit-transform: translate(-1184px, 0);
-moz-transform: translate(-1184px, 0);
-ms-transform: translate(-1184px, 0);
-o-transform: translate(-1184px, 0);
transform: translate(-1184px, 0);
}
.how-to-guide .slides[data-active-slide="5"] .step[data-slide="5"] {
opacity: 1;
}
.how-to-guide .step {
-webkit-transition: opacity 0.25s ease-out 0.1s;
-moz-transition: opacity 0.25s ease-out 0.1s;
-o-transition: opacity 0.25s ease-out 0.1s;
transition: opacity 0.25s ease-out 0.1s;
display: inline-block;
opacity: 0;
padding: 10px;
width: 296px;
vertical-align: top;
}
.how-to-guide .step header {
cursor: default;
font-size: 1.25em;
margin: 0 0 20px;
padding: 0;
}
.how-to-guide .step .content {
cursor: default;
font-size: 0.85em;
}

68
pkg/emscripten/libretro/steps.js Normal file
View File

@ -0,0 +1,68 @@
$(function () {
var data = [
{
idx: 1,
title: 'Load Core',
content: 'Load your core by clicking first tab, scroll down until desired Core. We will use Nestopia for now. Do not forget; Content must be compatible with Core.'
},
{
idx: 2,
title: 'Load Content',
content: 'After selecting Core, click Run. After RetroArch opens, click Add Content and select your compatible ROM.'
},
{
idx: 3,
title: 'Load Content',
content: 'Select Load Content from the menu, and then enter Start Directory. You will see your Content, select it then select the Core'
},
{
idx: 4,
title: 'Cleanup Storage',
content: 'The trash can erases your existing configuration and presets.'
},
{
idx: 5,
title: 'Quick Menu',
content: 'If you click on the three line icons, the Quick Menu will open here as in RetroArch.'
}
];
var template =
'<div class="slides" data-active-slide="1">' +
'{{#slides}}' +
'<article class="step" data-slide="{{idx}}">' +
'<header>{{title}}</header>' +
'<div class="content">{{content}}</div>' +
'</article>' +
'{{/slides}}' +
'</div>';
$('.how-to-guide').append(Mustache.render(template, { slides: data }));
var slidesCount = data.length;
var currentIdx = 1;
$('body')
.off('click', '.js-nav:not(.disabled)')
.on('click', '.js-nav:not(.disabled)', function (event) {
var button = $(event.currentTarget).blur();
var container = button.parents('.js-container');
var newIdx = currentIdx + (button.attr('data-nav') === 'prev' ? -1 : 1);
container
.find('.slides').attr('data-active-slide', newIdx).end()
.find('.js-slide-no').html(newIdx);
/* enable/disable nav buttons */
container.find('.js-nav').removeClass('disabled');
if (newIdx <= 1) {
container.find('.js-nav[data-nav="prev"]').addClass('disabled');
} else if (newIdx >= slidesCount) {
container.find('.js-nav[data-nav="next"]').addClass('disabled');
}
currentIdx = newIdx;
return true;
});
});