{"id":18576217,"url":"https://github.com/eliott-srl/web-tools","last_synced_at":"2026-04-25T12:34:14.440Z","repository":{"id":53378866,"uuid":"521398416","full_name":"Eliott-Srl/web-tools","owner":"Eliott-Srl","description":"A list of tools for websites that I like and that are practical.","archived":false,"fork":false,"pushed_at":"2023-01-24T21:28:38.000Z","size":207,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-16T00:42:20.715Z","etag":null,"topics":["css","html","javascript","tools","useful-scripts"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Eliott-Srl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-04T19:55:32.000Z","updated_at":"2024-03-25T11:11:04.000Z","dependencies_parsed_at":"2023-02-14T01:45:39.835Z","dependency_job_id":null,"html_url":"https://github.com/Eliott-Srl/web-tools","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Eliott-Srl/web-tools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eliott-Srl%2Fweb-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eliott-Srl%2Fweb-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eliott-Srl%2Fweb-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eliott-Srl%2Fweb-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Eliott-Srl","download_url":"https://codeload.github.com/Eliott-Srl/web-tools/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eliott-Srl%2Fweb-tools/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32262801,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T09:15:33.318Z","status":"ssl_error","status_checked_at":"2026-04-25T09:15:31.997Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","tools","useful-scripts"],"created_at":"2024-11-06T23:24:02.155Z","updated_at":"2026-04-25T12:34:14.412Z","avatar_url":"https://github.com/Eliott-Srl.png","language":"HTML","readme":"# Web Tools\n\n**Web Tools** are tools that I often use in frontend to make website or to add little nice things.\n\nAvailable tools :\n\n* Basic loader before the website\n* The title of the website animated\n* A clickable ip system with visualisation\n* Scrollbar custom\n\n# Table Of Content\n\n* [Usage](#usage)\n  * [Loader](#loader)\n  * [Animated Title](#animated-title)\n  * [Clickable Ip](#clickable-ip)\n  * [Scrollbar Custom](#scrollbar-custom)\n\n# Usage\n\nHere are the little things to know about the different tools.\n\n## Loader\n\nThis is the explanation for the [Loader](https://github.com/Eliott-Srl/web-tools/tree/main/loader).\n\nIt is based on the [melonhtml5](https://melonhtml5.com/demo/royal_preloader/) system. I've just simplified the css and give you a tutorial to use it.\n\n### Dependencies\n\nYou will need [jquery](https://jquery.com/download/) for this project or just download this [jquery.min.js](https://github.com/Eliott-Srl/web-tools/tree/main/loader/js/jquery.min.js) file, it will work properly.\n\nDownload these two files:\n* [royal_preloader.min.js](https://github.com/Eliott-Srl/web-tools/tree/main/loader/js/royal_preloader.min.js)\n* [royal_preloader.css](https://github.com/Eliott-Srl/web-tools/tree/main/loader/css/royal_preloader.css)\n\nAnd put them respectively in a ```js``` and ```css``` folder.\n\n### Getting started\n\nTo make it work properly, add these eleven lines in the ``\u003chead\u003e`` of the page you want your loader in :\n```html\n\u003clink  href=\"css/royal_preloader.css\"  rel=\"stylesheet\"\u003e\n\u003cscript  type=\"text/javascript\"  src=\"js/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript  type=\"text/javascript\"  src=\"js/royal_preloader.min.js\"\u003e\u003c/script\u003e\n\u003cscript  type=\"text/javascript\"\u003e\n\tRoyal_Preloader.config({\n\t\tmode:  'text',\n\t\ttext:  'Put here vat u vant in textual',\n\t\ttimeout:  '1200',\n\t\tshowProgress:  false,\n\t\tbackground:  '#1d1d1d'\n\t});\n\u003c/script\u003e\n```\nand add this line in top of the ```\u003cbody\u003e```  :\n```html\n\u003cdiv  id=\"royal_preloader\"\u003e\u003c/div\u003e\n```\n\n### Customization\n\nUnfortunately, there is no real wiki. So here are some use cases with their respective Royal_Preloader.config. All cases below are from [melonhtml5](https://melonhtml5.com/demo/royal_preloader/).\n\n#### Text\n\nThe result : \nhttps://melonhtml5.com/demo/royal_preloader/index.php\n\nThe config :\n```js\nRoyal_Preloader.config({\n\tmode: 'text',\n\ttext: 'Your text',\n\tbackground:\"#000000\"\n});\n```\n\n#### Progress\n\nThe result : \nhttps://melonhtml5.com/demo/royal_preloader/progress.php\n\nThe config :\n```js\nRoyal_Preloader.config({\n\tmode: 'progress',\n\tbackground: '#262D33'\n});\n```\n\n#### Number\n\nThe result : \nhttps://melonhtml5.com/demo/royal_preloader/number.php\n\nThe config :\n```js\nRoyal_Preloader.config({\n\tmode: 'number', \n\tshow_percentage: true, \n\tbackground: \"#000000\", \n\ttext_colour: \"#FFFFFF\"\n});\n```\n\n#### Logo\n\nThe result : \nhttps://melonhtml5.com/demo/royal_preloader/logo.php\n\nThe config :\n```js\nRoyal_Preloader.config({\n\tmode: 'logo', \n\tlogo: 'images/your-logo.png', \n\ttext_colour: '#1247AB', \n\tbackground: \"#FFFFFF\"\n});\n```\n\n#### Scale Text\n\nThe result : \nhttps://melonhtml5.com/demo/royal_preloader/scale_text.php\n\nThe config :\n```js\nRoyal_Preloader.config({\n\tmode: 'scale_text', \n\ttext: 'Your Long Text Goes Here', \n\tbackground: \"#FFFFFF\", \n\ttext_colour: '#666666'\n});\n```\n\n## Animated Title\n\nThis is the explanation for the [Animated Title](https://github.com/Eliott-Srl/web-tools/blob/main/animated-title/).\n\nThere is nothing very magic here, just a basic js script, but beautiful\n\n### Dependencies\n\nYou need [title_animation.js](https://github.com/Eliott-Srl/web-tools/blob/main/animated-title/js/title_animation.js). When you have downloaded it, put it in a ```js``` folder.\n\n### Getting started\n\nTo make it work properly, add these seven lines in the ``\u003chead\u003e`` of the page you want your animated text in :\n```html\n\u003cscript  src=\"js/title_animation.js\"\u003e\u003c/script\u003e\n\u003cscript  type=\"text/javascript\"\u003e\n\tTitle_Animation.config({\n\t\ttext:  \"Put here vat u vant in textual\",\n\t\ttimeBetweenEachLetters:  300\n\t});\n\u003c/script\u003e\n```\n\n### Customisation\n\nYou can do two things :\n * Modify the ```text``` \n * Modify the ```timeBetweenEachLetters```\n\nThat's it lol\n\n## Clickable Ip\n\nThis is the explanation for the [Clickable Ip](https://github.com/Eliott-Srl/web-tools/tree/main/clickable-ip).\n\nThis system is inspired by [funcraft](https://www.funcraft.net/).  it's a system that allows to have something nice to get the ip of a minecraft server while being sober.\n\n### Dependencies\n\nDownload these two files:\n* [clickable_ip.js](https://github.com/Eliott-Srl/web-tools/blob/main/clickable-ip/js/clickable_ip.js) \n* [clickable_ip.css](https://github.com/Eliott-Srl/web-tools/blob/main/clickable-ip/css/clickable_ip.css)\n\nAnd put them respectively in a ```js``` and ```css``` folder.\n\n### Getting started\n\nTo make it work properly, add this line in the ``\u003chead\u003e`` of the page you want your clickable ip in :\n```html\n\u003clink  rel=\"stylesheet\"  href=\"css/clickable_ip.css\"\u003e\n```\nAnd put these lines where you want your clickable ip :\n```html\n\u003cdiv id=\"container-copy\"\u003e\n\t\u003cbutton onclick=\"copyToClickBoard()\"\u003e\n\t\t\u003ccode id=\"ip\"\u003eyour-ip.net\u003c/code\u003e\n\t\u003c/button\u003e\n\t\u003cp id=\"textvolant\" style=\"display: none;\"\u003e\u003c/p\u003e\n\t\u003cscript src=\"js/clickable_ip.js\"\u003e\u003c/script\u003e\n\u003c/div\u003e\n```\n\n### Customization\n\nYou can modify ```your-ip.net``` and create a nice website for your nice minecraft server.\n\n## Scrollbar Custom\n\nThis is the explanation for the [Scrollbar Custom](https://github.com/Eliott-Srl/web-tools/tree/main/scrollbar-custom).\n\nThis tool is my favorite I use it really often. It allows you to have a scrollbar cutom whatever the browser except Internet Explorer obviously lol.\n\n### Dependencies\n\nDownload this file : [scrollbar_custom.css](https://github.com/Eliott-Srl/web-tools/tree/main/scrollbar-custom/css/scrollbar_custom.css)\n\nAnd put it in a ```css``` folder.\n\n### Getting started\n\nTo make it work properly, add these seven lines in the ``\u003chead\u003e`` of the page you want the custom scrollbar in :\n```html\n\u003clink  rel=\"stylesheet\"  href=\"css/scrollbar_custom.css\"\u003e\n\u003cstyle\u003e\n\t:root{\n\t\t--scrollbar-track: #6e6e6e;\n\t\t--scrollbar-thumb: #202225;\n\t}\n\u003c/style\u003e\n```\nAnd that's it.\n\n### Customization\n\nYou can simply change the scrollbar color with ```--scrollbar-track``` and ```--scrollbar-thumb```. But for more modifications you can modify ```scrollbar_custom.css```.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feliott-srl%2Fweb-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feliott-srl%2Fweb-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feliott-srl%2Fweb-tools/lists"}