mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
214 lines
12 KiB
HTML
214 lines
12 KiB
HTML
<div class="card">
|
|
<div class="header">
|
|
<button class="header-button">
|
|
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_91"><g><circle cx="256" cy="256" fill="#f1f6f9" r="256" style="fill: rgb(76, 194, 255);"></circle><g><path d="m388.378 263.726c-4.267 0-7.726-3.459-7.726-7.726 0-68.733-55.919-124.652-124.652-124.652-33.556 0-65.055 13.194-88.694 37.152-2.997 3.037-7.89 3.068-10.927.073-3.038-2.997-3.07-7.889-.073-10.927 26.566-26.924 61.971-41.752 99.694-41.752 77.254 0 140.105 62.851 140.105 140.105 0 4.269-3.46 7.727-7.727 7.727z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><path d="m388.378 263.726c-1.977 0-3.955-.755-5.463-2.263l-40.173-40.174c-3.018-3.018-3.018-7.909 0-10.928 3.018-3.016 7.91-3.016 10.927 0l40.173 40.174c3.018 3.018 3.018 7.909 0 10.928-1.509 1.509-3.487 2.263-5.464 2.263z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><g><path d="m388.378 263.726c-1.977 0-3.955-.755-5.463-2.263-3.018-3.018-3.018-7.909 0-10.928l40.173-40.174c3.017-3.016 7.909-3.016 10.927 0 3.018 3.018 3.018 7.909 0 10.928l-40.173 40.174c-1.509 1.509-3.486 2.263-5.464 2.263z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g></g><g><path d="m255.86 396.109c-34.613 0-67.589-12.646-93.566-36.036-27.841-25.067-44.25-59.424-46.206-96.739-.223-4.262 3.05-7.897 7.311-8.12 4.277-.236 7.897 3.05 8.12 7.311 1.739 33.194 16.341 63.759 41.114 86.064s56.695 33.616 89.891 31.893c33.51-1.757 64.275-16.582 86.628-41.744 2.834-3.189 7.716-3.478 10.907-.645 3.19 2.834 3.479 7.717.645 10.908-25.12 28.278-59.701 44.938-97.372 46.911-2.496.132-4.991.197-7.472.197z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><path d="m166.021 308.67c-1.842 0-3.691-.655-5.168-1.985l-42.22-38.015c-3.171-2.855-3.427-7.74-.572-10.911 2.856-3.17 7.741-3.428 10.912-.571l42.22 38.015c3.171 2.855 3.427 7.74.572 10.911-1.525 1.694-3.63 2.556-5.744 2.556z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><g><path d="m85.785 312.875c-1.842 0-3.691-.655-5.168-1.985-3.171-2.855-3.427-7.74-.572-10.911l38.016-42.22c2.856-3.17 7.741-3.428 10.912-.571 3.171 2.855 3.427 7.74.572 10.911l-38.016 42.22c-1.525 1.694-3.63 2.556-5.744 2.556z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g></g></g></g></svg>
|
|
<a>The storage is full</a>
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="m9 20c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l6.3-6.3-6.3-6.3c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l7 7c.4.4.4 1 0 1.4l-7 7c-.2.2-.4.3-.7.3z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></svg>
|
|
</button>
|
|
</div>
|
|
<div class="info">
|
|
<div class="info-border">
|
|
<a>John — Personal</a>
|
|
<div class="progress-line"></div>
|
|
<a>5.0 GB of 5 GB used (100%)</a>
|
|
<a>You cannot transfer new files or send and receive email messages for this account.</a>
|
|
<button class="update-button">Update</button>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="square">
|
|
<svg viewBox="-31 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m418.804688 151h31.195312v-30h-35.730469l-30-60h-84.269531v-61h-150v61h-84.269531l-30 60h-35.730469v30h31.195312l30 361h327.609376zm-238.804688-121h90v31h-90zm-95.730469 61h281.460938l15 30h-311.460938zm4.535157 391-27.507813-331h327.40625l-27.507813 331zm0 0" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m150 316c0-36.1875 25.757812-66.46875 59.902344-73.472656l-11.980469 11.605468 20.875 21.546876 54.734375-53.027344-57.777344-49.3125-19.476562 22.820312 18.023437 15.378906c-52.890625 5.378907-94.300781 50.175782-94.300781 104.460938 0 31.808594 14.1875 61.554688 38.921875 81.601562l18.890625-23.304687c-17.675781-14.324219-27.8125-35.574219-27.8125-58.296875zm0 0" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m278.03125 262.96875c14.167969 14.164062 21.96875 32.996094 21.96875 53.03125 0 33.820312-22.503906 62.472656-53.324219 71.792969l12.667969-12.269531-20.875-21.546876-54.734375 53.023438 57.777344 49.316406 19.476562-22.820312-16.726562-14.273438c48.730469-9.074218 85.738281-51.90625 85.738281-103.222656 0-28.046875-10.921875-54.414062-30.753906-74.246094zm0 0" fill="#000000" style="fill: rgb(255, 255, 255);"></path></svg>
|
|
<span class="tooltip">Bin</span>
|
|
</div>
|
|
<div class="square">
|
|
<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 339.033 339.033" style="enable-background:new 0 0 339.033 339.033;" xml:space="preserve"><g><g><path d="M169.516,0C76.044,0,0,76.045,0,169.517c0,93.471,76.044,169.516,169.516,169.516s169.516-76.044,169.516-169.516 S262.989,0,169.516,0z M143.367,17.224c-13.76,11.78-26.933,26.445-37.516,42.056c-4.766,7.031-9.051,14.291-12.856,21.737H42.93 C66.133,47.926,101.962,24.312,143.367,17.224z M162.016,244.596h-59.371c-8.934-19.363-15.104-41.7-16.14-66.79h75.511V244.596z M33.628,96.017h52.462c-8.754,21.293-13.708,43.833-14.594,66.79H15.156C16.19,138.717,22.756,116.037,33.628,96.017z M15.224,177.807H71.49c0.863,23.317,5.768,45.651,14.643,66.79H34.51C23.359,224.625,16.506,201.944,15.224,177.807z M44.05,259.596h49.157c3.749,7.149,7.968,14.15,12.671,20.988c12.478,18.143,25.89,31.638,37.218,41.179 C102.469,314.734,67.229,291.787,44.05,259.596z M162.016,317.587c-16.754-12.269-36.477-31.838-51.588-57.991h51.588V317.587z M162.016,162.807H86.505c0.934-23.32,6.239-45.666,15.834-66.79h59.678V162.807z M162.016,81.017H109.99 c2.556-4.502,5.31-8.944,8.276-13.32c15.442-22.78,32.369-37.697,43.75-46.15V81.017z M323.878,162.807h-56.341 c-0.886-22.957-5.84-45.497-14.594-66.79h52.461C316.276,116.037,322.844,138.717,323.878,162.807z M296.104,81.017h-50.064 c-3.805-7.446-8.091-14.706-12.856-21.737c-10.583-15.612-23.76-30.273-37.521-42.057 C237.068,24.311,272.898,47.925,296.104,81.017z M177.016,21.546c11.381,8.453,28.308,23.37,43.75,46.15 c2.966,4.376,5.72,8.818,8.276,13.32h-52.026V21.546z M177.016,96.017h59.678c9.595,21.124,14.9,43.47,15.834,66.79h-75.512 V96.017z M177.016,177.807L177.016,177.807h75.512c-1.035,25.09-7.206,47.427-16.14,66.79h-59.372V177.807z M177.016,259.596 h51.588c-15.111,26.152-34.834,45.722-51.588,57.991V259.596z M195.94,321.763c11.327-9.54,24.738-23.038,37.215-41.178 c4.703-6.838,8.922-13.839,12.671-20.988h49.157C271.805,291.786,236.566,314.733,195.94,321.763z M304.523,244.596h-51.622 c8.875-21.139,13.78-43.472,14.643-66.79h56.265C322.526,201.944,315.674,224.625,304.523,244.596z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></g></svg>
|
|
<span class="tooltip">Search the Internet</span>
|
|
</div>
|
|
<div class="square">
|
|
<svg id="Line" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path id="XMLID_1646_" d="m17.074 30h-2.148c-1.038 0-1.914-.811-1.994-1.846l-.125-1.635c-.687-.208-1.351-.484-1.985-.824l-1.246 1.067c-.788.677-1.98.631-2.715-.104l-1.52-1.52c-.734-.734-.78-1.927-.104-2.715l1.067-1.246c-.34-.635-.616-1.299-.824-1.985l-1.634-.125c-1.035-.079-1.846-.955-1.846-1.993v-2.148c0-1.038.811-1.914 1.846-1.994l1.635-.125c.208-.687.484-1.351.824-1.985l-1.068-1.247c-.676-.788-.631-1.98.104-2.715l1.52-1.52c.734-.734 1.927-.779 2.715-.104l1.246 1.067c.635-.34 1.299-.616 1.985-.824l.125-1.634c.08-1.034.956-1.845 1.994-1.845h2.148c1.038 0 1.914.811 1.994 1.846l.125 1.635c.687.208 1.351.484 1.985.824l1.246-1.067c.787-.676 1.98-.631 2.715.104l1.52 1.52c.734.734.78 1.927.104 2.715l-1.067 1.246c.34.635.616 1.299.824 1.985l1.634.125c1.035.079 1.846.955 1.846 1.993v2.148c0 1.038-.811 1.914-1.846 1.994l-1.635.125c-.208.687-.484 1.351-.824 1.985l1.067 1.246c.677.788.631 1.98-.104 2.715l-1.52 1.52c-.734.734-1.928.78-2.715.104l-1.246-1.067c-.635.34-1.299.616-1.985.824l-.125 1.634c-.079 1.035-.955 1.846-1.993 1.846zm-5.835-6.373c.848.53 1.768.912 2.734 1.135.426.099.739.462.772.898l.18 2.341 2.149-.001.18-2.34c.033-.437.347-.8.772-.898.967-.223 1.887-.604 2.734-1.135.371-.232.849-.197 1.181.089l1.784 1.529 1.52-1.52-1.529-1.784c-.285-.332-.321-.811-.089-1.181.53-.848.912-1.768 1.135-2.734.099-.426.462-.739.898-.772l2.341-.18h-.001v-2.148l-2.34-.18c-.437-.033-.8-.347-.898-.772-.223-.967-.604-1.887-1.135-2.734-.232-.37-.196-.849.089-1.181l1.529-1.784-1.52-1.52-1.784 1.529c-.332.286-.81.321-1.181.089-.848-.53-1.768-.912-2.734-1.135-.426-.099-.739-.462-.772-.898l-.18-2.341-2.148.001-.18 2.34c-.033.437-.347.8-.772.898-.967.223-1.887.604-2.734 1.135-.37.232-.849.197-1.181-.089l-1.785-1.529-1.52 1.52 1.529 1.784c.285.332.321.811.089 1.181-.53.848-.912 1.768-1.135 2.734-.099.426-.462.739-.898.772l-2.341.18.002 2.148 2.34.18c.437.033.8.347.898.772.223.967.604 1.887 1.135 2.734.232.37.196.849-.089 1.181l-1.529 1.784 1.52 1.52 1.784-1.529c.332-.287.813-.32 1.18-.089z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path id="XMLID_1645_" d="m16 23c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7zm0-12c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></svg>
|
|
<span class="tooltip">Settings</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by shadowmurphy - Tags: card, error, windows, update, storage, gb */
|
|
.card {
|
|
width: 300px;
|
|
height: 330px;
|
|
background: #333333;
|
|
border-radius: 6px;
|
|
color: white;
|
|
}
|
|
|
|
.header,
|
|
.info,
|
|
.progress-line
|
|
.bottom {
|
|
width: 100%;
|
|
}
|
|
|
|
.header {
|
|
height: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1px solid #2E2E2E
|
|
}
|
|
|
|
.info {
|
|
height: 230px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.bottom {
|
|
height: 50px;
|
|
background-color: #2C2C2C;
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: right;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.header-button {
|
|
width: 94%;
|
|
height: 72%;
|
|
border-radius: 6px;
|
|
border: none;
|
|
outline: none;
|
|
background-color: #333333;
|
|
color: white;
|
|
font-size: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header-button:hover {
|
|
background-color: #3F3F3F;
|
|
}
|
|
|
|
.header-button svg {
|
|
width: 20px;
|
|
}
|
|
|
|
.header-button svg:first-child {
|
|
position: relative;
|
|
left: 5px;
|
|
}
|
|
|
|
.header-button svg:last-child {
|
|
position: relative;
|
|
right: 15px;
|
|
}
|
|
|
|
.header-button a {
|
|
position: relative;
|
|
right: 35px;
|
|
}
|
|
|
|
.info-border {
|
|
width: 90%;
|
|
height: 80%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px
|
|
}
|
|
|
|
.info-border a:first-child {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.info-border a:nth-child(3) {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.info-border a:nth-child(4) {
|
|
width: 200px;
|
|
font-size: 13px;
|
|
position: relative;
|
|
top: 10px;
|
|
align-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.progress-line {
|
|
height: 4px;
|
|
border-radius: 666px;
|
|
background-color: #FF99A4;
|
|
}
|
|
|
|
.update-button {
|
|
width: 120px;
|
|
height: 35px;
|
|
position: relative;
|
|
top: 25px;
|
|
align-self: center;
|
|
outline: none;
|
|
border: none;
|
|
background-color: #4CC2FF;
|
|
border-radius: 6px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #33333;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.update-button:hover {
|
|
background-color: #49B3EA;
|
|
}
|
|
|
|
.square {
|
|
width: 30px;
|
|
height: 30px;
|
|
right: 10px;
|
|
position: relative;
|
|
border-radius: 3px;
|
|
transition: background-color 0.2s ease;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.square:hover {
|
|
background-color: #3A3A3A;
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
top: -30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #2E2E2E;
|
|
color: #fff;
|
|
padding: 5px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease-in-out;
|
|
transition-delay: 1.5s;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
border-radius: 3px;
|
|
border: 1px solid #252525;
|
|
}
|
|
|
|
.square:hover .tooltip {
|
|
opacity: 1;
|
|
}
|
|
|
|
.square:not(:hover) .tooltip {
|
|
opacity: 0;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.square svg {
|
|
width: 20px;
|
|
}
|
|
</style>
|