├── .github ├── ISSUE_TEMPLATE │ ├── bug-report.yml │ └── feature-request.yml └── OMGEX.png ├── CSS-Snippets.md ├── OMGEX.css ├── OMGEX.js └── README.md /.github/ISSUE_TEMPLATE/bug-report.yml: -------------------------------------------------------------------------------- 1 | name: Bug Report 2 | description: Create a report of unintended behavior or problems 3 | labels: [bug] 4 | body: 5 | - type: checkboxes 6 | attributes: 7 | label: Checklist 8 | description: Issue will be disregarded & closed if incomplete! 9 | options: 10 | - label: I've **checked both [open and recently closed issues](https://github.com/litdevs/omgex/issues?q=is%3Aissue)** to ensure this issue is not already reported. 11 | required: true 12 | - label: I am using the **newest version** of OMGEX. 13 | required: true 14 | - label: I am not using a **modified version** of OMGEX. 15 | required: true 16 | - label: I am certain this is a **bug**, not a feature request. 17 | - type: input 18 | attributes: 19 | label: OS and Version 20 | placeholder: e.g. Windows 7 21 | validations: 22 | required: true 23 | - type: input 24 | attributes: 25 | label: Browser and version 26 | placeholder: e.g. Chrome 94 27 | validations: 28 | required: true 29 | - type: textarea 30 | attributes: 31 | label: Describe the bug/issue 32 | description: A clear and concise description of what the bug is. 33 | validations: 34 | required: true 35 | - type: textarea 36 | attributes: 37 | label: Reproducing 38 | description: Steps to reproduce the behavior. 39 | placeholder: | 40 | 1. Go to '...' 41 | 2. Click on '...' 42 | 3. Scroll down to '...' 43 | 4. See error 44 | - type: textarea 45 | attributes: 46 | label: Expected behavior 47 | description: A clear and concise description of what you expected to happen. 48 | validations: 49 | required: true 50 | - type: textarea 51 | attributes: 52 | label: Screenshots 53 | description: If applicable, add screenshots to help explain your problem. 54 | - type: textarea 55 | attributes: 56 | label: Console logs 57 | description: Press F12 and go to the Console tab, then copy or screenshot the logs, in case there are any error messages. 58 | - type: textarea 59 | attributes: 60 | label: Additional context 61 | description: Add any other context about the problem here. 62 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 2 | description: Suggest an idea that may improve OMGEX 3 | labels: [enhancement] 4 | body: 5 | - type: checkboxes 6 | attributes: 7 | label: Checklist 8 | description: Issue will be disregarded & closed if incomplete! 9 | options: 10 | - label: I've **checked both [open and recently closed issues](https://github.com/litdevs/omgex/issues?q=is%3Aissue)** to ensure this feature is not already requested. 11 | required: true 12 | - label: I am using the **newest version** of OMGEX. 13 | required: true 14 | - label: I am certain this is a **feature request**, not a bug. 15 | required: true 16 | - label: I've **thought this feature through** properly. 17 | required: true 18 | - type: textarea 19 | attributes: 20 | label: Is your feature request related to a problem? Please describe. 21 | description: A clear and concise description of what the problem is. 22 | placeholder: I'm always frustrated when [...] 23 | validations: 24 | required: true 25 | - type: textarea 26 | attributes: 27 | label: Describe the solution you'd like 28 | description: A clear and concise description of what you want to happen. 29 | validations: 30 | required: true 31 | - type: textarea 32 | attributes: 33 | label: Describe alternatives you've considered 34 | description: A clear and concise description of any alternative solutions or features you've considered. 35 | validations: 36 | required: true 37 | - type: textarea 38 | attributes: 39 | label: Additional context 40 | description: Add any other context or screenshots about the feature request here 41 | -------------------------------------------------------------------------------- /.github/OMGEX.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LITdevs/OMGEX/e5531bea3144c1c27c937b8af757aca43c643e98/.github/OMGEX.png -------------------------------------------------------------------------------- /CSS-Snippets.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # OMGEX-CSS ("OMG Extended CSS") 4 | 5 | Extended profile features for OMG.LOL, your favorite pigeon community. 6 | 7 | Issues and pull requests are welcome, so fire away! 8 | 9 | ## Installation 10 | 11 | Copy any CSS snippet below into your page's `Style` settings. 12 | 13 | 14 | ## CSS Snippets 15 | 16 | ### Verification badge wiggle animation 17 | 18 | This makes your Verification badge (if you have one), pop-out and wiggle every couple seconds. 19 | ```css 20 | /** Verification badge wiggle animation **/ 21 | @keyframes wiggle { 22 | 0% { transform: rotate(0deg); } 23 | 60% { transform: rotate(0deg); } 24 | 65% { transform: scale(120%) rotate(5deg); } 25 | 85% { transform: scale(125%) rotate(-5deg);} 26 | 100% { transform: rotate(0deg); } 27 | } 28 | .omg-verified { 29 | animation: wiggle 2.5s ease infinite; 30 | transition: 0.5s; 31 | } 32 | ``` 33 | 34 | ### Verification badge popout animation 35 | 36 | This makes your Verification badge pop-out one time when the page loads. 37 | ```css 38 | /** Verification badge popout animation **/ 39 | @keyframes popout { 40 | 0% { transform: scale(50%); } 41 | 35% { transform: scale(190%); } 42 | 100% { transform: scale(100%); } 43 | } 44 | .omg-verified { 45 | animation: popout 1.5s ease; 46 | } 47 | ``` 48 | 49 | 50 | ### Link hover, icon animation (Pop-out) 51 | 52 | This makes the icons next to your links, pop-out when being hovered-over. 53 | ```css 54 | /** Link hover, icon animation (Pop-out) **/ 55 | li .fa-li, li .omg-icon { 56 | transition: 0.2s ease; 57 | } 58 | li:hover .fa-li, li:hover .omg-icon { 59 | transform: scale(1.3) 60 | } 61 | ``` 62 | 63 | 64 | ### Link hover, icon animation (Pop-out and rotate) 65 | 66 | This makes the icons next to your links, pop-out and rotate when being hovered-over. 67 | ```css 68 | /** Link hover, icon animation (Pop-out and rotate) **/ 69 | li .fa-li, li .omg-icon { 70 | transition: 0.1s ease-out; 71 | } 72 | li:hover .fa-li, li:hover .omg-icon { 73 | transform: scale(120%) rotate(-10deg); 74 | transition: all 0.1s; 75 | transition-timing-function: ease(1, 0.8, 0.5, 1); 76 | } 77 | ``` 78 | -------------------------------------------------------------------------------- /OMGEX.css: -------------------------------------------------------------------------------- 1 | #details { 2 | display: grid; 3 | grid-template-columns: repeat(2, minmax(0, 1fr)); 4 | margin: 0 6rem; 5 | } 6 | 7 | #details div { 8 | margin-bottom: 1rem; 9 | } -------------------------------------------------------------------------------- /OMGEX.js: -------------------------------------------------------------------------------- 1 | window.OMGEX = function (options) { 2 | let version = "1.6.1"; 3 | 4 | /*var head = document.getElementsByTagName("head")[0]; 5 | var link = document.createElement("link"); 6 | link.rel = "stylesheet"; 7 | link.type = "text/css"; 8 | link.href = "https://cdn.jsdelivr.net/gh/litdevs/omgex@latest/OMGEX.css"; 9 | link.media = "all"; 10 | head.appendChild(link);*/ 11 | 12 | if (!options || Object.keys(options).length == 0) 13 | return console.error("OMGEX: No options provided"); 14 | if (options.zodiac) { 15 | let pronouns = document.querySelector("#pronouns"); 16 | if (pronouns !== null) { 17 | pronouns.innerHTML = 18 | pronouns.innerHTML + ` · ${options.zodiac}`; 19 | } else { 20 | let details = document.querySelector("#details"); 21 | details.innerHTML = 22 | details.innerHTML + `${options.zodiac}`; 23 | } 24 | } 25 | if (options.karma) { 26 | if (options.karma.endsWith(".omg.lol")) 27 | options.karma = options.karma.split(".omg.lol")[0]; 28 | fetch(`https://irc.social.lol/api/karma.php?address=${options.karma}`) 29 | .then((res) => res.json()) 30 | .then((res) => { 31 | let karma = res.karma; 32 | details.innerHTML = 33 | details.innerHTML + 34 | `
${karma} (huh?)
`; 35 | }); 36 | } 37 | if (options.birthday) { 38 | let details = document.querySelector("#details"); 39 | details.innerHTML = 40 | details.innerHTML + 41 | `
${options.birthday}
`; 42 | } 43 | if (options.timezone) { 44 | let delay = 60000; 45 | let timeDisplayOptions = { hour: "2-digit", minute: "2-digit" }; 46 | if (options.displaySeconds) { 47 | delay = 500; 48 | timeDisplayOptions.second = "2-digit"; 49 | } 50 | if (options.force24h) timeDisplayOptions.hourCycle = "h23"; 51 | let details = document.querySelector("#details"); 52 | details.innerHTML = 53 | details.innerHTML + 54 | `
${new Date().toLocaleTimeString( 55 | [], 56 | { timeZone: options.timezone, ...timeDisplayOptions } 57 | )}
`; 58 | setInterval(() => { 59 | document.querySelector( 60 | "#localtime" 61 | ).innerHTML = ` ${new Date().toLocaleTimeString( 62 | [], 63 | { timeZone: options.timezone, ...timeDisplayOptions } 64 | )}`; 65 | }, delay); 66 | } 67 | if (options.fields) { 68 | options.fields.forEach((field) => { 69 | let details = document.querySelector("#details"); 70 | details.innerHTML = 71 | details.innerHTML + 72 | `
${ 75 | field.text 76 | }
`; 77 | }); 78 | } 79 | if (options.promoteOMGEX != false) { 80 | let footer = document.querySelector("#footer"); 81 | footer.innerHTML = 82 | footer.innerHTML + 83 | `
Extended by OMGEX ${version}`; 84 | } 85 | }; 86 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # OMGEX ("OMG Extended") [![Discord](https://img.shields.io/discord/868937321402204220?color=5865f2&label=chat&logo=discord&logoColor=7289da)](https://discord.gg/z5tmTWU7Qw) 4 | 5 | Extended profile features for OMG.LOL, your favorite pigeon community. OMGEX supports all default OMG.LOL themes. 6 | 7 | If you have any bugs or feature requests, feel free to [report them](https://github.com/LITdevs/OMGEX/issues/new/choose) or contribute! 8 | 9 | ## Installation 10 | 11 | Add the following to your OMG.LOL page's `` (you can find this in your profile settings), then customize the options as desired. 12 | 13 | ```js 14 | 15 | 20 | ``` 21 | 22 | ## Configuration 23 | 24 | OMGEX has a few settings you can use to customize what it displays. You'll need at least one, or else it'll throw an error. 25 | 26 | ### karma 27 | 28 | This displays your current karma on the OMG.LOL IRC server. The value is the address people give your karma to (usually the same as your OMG.LOL address). 29 | 30 | ### zodiac 31 | 32 | This displays your zodiac sign next to your pronouns. 33 | 34 | ### birthday 35 | 36 | This displays your birthday underneath your occupation and location. 37 | 38 | ### timezone 39 | 40 | This displays your current time underneath your birthday (if enabled) or else, occupation and location. You can find a list of acceptable strings [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) (the TZ database name). 41 | 42 | You may notice that you can also just specify for example CET, but BE WARNED! Some timezones have conflicting names, so it's recommended to just use the TZ database name. 43 | 44 | #### displaySeconds 45 | 46 | Set this to `true` to display seconds in the current time (HH:MM:SS). 47 | 48 | #### force24h 49 | 50 | Set this to `true` to force the 24-hour clock in the current time. 51 | 52 | ### fields 53 | 54 | This is an array of objects, allowing you to add custom fields. Each object can have an `icon` and some `text`. The icon must be the name of a free Font Awesome icon. 55 | 56 | ### promoteOMGEX 57 | 58 | OMGEX adds a link to its GitHub repo in the footer, but this can be disabled if you prefer - just set this option to `false`. You won't really have to do this if you're already hiding the footer, since it won't display. 59 | --------------------------------------------------------------------------------