|
|
@@ -10,30 +10,6 @@ |
|
|
|
<link href="./style.css" rel="stylesheet"> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
|
|
|
<defs> |
|
|
|
<symbol id="icon-play" viewBox="0 0 1024 1024"> |
|
|
|
<title>play</title> |
|
|
|
<path class="path1" d="M854.938 485.734l-438.323-271.565c-31.949-20.941-58.061-5.478-58.061 34.304v527.155c0 39.782 26.163 55.194 58.061 34.253l438.374-271.565c0 0 15.565-10.957 15.565-26.317-0.051-15.309-15.616-26.266-15.616-26.266z"></path> |
|
|
|
</symbol> |
|
|
|
<symbol id="icon-pause" viewBox="0 0 1024 1024"> |
|
|
|
<title>pause</title> |
|
|
|
<path class="path1" d="M691.2 153.6c-50.893 0-92.16 15.667-92.16 66.56v583.68c0 50.893 41.267 66.56 92.16 66.56s92.16-15.667 92.16-66.56v-583.68c0-50.893-41.267-66.56-92.16-66.56zM332.8 153.6c-50.893 0-92.16 15.667-92.16 66.56v583.68c0 50.893 41.267 66.56 92.16 66.56s92.16-15.667 92.16-66.56v-583.68c0-50.893-41.267-66.56-92.16-66.56z"></path> |
|
|
|
</symbol> |
|
|
|
<symbol id="icon-record" viewBox="0 0 1024 1024"> |
|
|
|
<title>record</title> |
|
|
|
<path class="path1" d="M512 153.6c-197.939 0-358.4 160.461-358.4 358.4s160.461 358.4 358.4 358.4c197.888 0 358.4-160.461 358.4-358.4s-160.512-358.4-358.4-358.4z"></path> |
|
|
|
</symbol> |
|
|
|
<symbol id="icon-first" viewBox="0 0 1024 1024"> |
|
|
|
<title>first</title> |
|
|
|
<path class="path1" d="M383.232 512c0 13.21 13.414 22.63 13.414 22.63l372.48 233.933c27.597 18.074 50.074 4.762 50.074-29.44v-454.246c0-34.253-22.477-47.565-50.074-29.491l-372.48 233.984c0 0.051-13.414 9.421-13.414 22.63zM204.8 274.278v475.443c0 45.466 31.334 59.392 76.8 59.392s76.8-13.926 76.8-59.341v-475.494c0-45.517-31.334-59.443-76.8-59.443s-76.8 13.978-76.8 59.443z"></path> |
|
|
|
</symbol> |
|
|
|
<symbol id="icon-last" viewBox="0 0 1024 1024"> |
|
|
|
<title>last</title> |
|
|
|
<path class="path1" d="M627.354 489.37l-372.48-233.984c-27.546-18.022-50.074-4.762-50.074 29.542v454.195c0 34.304 22.528 47.514 50.074 29.491l372.48-233.933c0 0 13.466-9.472 13.466-22.63s-13.466-22.682-13.466-22.682zM742.4 214.835c-45.466 0-76.8 13.978-76.8 59.443v475.443c0 45.517 31.334 59.494 76.8 59.494s76.8-13.978 76.8-59.494v-475.443c0-45.466-31.334-59.443-76.8-59.443z"></path> |
|
|
|
</symbol> |
|
|
|
</defs> |
|
|
|
</svg> |
|
|
|
<div id="app"> |
|
|
|
<div> |
|
|
|
<div id="main"> |
|
|
@@ -44,50 +20,49 @@ |
|
|
|
</div> |
|
|
|
<div id="controls" class="flex-container"> |
|
|
|
<progress value=0.1></progress> |
|
|
|
<svg class="icon" id="previous"><use xlink:href="#icon-first"></use></svg> |
|
|
|
<svg class="icon" id="play"><use xlink:href="#icon-play"></use></svg> |
|
|
|
<!-- <svg class="icon" id="pause"><use xlink:href="#icon-pause"></use></svg>--> |
|
|
|
<svg class="icon" id="next"><use xlink:href="#icon-last"></use></svg></div> |
|
|
|
<span class="icon icon-first" id="previous"></span> |
|
|
|
<span class="icon icon-play" id="play"></span> |
|
|
|
<!-- <span class="icon icon-pause" id="pause"></span>--> |
|
|
|
<span class="icon icon-last" id="previous"></span> |
|
|
|
</div> |
|
|
|
<div id="playlist"> |
|
|
|
<input type="text" autofocus placeholder="Add video link ..."> |
|
|
|
<input type="text" autofocus placeholder="Add video title ..."> |
|
|
|
<div> |
|
|
|
<ul> |
|
|
|
</div> |
|
|
|
<li>Save My Night (Mark Sixma Remix)</li> |
|
|
|
<li>Kaiju</li> |
|
|
|
<li>Die Neue Weit</li> |
|
|
|
<li>Static Room</li> |
|
|
|
<li>Torque</li> |
|
|
|
<li>Antimatter (Freak & Octagon Rmx)</li> |
|
|
|
<li>Call Me (Morten Granau Remix)</li> |
|
|
|
<li>Mysterious Orient</li> |
|
|
|
<li>Criaturas</li> |
|
|
|
<li>Different Reality</li> |
|
|
|
<li>Not Butter</li> |
|
|
|
<li>Save My Night (Mark Sixma Remix)</li> |
|
|
|
<li>Kaiju</li> |
|
|
|
<li>Die Neue Weit</li> |
|
|
|
<li>Static Room</li> |
|
|
|
<li>Torque</li> |
|
|
|
<li>Antimatter (Freak & Octagon Rmx)</li> |
|
|
|
<li>Call Me (Morten Granau Remix)</li> |
|
|
|
<li>Mysterious Orient</li> |
|
|
|
<li>Criaturas</li> |
|
|
|
<li>Different Reality</li> |
|
|
|
<li>Not Butter</li> |
|
|
|
<li>Save My Night (Mark Sixma Remix)</li> |
|
|
|
<li>Kaiju</li> |
|
|
|
<li>Die Neue Weit</li> |
|
|
|
<li>Static Room</li> |
|
|
|
<li>Torque</li> |
|
|
|
<li>Antimatter (Freak & Octagon Rmx)</li> |
|
|
|
<li>Call Me (Morten Granau Remix)</li> |
|
|
|
<li>Mysterious Orient</li> |
|
|
|
<li>Criaturas</li> |
|
|
|
<li>Different Reality</li> |
|
|
|
<li>Not Butter</li> |
|
|
|
<li>Save My Night (Mark Sixma Remix)<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Kaiju<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Die Neue Weit<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Static Room<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Torque<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Antimatter (Freak & Octagon Rmx)<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Call Me (Morten Granau Remix)<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Mysterious Orient<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Criaturas<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Different Reality<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Not Butter<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Save My Night (Mark Sixma Remix)<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Kaiju<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Die Neue Weit<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Static Room<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Torque<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Antimatter (Freak & Octagon Rmx)<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Call Me (Morten Granau Remix)<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Mysterious Orient<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Criaturas<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Different Reality<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Not Butter<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Save My Night (Mark Sixma Remix)<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Kaiju<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Die Neue Weit<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Static Room<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Torque<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Antimatter (Freak & Octagon Rmx)<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Call Me (Morten Granau Remix)<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Mysterious Orient<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Criaturas<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Different Reality<button><span class="icon-cross"></span></button></li> |
|
|
|
<li>Not Butter<button><span class="icon-cross"></span></button></li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|