07/06/16 | Mys2010 on Codepen

HomeArchives for 07/06/16

Vinyl record

Memasang kode Vinyl record Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua
kode template, ganti dengan kode blank template, yang tersedia pada sumber berikut :
Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="cp-pen-styles">body {
 background-color: #111;
}
div#container {
    margin: 0px auto;
    width: 80%;
    height: auto;
}
svg#main {
    max-width: 100%;
}
/* single styles */
#StartButton {
 cursor: pointer;
}
#volume-knob {
 cursor: ns-resize;
}
#needle-arm {
 cursor: move;
}
#vinyl {
 cursor: pointer;
}</style>

<div id="container">
<svg id="main" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 640 480">
<defs>
<clippath id="volume-mask">
<path id="bar01" d="M559 429h18v5h-18z"/>
<path id="bar02" d="M559 419h18v5h-18z"/>
<path id="bar03" d="M559 409h18v5h-18z"/>
<path id="bar04" d="M559 399h18v5h-18z"/>
<path id="bar05" d="M559 389h18v5h-18z"/>
<path id="bar06" d="M559 379h18v5h-18z"/>
<path id="bar07" d="M559 369h18v5h-18z"/>
<path id="bar08" d="M559 359h18v5h-18z"/>
<path id="bar09" d="M559 349h18v5h-18z"/>
<path id="bar10" d="M559 339h18v5h-18z"/>
<path id="bar11" d="M559 329h18v5h-18z"/>
</clipPath>
</defs>
<g id="background">
<g id="bg">
<image width="610" height="467" xlink:href="data:image/png;base64,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 ADEGAIAYAwAQYwAAiDEAADEGAIAYAwAQYwAAiDEAADEGAIAYAwAQYwAAiDEAADEGAIAYAwAQYwAA iDEAADEGAIAYAwAQYwAAYgwAADEGACDGAAAQYwAAYgwAADEGACDGAAAQYwAAYgwAADEGACDGAAAQ YwAAYgwAADEGACDGAAAQYwAAYgwAADEGACDGAAAQYwAAYgwAQIwBACDGAADEGAAAYgwAQIwBACDG AADEGAAAYgwAQIwBACDGAADEGAAAYgwAQIwBACDGAADEGAAAYgwAQIwBACDGAADEGAAAYgwAQIwB AIgxAADEGACAGAMAQIwBAIgxAADEGACAGAMAQIwBAIgxAADEGACAGAMAQIwBAIgxAADEGACAGAMA QIwBAIgxAADEGACAGAMAQIwBAIgxAAAxBgCAGAMAEGMAAIgxAAAxBgCAGAMAEGMAAIgxAAAxBgCA GAMAEGMAAIgxAAAxBgCAGAMAEGMAAIgxAAAxBgCAGAMAEGMAAIgxAAAxBgCAGAMAEGMAAGIMAAAx BgAgxgAAEGMAAGIMAAAxBgAgxgAAEGMAAGIMAAAxBgAgxgAAEGMAAGIMAAAxBgAgxgAAEGMAAGIM AAAxBgAgxgAAEGMAAGIMAECMAQAgxgAAxBgAAGIMAECMAQAgxgAAxBgAAGIMAECMAQAgxgAAxBgA AGIMAECMAQAgxgAAxBgAAGIMAECMAQAgxgAAxBgAAGIMAECMAQCIMQAAxBgAgBgDAECMAQCIMQAA xBgAgBgDAECMAQCIMQAAxBgAgBgDAECMAQCIMQAAxBgAgBgDAECMAQCIMQAAxBgAgBgDAECMAQCI MQAAMQYAgBgDABBjAACIMQAAMQYAgBgDABBjAACIMQAAMQYAgBgDABBjAACIMQAAMQYAgBgDABBj AACIMQAAMQYAgBgDABBjAACIMQAAMQYAgBgDABBjAABiDAAAMQYAIMYAABBjAABiDAAAMQYAIMYA ABBjAABiDAAAMQYAIMYAABBjAABiDAAAMQYAIMYAABBjAABiDAAAMQYAIMYAABBjAABiDABAjAEA IMYAAMQYAABiDABAjAEAIMYAAMQYAABiDABAjAEAIMYAAMQYAABiDABAjAEAIMYAAMQYAABiDABA jAEAIMYAAMQYAABiDABAjAEAiDEAAMQYAIAYAwBAjAEAiDEAAMQYAIAYAwBAjAEAiDEAAMQYAIAY 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 AIA36X8CDACOG1p7+QyoYAAAAABJRU5ErkJggg==" transform="translate(11.56 10.56)" overflow="visible" opacity=".75"/>
<radialgradient id="SVGID_1_" cx="429" cy="47.27" r="491.08" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#3D3C3C"/>
<stop offset=".206" stop-color="#323131"/>
<stop offset=".688" stop-color="#1C1D1D"/>
<stop offset="1" stop-color="#141515"/>
</radialGradient>
<path fill="url(#SVGID_1_)" d="M34 28h570v427H34z"/>
<g>
<path fill="none" stroke="#070707" stroke-width="2" d="M34 28h570v427H34z"/>
</g>
</g>
</g>
<g id="Record">
<radialgradient id="recordplate_1_" cx="262.649" cy="215.289" r="175" gradientTransform="translate(-4.333 -.736) scale(1.017)" gradientUnits="userSpaceOnUse">
<stop offset=".919" stop-color="#3D3C3C"/>
<stop offset=".935" stop-color="#323131"/>
<stop offset=".975" stop-color="#1C1D1D"/>
<stop offset="1" stop-color="#141515"/>
</radialGradient>
<circle id="recordplate" cx="262.818" cy="218.245" r="178" fill="url(#recordplate_1_)" stroke="#000" stroke-miterlimit="10"/>
<g opacity=".7" id="play-state-ring">
<image width="411" height="411" xlink:href="data:image/png;base64,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" transform="translate(55 15)" overflow="visible" opacity=".6"/>
<circle cx="262.818" cy="218.245" r="175" fill="#29ABE2"/>
</g>
<g id="vinyl">
<circle id="record-edge" cx="262.818" cy="218.244" r="173" fill="#0A0A0A"/>
<g id="record-gradient">
<lineargradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="346.61" y1="363.38" x2="179.023" y2="73.11">
<stop offset=".103" stop-color="#262626"/>
<stop offset=".345" stop-color="#434343"/>
<stop offset=".496" stop-color="#505050"/>
<stop offset=".641" stop-color="#3D3B3C"/>
<stop offset=".787" stop-color="#252223"/>
<stop offset="1"/>
</linearGradient>
<circle cx="262.817" cy="218.245" r="167.56" fill="url(#SVGID_2_)"/>
<path d="M262.817 387.904c-93.55 0-169.66-76.11-169.66-169.66s76.11-169.66 169.66-169.66S432.48 124.69 432.48 218.243c0 93.55-76.113 169.66-169.663 169.66zm0-335.118c-91.234 0-165.458 74.225-165.458 165.458 0 91.234 74.223 165.458 165.457 165.458 91.236 0 165.46-74.225 165.46-165.458S354.053 52.786 262.817 52.786z" fill="#231F20"/>
</g>
<circle cx="262.818" cy="218.245" r="75.234" opacity=".5"/>
<circle id="center-label" cx="262.818" cy="218.245" r="60.93" fill="#006299"/>
<g id="label-title" opacity=".9">
<g id="label-logo" opacity=".95">
<path d="M233 178h62v26h-62z"/>
<g fill="#FFF">
<path d="M252.12 188.18h1.132l-.27 1.262h-1.133l-1.158 5.447h-1.767l1.157-5.448h-.942l.27-1.262h.942l.11-.542c.14-.656.404-1.14.792-1.453.388-.312.957-.468 1.708-.468.287 0 .548.012.782.037l-.308 1.434c-.14-.012-.287-.018-.443-.018-.25 0-.43.037-.542.11-.11.075-.188.22-.233.438l-.098.462zM254.687 194.89h-1.89l.394-1.84h1.89l-.393 1.84zM259.865 188.18l-1.428 6.71h-1.767l1.428-6.71h1.767zm.166-.794h-1.766l.35-1.637h1.768l-.35 1.636zM262.31 194.89h-1.89l.394-1.84h1.89l-.394 1.84zM267.69 188.18h1.097l-.27 1.262h-1.097l-.8 3.76c-.012.055-.02.1-.02.137 0 .102.04.176.115.22.076.047.208.068.397.068.19 0 .36-.008.517-.025l-.278 1.312c-.283.042-.618.062-1.003.062-.55 0-.958-.083-1.223-.25s-.397-.41-.397-.734c0-.144.02-.302.055-.475l.868-4.074h-.91l.27-1.262h.91l.383-1.81h1.767l-.382 1.808zM270.678 194.89h-1.89l.394-1.84h1.89l-.394 1.84zM272.66 194.89l1.92-9.05h1.768l-.677 3.214h.025c.628-.697 1.335-1.046 2.124-1.046.664 0 1.198.23 1.603.692.404.462.606 1.054.606 1.776 0 1.124-.352 2.17-1.054 3.14-.702.97-1.588 1.452-2.66 1.452-.836 0-1.41-.34-1.723-1.022h-.024l-.18.844h-1.73zm5.49-4.132c0-.368-.095-.664-.285-.89-.19-.222-.477-.334-.86-.334-.582 0-1.07.295-1.464.883-.393.59-.59 1.214-.59 1.874 0 .396.105.715.317.958.21.244.496.366.853.366.603 0 1.092-.305 1.468-.914s.563-1.255.563-1.942z"/>
</g>
<path fill="none" stroke="#FFF" stroke-width="2" d="M236 181h56v20h-56z"/>
</g>
<g id="label-sample-text" opacity=".85" fill="#FFF">
<path d="M248.664 254.846c-.016-.375-.15-.645-.4-.81s-.615-.245-1.088-.245c-.344 0-.638.077-.882.23s-.366.37-.366.656c0 .227.072.394.217.5s.457.223.938.344l1.043.264c.633.16 1.085.364 1.356.612s.407.595.407 1.04c0 .617-.227 1.118-.678 1.503s-1.054.576-1.808.576c-.88 0-1.544-.183-1.995-.548s-.682-.915-.69-1.65h1.02c.017.435.16.757.432.968s.68.316 1.222.316c.44 0 .792-.088 1.052-.264s.39-.42.39-.732c0-.223-.084-.4-.252-.533s-.5-.256-.996-.37l-1.225-.298c-.496-.125-.862-.312-1.1-.56s-.353-.57-.353-.964c0-.616.22-1.104.662-1.464s1.018-.54 1.73-.54c.757 0 1.338.186 1.742.555s.618.842.642 1.416h-1.022zM251.377 254.97c.023-.708.253-1.233.688-1.577s1.07-.516 1.9-.516c.665 0 1.222.15 1.67.45s.675.735.675 1.302v3.614c0 .246.11.37.334.37.09 0 .205-.017.346-.048v.768c-.19.078-.39.117-.598.117-.36 0-.627-.076-.803-.23s-.27-.396-.276-.724c-.602.68-1.357 1.02-2.268 1.02-.594 0-1.07-.168-1.43-.504s-.54-.773-.54-1.313c0-.552.157-.997.47-1.337s.768-.545 1.365-.615l1.864-.23c.336-.05.504-.298.504-.743 0-.328-.122-.58-.366-.756s-.614-.265-1.11-.265c-.44 0-.78.098-1.017.293s-.378.502-.425.92h-.983zm3.862 1.16c-.08.08-.232.147-.46.198s-.656.117-1.28.2c-.462.054-.8.167-1.018.34s-.325.397-.325.68c0 .343.092.61.275.802s.477.287.88.287c.503 0 .95-.144 1.34-.43s.587-.637.587-1.047v-1.03zM258.316 253.06h.996v.884h.023c.473-.71 1.105-1.066 1.898-1.066.785 0 1.342.34 1.67 1.02.3-.367.592-.63.873-.785s.63-.234 1.043-.234c.542 0 1.002.177 1.38.532s.564.883.564 1.582v4.342h-1.055v-4.055c0-.487-.093-.852-.276-1.092s-.48-.36-.89-.36c-.415 0-.765.168-1.05.504s-.428.73-.428 1.178v3.826h-1.055v-4.342c0-.363-.083-.648-.25-.855s-.413-.312-.733-.312c-.504 0-.906.188-1.207.563s-.45.884-.45 1.524v3.422h-1.056v-6.277zM268.577 253.06h.996v.884h.023c.45-.71 1.074-1.066 1.875-1.066.81 0 1.447.294 1.914.882s.7 1.34.7 2.253c0 1.023-.238 1.863-.715 2.52s-1.16.984-2.046.984c-.727 0-1.283-.28-1.67-.844h-.023v3.146h-1.054v-8.76zm1.008 3.432c0 .672.164 1.19.492 1.56s.736.55 1.225.55c.535 0 .95-.218 1.248-.653s.445-1.027.445-1.773c0-.816-.143-1.412-.428-1.787s-.715-.563-1.29-.563c-.558 0-.98.22-1.265.66s-.427 1.107-.427 2.005zM276.71 259.334h-1.054v-8.613h1.055v8.614zM283.914 257.365c-.117.648-.436 1.186-.955 1.61-.458.36-1.06.544-1.806.552-.88-.008-1.576-.296-2.092-.864s-.773-1.333-.773-2.294c0-1.103.265-1.96.796-2.573s1.27-.92 2.215-.92c.85 0 1.51.316 1.987.95s.715 1.536.715 2.712h-4.588c0 .655.152 1.163.457 1.522s.763.54 1.372.54c.43 0 .8-.13 1.107-.39s.478-.543.51-.848h1.054zm-1.008-1.67c-.055-.68-.234-1.16-.54-1.444s-.708-.424-1.212-.424c-.512 0-.925.18-1.24.54s-.48.802-.5 1.33h3.492z"/>
</g>
</g>
<path id="groove3" d="M262.82 313.632c-52.598 0-95.39-42.79-95.39-95.39 0-52.595 42.792-95.386 95.39-95.386 52.596 0 95.385 42.79 95.385 95.387 0 52.598-42.79 95.39-95.386 95.39zm0-189.038c-51.64 0-93.65 42.01-93.65 93.65 0 51.64 42.01 93.65 93.65 93.65 51.637 0 93.647-42.01 93.647-93.65 0-51.64-42.01-93.65-93.648-93.65z" opacity=".6" fill="#231F20"/>
<path id="groove2_1_" d="M262.818 339.77c-67.01 0-121.528-54.517-121.528-121.526 0-67.01 54.518-121.528 121.528-121.528s121.527 54.518 121.527 121.528S329.83 339.77 262.818 339.77zm0-241.272c-66.028 0-119.747 53.72-119.747 119.747S196.79 337.99 262.82 337.99s119.746-53.718 119.746-119.745c0-66.028-53.717-119.747-119.746-119.747z" opacity=".6" fill="#231F20"/>
<path id="groove1" d="M262.818 364.73c-80.772 0-146.486-65.714-146.486-146.484 0-80.772 65.714-146.485 146.486-146.485s146.487 65.714 146.487 146.486c0 80.77-65.715 146.483-146.487 146.483zm0-290.824c-79.59 0-144.34 64.75-144.34 144.34 0 79.586 64.75 144.336 144.34 144.336s144.342-64.75 144.342-144.337c0-79.588-64.752-144.34-144.342-144.34z" opacity=".6" fill="#231F20"/>
</g>
<radialgradient id="anchor-hole_1_" cx="262.818" cy="218.244" r="5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#666"/>
<stop offset=".151" stop-color="#555"/>
<stop offset=".513" stop-color="#323232"/>
<stop offset=".809" stop-color="#1C1D1D"/>
<stop offset="1" stop-color="#141515"/>
</radialGradient>
<circle id="anchor-hole" cx="262.818" cy="218.244" r="5" fill="url(#anchor-hole_1_)"/>
</g>
<g id="StartButton">
<lineargradient id="start-button_2_" gradientUnits="userSpaceOnUse" x1="98.431" y1="367.15" x2="98.48" y2="420.083">
<stop offset="0" stop-color="#3D3C3C"/>
<stop offset=".206" stop-color="#323131"/>
<stop offset=".688" stop-color="#1C1D1D"/>
<stop offset="1" stop-color="#141515"/>
</linearGradient>
<circle id="start-button_1_" cx="98.461" cy="400.582" r="36.154" fill="url(#start-button_2_)" stroke="#0A0A0A" stroke-width="2"/>
<g id="start-stop-text" opacity=".8" fill="#999">
<path d="M83.893 403.62c.352.224.855.395 1.396.395.8 0 1.27-.423 1.27-1.035 0-.558-.325-.89-1.145-1.197-.99-.36-1.603-.882-1.603-1.73 0-.944.784-1.646 1.963-1.646.612 0 1.07.145 1.333.297l-.216.64c-.19-.117-.594-.288-1.143-.288-.83 0-1.145.495-1.145.91 0 .566.37.846 1.207 1.17 1.026.395 1.54.89 1.54 1.782 0 .937-.685 1.755-2.116 1.755-.585 0-1.225-.18-1.55-.396l.207-.658zM89.33 399.172v1.044h1.133v.604H89.33v2.35c0 .54.152.846.593.846.216 0 .342-.018.46-.054l.035.604c-.153.054-.396.107-.702.107-.37 0-.666-.126-.855-.333-.215-.243-.305-.63-.305-1.143v-2.377h-.675v-.604h.675v-.81l.774-.234zM94.415 403.53c0 .377.018.746.063 1.043h-.71l-.064-.55h-.027c-.243.343-.71.648-1.333.648-.882 0-1.333-.62-1.333-1.25 0-1.054.938-1.63 2.62-1.62v-.09c0-.352-.098-1.01-.99-1-.414 0-.836.117-1.143.324l-.18-.53c.36-.226.89-.38 1.44-.38 1.333 0 1.657.91 1.657 1.774v1.63zm-.766-1.18c-.865-.018-1.846.135-1.846.98 0 .523.342.757.738.757.576 0 .945-.36 1.07-.73.028-.09.037-.18.037-.25v-.757zM95.692 401.575c0-.513-.01-.954-.036-1.36h.693l.035.865h.027c.198-.585.684-.954 1.215-.954.08 0 .144.01.216.018v.748c-.08-.02-.162-.02-.27-.02-.56 0-.955.415-1.063 1.01-.018.107-.027.243-.027.37v2.32h-.792v-2.997zM99.805 399.172v1.044h1.134v.604h-1.135v2.35c0 .54.153.846.594.846.215 0 .34-.018.458-.054l.036.604c-.153.054-.396.107-.702.107-.37 0-.666-.126-.855-.333-.216-.243-.306-.63-.306-1.143v-2.377h-.674v-.604h.675v-.81l.775-.234zM103.07 404.925l2.503-6.527h.62l-2.52 6.527h-.602zM108.66 403.62c.352.224.855.395 1.396.395.8 0 1.27-.423 1.27-1.035 0-.558-.324-.89-1.144-1.197-.99-.36-1.603-.882-1.603-1.73 0-.944.783-1.646 1.962-1.646.612 0 1.07.145 1.333.297l-.216.64c-.19-.117-.595-.288-1.144-.288-.83 0-1.144.495-1.144.91 0 .566.37.846 1.207 1.17 1.025.395 1.538.89 1.538 1.782 0 .937-.684 1.755-2.115 1.755-.585 0-1.225-.18-1.55-.396l.207-.658zM114.097 399.172v1.044h1.134v.604h-1.133v2.35c0 .54.153.846.594.846.217 0 .343-.018.46-.054l.036.604c-.153.054-.396.107-.702.107-.37 0-.666-.126-.855-.333-.217-.243-.307-.63-.307-1.143v-2.377h-.675v-.604h.675v-.81l.774-.234zM120.01 402.358c0 1.61-1.124 2.313-2.17 2.313-1.17 0-2.087-.863-2.087-2.24 0-1.45.963-2.305 2.16-2.305 1.25 0 2.098.91 2.098 2.233zm-3.447.045c0 .954.54 1.675 1.314 1.675.756 0 1.323-.71 1.323-1.692 0-.738-.37-1.666-1.305-1.666-.927 0-1.332.864-1.332 1.683zM121.008 401.64c0-.56-.018-1.01-.036-1.424h.702l.045.747h.017c.315-.53.837-.837 1.55-.837 1.06 0 1.853.892 1.853 2.206 0 1.566-.963 2.34-1.99 2.34-.576 0-1.08-.252-1.34-.684h-.02v2.367h-.782v-4.716zm.784 1.16c0 .117.01.225.036.324.144.55.62.927 1.188.927.837 0 1.324-.683 1.324-1.683 0-.864-.46-1.61-1.296-1.61-.54 0-1.053.377-1.197.972-.027.098-.054.215-.054.314v.756z"/>
</g>
<circle id="on-light" cx="76.411" cy="401.582" r="4" opacity=".94" fill="#29ABE2" stroke="#0A0A0A"/>
</g>
<g id="NeedleArperture">
<radialgradient id="SVGID_3_" cx="485.222" cy="106.585" r="47.093" gradientUnits="userSpaceOnUse">
<stop offset=".94" stop-color="#3D3C3C"/>
<stop offset=".953" stop-color="#323131"/>
<stop offset=".981" stop-color="#1C1D1D"/>
<stop offset="1" stop-color="#141515"/>
</radialGradient>
<circle cx="485.222" cy="106.585" r="47.081" fill="url(#SVGID_3_)"/>
<radialgradient id="SVGID_4_" cx="485.223" cy="106.585" r="44.149" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#3D3C3C"/>
<stop offset=".206" stop-color="#323131"/>
<stop offset=".688" stop-color="#1C1D1D"/>
<stop offset="1" stop-color="#141515"/>
</radialGradient>
<circle cx="485.222" cy="106.585" r="44.138" fill="url(#SVGID_4_)"/>
<g id="needle-arm">
<path d="M497.835 301.72c-1.345.003-2.702-.423-3.854-1.302-2.78-2.128-3.31-6.107-1.182-8.89 8.236-10.79 29.715-45.175 20.632-61.055-13.103-22.906-32.986-58.176-33.186-58.53-.535-.95-.816-2.02-.817-3.107l-.018-19.51c-.006-3.5 2.83-6.342 6.333-6.345s6.343 2.834 6.346 6.335l.015 17.848c3.885 6.882 20.76 36.785 32.33 57.015 14.905 26.058-17.79 70.116-21.565 75.056-1.247 1.63-3.13 2.486-5.035 2.487zM479.067 78.44h13.31v55.354h-13.31z" fill="#09090A"/>
<lineargradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="479.094" y1="142.778" x2="492.417" y2="142.778">
<stop offset="0"/>
<stop offset=".463" stop-color="#292929"/>
<stop offset="1" stop-color="#555"/>
</linearGradient>
<path fill="url(#SVGID_5_)" d="M492.417 152.566l-13.306.013-.016-19.59 13.305-.012z"/>
<circle id="needle-folcrum-light" cx="485.423" cy="106.139" r="18.859" fill="#4D4D4D"/>
<circle cx="485.422" cy="106.138" r="14.957" fill="#242225"/>
<circle cx="485.423" cy="106.138" r="10.241" fill="#838182"/>
<path fill="#09090A" d="M492.35 78.434l5.82-4.07-.006-4.39L473.21 70l.004 4.227 5.794 4.22z"/>
<lineargradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="473.185" y1="57.712" x2="498.167" y2="57.712">
<stop offset="0"/>
<stop offset=".463" stop-color="#292929"/>
<stop offset="1" stop-color="#555"/>
</linearGradient>
<path fill="url(#SVGID_6_)" d="M498.167 71.274l-24.957.025-.024-27.15 24.956-.025z"/>
<path fill="#3C3A3F" d="M492.477 292.425l10.122 6.844-7.067 10.448-10.122-6.845z"/>
<g id="needle-head-handle" fill="#121114">
<path id="needle-handle_1" d="M510.53 337.854l-22.39-13.61 3.878-5.737 20.128 17.04z"/>
<path id="needle-head_2" d="M485.745 298.094l14.044 9.488-22.398 33.15-14.044-9.487z"/>
</g>
<path id="needle-neck-light" class="needle-head-lights" fill="#4D4D4D" d="M492.568 291.31l11.028 7.453-1.158 1.712-11.028-7.453z"/>
<path id="needle-light2" class="needle-head-lights" fill="#4D4D4D" d="M476.265 317.786l2.885 1.95-5.474 8.102-2.886-1.95z"/>
<path id="needle-light1" class="needle-head-lights" fill="#4D4D4D" d="M482.072 321.776l2.885 1.952-5.478 8.098-2.886-1.952z"/>
</g>
</g>
<g id="VolumeControl">
<g id="volume-track">
<path fill="#0F0F0F" stroke="#0F0F0F" d="M532.5 329.5h5v105h-5z"/>
<path opacity=".5" fill="#09090A" stroke="#4D4D4D" d="M533.5 330v104M537 433.5h-3"/>
</g>
<g id="volume-knob">
<lineargradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="535.5" y1="373.5" x2="535.5" y2="391.017">
<stop offset="0" stop-color="#3D3C3C"/>
<stop offset=".206" stop-color="#323131"/>
<stop offset=".688" stop-color="#1C1D1D"/>
<stop offset="1" stop-color="#141515"/>
</linearGradient>
<path d="M553.5 388.717c0 .984-.8 1.783-1.783 1.783h-32.434c-.984 0-1.783-.8-1.783-1.783v-14.434c0-.984.8-1.783 1.783-1.783h32.434c.984 0 1.783.8 1.783 1.783v14.434z" fill="url(#SVGID_7_)" stroke="#000"/>
<path fill="none" stroke="#000" stroke-width="3" d="M517 382.5h36"/>
<path id="knob-light" fill="none" stroke="#29ABE2" stroke-width="2" d="M518 383h35"/>
</g>
<g id="volume-light-bars" fill="#0F0F0F">
<path id="bar01_2_" d="M559 429h18v5h-18z"/>
<path id="bar02_2_" d="M559 419h18v5h-18z"/>
<path id="bar03_2_" d="M559 409h18v5h-18z"/>
<path id="bar04_2_" d="M559 399h18v5h-18z"/>
<path id="bar05_2_" d="M559 389h18v5h-18z"/>
<path id="bar06_2_" d="M559 379h18v5h-18z"/>
<path id="bar07_2_" d="M559 369h18v5h-18z"/>
<path id="bar08_2_" d="M559 359h18v5h-18z"/>
<path id="bar09_2_" d="M559 349h18v5h-18z"/>
<path id="bar10_2_" d="M559 339h18v5h-18z"/>
<path id="bar11_2_" d="M559 329h18v5h-18z"/>
</g>
<g id="volume-light-level" clip-path="url(#volume-mask)">
<path id="light-level" fill="#29ABE2" d="M559 329h18v105h-18z"/>
</g>
</g>
</svg>
</div>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/utils/Draggable.min.js'>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/buzz/1.1.10/buzz.min.js'>
</script>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>

<script>'use strict';
function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError('Cannot call a class as a function');
    }
}
var SG_COLOR_OFF = '#4d4d4d';
var SG_COLOR_ON = '#29ABE2';
var Player = function () {
    function Player(song) {
        _classCallCheck(this, Player);
        this.SPIN_STATE = 0;
        this.NEEDLE_STATE = 0;
        this.NEEDLE_SWINGDOW = 44 - 18;
        this.volume = 40;
        this.needleDrag = false;
        this.recordScratch = false;
        this.volumeDrag = false;
        this.song = song || null;
        this.actors = {};
        this.tweens = {};
        this.draggables = {};
        this.masterTl = new TimelineMax();
        this.sound = new buzz.sound(this.song, {
            preload: true,
            autoplay: false,
            loop: false
        });
        this.scratchSound = new buzz.sound('https://sites.google.com/site/usesitesto/file/Franky-mys2010.mp3', {
            preload: true,
            autoplay: false,
            loop: true
        });
        this.actors.record = document.querySelector('#Record');
        this.actors.vinyl = this.actors.record.querySelector('#vinyl');
        this.actors.recordPlateLight = this.actors.record.querySelector('#play-state-ring');
        this.actors.startButton = document.querySelector('#StartButton');
        this.actors.startButtonLight = this.actors.startButton.querySelector('#on-light');
        this.actors.volumeControl = document.querySelector('#VolumeControl');
        this.actors.volumeKnob = this.actors.volumeControl.querySelector('#volume-knob');
        this.actors.volumeKnobLight = this.actors.volumeKnob.querySelector('#knob-light');
        this.actors.volumeTrack = this.actors.volumeControl.querySelector('#volume-track');
        this.actors.volumeLightLevel = this.actors.volumeControl.querySelector('#light-level');
        this.actors.needleArperture = document.querySelector('#NeedleArperture');
        this.actors.needleArm = this.actors.needleArperture.querySelector('#needle-arm');
        this.actors.needleFolcrum = this.actors.needleArperture.querySelector('#needle-folcrum-light');
        this.actors.needleHeadHandle = this.actors.needleArperture.querySelector('#needle-head-handle');
        this.actors.needleHeadLights = document.querySelectorAll('.needle-head-lights');
    }
    Player.prototype.setStage = function setStage() {
        TweenMax.set(this.actors.startButtonLight, { fill: SG_COLOR_OFF });
        TweenMax.set(this.actors.volumeKnob, { y: '+=' + this.actors.volumeTrack.getBBox().height / 2 });
        TweenMax.set(this.actors.volumeKnobLight, { stroke: SG_COLOR_OFF });
        TweenMax.set(this.actors.volumeLightLevel, {
            scaleY: 0,
            transformOrigin: '50% 100%'
        });
        TweenMax.set(this.actors.recordPlateLight, { autoAlpha: 0 });
        TweenMax.set(this.actors.vinyl, { transformOrigin: '50% 50%' });
        TweenMax.set(this.actors.needleArm, { transformOrigin: '22px 62px' });
        this._setupTweens();
        this._setupListeners();
    };
    Player.prototype._setupTweens = function _setupTweens() {
        var self = this;
        this.tweens.vinyl = new TimelineMax({
            repeat: -1,
            paused: true
        });
        this.tweens.vinyl.to(this.actors.vinyl, 3, {
            transformOrigin: '50% 50%',
            rotation: '+=360',
            ease: Linear.easeNone
        });
        this.tweens.volumeKnob = TweenMax.fromTo(this.actors.volumeKnob, 1, { y: this.actors.volumeTrack.getBBox().height / 2 }, {
            y: -1 * (this.actors.volumeTrack.getBBox().height / 2),
            ease: Linear.easeNone,
            paused: true
        });
        this.tweens.volumeLightLevel = TweenMax.fromTo(this.actors.volumeLightLevel, 1, {
            scaleY: 0,
            transformOrigin: '50% 100%'
        }, {
            scaleY: 1,
            paused: true,
            transformOrigin: '50% 100%',
            ease: Linear.easeNone
        });
        this.draggables.volumeKnob = Draggable.create(this.actors.volumeKnob, {
            type: 'y',
            bounds: {
                minY: this.actors.volumeTrack.getBBox().height / 2,
                maxY: -1 * (this.actors.volumeTrack.getBBox().height / 2)
            },
            onDragEnd: function onDragEnd(e) {
                var range = this.minY - this.maxY, yval = this.y - this.maxY, perc = yval * 100 / range;
                self.setVolume(perc);
            }
        });
        this.draggables.needleArm = Draggable.create(this.actors.needleArm, {
            type: 'rotation',
            throwProps: true,
            bounds: {
                minRotation: 0,
                maxRotation: 44
            },
            onDrag: function onDrag(e) {
                self._needleUpdate(this, self);
            },
            onDragStart: function onDragStart(e) {
                self.needleDrag = true;
                if (self.SPIN_STATE == 1 && self.NEEDLE_STATE == 1) {
                    self.sound.pause();
                }
            },
            onDragEnd: function onDragEnd(e) {
                if (this.rotation >= 18 && this.rotation <= 44) {
                    var pos = (this.rotation - 18) / self.NEEDLE_SWINGDOW;
                    self.sound.setPercent(pos * 100);
                    if (self.SPIN_STATE == 1) {
                        self.sound.play();
                    }
                }
                self.needleDrag = false;
            }
        });
        this.draggables.vinyl = Draggable.create(this.actors.vinyl, {
            type: 'rotation',
            onDrag: function onDrag(e) {
            },
            onDragStart: function onDragStart(e) {
                self.recordScratch = true;
                self.tweens.vinyl.pause();
                if (self.SPIN_STATE == 1 && self.NEEDLE_STATE == 1) {
                    self.sound.pause();
                    self.scratchSound.play();
                }
            },
            onDragEnd: function onDragEnd(e) {
                if (self.SPIN_STATE == 1 && self.NEEDLE_STATE == 1) {
                    self.tweens.vinyl.resume();
                    self.scratchSound.pause();
                    self.scratchSound.setPercent(0);
                    self.sound.play();
                }
                self.recordScratch = false;
            }
        });
    };
    Player.prototype._setupListeners = function _setupListeners() {
        var _this = this;
        this.actors.startButton.addEventListener('click', function () {
            _this.startStop();
        });
        this.sound.bind('timeupdate', function (e) {
            if (_this.NEEDLE_STATE == 1 && _this.SPIN_STATE == 1 && !_this.needleDrag) {
                var songProgress = _this.sound.getPercent();
                if (songProgress === 100) {
                    _this.hangUpNeedle();
                    _this.startStop();
                } else {
                    _this._moveNeedleTo(18 + _this.NEEDLE_SWINGDOW * (songProgress / 100));
                }
            }
        });
    };
    Player.prototype._needleUpdate = function _needleUpdate(tween, me) {
        var rotation = tween.target._gsTransform.rotation;
        var lights = [
            me.actors.needleFolcrum,
            me.actors.needleHeadLights
        ];
        if (rotation >= 18 && rotation <= 44) {
            TweenMax.to(lights, 0.3, { fill: SG_COLOR_ON });
            me.NEEDLE_STATE = 1;
        } else {
            TweenMax.to(lights, 0.3, { fill: SG_COLOR_OFF });
            me.NEEDLE_STATE = 0;
        }
    };
    Player.prototype.startStop = function startStop() {
        if (this.SPIN_STATE) {
            this.tweens.vinyl.pause();
            TweenMax.set(this.actors.startButtonLight, { fill: SG_COLOR_OFF });
            TweenMax.to(this.actors.recordPlateLight, 2, { autoAlpha: 0 });
            if (this.NEEDLE_STATE === 1) {
                this.sound.pause();
            }
            this.SPIN_STATE = 0;
        } else {
            this.setVolume(this.volume);
            this.tweens.vinyl.resume();
            TweenMax.set(this.actors.startButtonLight, { fill: SG_COLOR_ON });
            TweenMax.to(this.actors.recordPlateLight, 1.4, {
                autoAlpha: 1,
                delay: 0.25
            });
            if (this.NEEDLE_STATE === 1) {
                this.sound.play().fadeTo(this.volume, 500);
            } else if (this.NEEDLE_STATE === 0) {
                var autoPlay = true;
                this.loadNeedle(autoPlay);
            }
            this.SPIN_STATE = 1;
        }
    };
    Player.prototype.setVolume = function setVolume(val) {
        if (val < 0) {
            val = 0;
        }
        if (val > 100) {
            val = 100;
        }
        this.volume = val;
        this.tweens.volumeKnob.progress(this.volume / 100);
        this.tweens.volumeLightLevel.progress(this.volume / 100);
        this.sound.setVolume(this.volume);
        if (this.volume > 0) {
            TweenMax.set(this.actors.volumeKnobLight, { stroke: SG_COLOR_ON });
        } else {
            TweenMax.set(this.actors.volumeKnobLight, { stroke: SG_COLOR_OFF });
        }
    };
    Player.prototype._moveNeedleTo = function _moveNeedleTo(val, callback) {
        callback = callback || null;
        if (val < 0) {
            val = 0;
        }
        if (val > 100) {
            val = 100;
        }
        var origin = '22px 62px';
        TweenMax.to(this.actors.needleArm, 1, {
            rotation: val,
            transformOrigin: origin,
            ease: Linear.easeNone,
            onUpdate: this._needleUpdate,
            onUpdateParams: [
                '{self}',
                this
            ],
            onComplete: callback
        });
    };
    Player.prototype.loadNeedle = function loadNeedle(andPlay) {
        var _this2 = this;
        andPlay = andPlay || false;
        var needleOrigin = '22px 62px';
        this._moveNeedleTo(18, function () {
            if (andPlay) {
                if (_this2.tweens.volumeKnob.progress() == 0)
                    _this2.setVolume(_this2.volume);
                _this2.sound.setPercent(0);
                _this2.sound.play().fadeTo(_this2.volume, 500);
            }
        });
    };
    Player.prototype.hangUpNeedle = function hangUpNeedle() {
        this._moveNeedleTo(0);
        this.sound.setPercent(0);
    };
    Player.prototype.init = function init() {
        this.setStage();
        console.log('initialized...');
    };
    return Player;
}();
var player = new Player('https://sites.google.com/site/belajarakbar/music/betawi-M2010s.mp3');
player.init();</script>

Vinyl Player code by. Siggy
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here  Play Vinyl record

Category: vinyl record

Digital Clock

Memasang Kode Digital Clock
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut : Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
  top: -29px;
  width: 100%;
  height: 57px;
text-align: center;
font-size:8px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%,rgb(0,0,128) 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:#24006B;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

html,
body {
  height: 100%;
  background-color: #000;
}
.screen {
  width: 100%;
  height: 100%;
  display: table;
}
.time-display {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
@media only screen and (max-width:3839px) {
  .digit:not(:last-of-type) {
    margin-right: 31.5px;
  }
  .digit {
    width: 192px;
    height: 378px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 150px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 150px;
    height: 21px;
  }
  .digit .vertical {
    width: 21px;
    height: 157.5px;
  }
  .digit .a {
    top: 0;
    left: 21px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -11px;
    border-left: 11px solid #000;
    border-right: 11px solid transparent;
    border-bottom: 21px solid #000;
  }
  .digit .a:after {
    right: -11px;
    border-right: 11px solid #000;
    border-left: 11px solid transparent;
    border-bottom: 21px solid #000;
  }
  .digit .b {
    top: 21px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-left: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .b:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-left: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .c {
    top: 199.5px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-left: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .c:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-left: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 21px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -11px;
    border-left: 11px solid #000;
    border-right: 11px solid transparent;
    border-top: 21px solid #000;
  }
  .digit .d:after {
    right: -11px;
    border-right: 11px solid #000;
    border-left: 11px solid transparent;
    border-top: 21px solid #000;
  }
  .digit .e {
    top: 199.5px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-right: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .e:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-right: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .f {
    top: 21px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-right: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .f:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-right: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .g {
    top: 178.5px;
    left: 21px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 11px solid transparent;
    border-top: 11px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 11px solid transparent;
    border-top: 11px solid #000;
    border-bottom: 11px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 21px;
    height: 378px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 42px;
  }
  .separator .dot {
    background: #071205;
    width: 21px;
    height: 21px;
    border-radius: 21px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:1519px) {
  .digit:not(:last-of-type) {
    margin-right: 27px;
  }
  .digit {
    width: 156px;
    height: 306px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 120px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 120px;
    height: 18px;
  }
  .digit .vertical {
    width: 18px;
    height: 126px;
  }
  .digit .a {
    top: 0;
    left: 18px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -9px;
    border-left: 9px solid #000;
    border-right: 9px solid transparent;
    border-bottom: 18px solid #000;
  }
  .digit .a:after {
    right: -9px;
    border-right: 9px solid #000;
    border-left: 9px solid transparent;
    border-bottom: 18px solid #000;
  }
  .digit .b {
    top: 18px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-left: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .b:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-left: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .c {
    top: 162px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-left: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .c:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-left: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 18px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -9px;
    border-left: 9px solid #000;
    border-right: 9px solid transparent;
    border-top: 18px solid #000;
  }
  .digit .d:after {
    right: -9px;
    border-right: 9px solid #000;
    border-left: 9px solid transparent;
    border-top: 18px solid #000;
  }
  .digit .e {
    top: 162px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-right: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .e:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-right: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .f {
    top: 18px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-right: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .f:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-right: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .g {
    top: 144px;
    left: 18px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 9px solid transparent;
    border-top: 9px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 9px solid transparent;
    border-top: 9px solid #000;
    border-bottom: 9px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 18px;
    height: 306px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 36px;
  }
  .separator .dot {
    background: #071205;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:1259px) {
  .digit:not(:last-of-type) {
    margin-right: 22.5px;
  }
  .digit {
    width: 110px;
    height: 205px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 80px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 80px;
    height: 15px;
  }
  .digit .vertical {
    width: 15px;
    height: 80px;
  }
  .digit .a {
    top: 0;
    left: 15px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -8px;
    border-left: 8px solid #000;
    border-right: 8px solid transparent;
    border-bottom: 15px solid #000;
  }
  .digit .a:after {
    right: -8px;
    border-right: 8px solid #000;
    border-left: 8px solid transparent;
    border-bottom: 15px solid #000;
  }
  .digit .b {
    top: 15px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .b:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-left: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .c {
    top: 110px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .c:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-left: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 15px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -8px;
    border-left: 8px solid #000;
    border-right: 8px solid transparent;
    border-top: 15px solid #000;
  }
  .digit .d:after {
    right: -8px;
    border-right: 8px solid #000;
    border-left: 8px solid transparent;
    border-top: 15px solid #000;
  }
  .digit .e {
    top: 110px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-right: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .e:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-right: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .f {
    top: 15px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-right: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .f:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-right: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .g {
    top: 95px;
    left: 15px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 8px solid transparent;
    border-top: 8px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid #000;
    border-bottom: 8px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 15px;
    height: 205px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 30px;
  }
  .separator .dot {
    background: #071205;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:929px) {
  .digit:not(:last-of-type) {
    margin-right: 12px;
  }
  .digit {
    width: 56px;
    height: 104px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 40px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 40px;
    height: 8px;
  }
  .digit .vertical {
    width: 8px;
    height: 40px;
  }
  .digit .a {
    top: 0;
    left: 8px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -4px;
    border-left: 4px solid #000;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #000;
  }
  .digit .a:after {
    right: -4px;
    border-right: 4px solid #000;
    border-left: 4px solid transparent;
    border-bottom: 8px solid #000;
  }
  .digit .b {
    top: 8px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .b:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-left: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .c {
    top: 56px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .c:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-left: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 8px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -4px;
    border-left: 4px solid #000;
    border-right: 4px solid transparent;
    border-top: 8px solid #000;
  }
  .digit .d:after {
    right: -4px;
    border-right: 4px solid #000;
    border-left: 4px solid transparent;
    border-top: 8px solid #000;
  }
  .digit .e {
    top: 56px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-right: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .e:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-right: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .f {
    top: 8px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-right: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .f:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-right: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .g {
    top: 48px;
    left: 8px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 4px solid transparent;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
    white-space: nowrap;
  }
  .separator {
    width: 8px;
    height: 104px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 16px;
    white-space: nowrap;
  }
  .separator .dot {
    background: #071205;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width: 500px) {
  .digit:not(:last-of-type) {
    margin-right: 6px;
  }
  .digit {
    width: 24px;
    height: 44px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 16px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 16px;
    height: 4px;
  }
  .digit .vertical {
    width: 4px;
    height: 16px;
  }
  .digit .a {
    top: 0;
    left: 4px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -2px;
    border-left: 2px solid #000;
    border-right: 2px solid transparent;
    border-bottom: 4px solid #000;
  }
  .digit .a:after {
    right: -2px;
    border-right: 2px solid #000;
    border-left: 2px solid transparent;
    border-bottom: 4px solid #000;
  }
  .digit .b {
    top: 4px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-left: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .b:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-left: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .c {
    top: 24px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-left: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .c:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-left: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 4px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -2px;
    border-left: 2px solid #000;
    border-right: 2px solid transparent;
    border-top: 4px solid #000;
  }
  .digit .d:after {
    right: -2px;
    border-right: 2px solid #000;
    border-left: 2px solid transparent;
    border-top: 4px solid #000;
  }
  .digit .e {
    top: 24px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-right: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .e:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-right: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .f {
    top: 4px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-right: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .f:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-right: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .g {
    top: 20px;
    left: 4px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 2px solid transparent;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 2px solid transparent;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
    white-space: nowrap;
  }
  .separator {
    width: 4px;
    height: 44px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 8px;
    white-space: nowrap;
  }
  .separator .dot {
    background: #071205;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
/*Material Card*/
.m-card {
  position: relative;
  overflow: hidden;
  margin: 3em auto 1em auto;
  padding: 1em;
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  max-width: 450px;
  z-index: 1;
}
.m-card:hover {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.m-card h1 {
  border-bottom: 1px solid #311b92;
}
.m-card h1 #because {
  font-size: 0.35em;
  text-align: center;
  display: block;
  margin-bottom: 0.5em;
  font-weight: 300;
}
.m-card #logo {
  max-width: 300px;
  margin: 0 auto;
  display: block;
}
.m-card h5 {
  margin: 0.5em 0 0.7em;
}
.m-card #file-upload-container {
  cursor: pointer;
  border: 3px dashed #311b92;
  display: block;
  width: 100%;
  height: 200px;
  border-radius: 25px;
  text-align: center;
}
.m-card #file-upload-container input {
  display: none;
}
.m-card #file-upload-container #add-symbol {
  display: block;
  margin: 0 auto;
  height: 70%;
  fill: #616161;
  max-width: 40px;
}
.m-card #file-upload-container #add-symbol:hover {
  fill: #311b92;
}
.m-card #file-upload-container #file-name {
  display: block;
  margin: 0 auto;
  color: #616161;
  max-width: 90%;
  word-break: break-all;
}
.m-card #file-upload-container .file-added {
  color: #212121 !important;
}
.m-card #file-upload-container:hover #add-symbol {
  fill: #311b92;
}
.m-card button {
  width: 100%;
  padding-top: 1.3em;
}
.m-card button #upload-symbol {
  fill: #311b92;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  max-width: 36px;
  max-height: 36px;
  display: inline;
  vertical-align: middle;
  margin-top: -4px;
}
.m-card button span {
  display: inline-block;
}
.m-card button:hover #upload-symbol {
  fill: #fff;
}
.m-card button:hover #upload-symbol #arrow {
  top: -12px;
}
.m-card button.disabled {
  pointer-events: none;
  cursor: default;
  color: #616161;
  border-color: #616161;
  background: #eeeeee;
}
.m-card button.disabled #upload-symbol {
  fill: #616161;
}
.m-card .how-to {
  display: block;
  text-align: center;
  width: 100%;
  margin-top: 1em;
  padding: 0.75em 0;
  font-weight: 300;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.m-card .how-to:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.m-card #how-to {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0!important;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 3;
  padding: 1em;
  display: none;
}
.m-card #how-to h3 {
  border-bottom: 1px solid #212121;
  padding-bottom: 0.25em;
}
.m-card #how-to #close {
  position: absolute;
  top: 1em;
  right: 1em;
}
.m-card #how-to #close #close-symbol {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  max-width: 20px;
  max-height: 20px;
  fill: #616161;
}
.m-card #how-to #close:hover #close-symbol {
  fill: #311b92;
}
.m-card .step {
  float: left;
  width: 100%;
}
.m-card .step img {
  max-width: 120px;
  display: block;
  float: left;
  margin-right: 0.5em;
  border: 1px solid #212121;
}
.m-card .step h6 {
  margin-bottom: 0.5em;
}
.m-card #upload-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 4;
  padding: 1em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.m-card #upload-animation h3 {
  margin-bottom: 0px;
}
.m-card #upload-animation.show {
  opacity: 1;
}</style>

<div class="screen" id="app">
            <div class="time-display">
                <div class="hours">
                    <div class="digit h1">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                    <div class="digit h2">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                </div>
                <div class="separator">
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="minutes">
                    <div class="digit m1">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                    <div class="digit m2">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                </div>
                <div class="separator">
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="seconds">
                    <div class="digit s1">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                    <div class="digit s2">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                </div>
            </div>
        </div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://codepen.io/hello/" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/Island-Def-Love-Jones-M2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/digital-clock.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a> </div>
</header>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-ddaa1eeb67d762ab8aad46508017908c.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>
      var currentDate,
    currentHours,
    currentMinutes,
    currentSeconds;

var a = [2,3,5,6,7,8,9,0],
    b = [1,2,3,4,7,8,9,0],
    c = [1,3,4,5,6,7,8,9,0],
    d = [2,3,5,6,8,0],
    e = [6,8,2,0],
    f = [4,5,6,8,9,0],
    g = [2,3,4,5,6,8,9];
var constants = [ [2,3,5,6,7,8,9,0],[1,2,3,4,7,8,9,0],[1,3,4,5,6,7,8,9,0],[2,3,5,6,8,0],[6,8,2,0],[4,5,6,8,9,0],[2,3,4,5,6,8,9] ];
var hours = [],
    minutes = [],
    seconds = [];
var map = ['a','b','c','d','e','f'];
function updateDate(){
    currentDate = new Date();
    currentHours = currentDate.getHours();
    if (currentHours < 10){
        currentHours = '0' + currentHours;
    }
    currentMinutes = currentDate.getMinutes();
    if (currentMinutes < 10){
        currentMinutes = '0' + currentMinutes;
    }
    currentSeconds = currentDate.getSeconds();
    if (currentSeconds < 10){
        currentSeconds = '0' + currentSeconds;
    }
}
function splitDigits(stringVal,array){
    var tempString = stringVal.toString();
    array.length = 0
    for (var i = 0; i < tempString.length; i++) {
        array.push(+tempString.charAt(i));
    }
}
function checkVal(val,array){
    for (var k = 0; k < array.length; k++){
        if (val == array[k]){
            return true;
        }
    }
    return false;
}
function printDigits(array, elem){
    for (var count = 0; count < array.length; count++) {
        for (var segmentCount = 0; segmentCount < 7; segmentCount++){
            if ( checkVal(array[count], constants[segmentCount] ) == true){
                turnOn(elem+(count+1)+' div:nth-of-type('+(segmentCount+1)+')');
            } else {
                turnOff(elem+(count+1)+' div:nth-of-type('+(segmentCount+1)+')');
            }
        }
    };
}
function turnOn(elem){
    $(elem).addClass('on');
}
function turnOff(elem){
    $(elem).removeClass('on');   
}
$( document ).ready(function() {
    setInterval(function(){
         $('.dot').toggleClass('on');
    },1000);
    console.log( checkVal(7,constants[4]) );
    setInterval(function(){
        updateDate();
        splitDigits(currentSeconds,seconds);
        printDigits(seconds,'.s');
        splitDigits(currentMinutes,minutes);
        printDigits(minutes,'.m');
        splitDigits(currentHours,hours);
        printDigits(hours,'.h');
    },1000);

});
    </script>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

Digital Clock code by. Maneesh
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here  Digital Clock Audio

Category: Digital Clock

Mys2010 on Codepen

Vinyl record

Digital Clock

POPULAR

Blog Archive