VaKeR CYBER ARMY
Apache/2.4.41 (Ubuntu) Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 www-data ( 33 )7.4.33 pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, / var /www /html /tech_preview /hr /css /materialdesignicons /
Current File : /var/www/html/tech_preview/hr/css/materialdesignicons/index.html <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="google" content="notranslate">
<title>Material Design Icons</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #fff;
color: #222;
}
h1,
h2,
h3,
p,
div,
blockquote,
footer {
font-family: "Helvetica Neue", Arial, sans-serif;
}
h1 {
padding: 20px 20px 16px 20px;
font-size: 26px;
line-height: 26px;
font-weight: normal;
color: #FFF;
background-color: #2196F3;
}
h1 svg {
vertical-align: middle;
width: 26px;
height: 26px;
margin: 0 6px 4px 0;
}
h1 svg path {
fill: #FFF;
}
h1 .version {
font-size: 14px;
background: #FFF;
padding: 4px 10px;
float: right;
border-radius: 2px;
margin: -3px 0 0 0;
color: #666;
font-weight: bold;
}
h1 .version::before {
content: 'v';
}
h1 code {
font-size: 20px;
background: rgba(0, 0, 0, 0.5);
padding: 4px 12px;
border-radius: 3px;
float: right;
margin: -3px 10px 0 0;
border: 1px solid transparent;
cursor: pointer;
}
h1 code:hover {
border: 1px solid #FFF;
}
h1 code svg {
width: 24px;
height: 24px;
margin: -1px -4px 0 -2px
}
h2 {
font-size: 18px;
padding: 20px;
}
h2 small {
color: #555;
font-size: 0.8rem;
}
h2 small::before {
content: '(';
}
h2 small::after {
content: ')';
}
h2 span {
position: relative;
}
h2.newicons span::before {
position: absolute;
content: ' ';
width: 100%;
height: 0.2rem;
bottom: -0.25rem;
background: #3C90BE;
border-radius: 0.1rem;
}
h2.deprecatedicons span::before {
position: absolute;
content: ' ';
width: 100%;
height: 0.2rem;
bottom: -0.25rem;
background: #BE3C3C;
border-radius: 0.1rem;
}
h3 {
font-size: 14px;
padding: 10px 20px 0 20px;
font-weight: bold;
}
p {
padding: 10px 20px;
}
p code {
display: inline-block;
vertical-align: middle;
background: #F1F1F1;
padding: 3px 5px;
border-radius: 3px;
border: 1px solid #DDD;
}
p i.mdi {
vertical-align: middle;
border-radius: 4px;
display: inline-block;
}
p i.mdi.dark-demo {
background: #333;
}
p.note {
color: #999;
font-size: 14px;
padding: 0 20px 5px 20px;
}
p.deprecated {
margin: -0.5rem 0 0.25rem 0;
}
p.extras {
margin-top: -0.5rem;
}
div.icons {
padding: 0 20px 10px 20px;
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
div.icons div {
line-height: 2em;
}
div.icons div span {
cursor: pointer;
font-size: 14px;
text-overflow: ellipsis;
display: inline-block;
max-width: calc(100% - 90px);
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
}
div.icons div code:hover,
div.icons div span:hover,
div.icons div i:hover {
color: #3c90be;
}
div.icons div code:hover {
border-color: #3c90be;
}
div.icons div code {
border: 1px solid #DDD;
width: 46px;
margin-left: 2px;
margin-right: 4px;
border-radius: 4px;
display: inline-block;
vertical-align: middle;
text-align: center;
line-height: 24px;
cursor: pointer;
}
div.icons div i {
display: inline-block;
width: 32px;
height: 24px;
text-align: center;
vertical-align: middle;
cursor: pointer;
line-height: 24px;
}
div.icons .mdi::before {
font-size: 24px;
}
div.icons div.new::before {
content: ' ';
width: 0.2rem;
height: 1.75rem;
position: absolute;
margin-top: 0.25rem;
margin-left: -0.25rem;
background: #3C90BE;
border-radius: 0.1rem;
}
div.icons div.deprecated::before {
content: ' ';
width: 0.2rem;
height: 1.75rem;
position: absolute;
margin-top: 0.25rem;
margin-left: -0.25rem;
background: #BE3C3C;
border-radius: 0.1rem;
}
pre {
margin: 0 20px;
font-family: Consolas, monospace;
padding: 10px;
border: 1px solid #DDD;
background: #F1F1F1;
}
blockquote {
position: relative;
margin: 1rem 1rem 0 1rem;
padding: 0.5rem 0.5rem 0.5rem 0.75rem;
}
blockquote.note::before {
content: ' ';
width: 0.25rem;
height: 100%;
background: #DDD;
position: absolute;
border-radius: 0.25rem;
top: 0;
left: 0;
}
blockquote.deprecated::before {
content: ' ';
width: 0.25rem;
height: 100%;
background: #BE3C3C;
position: absolute;
border-radius: 0.25rem;
top: 0;
left: 0;
}
div.copied {
position: fixed;
top: 100px;
left: 50%;
width: 200px;
text-align: center;
color: #3c763d;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
padding: 10px 15px;
border-radius: 4px;
margin-left: -100px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
div.examples {
display: flex;
flex-wrap: wrap;
margin: 0.5rem 1.25rem;
}
div.examples > div {
display: flex;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
div.examples > div > div:first-child {
display: flex;
padding: 0.5rem;
border-radius: 0.25rem;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.4);
background: #FFF;
z-index: 1;
align-items: center;
justify-content: center;
}
div.examples > div > div:first-child + div {
display: flex;
margin-left: -0.25rem;
padding: 0.5rem 0.75rem 0.5rem 1rem;
background: #222;
border-radius: 0 0.25rem 0.25rem 0;
}
div.examples > div > div:first-child + div > code {
color: #FFF;
align-self: center;
}
div.examples > div > div.dark:first-child {
background: #444;
}
div.examples i {
display: flex;
}
div.examples-size > div > div:first-child {
min-width: 3rem;
}
footer {
display: flex;
padding: 20px;
color: #666;
border-top: 1px solid #DDD;
background: #F1F1F1;
}
footer > div:first-child {
flex: 1;
}
footer > div:last-child {
text-align: right;
}
footer a {
color: #e91e63;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
</style>
<link href="materialdesignicons.css" media="all" rel="stylesheet" type="text/css" />
<script src="icons.js"></script>
</head>
<body>
<h1>
<svg>
<path d="M0,0H8V3H18V0H26V8H23V18H26V26H18V23H8V21H18V18H21V8H18V5H8V8H5V18H8V26H0V18H3V8H0V0M2,2V6H6V2H2M2,20V24H6V20H2M20,2V6H24V2H20M20,20V24H24V20H20Z"></path>
</svg>
Material Design Icons
<span id="version" class="version">6.7.96</span>
<script>
var temp = document.getElementById('version');
temp.innerHTML = window.version;
</script>
<code id="npm" title="Copy to Clipboard">
<svg viewBox="0 0 24 24">
<path d="M19,20H5V4H7V7H17V4H19M12,2A1,1 0 0,1 13,3A1,1 0 0,1 12,4A1,1 0 0,1 11,3A1,1 0 0,1 12,2M19,2H14.82C14.4,0.84 13.3,0 12,0C10.7,0 9.6,0.84 9.18,2H5A2,2 0 0,0 3,4V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V4A2,2 0 0,0 19,2Z" />
</svg>
npm install @mdi/font
</code>
</h1>
<h2 class="usage">Usage</h2>
<pre><code><span class="mdi mdi-<span id="name">name</span>"></span></code></pre>
<blockquote class="note">
Click the icon, hex codepoint, or name below to copy the value to your clipboard.
</blockquote>
<h2 class="newicons"><span>New</span> Icons <small id="newIconsCount">-</small></h2>
<div class="icons" id="newIcons"></div>
<h2 class="icons">All Icons <small id="iconsCount">-</small></h2>
<div class="icons" id="icons"></div>
<h2 class="deprecatedicons"><span>Deprecated</span> Icons <small id="deprecatedIconsCount">-</small></h2>
<p class="deprecated" id="deprecated">
Deprecated icons will be removed in a future major release.
</p>
<div class="icons" id="deprecatedIcons"></div>
<h2 class="extras">Extras</h2>
<p class="extras">The helper CSS classes are listed below.</p>
<section>
<h3>Size</h3>
<div class="examples examples-size">
<div>
<div>
<i class="mdi mdi-18px mdi-account"></i>
</div>
<div>
<code>mdi-18px</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-24px mdi-account"></i>
</div>
<div>
<code>mdi-24px</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-account"></i>
</div>
<div>
<code>mdi-36px</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-48px mdi-account"></i>
</div>
<div>
<code>mdi-48px</code>
</div>
</div>
</div>
</section>
<h3>Rotate</h3>
<div class="examples">
<div>
<div>
<i class="mdi mdi-36px mdi-account"></i>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-rotate-45 mdi-account"></i>
</div>
<div>
<code>mdi-rotate-45</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-rotate-90 mdi-account"></i>
</div>
<div>
<code>mdi-rotate-90</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-rotate-135 mdi-account"></i>
</div>
<div>
<code>mdi-rotate-135</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-rotate-180 mdi-account"></i>
</div>
<div>
<code>mdi-rotate-180</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-rotate-225 mdi-account"></i>
</div>
<div>
<code>mdi-rotate-225</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-rotate-270 mdi-account"></i>
</div>
<div>
<code>mdi-rotate-270</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-rotate-315 mdi-account"></i>
</div>
<div>
<code>mdi-rotate-315</code>
</div>
</div>
</div>
<h3>Flip</h3>
<div class="examples">
<div>
<div>
<i class="mdi mdi-36px mdi-account-alert"></i>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-flip-h mdi-account-alert"></i>
</div>
<div>
<code>mdi-flip-h</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-flip-v mdi-account-alert"></i>
</div>
<div>
<code>mdi-flip-v</code>
</div>
</div>
</div>
<p class="note"><strong>Note:</strong> We do not include the ability to use <code>mdi-flip-*</code> and
<code>mdi-rotate-*</code> at the same time.</p>
<h3>Spin</h3>
<div class="examples">
<div>
<div>
<i class="mdi mdi-36px mdi-spin mdi-loading"></i>
</div>
<div>
<code>mdi-spin</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-spin mdi-star"></i>
</div>
<div>
<code>mdi-spin</code>
</div>
</div>
</div>
<h3>Color</h3>
<div class="examples">
<div>
<div class="dark">
<i class="mdi mdi-36px mdi-light mdi-account dark-demo"></i>
</div>
<div>
<code>mdi-light</code>
</div>
</div>
<div>
<div class="dark">
<i class="mdi mdi-36px mdi-light mdi-inactive mdi-account dark-demo"></i>
</div>
<div>
<code>mdi-light mdi-inactive</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-dark mdi-account"></i>
</div>
<div>
<code>mdi-dark</code>
</div>
</div>
<div>
<div>
<i class="mdi mdi-36px mdi-dark mdi-inactive mdi-account"></i>
</div>
<div>
<code>mdi-dark mdi-inactive</code>
</div>
</div>
</div>
<footer>
<div>
Generated with <a href="https://npmjs.com/package/@mdi/font-build">@mdi/font-build</a>
by <a href="http://MaterialDesignIcons.com/">MaterialDesignIcons.com</a>.
</div>
<div>
<a href="https://www.npmjs.com/org/mdi" target="_blank">NPM @mdi Organization</a>
</div>
</footer>
<script type="text/javascript">
function isNew(icon) {
return icon.isNew;
}
function isDeprecated(icon) {
return typeof icon.deprecated == 'undefined'
? false
: icon.deprecated;
}
function copyText(text) {
var copyFrom = document.createElement('textarea');
copyFrom.setAttribute("style", "position:fixed;opacity:0;top:100px;left:100px;");
copyFrom.value = text;
document.body.appendChild(copyFrom);
copyFrom.select();
document.execCommand('copy');
var copied = document.createElement('div');
copied.setAttribute('class', 'copied');
copied.appendChild(document.createTextNode('Copied to Clipboard'));
document.body.appendChild(copied);
setTimeout(function () {
document.body.removeChild(copyFrom);
document.body.removeChild(copied);
}, 1500);
};
function getIconItem(icon, isNewIcon, isDeprecatedIcon) {
var div = document.createElement('div'),
i = document.createElement('i');
i.className = 'mdi mdi-' + icon.name;
div.appendChild(i);
var code = document.createElement('code');
code.appendChild(document.createTextNode(icon.hex));
div.appendChild(code);
var span = document.createElement('span');
span.appendChild(document.createTextNode('mdi-' + icon.name));
div.appendChild(span);
span.onclick = function () {
document.getElementById('name').innerHTML = icon.name;
};
i.onmouseup = function () {
copyText(String.fromCodePoint(parseInt(icon.hex, 16)));
};
code.onmouseup = function () {
copyText(icon.hex);
};
span.onmouseup = function () {
copyText('mdi-' + icon.name);
};
if (isNewIcon) {
div.className = 'new';
}
if (isDeprecatedIcon) {
div.className = 'deprecated';
}
return div;
}
(function () {
var iconsCount = 0;
var newIconsCount = 0;
var deprecatedIconsCount = 0;
icons.push({ "name": "blank", "hex": "f68c", isNew: true });
icons.forEach(function (icon) {
if (isNew(icon)) {
var newItem = getIconItem(icon, false, false);
document.getElementById('newIcons').appendChild(newItem);
newIconsCount++;
}
else {
var item = getIconItem(icon, isNew(icon), isDeprecated(icon));
document.getElementById('icons').appendChild(item);
iconsCount++;
}
if (isDeprecated(icon)) {
var deprecatedItem = getIconItem(icon, false, false);
document.getElementById('deprecatedIcons').appendChild(deprecatedItem);
deprecatedIconsCount++;
}
});
var whereDeprecated = function (icon) {
return icon.deprecated === true;
};
if (!(icons.find(whereDeprecated))) {
document.getElementById('deprecated').style.display = 'none';
}
document.getElementById('iconsCount').innerText = iconsCount;
document.getElementById('newIconsCount').innerText = newIconsCount;
document.getElementById('deprecatedIconsCount').innerText = deprecatedIconsCount;
document.getElementById('npm').addEventListener('click', function () {
copyText('npm install @mdi/font');
});
})();
</script>
</body>
</html>
Server : Apache/2.4.41 (Ubuntu)