diff --git a/proj/icons/brz9-v2.1.zip b/proj/icons/brz9-v2.1.zip new file mode 100644 index 0000000..8dbb11c Binary files /dev/null and b/proj/icons/brz9-v2.1.zip differ diff --git a/proj/icons/icons.js b/proj/icons/icons.js new file mode 100644 index 0000000..31379a9 --- /dev/null +++ b/proj/icons/icons.js @@ -0,0 +1,473 @@ +Vue.component('icon' ,{ + template : ` +
+ + + + Copied! +

{{ this.name }}

+
+ `, + props : ['name'], + data () { + return { + utf8: '', + isCopied: false + } + }, + computed: { + class: function() { + return "brz9-icon-" + this.name; + }, + span: function() { + return ''; + } + }, + methods: { + copyToClipboard(text) { + const textarea = document.createElement('textarea') + textarea.value = text + document.body.appendChild(textarea) + textarea.select() + document.execCommand('copy') + document.body.removeChild(textarea) + this.copyDone(); + }, + copyDone(){ + this.isCopied = true; + this.$refs.element.addEventListener('animationend', () => { + this.isCopied = false; + }); + } + }, + mounted () { + query = '.' + this.class + let span = document.querySelector(query) + let style = window.getComputedStyle(span, ':before') + let content = style.getPropertyValue('content') + console.log(content) + this.utf8 = content.replace('"', '').replace('"', '') + } +}) + +let vm = new Vue({ + data () { + return { + os : [ + "gnu", + "debian", + "void", + "archlinux", + "gentoo", + "redhat", + "fedora", + "manjaro", + "linuxmint", + "freebsd", + "apple", + "windows" + ], + streaming: [ + "bandcamp", + "spotify", + "applemusic", + "soundcloud", + "tidal" + ], + payment: [ + "cart", + "price-tag", + "price-tags", + "barcode", + "qrcode", + "ticket", + "credit-card", + "visa", + "mastercard", + "applepay", + "paypal", + "bitcoin", + "monero", + "ethereum", + "ltc", + "liberapay", + "patreon", + "tipeee", + "flattr" + ], + navigation: [ + "arrow-down", + "arrow-down-left", + "arrow-down-right", + "arrow-left", + "arrow-right", + "arrow-up", + "arrow-up-left", + "arrow-up-right", + "chevron-circle-down", + "chevron-circle-left", + "chevron-circle-right", + "chevron-circle-up", + "chevron-down", + "chevron-left", + "chevron-right", + "chevron-up", + "circle-down", + "circle-left", + "circle-right", + "circle-up", + "zoom-in", + "zoom-out", + "undo", + "redo", + "undo-arrow", + "redo-arrow", + "forward-arrow", + "reply-arrow", + "envelope", + "envelope-open", + "bubble", + "bubbles", + "bubbles2", + "shrink", + "shrink2", + "enlarge", + "enlarge2", + "share", + "share-out", + "search", + "plus", + "minus", + "cross", + "checkmark", + "checkmark-outline", + "link", + "embed", + "embed-slash" + ], + form: [ + "radio-checked", + "radio-checked-alt", + "radio-unchecked", + "checkbox-checked", + "checkbox-unchecked" + ], + network: [ + "tree", + "cloud", + "cloud-check", + "cloud-download", + "cloud-upload", + "upload", + "download", + "switch", + "sphere", + "earth", + "power", + "power-cord", + "wifi" + ], + alert: [ + "warning", + "info", + "question", + "cancel-circle", + "blocked", + "notification", + "floppy-disk", + "trophy", + "newspaper", + "pacman", + "music", + "leaf", + "gift", + "flag", + "bug", + "bell", + "bin", + "bin-alt", + "book", + "books", + "bookmark", + "bookmarks", + "attachment", + "address-book", + "accessibility" + ], + time: [ + "calendar", + "clock", + "clock2", + "alarm" + ], + login: [ + "user", + "users", + "enter", + "exit", + "equalizer", + "equalizer2", + "cog" + ], + afknav: [ + "compass", + "compass2", + "location", + "location2", + "map", + "map2", + "office", + "home", + "lab", + "binoculars" + ], + fediverse: [ + "mastodon", + "diaspora", + "peertube", + "pixelfed", + "rss", + "rss-square" + ], + socials: [ + "instagram", + "twitter", + "wordpress", + "nextcloud", + "dropbox", + "vk", + "tripadvisor", + "facebook", + "tiktok", + "twitch", + "vimeo", + "youtube", + "reddit", + "blogger", + "medium", + "stackoverflow", + "quora", + "pinterest", + "tumblr", + "unsplash", + "behance", + "deviantart", + "dribbble", + "notion", + "pocket", + "feedly", + "steam" + ], + privacy: [ + "gnuprivacyguard", + "tor", + "signal", + "ublockorigin", + "riot" + ], + spyware: [ + "telegram", + "discord", + "whatsapp", + "skype", + "slack", + "messenger" + ], + edit: [ + "bold", + "italic", + "underline", + "strikethrough", + "ligature", + "sigma", + "omega", + "text-height", + "text-width", + "font-size", + "paragraph-center", + "paragraph-justify", + "paragraph-left", + "paragraph-right", + "stats-bars", + "stats-dots", + "pie-chart", + "scissors", + "crop", + "quill", + "pen", + "pencil", + "pencil2", + "quotes-left", + "quotes-right", + "copy", + "paste", + "paint-format", + "list-numbered", + "list-check", + "list-bullet", + "filter", + "sort-alpha-asc", + "sort-alpha-desc", + "sort-numberic-desc", + "sort-numeric-asc", + "table", + "table2", + "eyedropper", + "droplet" + ], + ratings: [ + "star-empty", + "star-full", + "star-half", + "heart", + "heart-broken" + ], + keyboard: [ + "tab", + "shift", + "ctrl", + "opt", + "command" + ], + media: [ + "play", + "pause", + "stop", + "previous", + "next", + "backward", + "forward", + "first", + "last", + "play-circle", + "pause-circle", + "stop-circle", + "previous-circle", + "next-circle", + "backward-circle", + "forward-circle", + "volume-decrease", + "volume-increase", + "volume-mute", + "volume-mute2", + "volume-low", + "volume-medium", + "volume-high", + "loop", + "loop2", + "shuffle", + "infinite", + "play-yt", + "eject", + "airplayaudio", + "airplayvideo" + ], + files: [ + "folder", + "folder-open", + "folder-download", + "folder-upload", + "folder-plus", + "folder-minus", + "image", + "images", + "file-empty", + "file-music", + "file-picture", + "file-play", + "file-text2", + "file-video", + "file-zip", + "files-empty", + "box-add", + "box-remove", + "film" + ], + devices: [ + "display", + "tablet", + "mobile", + "tv", + "video-camera", + "camera", + "headphones", + "mic", + "printer", + "keyboard", + "phone", + "phone-hang-up", + "raspberrypi", + "arduino", + "terminal" + ], + screen: [ + "sun", + "brightness-contrast", + "contrast", + "eye", + "eye-blocked", + "eye-minus", + "eye-plus" + ], + programing: [ + "c", + "go", + "python", + "ruby", + "rust", + "php", + "vue-dot-js", + "react", + "angular", + "svelte", + "npm", + "html5", + "css3", + "javascript", + "typescript", + "postgresql", + "docker", + "git", + "gitea", + "github", + "gitlab", + "jupyter", + "blender", + "inkscape" + ], + spinners: [ + "spinner", + "spinner2", + "spinner3" + ], + license: [ + "cc", + "cc-zero", + "cc-sa", + "cc-nd", + "cc-nc", + "cc-remix", + "cc-by", + "cc-share", + "amicale", + "gpl", + "lgpl", + "agpl", + "wtfpl", + "ofl", + "mit", + "bsd" + ] + } + } +}).$mount('#root') diff --git a/proj/icons/index.html b/proj/icons/index.html new file mode 100644 index 0000000..450917c --- /dev/null +++ b/proj/icons/index.html @@ -0,0 +1,189 @@ + + + + + + + Document + + + + + +
+ +
+

Icon font

+

This icon font was created with Icomoon. I tried to group them by category. You can download the whole pack as a zip here. This page can be used to copy the utf8 characters by clicking on the icons. This can be useful to use them in Inkscape or GIMP after installing the .ttf file on your computer. By clicking on the name of the icon, the html span with the appropriate class in your clipboard.

+ + + + +

OS

+
+
+ +
+
+

Music Streaming

+
+
+ +
+
+

Payment

+
+
+ +
+
+

Navigation

+
+
+ +
+
+

Form

+
+
+ +
+
+

Network

+
+
+ +
+
+

Alert

+
+
+ +
+
+

Time

+
+
+ +
+
+

Fediverse

+
+
+ +
+
+

Social Network

+
+
+ +
+
+

Privacy

+
+
+ +
+
+

Communication

+
+
+ +
+
+

Edit

+
+
+ +
+
+

Keyboard

+
+
+ +
+
+

Media

+
+
+ +
+
+

Files

+
+
+ +
+
+

Devices

+
+
+ +
+
+

Screen

+
+
+ +
+
+

Programming

+
+
+ +
+
+

Spinners

+

To make this kind of spinner:

+
+ +
+

You can use the following:

+
+
+ +
+
+

License

+
+
+ +
+
+ + + + +
+ +
+ + + + + + \ No newline at end of file diff --git a/proj/icons/style.css b/proj/icons/style.css new file mode 100644 index 0000000..ddf042e --- /dev/null +++ b/proj/icons/style.css @@ -0,0 +1,118 @@ +@import url(../../assets/css/style.css); + +div.single-icon { + display: inline-block; + width: 200px; + height: 100px; + margin: 10px; + text-align: center; +} + +div.single-icon code { + font-size: 1rem; +} + +div.single-icon p { + font-size: 1rem; +} + +div.single-icon span.actual-icon { + font-size: 3rem; + color: inherit !important; +} + +div.single-icon span.actual-icon::before { + color: inherit !important; +} + +span.copy-icon-popup { + position: absolute; + background-color: var(--success); + color: white; + font-size: 1.5rem; + padding: 10px; + transform: rotate(12deg); + opacity: 0; +} + +span.copy-icon-popup.success { + animation: fade-in 2s forwards; +} + +@keyframes fade-in { + 0% { + opacity: 0; + scale: 0%; + } + 10% { + opacity: 1; + scale: 100%; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } + } + +span.actual-icon, p.icon-name { + cursor: pointer; +} +/* center div.icon-grid on the screen +div.icongrid { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + width: 100%; + height: 100%;@ + margin: 0; + margin-top: 20px; + padding: 0; +}*/ + +div.icon-grid-item { + display: inline-block; + border: 4px solid var(--white); + padding-top: 20px; + padding-bottom: 20px; + margin: -2px; +} + +div.spindemo span { + display: inline-block; + position: relative; + animation: spin 1s linear infinite; + color: var(--fail); + font-size: 3rem; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +a.go-up { + position: fixed; + bottom: 20px; + right: 20px; + font-size: 2rem; + padding: 10px; + z-index: 100; +} + + +/*smooth scroll on the whole page on a click*/ +html { + scroll-behavior: smooth; + transition: 5s; +} + +h2 { + padding-top: 20px; +} \ No newline at end of file