refactor HTML / CSS, add credits
This commit is contained in:
parent
b2b4532a4f
commit
23f59ff98a
|
|
@ -11,55 +11,61 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Melpomene comic reader -->
|
<div id="melpomene">
|
||||||
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
<!-- Melpomene comic reader -->
|
||||||
<div id="reader-frame">
|
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
||||||
<div id="reader-content-frame">
|
|
||||||
<div id="reader-pages" class="animated" hidden>
|
|
||||||
<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" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>
|
|
||||||
<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" data-zooms="1459.9161,960.62878,99.857468,103.85177;788.87384,960.62878,1593.7252,103.85177;455.35007,305.56384,389.44412,1376.0359;2282.7415,760.914,99.857475,1114.4093;1069.9728,496.29166,101.85461,1928.2478;1209.7733,496.29166,1172.3267,1928.2478;788.87402,926.67731,101.85462,2474.468;415.40707,926.67731,924.68018,2474.468;1008.5604,926.67731,1372.0416,2474.468"/>
|
|
||||||
<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" data-zooms="2278.4634,1424.0264,103.9937,103.9937;457.3472,589.15906,816.83411,469.33011;618.69055,832.04285,104.47829,1578.7172;1170.7311,832.04285,756.71887,1578.7172;418.14838,832.04285,1962.6545,1578.7172;2280.6614,940.57422,100.82664,2461.1147"/>
|
|
||||||
<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" data-zooms="1128.3893,547.21899,100.85604,101.85461;1125.3937,505.27878,101.85462,700.99945;659.59674,1104.1381,1237.9126,100.46677;474.09705,1104.7645,1908.0801,103.04887;991.58466,641.08496,365.47833,1256.2069;2276.7502,1268.1899,101.85461,1256.2069;669.66565,827.24689,100.95136,2574.8799;1574.1992,825.24969,806.56573,2576.877"/>
|
|
||||||
<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" data-zooms="2270.7588,1348.0758,107.84606,109.84322;828.80096,1879.4762,104.70337,1519.7256;606.50098,1877.479,975.78717,1521.7228;755.02411,1139.5406,1623.401,1521.7228;757.02124,680.4198,1621.4038,2716.7849"/>
|
|
||||||
<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" data-zooms="2273.6387,1248.3829,104.50265,107.32705;624.19147,440.60574,1259.6805,771.06006;830.37231,940.5238,110.15143,1415.0222;1395.2515,1313.3441,985.71411,1409.3734;1321.8173,796.47961,112.97583,2417.6829;974.4165,754.11365,1403.7247,2646.4587"/>
|
|
||||||
<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" data-zooms="828.81702,497.29019,443.36716,531.2417;2275.0127,1188.0789,105.30553,109.78442;2275.0127,804.28339,105.30553,1356.3481;847.87823,1182.9146,105.30553,2210.6436;497.6918,1185.7389,994.37964,2213.468;854.35431,1185.7389,1528.7885,2213.468"/>
|
|
||||||
<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" data-zooms="2272.7561,1228.2468,101.85461,107.84607;497.29019,756.91962,994.58044,569.18756;2276.7502,1052.4977,101.85461,1336.0929;2278.7473,958.63165,101.85462,2444.5107"/>
|
|
||||||
<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" data-zooms="1131.1705,453.31552,101.67825,103.09045;1148.1168,453.31552,1232.8488,103.09045;1481.6407,453.31552,501.89209,103.09045;2282.1118,855.79193,98.853851,604.42072;1776.5449,881.21149,290.91275,1355.71;703.27454,398.23981,762.58685,2863.9373;2270.8142,1132.5826,107.32704,2270.8142"/>
|
|
||||||
<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" data-zooms="2278.7473,1240.2297,101.85461,101.85461;667.04791,1016.549,99.857468,1390.016;1583.7395,1014.5519,798.85974,1390.016;2280.7446,944.65161,99.857468,2456.4937"/>
|
|
||||||
<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" data-zooms="830.81415,1194.2953,97.860321,101.85461;774.89398,1198.2897,960.62885,99.857468;609.13055,1192.2982,1769.4744,101.85461;363.4812,868.75995,99.857468,1348.0758;1495.8649,870.75714,493.2959,1346.0787;357.48975,870.75714,2023.1123,1348.0758;529.24457,499.28735,103.85177,2280.7446;531.24176,687.01941,99.857468,2716.123;1022.5405,1120.4008,669.04504,2280.7446;657.06213,1120.4008,1725.5371,2280.7446"/>
|
|
||||||
<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" data-zooms="704.99371,341.51254,619.11633,281.59805;393.43842,551.21326,1459.9161,159.77196;2280.7446,691.01367,99.857468,101.85461;718.97375,1198.2897,99.857468,840.79987;712.9823,1196.2925,850.78564,842.79706;780.88538,1192.2982,1599.7167,842.79706;2366.6221,1445.9362,61.911629,2049.0752;922.68298,551.21326,984.59467,2378.605;631.09918,211.69783,1851.3574,3289.3049"/>
|
|
||||||
</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>
|
|
||||||
<div class="grow obscured animated"></div>
|
|
||||||
</div>
|
|
||||||
<div id="help-menu" class="fill">
|
|
||||||
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
|
|
||||||
<div><div class="key">←</div>/ scroll up / clic : previous</div>
|
|
||||||
<div><div class="key">→</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>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div id="reader-progress-container">
|
|
||||||
<div id="reader-progress-bar"></div>
|
|
||||||
<div id="reader-progress-pages"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End of Melpomene comic reader -->
|
|
||||||
|
|
||||||
|
<div id="melpomene-content-frame">
|
||||||
|
|
||||||
|
<div id="melpomene-pages" hidden>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg" data-zooms="1459.9161,960.62878,99.857468,103.85177;788.87384,960.62878,1593.7252,103.85177;455.35007,305.56384,389.44412,1376.0359;2282.7415,760.914,99.857475,1114.4093;1069.9728,496.29166,101.85461,1928.2478;1209.7733,496.29166,1172.3267,1928.2478;788.87402,926.67731,101.85462,2474.468;415.40707,926.67731,924.68018,2474.468;1008.5604,926.67731,1372.0416,2474.468"/>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg" data-zooms="2278.4634,1424.0264,103.9937,103.9937;457.3472,589.15906,816.83411,469.33011;618.69055,832.04285,104.47829,1578.7172;1170.7311,832.04285,756.71887,1578.7172;418.14838,832.04285,1962.6545,1578.7172;2280.6614,940.57422,100.82664,2461.1147"/>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg" data-zooms="1128.3893,547.21899,100.85604,101.85461;1125.3937,505.27878,101.85462,700.99945;659.59674,1104.1381,1237.9126,100.46677;474.09705,1104.7645,1908.0801,103.04887;991.58466,641.08496,365.47833,1256.2069;2276.7502,1268.1899,101.85461,1256.2069;669.66565,827.24689,100.95136,2574.8799;1574.1992,825.24969,806.56573,2576.877"/>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg" data-zooms="2270.7588,1348.0758,107.84606,109.84322;828.80096,1879.4762,104.70337,1519.7256;606.50098,1877.479,975.78717,1521.7228;755.02411,1139.5406,1623.401,1521.7228;757.02124,680.4198,1621.4038,2716.7849"/>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg" data-zooms="2273.6387,1248.3829,104.50265,107.32705;624.19147,440.60574,1259.6805,771.06006;830.37231,940.5238,110.15143,1415.0222;1395.2515,1313.3441,985.71411,1409.3734;1321.8173,796.47961,112.97583,2417.6829;974.4165,754.11365,1403.7247,2646.4587"/>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg" data-zooms="828.81702,497.29019,443.36716,531.2417;2275.0127,1188.0789,105.30553,109.78442;2275.0127,804.28339,105.30553,1356.3481;847.87823,1182.9146,105.30553,2210.6436;497.6918,1185.7389,994.37964,2213.468;854.35431,1185.7389,1528.7885,2213.468"/>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg" data-zooms="2272.7561,1228.2468,101.85461,107.84607;497.29019,756.91962,994.58044,569.18756;2276.7502,1052.4977,101.85461,1336.0929;2278.7473,958.63165,101.85462,2444.5107"/>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg" data-zooms="1131.1705,453.31552,101.67825,103.09045;1148.1168,453.31552,1232.8488,103.09045;1481.6407,453.31552,501.89209,103.09045;2282.1118,855.79193,98.853851,604.42072;1776.5449,881.21149,290.91275,1355.71;703.27454,398.23981,762.58685,2863.9373;2270.8142,1132.5826,107.32704,2270.8142"/>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg" data-zooms="2278.7473,1240.2297,101.85461,101.85461;667.04791,1016.549,99.857468,1390.016;1583.7395,1014.5519,798.85974,1390.016;2280.7446,944.65161,99.857468,2456.4937"/>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg" data-zooms="830.81415,1194.2953,97.860321,101.85461;774.89398,1198.2897,960.62885,99.857468;609.13055,1192.2982,1769.4744,101.85461;363.4812,868.75995,99.857468,1348.0758;1495.8649,870.75714,493.2959,1346.0787;357.48975,870.75714,2023.1123,1348.0758;529.24457,499.28735,103.85177,2280.7446;531.24176,687.01941,99.857468,2716.123;1022.5405,1120.4008,669.04504,2280.7446;657.06213,1120.4008,1725.5371,2280.7446"/>
|
||||||
|
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg" data-zooms="704.99371,341.51254,619.11633,281.59805;393.43842,551.21326,1459.9161,159.77196;2280.7446,691.01367,99.857468,101.85461;718.97375,1198.2897,99.857468,840.79987;712.9823,1196.2925,850.78564,842.79706;780.88538,1192.2982,1599.7167,842.79706;2366.6221,1445.9362,61.911629,2049.0752;922.68298,551.21326,984.59467,2378.605;631.09918,211.69783,1851.3574,3289.3049"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="melpomene-focus-container">
|
||||||
|
<div></div>
|
||||||
|
<div id="melpomene-focus-col">
|
||||||
|
<div></div>
|
||||||
|
<div id="melpomene-focus"></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="melpomene-help-menu" style="opacity:1; transform: translate(0,0);">
|
||||||
|
<div><div class="melpomene-key">←</div>/ scroll up / clic : previous</div>
|
||||||
|
<div><div class="melpomene-key">→</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="melpomene-nav-controls">
|
||||||
|
<div onclick="moveReader(false,false)"></div>
|
||||||
|
<div onclick="moveReader(true,false)"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="melpomene-progress-container">
|
||||||
|
<div id="melpomene-progress-bar"></div>
|
||||||
|
<div id="melpomene-progress-sections"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,55 +11,61 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Melpomene comic reader -->
|
<div id="melpomene">
|
||||||
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
<!-- Melpomene comic reader -->
|
||||||
<div id="reader-frame">
|
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
||||||
<div id="reader-content-frame">
|
|
||||||
<div id="reader-pages" class="animated" data-global-zoom-scale="0.4836759371221282" data-global-zoom-offset="0,-70" hidden>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg" data-zooms="1459.9161,960.62878,99.857468,103.85177;788.87384,960.62878,1593.7252,103.85177;455.35007,305.56384,389.44412,1376.0359;2282.7415,760.914,99.857475,1114.4093;1069.9728,496.29166,101.85461,1928.2478;1209.7733,496.29166,1172.3267,1928.2478;788.87402,926.67731,101.85462,2474.468;415.40707,926.67731,924.68018,2474.468;1008.5604,926.67731,1372.0416,2474.468"/>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg" data-zooms="2278.4634,1424.0264,103.9937,103.9937;457.3472,589.15906,816.83411,469.33011;618.69055,832.04285,104.47829,1578.7172;1170.7311,832.04285,756.71887,1578.7172;418.14838,832.04285,1962.6545,1578.7172;2280.6614,940.57422,100.82664,2461.1147"/>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg" data-zooms="1128.3893,547.21899,100.85604,101.85461;1125.3937,505.27878,101.85462,700.99945;659.59674,1104.1381,1237.9126,100.46677;474.09705,1104.7645,1908.0801,103.04887;991.58466,641.08496,365.47833,1256.2069;2276.7502,1268.1899,101.85461,1256.2069;669.66565,827.24689,100.95136,2574.8799;1574.1992,825.24969,806.56573,2576.877"/>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg" data-zooms="2270.7588,1348.0758,107.84606,109.84322;828.80096,1879.4762,104.70337,1519.7256;606.50098,1877.479,975.78717,1521.7228;755.02411,1139.5406,1623.401,1521.7228;757.02124,680.4198,1621.4038,2716.7849"/>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg" data-zooms="2273.6387,1248.3829,104.50265,107.32705;624.19147,440.60574,1259.6805,771.06006;830.37231,940.5238,110.15143,1415.0222;1395.2515,1313.3441,985.71411,1409.3734;1321.8173,796.47961,112.97583,2417.6829;974.4165,754.11365,1403.7247,2646.4587"/>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg" data-zooms="828.81702,497.29019,443.36716,531.2417;2275.0127,1188.0789,105.30553,109.78442;2275.0127,804.28339,105.30553,1356.3481;847.87823,1182.9146,105.30553,2210.6436;497.6918,1185.7389,994.37964,2213.468;854.35431,1185.7389,1528.7885,2213.468"/>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg" data-zooms="2272.7561,1228.2468,101.85461,107.84607;497.29019,756.91962,994.58044,569.18756;2276.7502,1052.4977,101.85461,1336.0929;2278.7473,958.63165,101.85462,2444.5107"/>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg" data-zooms="1131.1705,453.31552,101.67825,103.09045;1148.1168,453.31552,1232.8488,103.09045;1481.6407,453.31552,501.89209,103.09045;2282.1118,855.79193,98.853851,604.42072;1776.5449,881.21149,290.91275,1355.71;703.27454,398.23981,762.58685,2863.9373;2270.8142,1132.5826,107.32704,2270.8142"/>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg" data-zooms="2278.7473,1240.2297,101.85461,101.85461;667.04791,1016.549,99.857468,1390.016;1583.7395,1014.5519,798.85974,1390.016;2280.7446,944.65161,99.857468,2456.4937"/>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg" data-zooms="830.81415,1194.2953,97.860321,101.85461;774.89398,1198.2897,960.62885,99.857468;609.13055,1192.2982,1769.4744,101.85461;363.4812,868.75995,99.857468,1348.0758;1495.8649,870.75714,493.2959,1346.0787;357.48975,870.75714,2023.1123,1348.0758;529.24457,499.28735,103.85177,2280.7446;531.24176,687.01941,99.857468,2716.123;1022.5405,1120.4008,669.04504,2280.7446;657.06213,1120.4008,1725.5371,2280.7446"/>
|
|
||||||
<img loading="lazy" width="1200" height="1660" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg" data-zooms="704.99371,341.51254,619.11633,281.59805;393.43842,551.21326,1459.9161,159.77196;2280.7446,691.01367,99.857468,101.85461;718.97375,1198.2897,99.857468,840.79987;712.9823,1196.2925,850.78564,842.79706;780.88538,1192.2982,1599.7167,842.79706;2366.6221,1445.9362,61.911629,2049.0752;922.68298,551.21326,984.59467,2378.605;631.09918,211.69783,1851.3574,3289.3049"/>
|
|
||||||
</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>
|
|
||||||
<div class="grow obscured animated"></div>
|
|
||||||
</div>
|
|
||||||
<div id="help-menu" class="fill">
|
|
||||||
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
|
|
||||||
<div><div class="key">←</div>/ scroll up / clic : previous</div>
|
|
||||||
<div><div class="key">→</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>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div id="reader-progress-container">
|
|
||||||
<div id="reader-progress-bar"></div>
|
|
||||||
<div id="reader-progress-pages"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End of Melpomene comic reader -->
|
|
||||||
|
|
||||||
|
<div id="melpomene-content-frame">
|
||||||
|
|
||||||
|
<div id="melpomene-pages" data-global-zoom-scale="0.4836759371221282" data-global-zoom-offset="0,-70" hidden>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg" data-zooms="1459.9161,960.62878,99.857468,103.85177;788.87384,960.62878,1593.7252,103.85177;455.35007,305.56384,389.44412,1376.0359;2282.7415,760.914,99.857475,1114.4093;1069.9728,496.29166,101.85461,1928.2478;1209.7733,496.29166,1172.3267,1928.2478;788.87402,926.67731,101.85462,2474.468;415.40707,926.67731,924.68018,2474.468;1008.5604,926.67731,1372.0416,2474.468"/>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg" data-zooms="2278.4634,1424.0264,103.9937,103.9937;457.3472,589.15906,816.83411,469.33011;618.69055,832.04285,104.47829,1578.7172;1170.7311,832.04285,756.71887,1578.7172;418.14838,832.04285,1962.6545,1578.7172;2280.6614,940.57422,100.82664,2461.1147"/>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg" data-zooms="1128.3893,547.21899,100.85604,101.85461;1125.3937,505.27878,101.85462,700.99945;659.59674,1104.1381,1237.9126,100.46677;474.09705,1104.7645,1908.0801,103.04887;991.58466,641.08496,365.47833,1256.2069;2276.7502,1268.1899,101.85461,1256.2069;669.66565,827.24689,100.95136,2574.8799;1574.1992,825.24969,806.56573,2576.877"/>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg" data-zooms="2270.7588,1348.0758,107.84606,109.84322;828.80096,1879.4762,104.70337,1519.7256;606.50098,1877.479,975.78717,1521.7228;755.02411,1139.5406,1623.401,1521.7228;757.02124,680.4198,1621.4038,2716.7849"/>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg" data-zooms="2273.6387,1248.3829,104.50265,107.32705;624.19147,440.60574,1259.6805,771.06006;830.37231,940.5238,110.15143,1415.0222;1395.2515,1313.3441,985.71411,1409.3734;1321.8173,796.47961,112.97583,2417.6829;974.4165,754.11365,1403.7247,2646.4587"/>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg" data-zooms="828.81702,497.29019,443.36716,531.2417;2275.0127,1188.0789,105.30553,109.78442;2275.0127,804.28339,105.30553,1356.3481;847.87823,1182.9146,105.30553,2210.6436;497.6918,1185.7389,994.37964,2213.468;854.35431,1185.7389,1528.7885,2213.468"/>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg" data-zooms="2272.7561,1228.2468,101.85461,107.84607;497.29019,756.91962,994.58044,569.18756;2276.7502,1052.4977,101.85461,1336.0929;2278.7473,958.63165,101.85462,2444.5107"/>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg" data-zooms="1131.1705,453.31552,101.67825,103.09045;1148.1168,453.31552,1232.8488,103.09045;1481.6407,453.31552,501.89209,103.09045;2282.1118,855.79193,98.853851,604.42072;1776.5449,881.21149,290.91275,1355.71;703.27454,398.23981,762.58685,2863.9373;2270.8142,1132.5826,107.32704,2270.8142"/>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg" data-zooms="2278.7473,1240.2297,101.85461,101.85461;667.04791,1016.549,99.857468,1390.016;1583.7395,1014.5519,798.85974,1390.016;2280.7446,944.65161,99.857468,2456.4937"/>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg" data-zooms="830.81415,1194.2953,97.860321,101.85461;774.89398,1198.2897,960.62885,99.857468;609.13055,1192.2982,1769.4744,101.85461;363.4812,868.75995,99.857468,1348.0758;1495.8649,870.75714,493.2959,1346.0787;357.48975,870.75714,2023.1123,1348.0758;529.24457,499.28735,103.85177,2280.7446;531.24176,687.01941,99.857468,2716.123;1022.5405,1120.4008,669.04504,2280.7446;657.06213,1120.4008,1725.5371,2280.7446"/>
|
||||||
|
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg" data-zooms="704.99371,341.51254,619.11633,281.59805;393.43842,551.21326,1459.9161,159.77196;2280.7446,691.01367,99.857468,101.85461;718.97375,1198.2897,99.857468,840.79987;712.9823,1196.2925,850.78564,842.79706;780.88538,1192.2982,1599.7167,842.79706;2366.6221,1445.9362,61.911629,2049.0752;922.68298,551.21326,984.59467,2378.605;631.09918,211.69783,1851.3574,3289.3049"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="melpomene-focus-container">
|
||||||
|
<div></div>
|
||||||
|
<div id="melpomene-focus-col">
|
||||||
|
<div></div>
|
||||||
|
<div id="melpomene-focus"></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="melpomene-help-menu" style="opacity:1; transform: translate(0,0);">
|
||||||
|
<div><div class="melpomene-key">←</div>/ scroll up / clic : previous</div>
|
||||||
|
<div><div class="melpomene-key">→</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="melpomene-nav-controls">
|
||||||
|
<div onclick="moveReader(false,false)"></div>
|
||||||
|
<div onclick="moveReader(true,false)"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="melpomene-progress-container">
|
||||||
|
<div id="melpomene-progress-bar"></div>
|
||||||
|
<div id="melpomene-progress-sections"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
178
melpomene.css
178
melpomene.css
|
|
@ -1,42 +1,8 @@
|
||||||
/* Melpomene webcomic reader CSS */
|
/* Melpomene webcomic reader CSS */
|
||||||
/* Version 1.0.0 - UNSTABLE */
|
/* Version 1.0.0_UNSTABLE */
|
||||||
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
|
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
|
||||||
|
|
||||||
:root {
|
#melpomene-focus-container, #melpomene-nav-controls, #melpomene-progress-sections {
|
||||||
--reader-progressbar-height: 0.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated {
|
|
||||||
transition: all 1.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reader-frame {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reader-content-frame {
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reader-pages {
|
|
||||||
flex-direction: row;
|
|
||||||
transform-origin: top left;
|
|
||||||
transform: scale(1) translate(0);
|
|
||||||
align-items: center;
|
|
||||||
width: fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reader-pages > img {
|
|
||||||
display: inline-block;
|
|
||||||
opacity: 0;
|
|
||||||
transition: all 1s cubic-bezier(.9,.03,.69,.22); /* ease-in quartic */
|
|
||||||
}
|
|
||||||
|
|
||||||
.fill {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -44,82 +10,95 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.obscured {
|
#melpomene, #melpomene-focus-container, #melpomene-pages, #melpomene-nav-controls, #melpomene-focus-col {
|
||||||
background-color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-col {
|
#melpomene-pages, #melpomene-focus-container * {
|
||||||
display: flex;
|
transition: all 1.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#melpomene, #melpomene-focus-col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grow {
|
#melpomene {
|
||||||
flex: 1
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border: 2px solid;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav-controls {
|
#melpomene-content-frame {
|
||||||
display: grid;
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#melpomene-pages {
|
||||||
|
transform-origin: top left;
|
||||||
|
transform: scale(1) translate(0);
|
||||||
|
align-items: center;
|
||||||
|
width: fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
#melpomene-pages > img {
|
||||||
|
display: inline-block;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 1s cubic-bezier(.9,.03,.69,.22); /* ease-in quartic */
|
||||||
|
}
|
||||||
|
|
||||||
|
#melpomene-focus-container * {
|
||||||
|
background-color: rgba(0, 0, 0, 0.85);
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#melpomene-focus-col, #melpomene-focus {
|
||||||
|
background-color: initial;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#melpomene-focus {
|
||||||
|
box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
#melpomene-nav-controls {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"left top right"
|
"left top right"
|
||||||
"left center right"
|
"left center right"
|
||||||
"left bottom right";
|
"left bottom right";
|
||||||
}
|
|
||||||
|
|
||||||
#nav-controls {
|
|
||||||
grid-template-columns: 33% 0 1fr;
|
grid-template-columns: 33% 0 1fr;
|
||||||
grid-template-rows: auto;
|
grid-template-rows: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav-controls > div {
|
#melpomene-nav-controls > div {
|
||||||
|
flex-grow: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top {
|
#melpomene-nav-controls > div:first-child {
|
||||||
grid-area: top;
|
width: 35%;
|
||||||
|
flex-grow: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
#melpomene-help-menu {
|
||||||
grid-area: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
position: absolute;
|
||||||
grid-area: right;
|
bottom: 0;
|
||||||
}
|
right: 0;
|
||||||
|
|
||||||
.top {
|
|
||||||
grid-area: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
grid-area: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus {
|
|
||||||
box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
#help-menu{
|
|
||||||
font-size: 120%;
|
font-size: 120%;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
color: white;
|
|
||||||
background-color: rgba(0,0,0,0.8)
|
|
||||||
border: 0.1em solid black;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: end;
|
|
||||||
box-sizing: border-box;
|
|
||||||
align-items: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
#help-menu > #help-controls {
|
color: white;
|
||||||
|
background-color: rgba(0,0,0,0.8);
|
||||||
|
|
||||||
padding: 0 1em 1em 1em;
|
padding: 0 1em 1em 1em;
|
||||||
background-color: rgba(0,0,0,0.5);
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: all 1.7s cubic-bezier(.76,.05,.86,.06);
|
transition: all 1.7s cubic-bezier(.76,.05,.86,.06);
|
||||||
|
|
@ -129,18 +108,28 @@
|
||||||
transform: translate(0, calc(100% - 2em));
|
transform: translate(0, calc(100% - 2em));
|
||||||
}
|
}
|
||||||
|
|
||||||
#help-menu > #help-controls:hover {
|
#melpomene-help-menu:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: all 0.3s linear;
|
transition: all 0.3s linear;
|
||||||
transform: translate(0, 0);
|
transform: translate(0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
#help-menu > #help-controls > div {
|
#melpomene-help-menu * {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.key {
|
#melpomene-help-menu .melpomene-credits {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
font-size: 70%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#melpomene-help-menu .melpomene-credits a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.melpomene-key {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: 0 0.5em;
|
margin: 0 0.5em;
|
||||||
border: 1px white solid;
|
border: 1px white solid;
|
||||||
|
|
@ -148,28 +137,23 @@
|
||||||
border-radius: 0.2em;
|
border-radius: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#reader-progress-container {
|
#melpomene-progress-container {
|
||||||
background-color: dimgray;
|
background-color: dimgray;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#reader-progress-bar{
|
#melpomene-progress-bar{
|
||||||
height: var(--reader-progressbar-height);
|
height: 0.3em;
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
width: 0%;
|
|
||||||
transition: all 0.5s ease-in-out;
|
transition: all 0.5s ease-in-out;
|
||||||
|
width: 0%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#reader-progress-pages {
|
#melpomene-progress-sections {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#reader-progress-pages > * {
|
#melpomene-progress-sections > * {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-right: 0.3em black solid;
|
border-right: 0.3em black solid;
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,44 @@
|
||||||
<!-- Melpomene comic reader -->
|
<div id="melpomene">
|
||||||
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
<!-- Melpomene comic reader -->
|
||||||
<div id="reader-frame">
|
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
||||||
<div id="reader-content-frame">
|
|
||||||
<div id="reader-pages" class="animated" hidden>
|
<div id="melpomene-content-frame">
|
||||||
|
|
||||||
|
<div id="melpomene-pages" hidden>
|
||||||
<!-- your img tags here, see documentation -->
|
<!-- your img tags here, see documentation -->
|
||||||
</div>
|
</div>
|
||||||
<div id="focus-overlay" class="flex-col fill">
|
|
||||||
<div class="grow obscured animated"></div>
|
<div id="melpomene-focus-container">
|
||||||
<div id="focus-overlay-height" class="flex animated" style="height:100%">
|
<div></div>
|
||||||
<div class="grow obscured animated"></div>
|
<div id="melpomene-focus-col">
|
||||||
<div id="focus-overlay-width" class="focus animated" style="width:100%"></div>
|
<div></div>
|
||||||
<div class="grow obscured animated"></div>
|
<div id="melpomene-focus"></div>
|
||||||
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grow obscured animated"></div>
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="help-menu" class="fill">
|
|
||||||
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
|
<div id="melpomene-help-menu" style="opacity:1; transform: translate(0,0);">
|
||||||
<div><div class="key">←</div>/ scroll up / clic : previous</div>
|
<div><div class="melpomene-key">←</div>/ scroll up / clic : previous</div>
|
||||||
<div><div class="key">→</div>/ scroll down / clic : next</div>
|
<div><div class="melpomene-key">→</div>/ scroll down / clic : next</div>
|
||||||
<div>-----------------------</div>
|
<div>-----------------------</div>
|
||||||
<div><div class="key">F</div>: Toggle fullscreen</div>
|
<div><div class="melpomene-key">F</div>: Toggle fullscreen</div>
|
||||||
<div><div class="key">P</div>: Toggle progress bar</div>
|
<div><div class="melpomene-key">P</div>: Toggle progress bar</div>
|
||||||
<div><div class="key">V</div>: Toggle panel / page viewing mode</div>
|
<div><div class="melpomene-key">V</div>: Toggle panel / page viewing mode</div>
|
||||||
</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>
|
||||||
<div id="nav-controls" class="fill">
|
|
||||||
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
|
<div id="melpomene-nav-controls">
|
||||||
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
|
<div onclick="moveReader(false,false)"></div>
|
||||||
|
<div onclick="moveReader(true,false)"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="reader-progress-container">
|
|
||||||
<div id="reader-progress-bar"></div>
|
<div id="melpomene-progress-container">
|
||||||
<div id="reader-progress-pages"></div>
|
<div id="melpomene-progress-bar"></div>
|
||||||
|
<div id="melpomene-progress-sections"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- End of Melpomene comic reader -->
|
|
||||||
|
|
|
||||||
24
melpomene.js
24
melpomene.js
|
|
@ -1,5 +1,5 @@
|
||||||
/* Melpomene webcomic reader JS */
|
/* Melpomene webcomic reader JS */
|
||||||
/* Version 1.0.0 - UNSTABLE */
|
/* Version 1.0.0_UNSTABLE */
|
||||||
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
|
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
|
||||||
|
|
||||||
//============
|
//============
|
||||||
|
|
@ -25,15 +25,18 @@ DELAY_BEFORE_HIDDING_CONTROLS = 4000;
|
||||||
// STATES CONSTANTS
|
// STATES CONSTANTS
|
||||||
//====================
|
//====================
|
||||||
|
|
||||||
READER_FRAME = document.getElementById("reader-frame")
|
MELPOMENE_VERSION = "1.0.0_UNSTABLE"
|
||||||
READER_CONTENT_FRAME = document.getElementById("reader-content-frame")
|
|
||||||
READER_PAGES = document.getElementById("reader-pages")
|
READER_FRAME = document.getElementById("melpomene")
|
||||||
FOCUS_OVERLAY_HEIGHT = document.getElementById("focus-overlay-height")
|
READER_CONTENT_FRAME = document.getElementById("melpomene-content-frame")
|
||||||
FOCUS_OVERLAY_WIDTH = document.getElementById("focus-overlay-width")
|
READER_PAGES = document.getElementById("melpomene-pages")
|
||||||
HELP_CONTROLS = document.getElementById("help-controls")
|
FOCUS_OVERLAY_HEIGHT = document.getElementById("melpomene-focus")
|
||||||
PROGRESS_BAR_CONTAINER = document.getElementById("reader-progress-container")
|
FOCUS_OVERLAY_WIDTH = document.getElementById("melpomene-focus-col")
|
||||||
PROGRESS_BAR = document.getElementById("reader-progress-bar")
|
HELP_CONTROLS = document.getElementById("melpomene-help-menu")
|
||||||
PROGRESS_BAR_PAGES = document.getElementById("reader-progress-pages")
|
PROGRESS_BAR_CONTAINER = document.getElementById("melpomene-progress-container")
|
||||||
|
PROGRESS_BAR = document.getElementById("melpomene-progress-bar")
|
||||||
|
PROGRESS_BAR_PAGES = document.getElementById("melpomene-progress-sections")
|
||||||
|
VERSION_DISPLAY = document.getElementById("melpomene-version")
|
||||||
|
|
||||||
//===========================
|
//===========================
|
||||||
// STATES GLOBAL VARIABLES
|
// STATES GLOBAL VARIABLES
|
||||||
|
|
@ -481,6 +484,7 @@ function handleMouseWhell(deltaY){
|
||||||
// ======
|
// ======
|
||||||
|
|
||||||
window.addEventListener("load", (event) => {
|
window.addEventListener("load", (event) => {
|
||||||
|
VERSION_DISPLAY.innerText = VERSION_DISPLAY.innerText.replace("Unknown version", MELPOMENE_VERSION)
|
||||||
initReader()
|
initReader()
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
# Melpomene webcomic reader JSON/JS/HTML generator
|
# Melpomene webcomic reader JSON/JS/HTML generator
|
||||||
# Version 1.0.0 - UNSTABLE
|
# Version 1.0.0_UNSTABLE
|
||||||
# CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/
|
# CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/
|
||||||
|
|
||||||
import sys
|
import sys
|
||||||
|
|
@ -83,7 +83,7 @@ def write_html(zooms, dest_file, pages_width, pages_height, prefix, extention):
|
||||||
img_url = f"{prefix}{zooms[page_idx]['name']}.{extention}"
|
img_url = f"{prefix}{zooms[page_idx]['name']}.{extention}"
|
||||||
zoom_html_data = [','.join([str(zoom) for zoom in page_zooms]) for page_zooms in zooms[page_idx]["zooms"]]
|
zoom_html_data = [','.join([str(zoom) for zoom in page_zooms]) for page_zooms in zooms[page_idx]["zooms"]]
|
||||||
zoom_html_str = ';'.join(zoom_html_data)
|
zoom_html_str = ';'.join(zoom_html_data)
|
||||||
img_tags = img_tags + f' <img loading="lazy" heigth="{zooms[page_idx]["height"]}" width="{zooms[page_idx]["width"]}" src="{img_url}" data-zooms="{zoom_html_str}"/>\n'
|
img_tags = img_tags + f' <img loading="lazy" height="{zooms[page_idx]["height"]}" width="{zooms[page_idx]["width"]}" src="{img_url}" data-zooms="{zoom_html_str}"/>\n'
|
||||||
|
|
||||||
img_tags = img_tags.strip()
|
img_tags = img_tags.strip()
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue