jakechampion
/
soft335
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

cool things

master
Jake Champion 5 years ago
parent
a428b6ca5b
commit
279d25d747
6 changed files with 104 additions and 72 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      fonts/icomoon.eot
  2. +15
    -0
      fonts/icomoon.svg
  3. BIN
      fonts/icomoon.ttf
  4. BIN
      fonts/icomoon.woff
  5. +37
    -62
      index2.html
  6. +52
    -10
      style.css

BIN
fonts/icomoon.eot View File


+ 15
- 0
fonts/icomoon.svg View File

@@ -0,0 +1,15 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
<glyph unicode="&#xe600;" d="M854.938 487.066l-438.323 271.565c-31.949 20.941-58.061 5.478-58.061-34.304v-527.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" />
<glyph unicode="&#xe601;" d="M691.2 819.2c-50.893 0-92.16-15.667-92.16-66.56v-583.68c0-50.893 41.267-66.56 92.16-66.56s92.16 15.667 92.16 66.56v583.68c0 50.893-41.267 66.56-92.16 66.56zM332.8 819.2c-50.893 0-92.16-15.667-92.16-66.56v-583.68c0-50.893 41.267-66.56 92.16-66.56s92.16 15.667 92.16 66.56v583.68c0 50.893-41.267 66.56-92.16 66.56z" />
<glyph unicode="&#xe602;" d="M383.232 460.8c0-13.21 13.414-22.63 13.414-22.63l372.48-233.933c27.597-18.074 50.074-4.762 50.074 29.44v454.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 698.522v-475.443c0-45.466 31.334-59.392 76.8-59.392s76.8 13.926 76.8 59.341v475.494c0 45.517-31.334 59.443-76.8 59.443s-76.8-13.978-76.8-59.443z" />
<glyph unicode="&#xe603;" d="M627.354 483.43l-372.48 233.984c-27.546 18.022-50.074 4.762-50.074-29.542v-454.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 757.965c-45.466 0-76.8-13.978-76.8-59.443v-475.443c0-45.517 31.334-59.494 76.8-59.494s76.8 13.978 76.8 59.494v475.443c0 45.466-31.334 59.443-76.8 59.443z" />
<glyph unicode="&#xe604;" d="M734.669 299.418l-141.21 161.382 141.21 161.382c24.013 24.013 24.013 62.925 0 86.886-24.013 23.962-62.925 23.962-86.886 0l-135.782-155.187-135.731 155.136c-24.013 24.013-62.925 24.013-86.886 0-23.962-24.013-23.962-62.925 0-86.886l141.158-161.331-141.21-161.382c-23.962-24.013-23.962-62.822 0-86.784 24.013-24.013 62.925-24.013 86.886 0l135.782 155.085 135.731-155.085c24.013-24.013 62.925-24.013 86.886 0s24.013 62.771 0.051 86.784z" />
</font></defs></svg>

BIN
fonts/icomoon.ttf View File


BIN
fonts/icomoon.woff View File


+ 37
- 62
index2.html View File

@@ -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>


+ 52
- 10
style.css View File

@@ -1,4 +1,45 @@
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?5ct90s');
src:url('fonts/icomoon.eot?#iefix5ct90s') format('embedded-opentype'),
url('fonts/icomoon.woff?5ct90s') format('woff'),
url('fonts/icomoon.ttf?5ct90s') format('truetype'),
url('fonts/icomoon.svg?5ct90s#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-cross:before {
content: "\e604";
}
.icon-play:before {
content: "\e600";
}
.icon-pause:before {
content: "\e601";
}
.icon-first:before {
content: "\e602";
}
.icon-last:before {
content: "\e603";
}

@font-face {
font-family: 'open_sanslight';
src: url('./fonts/OpenSans-Light-webfont.eot');
src: url('./fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
@@ -110,7 +151,7 @@ input {
}

ul {
height: 85%;
height: 85vh;
margin-left: 12.8%;
overflow: scroll;
padding: 0;
@@ -165,19 +206,20 @@ progress[value]::-webkit-progress-value:after {
}

.icon {
width: 4em;
height: 4em;
color: black;
fill: whitesmoke;
font-size: 4em;
color: whitesmoke;
margin: auto;
}

#previous, #next {
font-size: 0.5em;
margin: auto;
button {
border : 0px;
background-color: inherit;
font-size: 1.3em;
float: right;
}

#play, #pause {
margin-top: 1.5em;
#previous, #next {
font-size: 2em;
}

.flex-container {


Write Preview
Loading…
Cancel
Save