forked from spkml/LPA-File
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex_beta.html
311 lines (228 loc) · 7.39 KB
/
index_beta.html
1
<!DOCTYPE html><html><!-- <html manifest="CJs-Music.manifest">//--><head> <base target="_spkml" href="https://christopher.spkml.com/" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name = "viewport" content = "user-scalable=no, width=device-width, initial-scale=1.0, shrink-to-fit=no"><meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="color-scheme" content="dark"><meta name="apple-mobile-web-app-title" content="CJ's Music"><title>CJ's Music App</title> <link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon" /><link rel="apple-touch-icon" sizes="57x57" href="icons/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="icons/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="icons/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="icons/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="icons/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="icons/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="icons/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="icons/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon-180x180.png"><link rel="icon" type="image/png" href="icons/favicon-16x16.png" sizes="16x16"><link rel="icon" type="image/png" href="icons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="icons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="icons/android-chrome-192x192.png" sizes="192x192"><meta name="msapplication-square70x70logo" content="icons/smalltile.png" /><meta name="msapplication-square150x150logo" content="icons/mediumtile.png" /><meta name="msapplication-square310x310logo" content="icons/largetile.png" /><link href="theflight-splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <style>/* If this is still iin code, write the code for prefers light theme too? Copy */@media (prefers-color-scheme: dark) { @media (orientation: landscape) {/* Commented out on purose to preserve defult settings of initial code.media-controls { height: 100%; font-family: -apple-system; -webkit-user-select: none; white-space: nowrap; text-align: initial; transform-origin: 0 0;}*/ .media-controls { height: auto; width:100vw; font-family: -apple-system; -webkit-user-select:none; white-space: nowrap; text-align: initial; } html, body { top: 0; right: 0; left: 0; bottom: 0; margin: 0; padding: 0; font-size: 10pt; color: white; font-family: "Georgia, serif"; font-variant: "Georgia Bold"; font-smoothing: auto; min-width: 100vh; min-height: 100vw; position: fixed; display: flex; flex-direction:initial; flex-flow:row; } div.webApp { top: 0; right: 0; left: 0; bottom: 0; margin: 0; padding: 0; min-height: 375px; min-width: auto; display: flex; flex-flow: row nowrap; position: fixed; display: flex; } audio.myPlayer{position: fixed;top: 0px;left: 0px;right: 0px;min-width: 100%;} l-toppane { display: flex; width: auto;} .LPcover { height: 100vh; width: auto; resize: both ; position: cover; }r-botpane { display: flex; width: auto;}header { top: 0; right: 0; left:0; bottom: 0; margin: 0; padding: 0; vertical-align: top;; height: auto; width: 100vw; background-color: gray; } footer { bottom: 0; right: 0; left: 0; margin: 0; padding: 0; height: auto; width: 100vw; vertical-align: bottom; background-color: ; } .copyright{ bottom: 0px; right: 0px; left: 0px; margin: 0px; width: auto; height: auto;text-align: center;} }@media (orientation: portrait) { body { flex-direction: column; } div.webApp { top: 0; right: 0; left: 0; bottom: 0; margin: 0; padding: 0; min-width: 100vw; min-height: 375px; display: flex; flex-flow: column; position: fixed; } audio.myPlayer{margin:auto; width:100vw;position: fixed;top: 0px;left: 0px;right: 0px;bottom: auto;margin-right:0vw;margin-left:0vw; } l-toppane { display: flex; width: auto;}r-botpane { display: flex; width: auto;}}/* close @media prefers theme */}</style></head><body onorientationchange="updateOrientation();"> <div class="webApp" style="display:flex;flex-wrap:wrap;overflow:visible;"> <div class="r-toppane" style="display:flex;flex-wrap:wrap;overflow:hidden;"> <audio controls="controls" title="myPlayer" class="myPlayer" autoplay="autoplay" preload="metadata" src="2020_ChristopherJohnson_TheFlight(EntireAlbum).m4a" type="audio/m4a"> </audio> <img src="./audio/TheFlight-coverArt.jpg" alt="The Flight Album Coveer" class="LPcover"/> </div> <div class="r-botpane" style="display:flex;flex-wrap:wrap;overflow:hidden;"><div class="contents" style="display:flex;flex-wrap:wrap;overflow:hidden;">\ <ol start="1" class="playlist"> <li> ∙ Citizens Of Earth <span style="text-aign:right;">(04:10)</span></li> <li> ∙ The Great Fall <span style="text-align:right;">(00:52)</li> <li> ∙ What I do <span style="text-align:right;">(02:52)</li> <li> ∙ It's The Picture (Sunday Afternoon) <span style="text-align:right;">(00:00)</li> <li> ∙ Sheep In Wolves Clothing <span style="text-align:right;">(04:48)</li> <li> ∙ Anyway <span style="text-align:right;">(04:06)</li> <li> ∙ It doesn't feel right <span style="text-align:right;">(10:16)</li> <li> ∙ 2 Pause (Ah) <span style="text-align:right;">(03:41)</li> <li> ∙ Billed As (12:25)</li> <li> ∙ Feeling Blue <span style="text-align:right;">(04:25)</li> <li> ∙ GettinIt (12:38)</li> <li> ∙ Lifestyle <span style="text-align:right;">(08:19)</li> <li> ∙ The Gopher On The TV <span style="text-align:right;">(03:21)</li> <li> ∙ The Epic of Mister Resistor <span style="text-align:right;">(10:58)</li> <li> ∙ Play My Life Away <span style="text-align:right;">(11:51)</li> <li> ∙ ForSamantha <span style="text-align:right;">(07:30)</li> <li> ∙ When All Is Said & Done (10:56)</li> <li> ∙ D.S. Al Coda <span style="text-align:right;">(01:56)</li> </ol> <footer> <div id="navbar"> <nav> <menu> <span class=""><a href=" class=""onclick="javascript:var url=encodeURIComponent(window.location); window.location='opener://x-callback-url/show-options?url='+url;"></a></span> </menu> </nav> </div><span><center>Copyright © 2020 <a href="https://spektrumcreations.com" target="_new">SPEKTRUM Creations<a><br />All Rights Reserved.</center><span> </footer> </div></div></div></body></html>