mirror of
https://github.com/Shabinder/SpotiFlyer.git
synced 2024-10-18 12:54:33 +02:00
Deploying to gh-pages from @ Shabinder/spotiflyer-kmp@c1e61f28ab 🚀
This commit is contained in:
Shabinder
parent
77c39ed573
commit
d206b03136
1
check.svg
Normal file
1
check.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(1 0 0 -1 0 -6826)" gradientUnits="userSpaceOnUse" x1="0" x2="512" y1="-7082" y2="-7082"><stop offset="0" stop-color="#31d8ff"/><stop offset="1" stop-color="#FC5C7D"/></linearGradient><path d="m512 256c0 141.386719-114.613281 256-256 256s-256-114.613281-256-256 114.613281-256 256-256 256 114.613281 256 256zm0 0" fill="url(#a)"/><path d="m175 395.246094c-4.035156 0-7.902344-1.628906-10.726562-4.511719l-81-82.832031c-5.789063-5.921875-5.683594-15.417969.238281-21.210938 5.921875-5.792968 15.417969-5.6875 21.210937.238282l70.273438 71.859374 232.277344-237.523437c5.792968-5.921875 15.289062-6.027344 21.210937-.234375 5.925781 5.789062 6.03125 15.289062.238281 21.210938l-243 248.492187c-2.820312 2.882813-6.6875 4.511719-10.722656 4.511719zm0 0" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 923 B |
167
css-circular-prog-bar.css
Normal file
167
css-circular-prog-bar.css
Normal file
@ -0,0 +1,167 @@
|
||||
.progress-circle {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.progress-circle:after{
|
||||
border: none;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
width: 4.3em;
|
||||
height: 4.3em;
|
||||
background-color: white;
|
||||
content: " ";
|
||||
margin-top: 0.35em;
|
||||
}
|
||||
/* Text inside the control */
|
||||
.progress-circle span {
|
||||
position: absolute;
|
||||
line-height: 5em;
|
||||
width: 5em;
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: #53777A;
|
||||
z-index: 2;
|
||||
}
|
||||
.left-half-clipper {
|
||||
/* a round circle */
|
||||
border-radius: 50%;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
position: absolute; /* needed for clipping */
|
||||
clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/
|
||||
}
|
||||
/* when p>50, don't clip left half*/
|
||||
.progress-circle.over50 .left-half-clipper {
|
||||
clip: rect(auto,auto,auto,auto);
|
||||
}
|
||||
.value-bar {
|
||||
/*This is an overlayed square, that is made round with the border radius,
|
||||
then it is cut to display only the left half, then rotated clockwise
|
||||
to escape the outer clipping path.*/
|
||||
position: absolute; /*needed for clipping*/
|
||||
clip: rect(0, 2.5em, 5em, 0);
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-radius: 50%;
|
||||
border: 0.45em solid #53777A; /*The border is 0.35 but making it larger removes visual artifacts */
|
||||
/*background-color: #4D642D;*/ /* for debug */
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
/* Progress bar filling the whole right half for values above 50% */
|
||||
.progress-circle.over50 .first50-bar {
|
||||
/*Progress bar for the first 50%, filling the whole right half*/
|
||||
position: absolute; /*needed for clipping*/
|
||||
clip: rect(0, 5em, 5em, 2.5em);
|
||||
background-color: #53777A;
|
||||
border-radius: 50%;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
.progress-circle:not(.over50) .first50-bar{ display: none; }
|
||||
|
||||
|
||||
/* Progress bar rotation position */
|
||||
.progress-circle.p0 .value-bar { display: none; }
|
||||
.progress-circle.p1 .value-bar { transform: rotate(4deg); }
|
||||
.progress-circle.p2 .value-bar { transform: rotate(7deg); }
|
||||
.progress-circle.p3 .value-bar { transform: rotate(11deg); }
|
||||
.progress-circle.p4 .value-bar { transform: rotate(14deg); }
|
||||
.progress-circle.p5 .value-bar { transform: rotate(18deg); }
|
||||
.progress-circle.p6 .value-bar { transform: rotate(22deg); }
|
||||
.progress-circle.p7 .value-bar { transform: rotate(25deg); }
|
||||
.progress-circle.p8 .value-bar { transform: rotate(29deg); }
|
||||
.progress-circle.p9 .value-bar { transform: rotate(32deg); }
|
||||
.progress-circle.p10 .value-bar { transform: rotate(36deg); }
|
||||
.progress-circle.p11 .value-bar { transform: rotate(40deg); }
|
||||
.progress-circle.p12 .value-bar { transform: rotate(43deg); }
|
||||
.progress-circle.p13 .value-bar { transform: rotate(47deg); }
|
||||
.progress-circle.p14 .value-bar { transform: rotate(50deg); }
|
||||
.progress-circle.p15 .value-bar { transform: rotate(54deg); }
|
||||
.progress-circle.p16 .value-bar { transform: rotate(58deg); }
|
||||
.progress-circle.p17 .value-bar { transform: rotate(61deg); }
|
||||
.progress-circle.p18 .value-bar { transform: rotate(65deg); }
|
||||
.progress-circle.p19 .value-bar { transform: rotate(68deg); }
|
||||
.progress-circle.p20 .value-bar { transform: rotate(72deg); }
|
||||
.progress-circle.p21 .value-bar { transform: rotate(76deg); }
|
||||
.progress-circle.p22 .value-bar { transform: rotate(79deg); }
|
||||
.progress-circle.p23 .value-bar { transform: rotate(83deg); }
|
||||
.progress-circle.p24 .value-bar { transform: rotate(86deg); }
|
||||
.progress-circle.p25 .value-bar { transform: rotate(90deg); }
|
||||
.progress-circle.p26 .value-bar { transform: rotate(94deg); }
|
||||
.progress-circle.p27 .value-bar { transform: rotate(97deg); }
|
||||
.progress-circle.p28 .value-bar { transform: rotate(101deg); }
|
||||
.progress-circle.p29 .value-bar { transform: rotate(104deg); }
|
||||
.progress-circle.p30 .value-bar { transform: rotate(108deg); }
|
||||
.progress-circle.p31 .value-bar { transform: rotate(112deg); }
|
||||
.progress-circle.p32 .value-bar { transform: rotate(115deg); }
|
||||
.progress-circle.p33 .value-bar { transform: rotate(119deg); }
|
||||
.progress-circle.p34 .value-bar { transform: rotate(122deg); }
|
||||
.progress-circle.p35 .value-bar { transform: rotate(126deg); }
|
||||
.progress-circle.p36 .value-bar { transform: rotate(130deg); }
|
||||
.progress-circle.p37 .value-bar { transform: rotate(133deg); }
|
||||
.progress-circle.p38 .value-bar { transform: rotate(137deg); }
|
||||
.progress-circle.p39 .value-bar { transform: rotate(140deg); }
|
||||
.progress-circle.p40 .value-bar { transform: rotate(144deg); }
|
||||
.progress-circle.p41 .value-bar { transform: rotate(148deg); }
|
||||
.progress-circle.p42 .value-bar { transform: rotate(151deg); }
|
||||
.progress-circle.p43 .value-bar { transform: rotate(155deg); }
|
||||
.progress-circle.p44 .value-bar { transform: rotate(158deg); }
|
||||
.progress-circle.p45 .value-bar { transform: rotate(162deg); }
|
||||
.progress-circle.p46 .value-bar { transform: rotate(166deg); }
|
||||
.progress-circle.p47 .value-bar { transform: rotate(169deg); }
|
||||
.progress-circle.p48 .value-bar { transform: rotate(173deg); }
|
||||
.progress-circle.p49 .value-bar { transform: rotate(176deg); }
|
||||
.progress-circle.p50 .value-bar { transform: rotate(180deg); }
|
||||
.progress-circle.p51 .value-bar { transform: rotate(184deg); }
|
||||
.progress-circle.p52 .value-bar { transform: rotate(187deg); }
|
||||
.progress-circle.p53 .value-bar { transform: rotate(191deg); }
|
||||
.progress-circle.p54 .value-bar { transform: rotate(194deg); }
|
||||
.progress-circle.p55 .value-bar { transform: rotate(198deg); }
|
||||
.progress-circle.p56 .value-bar { transform: rotate(202deg); }
|
||||
.progress-circle.p57 .value-bar { transform: rotate(205deg); }
|
||||
.progress-circle.p58 .value-bar { transform: rotate(209deg); }
|
||||
.progress-circle.p59 .value-bar { transform: rotate(212deg); }
|
||||
.progress-circle.p60 .value-bar { transform: rotate(216deg); }
|
||||
.progress-circle.p61 .value-bar { transform: rotate(220deg); }
|
||||
.progress-circle.p62 .value-bar { transform: rotate(223deg); }
|
||||
.progress-circle.p63 .value-bar { transform: rotate(227deg); }
|
||||
.progress-circle.p64 .value-bar { transform: rotate(230deg); }
|
||||
.progress-circle.p65 .value-bar { transform: rotate(234deg); }
|
||||
.progress-circle.p66 .value-bar { transform: rotate(238deg); }
|
||||
.progress-circle.p67 .value-bar { transform: rotate(241deg); }
|
||||
.progress-circle.p68 .value-bar { transform: rotate(245deg); }
|
||||
.progress-circle.p69 .value-bar { transform: rotate(248deg); }
|
||||
.progress-circle.p70 .value-bar { transform: rotate(252deg); }
|
||||
.progress-circle.p71 .value-bar { transform: rotate(256deg); }
|
||||
.progress-circle.p72 .value-bar { transform: rotate(259deg); }
|
||||
.progress-circle.p73 .value-bar { transform: rotate(263deg); }
|
||||
.progress-circle.p74 .value-bar { transform: rotate(266deg); }
|
||||
.progress-circle.p75 .value-bar { transform: rotate(270deg); }
|
||||
.progress-circle.p76 .value-bar { transform: rotate(274deg); }
|
||||
.progress-circle.p77 .value-bar { transform: rotate(277deg); }
|
||||
.progress-circle.p78 .value-bar { transform: rotate(281deg); }
|
||||
.progress-circle.p79 .value-bar { transform: rotate(284deg); }
|
||||
.progress-circle.p80 .value-bar { transform: rotate(288deg); }
|
||||
.progress-circle.p81 .value-bar { transform: rotate(292deg); }
|
||||
.progress-circle.p82 .value-bar { transform: rotate(295deg); }
|
||||
.progress-circle.p83 .value-bar { transform: rotate(299deg); }
|
||||
.progress-circle.p84 .value-bar { transform: rotate(302deg); }
|
||||
.progress-circle.p85 .value-bar { transform: rotate(306deg); }
|
||||
.progress-circle.p86 .value-bar { transform: rotate(310deg); }
|
||||
.progress-circle.p87 .value-bar { transform: rotate(313deg); }
|
||||
.progress-circle.p88 .value-bar { transform: rotate(317deg); }
|
||||
.progress-circle.p89 .value-bar { transform: rotate(320deg); }
|
||||
.progress-circle.p90 .value-bar { transform: rotate(324deg); }
|
||||
.progress-circle.p91 .value-bar { transform: rotate(328deg); }
|
||||
.progress-circle.p92 .value-bar { transform: rotate(331deg); }
|
||||
.progress-circle.p93 .value-bar { transform: rotate(335deg); }
|
||||
.progress-circle.p94 .value-bar { transform: rotate(338deg); }
|
||||
.progress-circle.p95 .value-bar { transform: rotate(342deg); }
|
||||
.progress-circle.p96 .value-bar { transform: rotate(346deg); }
|
||||
.progress-circle.p97 .value-bar { transform: rotate(349deg); }
|
||||
.progress-circle.p98 .value-bar { transform: rotate(353deg); }
|
||||
.progress-circle.p99 .value-bar { transform: rotate(356deg); }
|
||||
.progress-circle.p100 .value-bar { transform: rotate(360deg); }
|
||||
49
download-gradient.svg
Normal file
49
download-gradient.svg
Normal file
@ -0,0 +1,49 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.525879e-005" y1="258" x2="512" y2="258" gradientTransform="matrix(1 0 0 -1 0 514)">
|
||||
<stop offset="0" style="stop-color:#80D8FF"/>
|
||||
<stop offset="0.16" style="stop-color:#88D1FF"/>
|
||||
<stop offset="0.413" style="stop-color:#9FBEFE"/>
|
||||
<stop offset="0.725" style="stop-color:#FC5C7D"/>
|
||||
<stop offset="1" style="stop-color:#FC5C7D"/>
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_1_);" d="M462.622,512H49.378C22.151,512,0,489.85,0,462.623v-118.49c0-11.046,8.954-20,20-20
|
||||
s20,8.954,20,20v118.49c0,5.171,4.207,9.377,9.378,9.377h413.244c5.171,0,9.378-4.207,9.378-9.377v-118.49c0-11.046,8.954-20,20-20
|
||||
c11.046,0,20,8.954,20,20v118.49C512,489.85,489.849,512,462.622,512z M270.548,425.426l146.888-155.701
|
||||
c5.479-5.807,6.979-14.316,3.816-21.646c-3.163-7.33-10.381-12.079-18.364-12.079h-68.133V20c0-11.046-8.954-20-20-20h-117.51
|
||||
c-11.046,0-20,8.954-20,20v216h-68.133c-7.983,0-15.202,4.748-18.364,12.078s-1.662,15.839,3.816,21.646l146.888,155.701
|
||||
c3.778,4.005,9.041,6.275,14.548,6.275C261.507,431.7,266.77,429.431,270.548,425.426z M197.245,276c11.046,0,20-8.954,20-20V40
|
||||
h77.51v216c0,11.046,8.954,20,20,20h41.77L256,382.556L155.476,276H197.245z"/>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
45
download.svg
Normal file
45
download.svg
Normal file
@ -0,0 +1,45 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 471.2 471.2" style="enable-background:new 0 0 471.2 471.2;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M457.7,230.15c-7.5,0-13.5,6-13.5,13.5v122.8c0,33.4-27.2,60.5-60.5,60.5H87.5c-33.4,0-60.5-27.2-60.5-60.5v-124.8
|
||||
c0-7.5-6-13.5-13.5-13.5s-13.5,6-13.5,13.5v124.8c0,48.3,39.3,87.5,87.5,87.5h296.2c48.3,0,87.5-39.3,87.5-87.5v-122.8
|
||||
C471.2,236.25,465.2,230.15,457.7,230.15z"/>
|
||||
<path d="M226.1,346.75c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4l85.8-85.8c5.3-5.3,5.3-13.8,0-19.1c-5.3-5.3-13.8-5.3-19.1,0l-62.7,62.8
|
||||
V30.75c0-7.5-6-13.5-13.5-13.5s-13.5,6-13.5,13.5v273.9l-62.8-62.8c-5.3-5.3-13.8-5.3-19.1,0c-5.3,5.3-5.3,13.8,0,19.1
|
||||
L226.1,346.75z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
error.svg
Normal file
1
error.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(1 0 0 -1 0 -12146)" gradientUnits="userSpaceOnUse" x1="0" x2="512" y1="-12402" y2="-12402"><stop offset="0" stop-color="#9AB3FF"/><stop offset="1" stop-color="#FC5C7D"/></linearGradient><path d="m512 256c0 141.386719-114.613281 256-256 256s-256-114.613281-256-256 114.613281-256 256-256 256 114.613281 256 256zm0 0" fill="url(#a)"/><g fill="#fff"><path d="m256 56c-110.28125 0-200 89.71875-200 200s89.71875 200 200 200 200-89.71875 200-200-89.71875-200-200-200zm0 370c-93.738281 0-170-76.261719-170-170s76.261719-170 170-170 170 76.261719 170 170-76.261719 170-170 170zm0 0"/><path d="m324.179688 187.820312c-5.859376-5.855468-15.355469-5.855468-21.214844 0l-46.964844 46.964844-46.964844-46.964844c-5.859375-5.855468-15.355468-5.855468-21.214844 0-5.855468 5.859376-5.855468 15.355469 0 21.214844l46.964844 46.964844-46.964844 46.964844c-5.855468 5.859375-5.855468 15.355468 0 21.214844 2.929688 2.929687 6.769532 4.394531 10.605469 4.394531 3.839844 0 7.679688-1.464844 10.605469-4.394531l46.96875-46.964844 46.964844 46.964844c2.929687 2.929687 6.769531 4.394531 10.605468 4.394531 3.839844 0 7.679688-1.464844 10.609376-4.394531 5.855468-5.859376 5.855468-15.355469 0-21.214844l-46.964844-46.964844 46.964844-46.964844c5.855468-5.859375 5.855468-15.355468 0-21.214844zm0 0"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
gaana.svg
Normal file
1
gaana.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 200 200" xml:space="preserve" style="enable-background:new 0 0 200 200"><style type="text/css">.st0{clip-path:url(#SVGID_2_)}.st1{fill:#e62c28}.st2{fill:#e94845}.st3{fill:#fdfcfc}.st4{fill:#e62d29}</style><switch><g><g><defs><circle id="SVGID_1_" cx="100" cy="100" r="100"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" style="overflow:visible"/></clipPath><g class="st0"><path d="M202.7,195.2c0,0.3-0.1,0.8-0.1,1.1c-1.5,3-3.7,5.3-6.9,6.4c-0.2,0-0.4,0-0.6,0.1c-0.8-0.1-1.6-0.4-2.3-0.4 c-61,0-122.1,0-183.1,0c-0.7,0-1.4,0.3-2.1,0.4c-0.3,0-0.7-0.1-1-0.1c-3-1.4-5.2-3.6-6.5-6.6V6.7c1.3-3.1,3.5-5.3,6.6-6.7 C6.8,0,7,0,7.2,0c0.9,0.1,1.7,0.4,2.6,0.4c61,0,122.1,0,183.1,0c0.8,0,1.5-0.2,2.3-0.4c0.2,0,0.4,0,0.5,0c3.4,1.2,5.7,3.5,6.9,7 c0,0.1,0,0.4,0,0.5c-0.1,0.7-0.4,1.4-0.4,2.1c0,61.2,0,122.3,0,183.5C202.3,193.8,202.6,194.5,202.7,195.2z M52.3,178.7 c0.9,0,1.6,0,2.3,0c11.3,0,22.6,0.1,33.8,0c2.9,0,6-0.3,8.8-0.9c15.9-3.4,26.8-12.6,30.8-28.7c1.8-7.3,2.8-14.9,4.1-22.3 c5.5-31.1,11-62.2,16.4-93.2c0.5-3.1,1.1-6.1,1.6-9.4c-1,0-1.8,0-2.5,0c-13.4,0-26.8-0.1-40.2,0c-2.9,0-6,0.3-8.8,0.9 C82,28.6,71.1,38.5,67.6,55.6c-2.1,10-3.7,20.1-5.4,30.1c-1.2,6.9-2.6,13.9-3.2,20.9c-0.9,10.1,2.7,18.4,11.9,23.6 c3.9,2.2,8.2,3.7,12.7,3.9c7.7,0.3,15.4,0.3,23.1,0.4c0.7,0,1.4,0,2.2,0c-0.7,3.6-1.3,6.8-1.9,10c-1.6,8.3-6.1,12.1-14.5,12.1 c-11.3,0-22.6,0-33.8,0c-0.8,0-1.5,0-2.3,0C54.9,164.1,53.7,171.2,52.3,178.7z" class="st1"/><path d="M195.2,0c-0.8,0.1-1.5,0.4-2.3,0.4c-61,0-122.1,0-183.1,0C9,0.4,8.3,0.1,7.5,0C70.1,0,132.6,0,195.2,0z" class="st2"/><path d="M202.7,195.2c-0.1-0.7-0.4-1.4-0.4-2.1c0-61.2,0-122.3,0-183.5c0-0.7,0.2-1.4,0.4-2.1 C202.7,70.1,202.7,132.6,202.7,195.2z" class="st2"/><path d="M7.5,202.7c0.7-0.1,1.4-0.4,2.1-0.4c61,0,122.1,0,183.1,0c0.7,0,1.4,0.3,2.1,0.4 C132.4,202.7,69.9,202.7,7.5,202.7z" class="st2"/><path d="M202.7,7.1c-1.2-3.5-3.6-5.9-7.1-7.1h7.1V7.1z" class="st3"/><path d="M195.6,202.7c3.4-1.2,5.7-3.5,7.1-6.7v6.7H195.6z" class="st3"/><path d="M0,196c1.3,3.1,3.6,5.3,6.7,6.7H0V196z" class="st3"/><path d="M6.7,0C3.6,1.4,1.3,3.6,0,6.7V0H6.7z" class="st3"/><path d="M52.3,178.7c1.3-7.4,2.6-14.6,4-22c0.8,0,1.6,0,2.3,0c11.3,0,22.6,0,33.8,0c8.4,0,12.9-3.8,14.5-12.1 c0.6-3.2,1.2-6.5,1.9-10c-0.8,0-1.5,0-2.2,0c-7.7-0.1-15.4,0-23.1-0.4c-4.5-0.2-8.8-1.7-12.7-3.9c-9.2-5.2-12.8-13.5-11.9-23.6 c0.6-7,2-13.9,3.2-20.9c1.7-10.1,3.4-20.2,5.4-30.1C71.1,38.5,82,28.6,98.8,25c2.9-0.6,5.9-0.9,8.8-0.9c13.4-0.1,26.8,0,40.2,0 c0.7,0,1.4,0,2.5,0c-0.6,3.3-1.1,6.3-1.6,9.4c-5.5,31.1-11,62.2-16.4,93.2c-1.3,7.5-2.3,15-4.1,22.3 c-4,16.1-14.9,25.3-30.8,28.7c-2.9,0.6-5.9,0.9-8.8,0.9c-11.3,0.1-22.6,0-33.8,0C53.9,178.7,53.2,178.7,52.3,178.7z M112.7,112.4c1.2-6.8,2.4-13.4,3.5-20c2.1-12.1,4.3-24.3,6.3-36.4c0.8-4.6-1.4-8-5.9-9.3c-1.3-0.4-2.7-0.5-4.1-0.5 c-3-0.1-5.9,0-8.9,0c-8.2,0-13.2,4.4-14.5,12.4c-0.8,4.9-1.7,9.7-2.6,14.6c-1.7,9.6-3.5,19.2-5,28.8c-0.9,6,2.1,10,8.2,10.3 C97.3,112.6,104.9,112.4,112.7,112.4z" class="st3"/><path d="M112.7,112.4c-7.8,0-15.3,0.3-22.9-0.1c-6.1-0.3-9.2-4.3-8.2-10.3c1.5-9.6,3.3-19.2,5-28.8 c0.8-4.9,1.8-9.7,2.6-14.6c1.3-8,6.3-12.4,14.5-12.4c3,0,5.9-0.1,8.9,0c1.4,0,2.8,0.2,4.1,0.5c4.5,1.3,6.7,4.7,5.9,9.3 c-2.1,12.1-4.2,24.3-6.3,36.4C115,98.9,113.9,105.5,112.7,112.4z" class="st4"/></g></g></g></switch></svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
1
github.svg
Normal file
1
github.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" width="64" height="64" x="0" y="0" version="1.1" viewBox="0 0 64 64" xml:space="preserve"><path fill="#3E77BF" d="M31.999 1.646C14.881 1.646 1 15.579 1 32.771c0 13.749 8.881 25.415 21.204 29.53 1.549.287 2.114-.674 2.114-1.5 0-.738-.027-2.695-.042-5.293-8.625 1.883-10.444-4.172-10.444-4.172-1.408-3.596-3.44-4.551-3.44-4.551-2.816-1.932.212-1.895.212-1.895 3.11.219 4.747 3.209 4.747 3.209 2.768 4.756 7.258 3.381 9.024 2.584.279-2.01 1.082-3.383 1.967-4.16-6.882-.787-14.118-3.455-14.118-15.38 0-3.397 1.207-6.176 3.19-8.354-.321-.787-1.384-3.95.302-8.234 0 0 2.604-.836 8.525 3.19 2.473-.69 5.125-1.035 7.762-1.049 2.631.014 5.285.358 7.762 1.049 5.916-4.026 8.516-3.19 8.516-3.19 1.69 4.284.627 7.447.307 8.234 1.988 2.178 3.188 4.956 3.188 8.354 0 11.955-7.248 14.585-14.154 15.357 1.113.961 2.104 2.859 2.104 5.764 0 4.162-.037 7.516-.037 8.537 0 .834.559 1.803 2.131 1.496C54.127 58.174 63 46.516 63 32.771 63 15.579 49.119 1.646 31.999 1.646z"/><path fill="#3E77BF" d="M31.999 1.646C14.881 1.646 1 15.579 1 32.771c0 13.749 8.881 25.415 21.204 29.53 1.549.287 2.114-.674 2.114-1.5 0-.738-.027-2.695-.042-5.293-8.625 1.883-10.444-4.172-10.444-4.172-1.408-3.596-3.44-4.551-3.44-4.551-2.816-1.932.212-1.895.212-1.895 3.11.219 4.747 3.209 4.747 3.209 2.768 4.756 7.258 3.381 9.024 2.584.279-2.01 1.082-3.383 1.967-4.16-6.882-.787-14.118-3.455-14.118-15.38 0-3.397 1.207-6.176 3.19-8.354-.321-.787-1.384-3.95.302-8.234 0 0 2.604-.836 8.525 3.19 2.473-.69 5.125-1.035 7.762-1.049 2.631.014 5.285.358 7.762 1.049 5.916-4.026 8.516-3.19 8.516-3.19 1.69 4.284.627 7.447.307 8.234 1.988 2.178 3.188 4.956 3.188 8.354 0 11.955-7.248 14.585-14.154 15.357 1.113.961 2.104 2.859 2.104 5.764 0 4.162-.037 7.516-.037 8.537 0 .834.559 1.803 2.131 1.496C54.127 58.174 63 46.516 63 32.771 63 15.579 49.119 1.646 31.999 1.646z"/><path fill="#114C82" d="M48.312 14.642c1.641 4.238.594 7.366.275 8.147 1.988 2.178 3.188 4.956 3.188 8.354 0 11.955-7.248 14.585-14.154 15.357 1.113.961 2.104 2.859 2.104 5.764 0 4.162-.037 7.516-.037 8.537 0 .834.559 1.803 2.131 1.496C54.127 58.174 63 46.516 63 32.771c0-3.695-.644-7.237-1.821-10.525-4.274-4.5-9.031-7.497-12.867-7.604z"/><path fill="#114C82" d="M25.122 48.166c.348-.702.773-1.248 1.22-1.643-3.772-.432-7.646-1.439-10.381-4.218 2.104 3.502 5.53 5.095 9.161 5.861z"/><path fill="#6CA9EA" d="M2.614 34.869c0-17.192 13.881-31.125 30.999-31.125 9.505 0 18.007 4.299 23.692 11.061C51.69 6.845 42.452 1.646 31.999 1.646 14.881 1.646 1 15.579 1 32.771A31.04 31.04 0 0 0 8.344 52.87a31.03 31.03 0 0 1-5.73-18.001z"/><path fill="#083E66" d="M41.339 54.363c0-2.904-.991-4.805-2.104-5.766 6.906-.77 14.155-3.402 14.155-15.356 0-3.398-1.2-6.175-3.19-8.353.322-.787 1.387-3.951-.307-8.234 0 0-.322-.099-.987-.061.726 3.23-.052 5.54-.319 6.196 1.988 2.178 3.188 4.956 3.188 8.354 0 11.955-7.248 14.585-14.154 15.357 1.113.961 2.104 2.859 2.104 5.764 0 4.162-.037 7.516-.037 8.537 0 .734.437 1.571 1.615 1.551.008-1.407.036-4.394.036-7.989z"/><path fill="#114C82" d="M15.683 54c.651 1.34 2.839 4.55 8.611 3.874-.008-.706-.014-1.497-.018-2.366-4.453.972-7.082-.174-8.593-1.508z"/><path fill="#6CA9EA" d="M16.796 49.924a7.655 7.655 0 0 0-1.113-1.318c.351.521.724.958 1.113 1.318z"/><metadata><rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"><rdf:Description about="https://iconscout.com/legal#licenses" dc:date="2018-01-30" dc:description="github" dc:format="image/svg+xml" dc:language="en" dc:publisher="Iconscout" dc:title="github"><dc:creator><rdf:Bag><rdf:li>Roundicons.com</rdf:li></rdf:Bag></dc:creator></rdf:Description></rdf:RDF></metadata></svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
BIN
header-dark.jpg
Normal file
BIN
header-dark.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
header.png
Normal file
BIN
header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
17
index.html
Normal file
17
index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="has-navbar-fixed-top">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SpotiFlyer</title>
|
||||
<script src="web-app.js"></script>
|
||||
<link rel="icon" href="spotiflyer.svg" type="image/icon type">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="css-circular-prog-bar.css" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex;flex-direction: column; height: inherit; color: white;" id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
61
left-arrow.svg
Normal file
61
left-arrow.svg
Normal file
@ -0,0 +1,61 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M468.662,212.66H147.974l52.851-52.851c16.896-16.897,16.897-44.393,0-61.293c-8.187-8.186-19.07-12.694-30.647-12.694
|
||||
c-11.576,0-22.46,4.508-30.646,12.694L12.697,225.351C4.509,233.536,0,244.42,0,256s4.509,22.465,12.695,30.647l126.837,126.839
|
||||
c8.186,8.185,19.069,12.693,30.646,12.693c11.577,0,22.462-4.508,30.646-12.694c8.179-8.177,12.683-19.06,12.683-30.647
|
||||
s-4.504-22.47-12.682-30.647l-52.851-52.851h320.687C492.557,299.341,512,279.898,512,256S492.558,212.659,468.662,212.66z
|
||||
M468.659,278.942h-345.31c-4.126,0-7.844,2.486-9.422,6.296c-1.579,3.811-0.706,8.198,2.21,11.115l70.264,70.263
|
||||
c4.324,4.324,6.706,10.086,6.706,16.222c0,6.136-2.382,11.897-6.706,16.222H186.4c-4.333,4.333-10.093,6.719-16.222,6.719
|
||||
c-6.128,0-11.889-2.387-16.222-6.719L27.118,272.221c-4.333-4.332-6.719-10.092-6.719-16.221s2.387-11.889,6.721-16.222
|
||||
L153.957,112.94c4.334-4.334,10.093-6.72,16.221-6.72s11.89,2.387,16.223,6.718c8.945,8.947,8.945,23.501,0,32.446l-70.263,70.263
|
||||
c-2.916,2.917-3.789,7.304-2.21,11.115c1.578,3.81,5.296,6.296,9.422,6.296h345.311c12.649,0,22.941,10.291,22.941,22.942
|
||||
S481.31,278.943,468.659,278.942z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M124.477,326.835l-2.022-2.023c-3.985-3.982-10.441-3.982-14.425,0c-3.983,3.984-3.983,10.442,0,14.425l2.023,2.023
|
||||
c1.992,1.991,4.601,2.987,7.212,2.987c2.61,0,5.22-0.996,7.213-2.987C128.46,337.275,128.46,330.817,124.477,326.835z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M102.707,305.064L49.431,251.79c-3.985-3.982-10.441-3.982-14.425,0c-3.983,3.984-3.983,10.442,0,14.425l53.276,53.275
|
||||
c1.992,1.991,4.601,2.987,7.212,2.987c2.61,0,5.22-0.995,7.213-2.987C106.69,315.505,106.69,309.047,102.707,305.064z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
1
play_store.svg
Normal file
1
play_store.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
BIN
pristine_script.ttf
Normal file
BIN
pristine_script.ttf
Normal file
Binary file not shown.
1
search.svg
Normal file
1
search.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Capa_1" x="0" y="0" version="1.1" viewBox="0 0 511.999 511.999" xml:space="preserve" style="enable-background:new 0 0 511.999 511.999"><g><g><path d="M225.773,0.616C101.283,0.616,0,101.622,0,225.773s101.284,225.157,225.773,225.157s225.774-101.006,225.774-225.157 S350.263,0.616,225.773,0.616z M225.773,413.917c-104.084,0-188.761-84.406-188.761-188.145 c0-103.745,84.677-188.145,188.761-188.145s188.761,84.4,188.761,188.145C414.535,329.511,329.858,413.917,225.773,413.917z"/></g></g><g><g><path d="M506.547,479.756L385.024,358.85c-7.248-7.205-18.963-7.174-26.174,0.068c-7.205,7.248-7.174,18.962,0.068,26.174 l121.523,120.906c3.615,3.59,8.328,5.385,13.053,5.385c4.756,0,9.506-1.82,13.121-5.453 C513.82,498.681,513.789,486.967,506.547,479.756z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 844 B |
1
spotiflyer.svg
Normal file
1
spotiflyer.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="reg" x="0" y="0" version="1.1" viewBox="0 0 512 512" xml:space="preserve" style="enable-background:new 0 0 512 512"><style type="text/css">.st0{fill:url(#SVGID_1_)}.st1{fill:url(#SVGID_2_)}.st2,.st3{stroke:#000;stroke-width:.75;stroke-miterlimit:10}.st3{fill:none;stroke-width:6}</style><switch><g><linearGradient id="SVGID_1_" x1="74.981" x2="437.019" y1="437.019" y2="74.981" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#736bfd"/><stop offset="1" style="stop-color:#f54187"/></linearGradient><circle cx="256" cy="256" r="256" class="st0"/><path d="M377,356.7c-68.9-45.4-155.6-56.4-257.6-32.7c-20.5,4.8-13.6,35.8,7.3,31.2C290.7,317,351.6,386,368.2,386 C384,386,390.2,365.4,377,356.7z"/><path d="M112.1,275.1C203.9,253.4,308.1,266,384,308c18.5,10.2,34-17.8,15.5-28c-82.7-45.7-195.6-59.5-294.7-36 C84.2,248.8,91.5,280,112.1,275.1L112.1,275.1z"/><path d="M100,191.9c96.6-29.6,232.2-13.4,308.7,36.9c17.6,11.5,35.3-15.1,17.6-26.7c-84.9-55.8-229.2-73.3-335.6-40.8 C70.4,167.5,79.9,198.1,100,191.9L100,191.9z"/><linearGradient id="SVGID_2_" x1="487.832" x2="384.197" y1="386.374" y2="490.009" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#736bfd"/><stop offset="1" style="stop-color:#f54187"/></linearGradient><path d="M507.8,438.2c-1.6,97.2-141.9,97.1-143.5,0C365.9,341,506.2,341,507.8,438.2z" class="st1"/><g><g><path d="M486.8,456.8c-0.6-2.4-6.9-1-8.5-1.4c11.5-82-82.4-86.7-87.1-22.2c0.3,1.8-1,6.7,2.2,6.6c0,0,8.6,0,8.6,0 c3.1,0.1,2-4.7,2.2-6.6c0.1-23.3,35-23.3,35.2,0c0,0,0,6.9,0,6.9c-0.1,2.8,4.4,2.8,4.3,0c5-35.2-43.8-40.1-43.8-4.7h-4.3 c-1.6-53.7,77.2-55.9,78.4-2.2c0,0,0,24.4,0,24.4c-0.1,2.9,3.8,2.1,5.6,2.2l-20.7,21l-20.7-21c1.8-0.1,5.6,0.7,5.6-2.2 c0,0,0-8.8,0-8.8c0-2.8-4.4-2.8-4.3,0c0,0,0,6.6,0,6.6c-2.2,0.2-11.3-1.3-8,3.7c0,0,25.9,26.3,25.9,26.3c0.8,0.9,2.2,0.9,3.1,0 C460.6,484.4,489.4,458.3,486.8,456.8z" class="st2"/></g></g><path d="M510,437.5c-1.7,96.2-142.1,96.2-143.8,0C367.9,341.3,508.4,341.3,510,437.5z" class="st3"/></g></switch></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
1
spotify.svg
Normal file
1
spotify.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="reg" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" fill="#4caf50" r="11.106"/><path d="m17.672 16.718c-3.232-2.129-7.295-2.646-12.076-1.532-.96.223-.636 1.68.34 1.461 7.692-1.788 10.547 1.448 11.323 1.448.742-.001 1.033-.968.413-1.377z"/><path d="m5.257 12.896c4.301-1.018 9.184-.426 12.744 1.542.866.479 1.592-.834.726-1.312-3.875-2.142-9.167-2.788-13.815-1.689-.964.227-.623 1.686.345 1.459z"/><path d="m4.689 8.994c4.53-1.386 10.885-.626 14.469 1.73.823.541 1.654-.708.824-1.253-3.98-2.617-10.742-3.438-15.732-1.912-.952.291-.504 1.726.439 1.435z"/><path d="m12 24c6.617 0 12-5.383 12-12s-5.383-12-12-12-12 5.383-12 12 5.383 12 12 12zm0-22.5c5.79 0 10.5 4.71 10.5 10.5s-4.71 10.5-10.5 10.5-10.5-4.71-10.5-10.5 4.71-10.5 10.5-10.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 843 B |
298
styles.css
Normal file
298
styles.css
Normal file
@ -0,0 +1,298 @@
|
||||
@font-face {
|
||||
font-family: pristine;
|
||||
src: url("pristine_script.ttf");
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
/* CSS HERE ONLY ON PHONE */
|
||||
.searchBox:hover > .searchInput {
|
||||
width: 150px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.info-banners {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
html {
|
||||
background-image: url("header-dark.jpg");
|
||||
font-family: Lora,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
}
|
||||
a:link, a:visited {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
body, html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
caret-color: crimson;
|
||||
/*background-image: linear-gradient(180deg,rgba(221,0,221,0.50),rgba(221,0,221,0.32),rgba(221,0,221,0.16),rgba(221,0,221,0.08),rgba(221,0,221,0.04),rgba(0,0,0,0));*/
|
||||
}
|
||||
#appName{
|
||||
font-family: pristine, cursive;
|
||||
font-weight: 100;
|
||||
text-shadow: 0.3px 0.5px #ffffff;
|
||||
}
|
||||
.headingTitle{
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
font-family: 'RocknRoll One', sans-serif;
|
||||
}
|
||||
.glow-button:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0 5px 15px rgb(105, 44, 143);
|
||||
}
|
||||
|
||||
/*Loading Spinner*/
|
||||
.lds-ring {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
.lds-ring div {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 3.5em;
|
||||
height: 3.5em;
|
||||
border: 8px solid #fff;
|
||||
border-radius: 50%;
|
||||
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
border-color: #fff transparent transparent transparent;
|
||||
}
|
||||
.lds-ring div:nth-child(1) {
|
||||
animation-delay: -0.45s;
|
||||
}
|
||||
.lds-ring div:nth-child(2) {
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
.lds-ring div:nth-child(3) {
|
||||
animation-delay: -0.15s;
|
||||
}
|
||||
@keyframes lds-ring {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
//background: rgb(145, 92, 182);
|
||||
padding: 15px 40px;
|
||||
border-radius: 4px;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.searchBox {;
|
||||
background: #2f3640;
|
||||
height: 42px;
|
||||
border-radius: 40px;
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.searchBox:hover > .searchInput {
|
||||
width: 30vw;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.searchBox:hover .search-icon {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.searchBox:hover > .searchButton {
|
||||
background: white;
|
||||
color : #2f3640;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
color: white;
|
||||
float: right;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #2f3640;
|
||||
display: flex;
|
||||
outline: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.searchInput {
|
||||
border:none;
|
||||
background: none;
|
||||
outline:none;
|
||||
float:left;
|
||||
padding: 0;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
transition: 0.4s;
|
||||
line-height: 40px;
|
||||
width: 0px;
|
||||
}
|
||||
#download-all-text {
|
||||
color: black;
|
||||
display: none;
|
||||
}
|
||||
.download-button {
|
||||
font-size: 1.5rem;
|
||||
border: 2px solid white;
|
||||
border-radius: 100px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
margin: 12px auto;
|
||||
transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.download-button:hover {
|
||||
width: 150px;
|
||||
background-color: white;
|
||||
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
|
||||
color: black;
|
||||
transition: 0.3s;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.download-button:hover #download-all-text {
|
||||
display: inline;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.download-button:hover .download-all-icon {
|
||||
filter: none;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.download-button:not(hover) .download-all-icon {
|
||||
filter: invert(100);
|
||||
}
|
||||
|
||||
.sk-cube-grid {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 100px auto;
|
||||
}
|
||||
|
||||
.sk-cube-grid .sk-cube {
|
||||
width: 33%;
|
||||
height: 33%;
|
||||
background-color: rgb(240, 90, 220);
|
||||
float: left;
|
||||
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
|
||||
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
|
||||
}
|
||||
.sk-cube-grid .sk-cube1 {
|
||||
-webkit-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s; }
|
||||
.sk-cube-grid .sk-cube2 {
|
||||
-webkit-animation-delay: 0.3s;
|
||||
animation-delay: 0.3s; }
|
||||
.sk-cube-grid .sk-cube3 {
|
||||
-webkit-animation-delay: 0.4s;
|
||||
animation-delay: 0.4s; }
|
||||
.sk-cube-grid .sk-cube4 {
|
||||
-webkit-animation-delay: 0.1s;
|
||||
animation-delay: 0.1s; }
|
||||
.sk-cube-grid .sk-cube5 {
|
||||
-webkit-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s; }
|
||||
.sk-cube-grid .sk-cube6 {
|
||||
-webkit-animation-delay: 0.3s;
|
||||
animation-delay: 0.3s; }
|
||||
.sk-cube-grid .sk-cube7 {
|
||||
-webkit-animation-delay: 0s;
|
||||
animation-delay: 0s; }
|
||||
.sk-cube-grid .sk-cube8 {
|
||||
-webkit-animation-delay: 0.1s;
|
||||
animation-delay: 0.1s; }
|
||||
.sk-cube-grid .sk-cube9 {
|
||||
-webkit-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s; }
|
||||
|
||||
@-webkit-keyframes sk-cubeGridScaleDelay {
|
||||
0%, 70%, 100% {
|
||||
-webkit-transform: scale3D(1, 1, 1);
|
||||
transform: scale3D(1, 1, 1);
|
||||
} 35% {
|
||||
-webkit-transform: scale3D(0, 0, 1);
|
||||
transform: scale3D(0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-cubeGridScaleDelay {
|
||||
0%, 70%, 100% {
|
||||
-webkit-transform: scale3D(1, 1, 1);
|
||||
transform: scale3D(1, 1, 1);
|
||||
} 35% {
|
||||
-webkit-transform: scale3D(0, 0, 1);
|
||||
transform: scale3D(0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/*Extension Switch*/
|
||||
.cmn-toggle {
|
||||
position: absolute;
|
||||
margin-left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.cmn-toggle + label {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input.cmn-toggle-round-flat + label {
|
||||
/* width = 2*height or 2*border-radius */
|
||||
padding: 2px;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
border: 3px solid #dddddd;
|
||||
border-radius: 60px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
input.cmn-toggle-round-flat + label:before,
|
||||
input.cmn-toggle-round-flat + label:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
input.cmn-toggle-round-flat + label:after {
|
||||
/* width = 2*border-radius */
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
width: 16px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 52px;
|
||||
transition: margin 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
input.cmn-toggle-round-flat:checked + label {
|
||||
border-color: #8ce196;
|
||||
}
|
||||
|
||||
input.cmn-toggle-round-flat:checked + label:after {
|
||||
/* margin-left = border-radius from 'input.cmn-toggle-round-flat + label' */
|
||||
margin-left: 20px;
|
||||
background-color: #8ce196;
|
||||
}
|
||||
195
web-app.js
Normal file
195
web-app.js
Normal file
File diff suppressed because one or more lines are too long
1
web-app.js.map
Normal file
1
web-app.js.map
Normal file
File diff suppressed because one or more lines are too long
1
youtube.svg
Normal file
1
youtube.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 473.931 473.931" xml:space="preserve" style="enable-background:new 0 0 473.931 473.931"><circle style="fill:#d42428" cx="236.966" cy="236.966" r="236.966"/><path style="fill:#cc202d" d="M404.518,69.38c92.541,92.549,92.549,242.593,0,335.142c-92.541,92.541-242.593,92.545-335.142,0 L404.518,69.38z"/><path style="fill:#ba202e" d="M469.168,284.426L351.886,167.148l-138.322,15.749l-83.669,129.532l156.342,156.338 C378.157,449.322,450.422,376.612,469.168,284.426z"/><path style="fill:#fff" d="M360.971,191.238c0-19.865-16.093-35.966-35.947-35.966H156.372c-19.85,0-35.94,16.105-35.94,35.966 v96.444c0,19.865,16.093,35.966,35.94,35.966h168.649c19.858,0,35.947-16.105,35.947-35.966v-96.444H360.971z M216.64,280.146 v-90.584l68.695,45.294L216.64,280.146z"/></svg>
|
||||
|
After Width: | Height: | Size: 889 B |
1
youtube_music.svg
Normal file
1
youtube_music.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" width="100%" height="100%" x="0" y="0" preserveAspectRatio="xMinYMin" version="1.1" viewBox="0 0 192 192" xml:space="preserve"><g id="XMLID_167_"><circle id="XMLID_791_" cx="96" cy="96" r="88" fill="red"/><g id="XMLID_41_"><path id="XMLID_42_" fill="#FFF" d="M96,54.04c23.14,0,41.96,18.82,41.96,41.96S119.14,137.96,96,137.96S54.04,119.14,54.04,96 S72.86,54.04,96,54.04 M96,50c-25.41,0-46,20.59-46,46s20.59,46,46,46s46-20.59,46-46S121.41,50,96,50L96,50z"/></g><polygon id="XMLID_274_" fill="#FFF" points="80 119 119 95 80 73"/></g></svg>
|
||||
|
After Width: | Height: | Size: 632 B |
Loading…
Reference in New Issue
Block a user