mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
767 lines
No EOL
25 KiB
HTML
767 lines
No EOL
25 KiB
HTML
<div class="card">
|
|
<div class="phone">
|
|
<div class="face front">
|
|
<div class="head">
|
|
<div class="h-left">moov</div>
|
|
<div class="h-right">
|
|
<span class="wifi"
|
|
><svg
|
|
stroke="#ffffff"
|
|
xml:space="preserve"
|
|
viewBox="0 0 365.892 365.892"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
id="Capa_1"
|
|
version="1.1"
|
|
width="200px"
|
|
height="200px"
|
|
fill="#ffffff"
|
|
class="logo-head"
|
|
>
|
|
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
|
|
<g
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
id="SVGRepo_tracerCarrier"
|
|
></g>
|
|
<g id="SVGRepo_iconCarrier">
|
|
<g>
|
|
<circle r="41.494" cy="286.681" cx="182.945"></circle>
|
|
<path
|
|
d="M182.946,176.029c-35.658,0-69.337,17.345-90.09,46.398c-5.921,8.288-4.001,19.806,4.286,25.726 c3.249,2.321,6.994,3.438,10.704,3.438c5.754,0,11.423-2.686,15.021-7.724c13.846-19.383,36.305-30.954,60.078-30.954 c23.775,0,46.233,11.571,60.077,30.953c5.919,8.286,17.437,10.209,25.726,4.288c8.288-5.92,10.208-17.438,4.288-25.726 C252.285,193.373,218.606,176.029,182.946,176.029z"
|
|
></path>
|
|
<path
|
|
d="M182.946,106.873c-50.938,0-99.694,21.749-133.77,59.67c-6.807,7.576-6.185,19.236,1.392,26.044 c3.523,3.166,7.929,4.725,12.32,4.725c5.051-0.001,10.082-2.063,13.723-6.116c27.091-30.148,65.849-47.439,106.336-47.439 s79.246,17.291,106.338,47.438c6.808,7.576,18.468,8.198,26.043,1.391c7.576-6.808,8.198-18.468,1.391-26.043 C282.641,128.621,233.883,106.873,182.946,106.873z"
|
|
></path>
|
|
<path
|
|
d="M360.611,112.293c-47.209-48.092-110.305-74.577-177.665-74.577c-67.357,0-130.453,26.485-177.664,74.579 c-7.135,7.269-7.027,18.944,0.241,26.079c3.59,3.524,8.255,5.282,12.918,5.281c4.776,0,9.551-1.845,13.161-5.522 c40.22-40.971,93.968-63.534,151.344-63.534c57.379,0,111.127,22.563,151.343,63.532c7.136,7.269,18.812,7.376,26.08,0.242 C367.637,131.238,367.745,119.562,360.611,112.293z"
|
|
></path>
|
|
</g>
|
|
</g></svg
|
|
></span>
|
|
<span class="network"
|
|
><svg
|
|
stroke-width="0.00016"
|
|
stroke="#000000"
|
|
fill="#000000"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16.00 16.00"
|
|
class="logo-head"
|
|
>
|
|
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
|
|
<g
|
|
stroke-width="0.032"
|
|
stroke="#CCCCCC"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
id="SVGRepo_tracerCarrier"
|
|
></g>
|
|
<g id="SVGRepo_iconCarrier">
|
|
<path
|
|
fill="#ffffff"
|
|
d="m 13 1 c -0.554688 0 -1 0.445312 -1 1 v 12 c 0 0.554688 0.445312 1 1 1 h 1 c 0.554688 0 1 -0.445312 1 -1 v -12 c 0 -0.554688 -0.445312 -1 -1 -1 z m -4 3 c -0.554688 0 -1 0.445312 -1 1 v 9 c 0 0.554688 0.445312 1 1 1 h 1 c 0.554688 0 1 -0.445312 1 -1 v -9 c 0 -0.554688 -0.445312 -1 -1 -1 z m -4 3 c -0.554688 0 -1 0.445312 -1 1 v 6 c 0 0.554688 0.445312 1 1 1 h 1 c 0.554688 0 1 -0.445312 1 -1 v -6 c 0 -0.554688 -0.445312 -1 -1 -1 z m -4 3 c -0.554688 0 -1 0.445312 -1 1 v 3 c 0 0.554688 0.445312 1 1 1 h 1 c 0.554688 0 1 -0.445312 1 -1 v -3 c 0 -0.554688 -0.445312 -1 -1 -1 z m 0 0"
|
|
></path>
|
|
</g></svg
|
|
></span>
|
|
<span class="battery"
|
|
><svg
|
|
transform="matrix(-1, 0, 0, 1, 0, 0)"
|
|
fill="#ffffff"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="1 10 20 5"
|
|
class="logo-head"
|
|
>
|
|
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
|
|
<g
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
id="SVGRepo_tracerCarrier"
|
|
></g>
|
|
<g id="SVGRepo_iconCarrier">
|
|
<path fill="none" d="M24,0V24H0V0Z"></path>
|
|
<path
|
|
fill-opacity="0.3"
|
|
d="M20,10V8.33A1.34,1.34,0,0,0,18.67,7H8V17H18.67A1.34,1.34,0,0,0,20,15.67V14h2V10Z"
|
|
></path>
|
|
<path
|
|
d="M3.33,17H8V7H3.34A1.34,1.34,0,0,0,2,8.33v7.33A1.34,1.34,0,0,0,3.33,17Z"
|
|
></path>
|
|
</g></svg
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<div class="search">
|
|
<input placeholder="Search..." type="search" class="search-google" />
|
|
<svg
|
|
width="24"
|
|
viewBox="0 0 24 24"
|
|
height="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="logo-google"
|
|
>
|
|
<path
|
|
fill="#4285F4"
|
|
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
|
></path>
|
|
<path
|
|
fill="#34A853"
|
|
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
|
></path>
|
|
<path
|
|
fill="#FBBC05"
|
|
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
|
></path>
|
|
<path
|
|
fill="#EA4335"
|
|
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
|
></path>
|
|
<path fill="none" d="M1 1h22v22H1z"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="date">
|
|
<span class="hour">10:50</span>
|
|
<span class="period">PM</span><br />
|
|
<span class="day">Sat, 04 Nov</span>
|
|
</div>
|
|
|
|
<div class="home">
|
|
<span class="app">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 28.99 31.99"
|
|
class="logo-app"
|
|
>
|
|
<g data-name="Capa 2">
|
|
<g data-name="Capa 1">
|
|
<path
|
|
style="fill:#ea4335"
|
|
d="M13.54 15.28.12 29.34a3.66 3.66 0 0 0 5.33 2.16l15.1-8.6Z"
|
|
></path>
|
|
<path
|
|
style="fill:#fbbc04"
|
|
d="m27.11 12.89-6.53-3.74-7.35 6.45 7.38 7.28 6.48-3.7a3.54 3.54 0 0 0 1.5-4.79 3.62 3.62 0 0 0-1.5-1.5z"
|
|
></path>
|
|
<path
|
|
style="fill:#4285f4"
|
|
d="M.12 2.66a3.57 3.57 0 0 0-.12.92v24.84a3.57 3.57 0 0 0 .12.92L14 15.64Z"
|
|
></path>
|
|
<path
|
|
style="fill:#34a853"
|
|
d="m13.64 16 6.94-6.85L5.5.51A3.73 3.73 0 0 0 3.63 0 3.64 3.64 0 0 0 .12 2.65Z"
|
|
></path>
|
|
</g>
|
|
</g></svg
|
|
></span>
|
|
<span class="app">
|
|
<svg
|
|
viewBox="52 42 88 66"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="logo-app"
|
|
>
|
|
<path
|
|
d="M58 108h14V74L52 59v43c0 3.32 2.69 6 6 6"
|
|
fill="#4285f4"
|
|
></path>
|
|
<path
|
|
d="M120 108h14c3.32 0 6-2.69 6-6V59l-20 15"
|
|
fill="#34a853"
|
|
></path>
|
|
<path
|
|
d="M120 48v26l20-15v-8c0-7.42-8.47-11.65-14.4-7.2"
|
|
fill="#fbbc04"
|
|
></path>
|
|
<path d="M72 74V48l24 18 24-18v26L96 92" fill="#ea4335"></path>
|
|
<path
|
|
d="M52 51v8l20 15V48l-5.6-4.2c-5.94-4.45-14.4-.22-14.4 7.2"
|
|
fill="#c5221f"
|
|
></path>
|
|
</svg>
|
|
</span>
|
|
<span class="app full-logo">
|
|
<svg
|
|
class="logo-app"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
height="2500"
|
|
image-rendering="optimizeQuality"
|
|
shape-rendering="geometricPrecision"
|
|
text-rendering="geometricPrecision"
|
|
viewBox="0 0 13100.88 13100.899999999996"
|
|
width="2500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<linearGradient
|
|
id="a"
|
|
gradientUnits="userSpaceOnUse"
|
|
x1="6550.42"
|
|
x2="6550.42"
|
|
y1="-12.51"
|
|
y2="13100.61"
|
|
>
|
|
<stop offset="0" stop-color="#61fd7d"></stop>
|
|
<stop offset="1" stop-color="#2bb826"></stop>
|
|
</linearGradient>
|
|
<path
|
|
d="M13099.83 9776.31c0 71.72-2.2 227.29-6.5 347.45-10.55 294.01-33.85 673.42-69.1 846.29-52.97 259.78-132.95 504.98-237.21 709.07-123.36 241.43-280.72 457.68-467.71 644.33-186.58 186.27-402.63 343.01-643.7 465.88-205.15 104.54-451.88 184.56-713.14 237.31-171.15 34.56-547.71 57.41-839.85 67.8-120.29 4.3-275.88 6.46-347.34 6.46l-6450.71-1.04c-71.74 0-227.28-2.2-347.44-6.51-294.03-10.54-673.42-33.85-846.3-69.08-259.78-52.99-505-132.95-709.08-237.21-241.43-123.38-457.68-280.74-644.32-467.73-186.27-186.58-343.01-402.62-465.87-643.68-104.57-205.17-184.59-451.9-237.33-713.15-34.54-171.15-57.4-547.7-67.8-839.86C2.16 10002.37 0 9846.78 0 9775.33l1.02-6450.74c0-71.73 2.2-227.28 6.5-347.45 10.56-294.02 33.85-673.42 69.09-846.29 52.98-259.78 132.94-504.99 237.22-709.08 123.36-241.43 280.73-457.68 467.71-644.33 186.58-186.26 402.63-343.01 643.69-465.88C1630.4 207.01 1877.14 127 2138.4 74.25c171.13-34.56 547.7-57.42 839.85-67.8C3098.53 2.16 3254.14 0 3325.57 0L9776.3 1.04c71.74 0 227.28 2.19 347.44 6.49 294.03 10.56 673.41 33.85 846.31 69.1 259.76 52.97 504.98 132.94 709.07 237.21 241.42 123.36 457.67 280.73 644.31 467.72 186.26 186.57 343.01 402.61 465.87 643.69 104.57 205.17 184.59 451.89 237.33 713.15 34.54 171.14 57.39 547.7 67.8 839.86 4.29 120.28 6.45 275.88 6.45 347.34z"
|
|
fill="url(#a)"
|
|
></path>
|
|
<g fill="#fff">
|
|
<path
|
|
d="M10021.26 3099.41C9134.31 2211.72 7954.77 1722.6 6698.04 1722.1c-2589.39 0-4696.83 2106.65-4697.87 4696.06-.34 827.71 215.98 1635.68 627.09 2347.84l-666.48 2433.65 2490.4-653.05c686.18 374.12 1458.72 571.3 2244.99 571.63h1.94c2589.13 0 4696.77-2106.91 4697.82-4696.34.49-1254.86-487.7-2434.81-1374.67-3322.5v.01zM6698.1 10325.07h-1.6c-700.65-.27-1387.85-188.44-1987.37-544.09l-142.59-84.59-1477.84 387.55 394.46-1440.42-92.86-147.69c-390.86-621.48-597.3-1339.82-596.99-2077.36.85-2152.2 1752.49-3903.19 3906.3-3903.19 1042.91.4 2023.3 406.97 2760.52 1144.78 737.22 737.8 1142.98 1718.54 1142.59 2761.54-.84 2152.38-1752.47 3903.47-3904.62 3903.47z"
|
|
></path>
|
|
<path
|
|
d="M5122.98 8693.01c33.06 19.95 100.98 19.93 256.76 19.79 661.06-.58 1232.08-2.61 1638.23-2.61 1895.48 0 1845.67-1995.45 959.41-2244.41 129.8-229.98 721.23-661.97 355.45-1554.91-361.71-882.96-1917.18-682.59-2981.02-682.07-393.63.05-334.77 290.91-332.75 743.14 3.23 716.29.58 2655.15.1 3493.29-.1 169.9 51.17 196.01 103.82 227.78zm820.15-731.27c178.98 0 601.15 0 963.01-.57 409.8-.64 774.72-192.32 765.6-600.28-6.7-384.3-262.37-510.42-617.22-545.63-338 3.24-724.6 3.24-1111.4 3.24v1143.24zm0-1915.05c712.98-9.77 988.03 28.74 1377.3-68.76 267.46-151.82 384.31-714.9 1.5-906.15-265.94-132.87-1051.82-87.41-1378.8-73.79V6046.7z"
|
|
></path>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span class="app full-logo">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="2500"
|
|
viewBox="126.445 2.281 589 589"
|
|
height="2500"
|
|
class="logo-app"
|
|
>
|
|
<circle r="294.5" fill="#3c5a9a" cy="296.781" cx="420.945"></circle>
|
|
<path
|
|
fill="#fff"
|
|
d="m516.704 92.677h-65.239c-38.715 0-81.777 16.283-81.777 72.402.189 19.554 0 38.281 0 59.357h-44.788v71.271h46.174v205.177h84.847v-206.531h56.002l5.067-70.117h-62.531s.14-31.191 0-40.249c0-22.177 23.076-20.907 24.464-20.907 10.981 0 32.332.032 37.813 0v-70.403z"
|
|
></path></svg
|
|
></span>
|
|
<span class="app"> </span>
|
|
<span class="app"></span>
|
|
<span class="app"></span>
|
|
<span class="app"></span>
|
|
<span class="app"></span>
|
|
<span class="app"></span>
|
|
</div>
|
|
<div class="bullet"></div>
|
|
<div class="home home2">
|
|
<span class="app"></span>
|
|
<span class="app logo-phone">
|
|
<svg
|
|
xml:space="preserve"
|
|
style="enable-background:new 0 0 122.88 122.27"
|
|
viewBox="0 0 122.88 122.27"
|
|
y="0px"
|
|
x="0px"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
id="Layer_1"
|
|
version="1.1"
|
|
class="logo-app"
|
|
fill="#ffffff"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M33.84,50.25c4.13,7.45,8.89,14.6,15.07,21.12c6.2,6.56,13.91,12.53,23.89,17.63c0.74,0.36,1.44,0.36,2.07,0.11 c0.95-0.36,1.92-1.15,2.87-2.1c0.74-0.74,1.66-1.92,2.62-3.21c3.84-5.05,8.59-11.32,15.3-8.18c0.15,0.07,0.26,0.15,0.41,0.21 l22.38,12.87c0.07,0.04,0.15,0.11,0.21,0.15c2.95,2.03,4.17,5.16,4.2,8.71c0,3.61-1.33,7.67-3.28,11.1 c-2.58,4.53-6.38,7.53-10.76,9.51c-4.17,1.92-8.81,2.95-13.27,3.61c-7,1.03-13.56,0.37-20.27-1.69 c-6.56-2.03-13.17-5.38-20.39-9.84l-0.53-0.34c-3.31-2.07-6.89-4.28-10.4-6.89C31.12,93.32,18.03,79.31,9.5,63.89 C2.35,50.95-1.55,36.98,0.58,23.67c1.18-7.3,4.31-13.94,9.77-18.32c4.76-3.84,11.17-5.94,19.47-5.2c0.95,0.07,1.8,0.62,2.25,1.44 l14.35,24.26c2.1,2.72,2.36,5.42,1.21,8.12c-0.95,2.21-2.87,4.25-5.49,6.15c-0.77,0.66-1.69,1.33-2.66,2.03 c-3.21,2.33-6.86,5.02-5.61,8.18L33.84,50.25L33.84,50.25L33.84,50.25z"
|
|
></path>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span class="app menu"
|
|
><svg
|
|
class="logo-menu"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
x="0px"
|
|
y="0px"
|
|
viewBox="0 0 256 256"
|
|
xml:space="preserve"
|
|
>
|
|
<g>
|
|
<g>
|
|
<g>
|
|
<path
|
|
fill="#ffffff"
|
|
d="M10,39.5V69h29.5H69V39.5V10H39.5H10V39.5z"
|
|
></path>
|
|
<path
|
|
fill="#ffffff"
|
|
d="M98.5,39.5V69H128h29.5V39.5V10H128H98.5V39.5z"
|
|
></path>
|
|
<path
|
|
fill="#ffffff"
|
|
d="M187,39.5V69h29.5H246V39.5V10h-29.5H187V39.5z"
|
|
></path>
|
|
<path
|
|
fill="#ffffff"
|
|
d="M10,128v29.5h29.5H69V128V98.5H39.5H10V128z"
|
|
></path>
|
|
<path
|
|
fill="#ffffff"
|
|
d="M98.5,128v29.5H128h29.5V128V98.5H128H98.5V128z"
|
|
></path>
|
|
<path
|
|
fill="#ffffff"
|
|
d="M187,128v29.5h29.5H246V128V98.5h-29.5H187V128z"
|
|
></path>
|
|
<path
|
|
fill="#ffffff"
|
|
d="M10,216.5V246h29.5H69v-29.5V187H39.5H10V216.5z"
|
|
></path>
|
|
<path
|
|
fill="#ffffff"
|
|
d="M98.5,216.5V246H128h29.5v-29.5V187H128H98.5V216.5z"
|
|
></path>
|
|
<path
|
|
fill="#ffffff"
|
|
d="M187,216.5V246h29.5H246v-29.5V187h-29.5H187V216.5z"
|
|
></path>
|
|
</g>
|
|
</g>
|
|
</g></svg
|
|
></span>
|
|
<span class="app message"
|
|
><svg
|
|
xml:space="preserve"
|
|
style="enable-background:new 0 0 120.46 122.88"
|
|
viewBox="0 0 120.46 122.88"
|
|
y="0px"
|
|
x="0px"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
id="Layer_1"
|
|
version="1.1"
|
|
fill="blue"
|
|
class="logo-app"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M17.2,0h62.29c4.73,0,9.03,1.93,12.15,5.05c3.12,3.12,5.05,7.42,5.05,12.15v38.35c0,4.73-1.93,9.03-5.05,12.15 c-3.12,3.12-7.42,5.05-12.15,5.05H46.92L20.81,95.2c-1.21,1.04-3.04,0.9-4.08-0.32c-0.51-0.6-0.74-1.34-0.69-2.07l1.39-20.07H17.2 c-4.73,0-9.03-1.93-12.15-5.05C1.93,64.58,0,60.28,0,55.55V17.2c0-4.73,1.93-9.03,5.05-12.15C8.16,1.93,12.46,0,17.2,0L17.2,0 L17.2,0z M63.12,29.37c4.48,0,8.11,3.63,8.11,8.11c0,4.48-3.63,8.11-8.11,8.11c-4.48,0-8.11-3.63-8.11-8.11 C55.01,33,58.64,29.37,63.12,29.37L63.12,29.37z M33.69,29.37c4.48,0,8.11,3.63,8.11,8.11c0,4.48-3.63,8.11-8.11,8.11 s-8.11-3.63-8.11-8.11C25.58,33,29.21,29.37,33.69,29.37L33.69,29.37z M106.79,27.98c3.37,0.65,6.39,2.31,8.73,4.65 c3.05,3.05,4.95,7.26,4.95,11.9v38.35c0,4.64-1.89,8.85-4.95,11.9c-3.05,3.05-7.26,4.95-11.9,4.95h-0.61l1.42,20.44l0,0 c0.04,0.64-0.15,1.3-0.6,1.82c-0.91,1.07-2.52,1.19-3.58,0.28l-26.21-23.2H39.49l17.01-17.3h36.04c7.86,0,14.3-6.43,14.3-14.3 V29.11C106.83,28.73,106.82,28.35,106.79,27.98L106.79,27.98L106.79,27.98z M79.48,5.8H17.2c-3.13,0-5.98,1.28-8.05,3.35 C7.08,11.22,5.8,14.06,5.8,17.2v38.35c0,3.13,1.28,5.98,3.35,8.05c2.07,2.07,4.92,3.35,8.05,3.35h3.34v0.01l0.19,0.01 c1.59,0.11,2.8,1.49,2.69,3.08l-1.13,16.26l21.54-18.52c0.52-0.52,1.24-0.84,2.04-0.84h33.61c3.13,0,5.98-1.28,8.05-3.35 c2.07-2.07,3.35-4.92,3.35-8.05V17.2c0-3.13-1.28-5.98-3.35-8.05C85.46,7.08,82.61,5.8,79.48,5.8L79.48,5.8L79.48,5.8z"
|
|
class="st0"
|
|
></path>
|
|
</g></svg
|
|
></span>
|
|
<span class="app"></span>
|
|
</div>
|
|
<div class="navigation">
|
|
<span class="btn btn-task"></span>
|
|
<span class="btn btn-home"></span>
|
|
<span class="btn btn-back"></span>
|
|
</div>
|
|
<div class="front-camera"></div>
|
|
</div>
|
|
|
|
<div class="face back">back</div>
|
|
<div class="face top"></div>
|
|
<div class="face bottom">
|
|
<div class="elements">
|
|
<span class="headphone"></span>
|
|
<span class="microphone"></span>
|
|
<span class="charge"></span>
|
|
<span class="speaker"></span>
|
|
</div>
|
|
</div>
|
|
<div class="face left"></div>
|
|
<div class="face right"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by escannord - Tags: 3d, phone, card, realistic */
|
|
.card {
|
|
perspective: 1000px;
|
|
transform-style: preserve-3d;
|
|
position: relative;
|
|
}
|
|
|
|
.phone {
|
|
/* transform: rotateX(40deg); */
|
|
position: relative;
|
|
perspective: 1000px;
|
|
width: 150px;
|
|
height: 254px;
|
|
transform-style: preserve-3d;
|
|
transform: rotateX(80deg) rotateY(0deg) rotateZ(30deg);
|
|
transition: all 1s;
|
|
/* animation: rotate 5s linear infinite; */
|
|
}
|
|
|
|
.phone:hover {
|
|
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.5);
|
|
}
|
|
.front {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: lightgrey;
|
|
border: solid 5px rgb(0, 0, 0);
|
|
border-radius: 10px;
|
|
border-top: 15px solid;
|
|
border-bottom: 15px solid;
|
|
background: lightblue;
|
|
padding: 0.5rem;
|
|
text-align: center;
|
|
transform: translateY(20px);
|
|
background: radial-gradient(
|
|
circle,
|
|
rgb(170, 162, 162),
|
|
rgb(44, 8, 102) 30%,
|
|
rgba(26, 78, 189, 0.226) 0%
|
|
),
|
|
radial-gradient(
|
|
circle at 40px 40px,
|
|
rgb(233, 228, 228),
|
|
rgb(41, 35, 49) 30%,
|
|
rgba(88, 84, 84, 0) 0%
|
|
),
|
|
radial-gradient(
|
|
circle at 600px 200px,
|
|
rgb(233, 228, 228),
|
|
rgb(27, 26, 26) 10%,
|
|
rgba(88, 84, 84, 0) 0%
|
|
),
|
|
radial-gradient(
|
|
circle at 800px 100px,
|
|
rgb(233, 228, 228),
|
|
#333 10%,
|
|
rgba(88, 84, 84, 0) 0%
|
|
),
|
|
radial-gradient(
|
|
circle at 700px 500px,
|
|
rgb(233, 228, 228),
|
|
#333 2%,
|
|
rgba(88, 84, 84, 0.123) 0%
|
|
),
|
|
radial-gradient(
|
|
circle at 200px 400px,
|
|
rgb(233, 228, 228),
|
|
#333 1%,
|
|
rgba(88, 84, 84, 0) 0%
|
|
),
|
|
radial-gradient(
|
|
circle at 300px 700px,
|
|
rgb(233, 228, 228),
|
|
#333 15%,
|
|
rgba(88, 84, 84, 0) 0%
|
|
),
|
|
radial-gradient(
|
|
circle at 650px 400px,
|
|
rgb(233, 228, 228),
|
|
#333 10%,
|
|
rgba(88, 84, 84, 0) 0%
|
|
),
|
|
radial-gradient(
|
|
circle at 600px 600px,
|
|
rgb(233, 228, 228),
|
|
#333 1%,
|
|
rgba(88, 84, 84, 0.959) 0%
|
|
);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
/* outline: 2px solid rgb(116, 115, 115); */
|
|
}
|
|
.front .home {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 10px;
|
|
grid-template-rows: repeat(2, 1fr);
|
|
}
|
|
|
|
.home2 {
|
|
grid-template-rows: repeat(1, 1fr) !important;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.front .home .app {
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: rgb(255, 255, 255);
|
|
border-radius: 30%;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.front .home .app .logo-app {
|
|
width: 70%;
|
|
height: 70%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.full-logo {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.full-logo .logo-app {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.search {
|
|
position: relative;
|
|
margin-top: 0.2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.logo-google {
|
|
position: absolute;
|
|
width: 10px;
|
|
left: 5px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.search-google {
|
|
width: 100%;
|
|
border-radius: 20px;
|
|
padding: 0.3rem;
|
|
padding-left: 1rem;
|
|
font-size: 9px;
|
|
height: 1.5rem;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.date {
|
|
color: white;
|
|
position: relative;
|
|
margin-bottom: 1rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.date .hour {
|
|
font-size: large;
|
|
}
|
|
|
|
.date * {
|
|
display: inline-block;
|
|
}
|
|
|
|
.date .period,
|
|
.date .day {
|
|
font-size: 9px;
|
|
line-height: 10px;
|
|
}
|
|
|
|
.bullet {
|
|
display: inline-block;
|
|
width: 30%;
|
|
height: 0;
|
|
border-bottom: 5px dotted rgba(255, 255, 255, 0.651);
|
|
}
|
|
|
|
.navigation {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.navigation .btn {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.navigation .btn-home {
|
|
border-radius: 50%;
|
|
border: solid 1px white;
|
|
}
|
|
|
|
.navigation .btn-back {
|
|
border-radius: 35%;
|
|
border: solid 1px white;
|
|
border-left: 1px solid transparent;
|
|
}
|
|
|
|
.navigation .btn-task {
|
|
border-radius: 35%;
|
|
border: solid 1px white;
|
|
}
|
|
|
|
.face {
|
|
position: absolute;
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgb(24, 23, 24);
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
.head {
|
|
font-size: 6px;
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
height: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.head .h-left {
|
|
color: white;
|
|
margin: 0 2px;
|
|
}
|
|
.head .h-right span {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin: 0 1px;
|
|
}
|
|
|
|
.logo-head {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.top,
|
|
.bottom {
|
|
width: 150px;
|
|
height: 10px;
|
|
}
|
|
|
|
.right,
|
|
.left {
|
|
height: 254px;
|
|
width: 10px;
|
|
}
|
|
|
|
.front {
|
|
transform: translate(-50%, -50%) translateZ(5px);
|
|
}
|
|
.back {
|
|
transform: translate(-50%, -50%) rotateY(180deg) translateZ(5px);
|
|
}
|
|
.left {
|
|
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(75px);
|
|
}
|
|
.right {
|
|
transform: translate(-50%, -50%) rotateY(90deg) translateZ(75px);
|
|
}
|
|
.top {
|
|
transform: translate(-50%, -50%) rotateX(90deg) translateZ(127px);
|
|
}
|
|
.bottom {
|
|
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(127px);
|
|
}
|
|
|
|
.bottom .elements {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.bottom .elements .headphone {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: #333;
|
|
}
|
|
|
|
.bottom .elements .microphone {
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 3px;
|
|
border-radius: 50%;
|
|
background-color: #333;
|
|
}
|
|
|
|
.bottom .elements .charge {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 6px;
|
|
position: relative;
|
|
border-radius: 3px 3px 10px 10px;
|
|
background-color: #333;
|
|
}
|
|
|
|
.charge::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 2px;
|
|
position: absolute;
|
|
border-radius: 3px 3px 10px 10px;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: rgb(26, 25, 25);
|
|
}
|
|
|
|
.bottom .elements .speaker {
|
|
display: inline-block;
|
|
width: 30px;
|
|
height: 0;
|
|
border-top: #333 dotted 5px;
|
|
}
|
|
|
|
.front-camera {
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: rgb(26, 25, 25);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: -11px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.front-camera::after {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 50%;
|
|
height: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: radial-gradient(
|
|
circle at 6px 2px,
|
|
rgba(255, 255, 255, 0.726),
|
|
rgb(0, 0, 0)
|
|
);
|
|
}
|
|
|
|
.front-camera::before {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 25%;
|
|
height: 25%;
|
|
z-index: 2;
|
|
transform: translate(-50%, -50%);
|
|
background-color: #212121;
|
|
}
|
|
|
|
.menu {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.logo-menu {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.logo-phone {
|
|
background-color: #33ff77 !important;
|
|
}
|
|
|
|
.message {
|
|
/* background-color: blue!important; */
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotateX(0deg) rotateY(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateX(360deg) rotateY(360deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|