aid-elements-cmcc
Version:
AI Design Elements
264 lines (242 loc) • 7.81 kB
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>AI Design Icons</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #fff;
color: #222;
}
h1, h2, div, 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: -webkit-linear-gradient(left top, #669cff, #9a84ff); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #669cff, #9a84ff); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #669cff, #9a84ff); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, #669cff, #9a84ff); /* Standard */
}
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: #ffffff;
font-weight: bold;
}
h1 .version::before {
content: 'v';
}
h2 {
font-size: 18px;
padding: 20px;
}
.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;
}
.icons div {
line-height: 2em;
}
.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;
}
.icons div code:hover,
.icons div span:hover {
background: -webkit-linear-gradient(left top, #669cff, #9a84ff); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #669cff, #9a84ff); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #669cff, #9a84ff); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, #669cff, #9a84ff); /* Standard */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.icons div i:hover {
color: #3c90be;
}
.icons div code:hover {
background: -webkit-linear-gradient(left top, #669cff, #9a84ff); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #669cff, #9a84ff); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #669cff, #9a84ff); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, #669cff, #9a84ff); /* Standard */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.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;
}
.icons div i {
display: inline-block;
width: 32px;
height: 24px;
text-align: center;
vertical-align: middle;
cursor: pointer;
line-height: 24px;
}
.icons .aid:before {
font-size: 24px;
}
pre {
margin: 0 20px;
font-family: Consolas, monospace;
padding: 10px;
border: 1px solid #DDD;
background: #F1F1F1;
}
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;
color: #ffffff;
box-shadow: 0 0 10px #3DDB92;
background: -webkit-linear-gradient(left top, #5ADBD3, #3DDB92); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #5ADBD3, #3DDB92); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #5ADBD3, #3DDB92); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, #5ADBD3, #3DDB92); /* Standard */
}
footer {
margin-top: 30px ;
padding: 20px;
border-top: 1px solid #DDD;
text-align: center;
color: #ffffff;
font-size: 13px;
/*background: #F1F1F1;*/
background: -webkit-linear-gradient(left top, #669cff, #9a84ff); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #669cff, #9a84ff); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #669cff, #9a84ff); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, #669cff, #9a84ff); /* Standard */
}
footer a {
color: #e91e63;
text-decoration: none;
}
<%= styles %>
</style>
</head>
<body>
<h1>
<span class="aid aid-chemical-weapon"></span> AI Design Icons
<span class="version"><%= version %></span>
</h1>
<h2>Usage</h2>
<pre><code><span class="aid aid-<span id="name">name</span>"></span></code></pre>
<h2>Icons
<small>(click to copy to clipboard)</small>
</h2>
<div class="icons" id="icons"></div>
<footer>All Rights Reserved Copyright @2016 Asiainfo UXT Team</footer>
<script type="text/javascript">
(function () {
var icons = [
<% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { var glyph = glyphs[glyphIdx] %>
{"name": "<%= glyph %>", "hex": "<%= codepoints[glyphIdx] %>"},
<% } %>];
var copyText = function (text) {
var copyFrom = document.createElement('textarea');
copyFrom.setAttribute("style", "position:absolute;opacity:0");
copyFrom.value = text;
document.body.appendChild(copyFrom);
copyFrom.select();
document.execCommand('copy');
var copied = document.createElement('div');
copied.setAttribute('class', 'copied');
// var checkIcon = document.createElement('span');
// checkIcon.setAttribute('class', 'aid-old aid-old-checkbox-marked-circle-outline');
// copied.appendChild(checkIcon);
copied.appendChild(document.createTextNode(' Copied to Clipboard'));
document.body.appendChild(copied);
setTimeout(function () {
document.body.removeChild(copyFrom);
document.body.removeChild(copied);
}, 1500);
};
for (var j = 0; j < icons.length; j++) {
var div = document.createElement('div'),
i = document.createElement('i');
i.className = 'aid aid-' + icons[j].name;
div.appendChild(i);
var code = document.createElement('code');
code.appendChild(document.createTextNode(icons[j].hex));
div.appendChild(code);
var span = document.createElement('span');
span.appendChild(document.createTextNode('aid-' + icons[j].name));
div.appendChild(span);
span.onclick = (function (icon) {
return function () {
document.getElementById('name').innerHTML = icon.name;
};
})(icons[j]);
i.onmouseup = (function (icon) {
return function () {
copyText(String.fromCharCode(parseInt(icon.hex, 16)));
};
})(icons[j]);
code.onmouseup = (function (icon) {
return function () {
copyText(icon.hex);
};
})(icons[j]);
span.onmouseup = (function (icon) {
return function () {
copyText('aid-' + icon.name);
};
})(icons[j]);
document.getElementById('icons').appendChild(div);
}
})();
</script>
</body>
</html>