From 7bd9f80d9368ba43d02ad633ecf5d1f57cec886b Mon Sep 17 00:00:00 2001 From: ed Date: Thu, 28 Sep 2023 16:18:10 +0200 Subject: [PATCH] v2.4 icon added --- proj/icons-v2.4/icons.js | 488 +++++++++++++++++++++++++++++++++++++ proj/icons-v2.4/index.html | 201 +++++++++++++++ proj/icons-v2.4/style.css | 116 +++++++++ 3 files changed, 805 insertions(+) create mode 100644 proj/icons-v2.4/icons.js create mode 100644 proj/icons-v2.4/index.html create mode 100644 proj/icons-v2.4/style.css diff --git a/proj/icons-v2.4/icons.js b/proj/icons-v2.4/icons.js new file mode 100644 index 0000000..6c2d4df --- /dev/null +++ b/proj/icons-v2.4/icons.js @@ -0,0 +1,488 @@ +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", + "yunohost", + "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", + "stripe", + "bitcoin", + "dash", + "monero", + "ethereum", + "ltc", + "woocommerce", + "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", + "home", + "office", + "lab", + "binoculars" + ], + fediverse: [ + "mastodon", + "diaspora", + "peertube", + "pixelfed", + "rss", + "rss-square" + ], + socials: [ + "instagram", + "threads", + "twitter", + "x", + "wordpress", + "nextcloud", + "dropbox", + "vk", + "tripadvisor", + "facebook", + "tiktok", + "twitch", + "kick", + "vimeo", + "youtube", + "reddit", + "blogger", + "medium", + "linkedin", + "fiverr", + "stackoverflow", + "quora", + "pinterest", + "tumblr", + "unsplash", + "pexels", + "behance", + "deviantart", + "dribbble", + "notion", + "pocket", + "feedly", + "steam" + ], + privacy: [ + "gpg", + "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", + "eyedropper", + "droplet", + "list-numbered", + "list-check", + "list-bullet", + "filter", + "sort-alpha-asc", + "sort-alpha-desc", + "sort-numberic-desc", + "sort-numeric-asc", + "table", + "table2" + ], + 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", + "openai", + "jupyter", + "fastapi", + "blender", + "adobe", + "inkscape", + "affinitydesigner", + "affinityphoto", + "affinitypublisher", + "" + ], + 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-v2.4/index.html b/proj/icons-v2.4/index.html new file mode 100644 index 0000000..55e8524 --- /dev/null +++ b/proj/icons-v2.4/index.html @@ -0,0 +1,201 @@ + + + + + + + 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

+
+
+ +
+
+

Login

+
+
+ +
+
+

AFK Navigation

+
+
+ +
+
+

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-v2.4/style.css b/proj/icons-v2.4/style.css new file mode 100644 index 0000000..aa73ac1 --- /dev/null +++ b/proj/icons-v2.4/style.css @@ -0,0 +1,116 @@ +@import url(../../assets/css/style.css); + +div.single-icon { + display: inline-block; + width: 120px; + height: 80px; + margin: 10px; + text-align: center; +} + +div.single-icon p { + margin-top: 15px; + font-size: 1rem; + line-height: normal; +} + +div.single-icon span.actual-icon { + font-size: 2rem; + 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-flex; + border: 4px solid var(--white); + padding-top: 10px; + padding-bottom: 10px; + 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