Online Tools 3.0

Developer
Boaz
Size
5,929 Kb
Views
8,096
  1. Online Tools 3.0 Previews
  2. Online Tools 3.0 HTML Codes
  3. Online Tools 3.0 CSS Codes
  4. Online Tools 3.0 JS Codes

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 Previews
IQ Test

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
Online Tools 3.0 - Script Codes
Home Page Home
Developer Boaz
Username Aniboaz
Uploaded December 16, 2022
Rating 3
Size 5,929 Kb
Views 8,096
Do you need developer help for Online Tools 3.0?

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!

Boaz (Aniboaz) Script Codes
Name
SVG animations for portfolio
A Pen by Boaz
Top nav menu test
Background patterns
Kanban Board
New navbar
Gofen
Digital assets
Online Tools
New website header
Create amazing SEO content with AI!

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!