2023-04-15 13:12:49 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
2023-05-19 18:15:34 +02:00
|
|
|
<link rel="stylesheet" href="demo.css">
|
|
|
|
|
|
|
|
|
|
<!-- melpomene_head.html import -->
|
|
|
|
|
<link rel="stylesheet" href="../melpomene.css">
|
2023-04-15 13:12:49 +02:00
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
2023-05-19 18:15:34 +02:00
|
|
|
<!-- Melpomene comic reader -->
|
|
|
|
|
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
2023-04-15 13:12:49 +02:00
|
|
|
<div id="reader-frame">
|
2023-04-17 20:45:46 +02:00
|
|
|
<div id="reader-content-frame">
|
2023-05-19 15:42:39 +02:00
|
|
|
<div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden>
|
2023-05-25 20:33:07 +02:00
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
|
|
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/>
|
|
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg"/>
|
|
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg"/>
|
|
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg"/>
|
|
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg"/>
|
|
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg"/>
|
|
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg"/>
|
|
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg"/>
|
|
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg"/>
|
|
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg"/>
|
|
|
|
|
<img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg"/>
|
2023-04-16 22:24:59 +02:00
|
|
|
</div>
|
2023-05-19 15:42:39 +02:00
|
|
|
<div id="focus-overlay" class="flex-col fill">
|
|
|
|
|
<div class="grow obscured animated"></div>
|
|
|
|
|
<div id="focus-overlay-height" class="flex animated" style="height:100%">
|
|
|
|
|
<div class="grow obscured animated"></div>
|
|
|
|
|
<div id="focus-overlay-width" class="focus animated" style="width:100%"></div>
|
|
|
|
|
<div class="grow obscured animated"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grow obscured animated"></div>
|
2023-04-17 20:06:22 +02:00
|
|
|
</div>
|
2023-05-19 15:42:39 +02:00
|
|
|
<div id="nav-controls" class="fill">
|
2023-04-17 20:06:22 +02:00
|
|
|
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
|
|
|
|
|
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="help-menu">
|
2023-04-17 20:32:13 +02:00
|
|
|
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
|
2023-04-17 20:59:32 +02:00
|
|
|
<div><div class="key">←</div>/ scroll up / clic : previous</div>
|
|
|
|
|
<div><div class="key">→</div>/ scroll down / clic : next</div>
|
|
|
|
|
<div>-----------------------</div>
|
2023-04-17 20:06:22 +02:00
|
|
|
<div><div class="key">F</div>: Toggle fullscreen</div>
|
2023-04-17 20:45:46 +02:00
|
|
|
<div><div class="key">P</div>: Toggle progress bar</div>
|
2023-04-17 20:59:32 +02:00
|
|
|
<div><div class="key">V</div>: Toggle panel / page viewing mode</div>
|
2023-04-17 20:06:22 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-04-16 22:24:59 +02:00
|
|
|
</div>
|
2023-04-17 19:33:41 +02:00
|
|
|
<div id="reader-progress-container">
|
|
|
|
|
<div id="reader-progress-bar"></div>
|
2023-04-22 14:31:26 +02:00
|
|
|
<div id="reader-progress-pages"></div>
|
2023-04-17 19:33:41 +02:00
|
|
|
</div>
|
2023-04-15 13:12:49 +02:00
|
|
|
</div>
|
2023-05-19 18:15:34 +02:00
|
|
|
<!-- End of Melpomene comic reader -->
|
|
|
|
|
|
2023-04-15 13:12:49 +02:00
|
|
|
</body>
|
|
|
|
|
|
2023-05-19 18:15:34 +02:00
|
|
|
<!-- melpomene_js.html import -->
|
|
|
|
|
<script src="demo_data.js"></script>
|
|
|
|
|
<script src="../melpomene.js"></script>
|
2023-04-15 13:12:49 +02:00
|
|
|
|
2023-05-25 20:33:07 +02:00
|
|
|
</html>
|
