caribaud/melpomene
1
0
Fork 0
Code Issues 9 Pull requests 1 Releases 3 Wiki Activity

refactor HTML / CSS, add credits

Browse source
This commit is contained in:
caribaud 2023-05-26 19:19:38 +02:00
parent b2b4532a4f
commit 23f59ff98a
6 changed files with 227 additions and 220 deletions
Download patch file Download diff file Expand all files Collapse all files

63
melpomene.html
View file

@ -1,37 +1,44 @@
<!-- Melpomene comic reader -->
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
<div id="reader-frame">
<div id="reader-content-frame">
<div id="reader-pages" class="animated" hidden>
<div id="melpomene">
<!-- Melpomene comic reader -->
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
<div id="melpomene-content-frame">
<div id="melpomene-pages" hidden>
<!-- your img tags here, see documentation -->
</div>
<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 id="melpomene-focus-container">
<div></div>
<div id="melpomene-focus-col">
<div></div>
<div id="melpomene-focus"></div>
<div></div>
</div>
<div class="grow obscured animated"></div>
<div></div>
</div>
<div id="help-menu" class="fill">
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
<div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
<div><div class="key">&rarr;</div>/ scroll down / clic : next</div>
<div>-----------------------</div>
<div><div class="key">F</div>: Toggle fullscreen</div>
<div><div class="key">P</div>: Toggle progress bar</div>
<div><div class="key">V</div>: Toggle panel / page viewing mode</div>
</div>
<div id="melpomene-help-menu" style="opacity:1; transform: translate(0,0);">
<div><div class="melpomene-key">&larr;</div>/ scroll up / clic : previous</div>
<div><div class="melpomene-key">&rarr;</div>/ scroll down / clic : next</div>
<div>-----------------------</div>
<div><div class="melpomene-key">F</div>: Toggle fullscreen</div>
<div><div class="melpomene-key">P</div>: Toggle progress bar</div>
<div><div class="melpomene-key">V</div>: Toggle panel / page viewing mode</div>
<div>-----------------------</div>
<div id="melpomene-version" class="melpomene-credits">Melpomene comic reader - Unknown version</div>
<div class="melpomene-credits">CC-BY-NC-SA 4.0 / <a target="_blank" href="https://git.aribaud.net/caribaud/melpomene">credits</a></div>
</div>
<div id="nav-controls" class="fill">
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
<div id="melpomene-nav-controls">
<div onclick="moveReader(false,false)"></div>
<div onclick="moveReader(true,false)"></div>
</div>
</div>
<div id="reader-progress-container">
<div id="reader-progress-bar"></div>
<div id="reader-progress-pages"></div>
<div id="melpomene-progress-container">
<div id="melpomene-progress-bar"></div>
<div id="melpomene-progress-sections"></div>
</div>
</div>
<!-- End of Melpomene comic reader -->