Online Tools 3.0
How do I make an online tools 3.0?
A collection of online tools stacked in isotope cards. this version takes the data from a public google sheet. What is a online tools 3.0? How do you make a online tools 3.0? This script and codes were developed by Boaz on 16 December 2022, Friday.
Online Tools 3.0 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Online Tools 3.0</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Chonburi'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lemonada'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Abril+Fatface'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="" rel="stylesheet">
<div class="header"><button class="button left"> <label for="navigation">
<i class="material-icons">tune</i> </label> </button> <h1><span class="material-icons">build</span> Online free tools</h1><small> Version<sup> 3.0 </sup>created & curated by <a href="https://www.aiboaz.co.il">Boaz</a></small></div>
<div class="menudiv"> <menu class="filters"> <p><input type="text" class="quicksearch" placeholder="Search" /><button class="button"><i class="material-icons">search</i></button></p> <div class="button-group" data-filter-group="category"><span>categories:</span> <button class="button is-checked" data-filter="">any</button> <button class="button" data-filter=".color"> <i class="material-icons">color_lens</i><span>color</span></button> <button class="button" data-filter=".typography"><i class="material-icons">text_fields</i><span>typography</span></button> <button class="button" data-filter=".icons"> <i class="material-icons">star</i><span>icons</span></button> <button class="button" data-filter=".images"> <i class="material-icons image">image</i><span>Images</span></button> <button class="button" data-filter=".code"> <i class="material-icons code">code</i><span>code</span></button> <button class="button" data-filter=".ux"> <i class="material-icons">format_shapes</i><span>User experiance</span></button> <button class="button" data-filter=".inspiration"> <i class="material-icons inspiration">lightbulb_outline</i><span>inspiration \ productivity</span></button> </div> <div class="button-group" data-filter-group="usage"><span>Usage:</span> <button class="button is-checked" data-filter="">any</button> <button class="button" data-filter=".library"><i class="material-icons">book</i>library</button> <button class="button" data-filter=".tool"><i class="material-icons use Tool">build</i>Tool </button> <button class="button" data-filter=".generator"><i class="material-icons use generator">flash_on</i>generator </button> <button class="button" data-filter=".create"> <i class="material-icons use create">create</i>create<span> and edit</span> </button> </menu> </div> <ol id="list" class="results"> </ol> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/isotope.pkgd.min.js'></script>
<script src='http://npmcdn.com/imagesloaded@4/imagesloaded.pkgd.js'></script> <script src="js/index.js"></script>
</body>
</html>
Online Tools 3.0 - Script Codes CSS Codes
/*todo
change filters to sidemenu
*/
.card { overflow: hidden; display: inline-block; background-color: ghostwhite; position: relative; padding: 12px 25px; margin: 5px; width: 250px; height: auto; top: 0; left: 0; border-radius: 2px; box-shadow: 0 1px 2px rgba(43, 59, 93, .29); -webkit-transition: -webkit-transform .3s ease-in-out, box-shadow .3s ease-in-out; transition: transform .3s ease-in-out, box-shadow .3s ease-in-out, position .3s cubic-bezier(.4, .2, .5, 1.4); z-index: 1;
}
.card:hover,
button:hover { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.3);
}
div[class^="grade"] { display: block; position: relative; right: -55px; bottom: 45px; border-radius: 45px; /* padding: 11px; width: 36px; height: 36px; background: ghostwhite; */ opacity: 0.1; float: right; line-height: 16px; box-sizing: border-box; font-weight: 600; font-size: 170px; z-index: -1; font-family: 'Lemonada', cursive
}
.gradeH { color: #4bc87f;
}
.gradeM { color: Orange;
}
.gradeL { color: #DA4949;
}
/*styles*/
.card a { color: inherit; text-decoration: none;
}
.header h1,
h2 { font-family: 'Abril Fatface', 'Suez One', cursive; size: 20px; color: #334854;
}
.header { padding: 15px 20px 20px 10px; display: block; background-color: #bcbcbc; color: ; position: fixed; overflow: hidden; left: 0px; top: 0px; right: 0px; height: 40px; -webkit-box-shadow: rgba(0, 0, 0, .1) 0 1px 0; text-align: center; width: 100%; z-index: 9;
}
.header a { color: orange;
}
.card p { font-family: roboto, sans; font-size: 13px; color: #aab8c2; padding-bottom: 12px; border-bottom: 1px solid #aab8c2;
}
.card .material-icons { color: #aab8c2; font-size: 18px; display: inline-block;
}
body { background: #eeeeee;
}
#list { top: 80px; transition: margin .5s ease-in-out;
}
#list,
menu,
h1 { margin: 0 auto; width: 100%; max-width: 1300px; verticle-align: top; padding: 0 3%
}
/*when filters areopen*/
.menudiv.open { left: 0; top: 70px; overflow-y: scroll; padding-top: 70px;
}
#list.mini { right: 0; padding-right: 0; margin-right: 0; margin-left: 350px;
}
.menudiv { transition: left .5s ease-in-out, top .5s ease-in-out; position: fixed; z-index: 2; top: 0; left: -120%; font-size: 12px; background: black; height: 100%; max-width: 320px; padding: 12px; box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
}
.button-group { display: inline-block; max-width: 480px; width: 0 auto; padding: 12px;
}
menu .material-icons { color: grey; display: inline-block; padding: 6px 8px 0 0; line-height: 0.2
}
img.favico { display: inline-block; width: 16px; float: right; padding: 5px 0 0 1rem;
}
button { background-color: #fff; border: 0; border-radius: 5px; color: blue; cursor: pointer; display: inline-block; font: Roboto, sans-serif; height: 36px; margin: 5px; min-width: 36px; outline: 0; overflow: hidden; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color .2s, box-shadow .2s; vertical-align: middle; white-space: nowrap; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); padding: 8px 16px;
}
button.is-checked { background-color: #F36B6B; color: white; border: 1px solid white; box-shadow: 0 0 0 0 rgba(0, 0, 0, .26);
}
button.is-checked>* { color: white;
}
.left { float: left;
}
/*category icons*/
.card a:after { color: #aab8c2; display: inline-block; position: relative; left: 0; bottom: 0; font-family: 'Material Icons'; font-style: normal; font-weight: 400;
}
.images a:after { content: 'image';
}
.color a:after { content: 'color_lens';
}
.icons a:after { content: 'star';
}
.code a:after { content: 'code';
}
.inspiration a:after { content: 'lightbulb_outline';
}
.typography a:after { content: 'text_fields';
}
.ux a:after { content: 'format_shapes';
}
/*category icons*/
.card a:before { color: #aab8c2; font-size: 16px; display: inline; right: 228px; position: absolute; bottom: 15px; font-family: 'Material Icons'; z-index: 2; font-style: normal; font-weight: 400;
}
.library a:before { content: 'book';
}
.generator a:before { content: 'flash_on';
}
.tool a:before { content: 'build';
}
.create a:before { content: 'create';
}
/*more colors*/
ul .card:nth-child(odd) h2 { color: #1D2B53;
}
.filters p { max-width: 90%;
}
.filters p button { border-radius: 50px; width: 44px; padding: 15px 12px; height: 44px;
}
.button.typing { box-shadow: 0 0 5px 10px rgba(243, 107, 107, 0.8);
}
.filters { font-family: sans-serif; color: salmon
}
.quicksearch { display: inline-block; margin: 0em; max-width: 190px; width: 100%; -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; outline: none; -webkit-tap-highlight-color: salmon; line-height: 1.2142em; padding: 1em; margin: 1rem 0 1em 1em; background: #ffffff; border: 1px solid rgba(34, 36, 38, 0.15); color: salmon; border-radius: 4px; -webkit-transition: box-shadow 0.1s ease, border-color 0.1s ease; transition: box-shadow 0.1s ease, border-color 0.1s ease; box-shadow: none; z-index: 1;
}
input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%;
}
.button-group .button { display: flex;
}
.button-group .button>span { display: inline;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button { display: none;
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) { .menudiv.open { width: 100%; height: auto; } .quicksearch { display: inline-block; margin: 0em; max-width: 650px; } .button-group .button { display: inline-block; } .button-group .button>span { display: none }
}
Online Tools 3.0 - Script Codes JS Codes
// ID of the Google Spreadsheet var spreadsheetID = "1P9eq5Mco0cg7h5DZRaxNt45o5r5TS-7NJlqOKXJbG1c"; // Make sure it is public or set to Anyone with link can view var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json"; $.getJSON(url, function(data) { var entry = data.feed.entry; $(entry).each(function(){ // Column names are name, age, etc. $('.results').prepend('<li class="card '+this.gsx$category.$t+' '+this.gsx$usage.$t+'"> <a href="'+this.gsx$url.$t+'">'+'<img class="favico" src="http://favicon.yandex.net/favicon/'+this.gsx$url.$t+'"><h2>'+this.gsx$title.$t+'</h2><p>'+this.gsx$descreption.$t+'</p>'+'<div class="grade">'+this.gsx$grade.$t+'</div>'+'</a></li>'); }); });
// external js: isotope.pkgd.js
$( document ).ajaxComplete(function() {
// Or, hide them
$("img").error(function() { $(this).hide();
});
$('.header .button').on('click', function() { $('.header .button').toggleClass('is-checked') $('.menudiv').toggleClass('open') $('#list').toggleClass('mini') });
// quick search regex
var qsRegex;
var buttonFilter;
//favico
// init Isotope
var $grid = $('#list').isotope({ itemSelector: '.card', layoutMode: 'masonry', filter: function() { var $this = $(this); var searchResult = qsRegex ? $this.text().match( qsRegex ) : true; var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true; return searchResult && buttonResult; }
}); $('.filters').on('click', '.button', function() { buttonFilter = $( this ).attr('data-filter'); $grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $container.isotope(); }) ); // change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); });
}); //todo
$('.quicksearch').keyup(function() { $('.filters p button').addClass('typing').delay(1000).queue(function(next){ $(this).removeClass("typing"); next();
}); });
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) { var timeout; return function debounced() { if ( timeout ) { clearTimeout( timeout ); } function delayed() { fn(); timeout = null; } setTimeout( delayed, threshold || 100 ); };
}
});
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } }
}
function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); }
}
function faviconize() { if (!document.getElementsByTagName) return false; if (!document.createElement) return false; var links = document.getElementsByTagName("a"); for (var j=0; j<links.length; j++) { var hoststring = /^http:/; var hrefvalue = links[j].getAttribute("href",2); if (hrefvalue.search(hoststring) != -1) { var domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/); domain = RegExp.$2; var cue = document.createElement("img"); cue.className = "faviconimg"; var cuesrc = "http://"+domain+"/favicon.ico"; cue.setAttribute("src",cuesrc); cue.onerror = function () { this.src = "external.gif"; } insertAfter(cue,links[j]); } }
}$( document ).ajaxComplete(function() {
//addLoadEvent(faviconize);
});
![Online Tools 3.0 - Script Codes](http://shots.codepen.io/Aniboaz/pen/VpGyME-512.jpg)
Developer | Boaz |
Username | Aniboaz |
Uploaded | December 16, 2022 |
Rating | 3 |
Size | 5,929 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by Boaz | 10,180 Kb |
Background patterns | 3,347 Kb |
Gofen | 8,745 Kb |
Online Tools | 7,134 Kb |
Digital assets | 1,706 Kb |
Online Tools 2.0 | 8,379 Kb |
Kanban Board | 8,227 Kb |
New navbar | 6,055 Kb |
Top nav menu test | 5,620 Kb |
SVG animations for portfolio | 5,505 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS Heart Loaders | Nourabusoud | 2,161 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Basic template | Tomcat | 1,675 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
Getting Started | Viblast | 1,500 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Flex Table | Simeonoff | 4,059 Kb |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!