2019-10-15 22:42:47 -04:00
< head >
< script async src = "https://www.googletagmanager.com/gtag/js?id=UA-135255146-3" > < / script > < script > window . dataLayer = window . dataLayer || [ ] ; function gtag ( ) { dataLayer . push ( arguments ) ; } gtag ( 'js' , new Date ( ) ) ; gtag ( 'config' , 'UA-135255146-3' ) ; < / script >
< title > Online Icon Kit< / title >
2020-09-23 09:26:41 -04:00
< link href = "../css/iconkit.css?v=1" type = "text/css" rel = "stylesheet" >
2019-10-15 22:42:47 -04:00
< meta name = "viewport" content = "width=1024" >
< meta property = "og:description" content = "Build and save your very own Geometry Dash icons, right from the internet!" >
< meta property = "og:title" content = "Geometry Dash Online Icon Kit" >
< meta property = "og:type" content = "website" >
< meta name = "og:image" itemprop = "image" content = "../iconkitbuttons/iconkit.png" >
< meta name = "theme-color" content = "#CCFF55" >
< link rel = "icon" href = "../assets/icon.png" >
< / link >
< / head >
2020-09-24 22:07:53 -04:00
< body class = "iconscroll" style = "background-image: linear-gradient(rgb(139, 139, 139), rgb(100, 100, 100));" onbeforeunload = "sessionStorage.setItem('prevUrl', window.location.href)" >
2019-10-15 22:42:47 -04:00
< div class = "center hidden" > < br >
2020-09-22 18:37:21 -04:00
< div class = "popup" id = "steal" >
< div class = "brownbox bounce center supercenter" style = "height: 350px; width: 700px" >
< h1 class = "center gold" style = "margin-top: 10px" > Copy Icon< / h1 >
< input type = "text" name = "gdbrowser" id = "playerName" autocomplete = "off" placeholder = "Username" maxlength = "32" style = "height: 58px; width: 90%; text-align: center; margin-top: 25px; margin-bottom: 5px;" >
< div id = "copyForms" > < / div >
< img src = "../assets/ok.png" height = 55px; class = "postButton gdButton center" style = "margin-top: 30px" id = "fetchUser" >
< img class = "gdButton xButton" src = "../assets/close.png" width = "70px" onclick = "$('#steal').hide()" >
< / div >
< / div >
2020-10-21 21:09:43 -04:00
< div class = "popup" data-nosnippet id = "settings" >
2020-09-22 18:37:21 -04:00
< div class = "brownbox bounce center supercenter" style = "height: 350px; width: 720px" >
< h1 class = "center gold" style = "margin-top: 10px; margin-bottom: 20px;" > Settings< / h1 >
< div class = "inline" > < h2 class = "help" help = "Removes the clear dome on top of UFOs" > < input type = "checkbox" class = "iconsetting" id = "box-ufo" > < label for = "box-ufo" class = "gdcheckbox gdButton" > < / label > No UFO Dome< / h2 > < / div >
< div class = "inline" > < h2 class = "help" help = "Forces a square aspect ratio on generated icons" > < input type = "checkbox" class = "iconsetting" id = "box-square" > < label for = "box-square" class = "gdcheckbox gdButton" > < / label > Square Image< / h2 > < / div >
< br >
< div class = "inline" style = "margin-top: 12px" > < h2 class = "help" help = "Adds a third color option for normally non-colorable details" > < input type = "checkbox" class = "iconsetting" id = "box-col3" > < label for = "box-col3" class = "gdcheckbox gdButton" > < / label > Color 3< / h2 > < / div >
< br >
< p class = "white" id = "helpText" style = "font-size: 24px; margin-bottom: 0;" > (Hover over a setting for information)< / p >
< img src = "../assets/ok.png" height = 55px; class = "postButton gdButton center" style = "margin-top: 30px" onclick = "$('#settings').hide()" >
< img class = "gdButton xButton" src = "../assets/close.png" width = "70px" onclick = "$('#settings').hide()" >
< / div >
< / div >
2019-10-19 00:27:17 -04:00
< img id = "iconkitlogo" src = "../assets/iconkit.png" height = 50px; style = "margin: 7px 0;" > < br > < br >
2019-10-15 22:42:47 -04:00
< img id = "loading" src = "../assets/loading.png" class = "spin" height = 95px; style = "margin: auto auto 25px auto" >
2020-09-24 22:07:53 -04:00
< img id = "result" src = "" download = "" >
2019-10-15 22:42:47 -04:00
< hr id = "gdfloor" >
< div id = "menuButtons" style = "height: 65px; margin: 0 0 15 0;" >
2020-09-22 18:37:21 -04:00
< button class = "blankButton menuButton" id = "customColors" title = "Settings" onclick = "$('#settings').show()" > < img src = "../iconkitbuttons/cog.png" width = 55px > < / button >
2020-09-24 22:07:53 -04:00
< button class = "blankButton menuButton" id = "downloadIcon" title = "Download icon" > < a id = "downloadLink" download = "cube_1.png" href = "" > < img src = "../iconkitbuttons/save.png" width = 55px > < / a > < / button >
2020-09-23 09:26:41 -04:00
< button class = "blankButton menuButton" id = "generateIcon" title = "Generate icon" > < img src = "../iconkitbuttons/generate.png" width = 70px > < / button >
< button class = "blankButton menuButton" id = "getUserIcon" title = "Get player icon" > < img src = "../iconkitbuttons/steal.png" width = 55px > < / button >
2020-09-22 18:37:21 -04:00
< button class = "blankButton menuButton" id = "randomIcon" title = "Random Icon" > < img src = "../iconkitbuttons/shuffle.png" width = 55px > < / button >
2019-10-15 22:42:47 -04:00
< / div >
< div id = "iconTabs" > < / div > < br >
< div id = "iconKitParent" class = "iconKit" >
< div id = "iconprogressbar" >
< div id = "iconloading" > < / div >
< / div >
< / div > < br >
< div id = "colors" class = "iconKit" >
< div id = "col1" > < / div >
< div id = "col2" > < / div >
2020-09-22 18:37:21 -04:00
< div style = "margin-top: 12px" id = "col3" > < / div >
2019-10-15 22:42:47 -04:00
< / div > < br >
2020-09-22 18:37:21 -04:00
< p style = "color: rgb(20, 20, 20); margin-top: 3px" > Created by < a target = _blank href = "https://gdcolon.com" > GD Colon< / a > • All sprites/assets belong to < a target = _blank href = "http://robtopgames.com" > RobTop Games< / a > • < a target = _blank href = "https://gdbrowser.com/api#icons" > API Reference< / a > < / p >
2019-10-15 22:42:47 -04:00
< div style = "position:absolute; top: 2%; left: -1.95%; width: 10%; height: 25%; pointer-events: none" >
< img class = "gdButton" style = "pointer-events: all" id = "backButton" src = "../assets/back.png" height = "30%" onclick = "backButton()" >
< / div >
< / div >
< / body >
2019-10-21 08:20:25 -07:00
< script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < / script >
< script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" > < / script >
< script type = "text/javascript" src = "https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js" > < / script >
2019-10-15 22:42:47 -04:00
< script type = "text/javascript" >
$('#loading').hide();
$('.hidden').show();
let mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
2019-12-12 16:09:41 -05:00
let forms = ['cube', 'ship', 'ball', 'ufo', 'wave', 'robot', 'spider', 'swing']
2019-10-15 22:42:47 -04:00
let currentForm = 'cube'
2020-09-22 18:37:21 -04:00
let formCopy = 'cube'
2019-12-12 17:06:09 -05:00
let beenThereDoneThat = false
2019-10-15 22:42:47 -04:00
let selectedIcon = 1
let selectedForm = 'cube'
let selectedCol1 = 0
let selectedCol2 = 3
2020-09-22 18:37:21 -04:00
let selectedCol3 = null
2019-10-15 22:42:47 -04:00
let enableGlow = 0
let imagesLoaded = 0
let totalLoaded = 0
2019-12-12 17:06:09 -05:00
if (mobile) $('#logo').attr('width', '80%');
2019-10-15 22:42:47 -04:00
2020-09-23 09:26:41 -04:00
let iconSettings = (localStorage.iconkit || "").split(",")
2020-09-22 18:37:21 -04:00
iconSettings.forEach(x => {
$(`#box-${x}`).prop('checked', true)
})
2020-09-27 22:22:47 -04:00
if (iconSettings.includes("square")) $("#result").addClass("squareIcon")
else $("#result").removeClass("squareIcon")
2020-09-22 18:37:21 -04:00
function capitalize(str) { return str[0].toUpperCase() + str.substr(1) }
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min }
function row3() { if (iconSettings.includes("col3")) $('#col3').show(); else $('#col3').hide() }
row3()
forms.forEach(form => {
$("#iconTabs").append(`< button form = "${form}" class = "blankButton iconTabButton" > < img src = "../iconkitbuttons/${form}_off.png" width = 50px > < / button > `)
$("#copyForms").append(`< button form = "${form}" class = "blankButton copyForm" > < img src = "../iconkitbuttons/${form}_off.png" width = 50px > < / button > `)
})
2020-01-12 00:20:57 -05:00
$("#iconTabs").append(`< button title = "Glow" class = "blankButton glowToggle" id = "glowbtn" > < img id = "glow" src = "../iconkitbuttons/streak_off.png" width = 50px > < / button > `)
2019-10-15 22:42:47 -04:00
forms.forEach(form => {$("#iconKitParent").append(`< div id = "${form}s" > < / div > `)})
fetch('./api/icons').then(res => {
return (res.json())})
.then(iconArray => {
function filterIcon(name) { return iconArray.filter(x => x.startsWith(name)).sort(function (a,b) {return a.replace(/[^0-9]/g, "") - b.replace(/[^0-9]/g, "");})}
function appendIcon(form, formName) {
2020-09-24 22:07:53 -04:00
imagesLoaded = 0; totalLoaded = 0
$('#' + formName + 's').append('< br > ')
form.forEach(function (i, p) {
if (p != 0 & & p % 12 == 0) $('#' + formName + 's').append('< br > ')
$('#' + formName + 's').append(`< button num = "${p + 1}" form = "${formName}" class = "blankButton iconButton" id = "${formName}-${p + 1}" > < img src = "../gdicon/${i}" width = "50px" title = "${capitalize(formName)} ${formName == " cube " & & p + 1 = = form . length ? 0 : p + 1 } " > < / button > `)})
$('#' + formName + 's').imagesLoaded(function() {}).progress(function() {
imagesLoaded += 1;
totalLoaded = imagesLoaded / $('#' + formName + 's').find('img').length * 100
$('#iconloading').css('width', `${totalLoaded}%`)
}
)}
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
let cubes = filterIcon('cube');
let sample = JSON.parse(iconArray.find(x => x.startsWith("[")));
enableGlow = sample[3] * 2;
[selectedIcon, selectedCol1, selectedCol2] = sample;
2019-10-15 22:42:47 -04:00
cubes.push(cubes.shift())
$('body').imagesLoaded(function () {
appendIcon(cubes, "cube")
2020-09-24 22:07:53 -04:00
$(`[num="${sample[0]}"][form="cube"]`).addClass('iconSelected');
2019-10-15 22:42:47 -04:00
})
2020-09-22 18:37:21 -04:00
filterIcon('color').forEach(function (n, p) {
for (i=1; i< =3; i++) {
$(`#col${i}`).append(`< button col = ${p} class = "blankButton color${i}" title = "Color ${p}" id = "col${i}-${p}" > < img src = "../gdicon/color_${p}.png" width = 50px > < / button > `)
}
})
2019-10-15 22:42:47 -04:00
$('#col1').append("< span style = 'min-width: 10px' > < / span > ")
$('#col2').append("< span style = 'min-width: 10px' > < / span > ")
2020-09-22 18:37:21 -04:00
$('#col3').append("< span style = 'min-width: 10px' > < / span > ")
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
$(`.color1[col="${sample[1]}"]`).addClass('iconSelected');
$(`.color2[col="${sample[2]}"]`).addClass('iconSelected');
2020-09-22 18:37:21 -04:00
$('.color3[col="12"]').addClass('iconSelected');
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
$("#generateIcon").trigger('click')
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
$(document).on('click', '.iconTabButton', function () {
var form = $(this).attr('form')
var forms = '#' + form + 's'
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
currentForm = form
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
$('.iconTabButton').each(function(x, y) {
$(this).children().first().attr('src', $(this).children().first().attr('src').replace('_on', '_off'))})
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
var img = $(this).children().first()
img.attr('src', img.attr('src').replace('_off', '_on'));
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
$('#iconKitParent').each(function(x, y) {
$(this).children().not('#iconprogressbar').hide()})
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
if ($(forms).html() == "") appendIcon(filterIcon(form), form)
$(forms).show()
2019-10-15 22:42:47 -04:00
})
$('#iconTabs').find('.iconTabButton').first().children().first().attr('src', $('.iconTabButton').first().children().first().attr('src').replace('_off', '_on'))
2020-09-22 18:37:21 -04:00
$("#randomIcon").click(function() {
selectedForm = forms[Math.floor(Math.random() * forms.length)]
selectedIcon = randInt(0, iconArray.filter(x => x.startsWith(selectedForm)).length)
selectedCol1 = randInt(0, iconArray.filter(x => x.startsWith("color")).length) - 1
selectedCol2 = randInt(0, iconArray.filter(x => x.startsWith("color")).length) - 1
selectedCol3 = null
enableGlow = randInt(0, 2) == 1 ? 1 : 0 // 1 in 3 chance of glow
$('#glow').attr('src', '../iconkitbuttons/streak_off.png')
$(`.iconTabButton[form=${selectedForm}]`).trigger('click')
$(`#${selectedForm}-${selectedIcon}`).trigger('click')
$(`#col1-${selectedCol1}`).trigger('click')
$(`#col2-${selectedCol2}`).trigger('click')
2020-09-23 09:26:41 -04:00
$('#col3-12').trigger('click')
2020-09-22 18:37:21 -04:00
if (enableGlow == 1) $("#glow").attr('src', $("#glow").attr('src').replace('_off', '_on'))
else $("#glow").attr('src', $("#glow").attr('src').replace('_on', '_off'))
$("#generateIcon").trigger('click')
})
2019-10-15 22:42:47 -04:00
})
$(document).on('click', '.glowToggle', function () {
if (enableGlow) {
$("#glow").attr('src', $("#glow").attr('src').replace('_on', '_off'))
enableGlow = 0;
}
else {
$("#glow").attr('src', $("#glow").attr('src').replace('_off', '_on'))
enableGlow = 1;
}
})
2020-09-22 18:37:21 -04:00
$(document).on('click', '.copyForm', function () {
$('.copyForm').each(function(x, y) {$(this).children().first().attr('src', $(this).children().first().attr('src').replace('_on', '_off'))})
formCopy = $(this).attr('form')
let src = $(this).children().first().attr('src')
$(this).children().first().attr('src', src.replace('_off', '_on'))
})
2019-10-15 22:42:47 -04:00
$(document).on('click', '.iconButton', function () {
$(".iconButton").removeClass("iconSelected");
$(this).addClass('iconSelected');
selectedIcon = $(this).attr('num');
selectedForm = $(this).attr('form');
if (selectedIcon == 143) selectedIcon = 0;
})
$(document).on('click', '.color1', function () {
$(".color1").removeClass("iconSelected");
$(this).addClass('iconSelected');
selectedCol1 = $(this).attr('col');
})
$(document).on('click', '.color2', function () {
$(".color2").removeClass("iconSelected");
$(this).addClass('iconSelected');
selectedCol2 = $(this).attr('col');
})
2020-09-22 18:37:21 -04:00
$(document).on('click', '.color3', function () {
$(".color3").removeClass("iconSelected");
$(this).addClass('iconSelected');
selectedCol3 = $(this).attr('col');
if (selectedCol3 == 12) selectedCol3 = null
})
2019-10-15 22:42:47 -04:00
$("#generateIcon").click(function () {
$("#loading").show()
$("#result").hide()
2020-09-22 18:37:21 -04:00
let noDome = selectedForm == "ufo" & & iconSettings.includes("ufo")
let square = iconSettings.includes("square")
2020-09-24 22:07:53 -04:00
let finalURL = `../icon/icon?icon=${selectedIcon}& form=${selectedForm}${noDome ? "& topless=1" : ""}& col1=${selectedCol1}& col2=${selectedCol2}${iconSettings.includes("col3") & & selectedCol3 ? `& col3=${selectedCol3}` : ""}${enableGlow > 0 ? "& glow=1" : ""}${square ? "& size=auto" : ""}`
2020-09-22 18:37:21 -04:00
$("#result").attr('src', finalURL).attr('download', `${selectedForm}_${selectedIcon}.png`)
$("#downloadLink").attr('href', finalURL).attr('download', `${selectedForm}_${selectedIcon}.png`)
2020-09-24 22:07:53 -04:00
if (enableGlow == 2) enableGlow = 0
2019-10-15 22:42:47 -04:00
})
$('#result').on('load', function() {
$("#loading").hide()
$("#result").show()
2020-09-24 22:07:53 -04:00
if (enableGlow > 1) $("#gdfloor").css('margin-top', '-3px')
2019-10-15 22:42:47 -04:00
else $("#gdfloor").css('margin-top', '0px')
})
2020-09-22 18:37:21 -04:00
$("#getUserIcon").click(function() {
$(`.copyForm[form=${currentForm}]`).trigger('click')
$('#steal').show();
$('#playerName').focus()
})
2019-10-15 22:42:47 -04:00
$("#fetchUser").click(function () {
2020-09-22 18:37:21 -04:00
let user = $("#playerName").val()
if (!user || !user.length) return $("#steal").hide()
let iconURL = `../icon/${user}?form=${formCopy}`
$(`.iconTabButton[form=${formCopy}]`).trigger('click')
$("#steal").hide()
2019-10-15 22:42:47 -04:00
$("#loading").show()
$("#result").hide()
2020-09-22 18:37:21 -04:00
$("#result").attr('src', iconURL).attr('download', `${user}_${formCopy}.png`)
$("#downloadLink").attr('href', iconURL).attr('download', `${user}_${formCopy}.png`)
2019-10-15 22:42:47 -04:00
$('#glow').attr('src', '../iconkitbuttons/streak_off.png')
enableGlow = 0
2019-10-19 00:27:17 -04:00
fetch('../api/profile/' + user).then(res => res.json())
2019-10-15 22:42:47 -04:00
.then(info => {
2020-09-22 18:37:21 -04:00
$(`#${formCopy}-${info[formCopy == "cube" ? "icon" : formCopy] || 1}`).trigger('click')
2019-10-15 22:42:47 -04:00
$(`#col1-${info.col1}`).trigger('click')
$(`#col2-${info.col2}`).trigger('click')
2020-09-22 18:37:21 -04:00
$(`#col3-12`).trigger('click')
if (info.glow) $('#glowbtn').trigger('click')
2019-10-15 22:42:47 -04:00
})
})
document.getElementById("downloadIcon").onmousedown = function(event) {
if (event.which == 3) {
alert("URL copied to clipboard!");
var temp = $("< input > ");
$("body").append(temp);
temp.val('https://gdbrowser.com' + $('#result').attr('src').slice(2)).select();
document.execCommand("copy"); temp.remove();
}
}
function backButton() {
if (window.history.length > 1 & & document.referrer.startsWith(window.location.origin)) window.history.back()
window.location.href = "../../../../../"
}
2020-09-22 18:37:21 -04:00
let hoverText = $('#helpText').html()
$(".help").hover(function() {
$(this).css('color', 'rgba(200, 255, 255)')
$('#helpText').html($(this).attr('help'))
}, function() {
$(this).css('color', 'white')
$('#helpText').html(hoverText)
})
$(document).on('change', '.iconsetting', function (e) {
let checkedSettings = []
$('.iconsetting:checkbox:checked').each((i, x) => { checkedSettings.push(x.id.split('-')[1]) })
iconSettings = checkedSettings
2020-09-27 22:22:47 -04:00
if (iconSettings.includes("square")) $("#result").addClass("squareIcon")
else $("#result").removeClass("squareIcon")
2020-09-22 18:37:21 -04:00
localStorage.iconkit = checkedSettings.join(",")
row3()
})
2019-10-15 22:42:47 -04:00
$(document).keydown(function(k) {
2020-09-22 18:37:21 -04:00
if (k.keyCode == 13) {
if ($("#steal").is(":visible")) $("#fetchUser").trigger('click')
2020-09-23 09:26:41 -04:00
else if ($(".popup").is(":visible")) return
2020-09-22 18:37:21 -04:00
else $("#generateIcon").trigger('click')
}
if (k.keyCode == 27) { //esc
if ($(".popup").is(":visible")) return $('.popup').hide()
2019-10-15 22:42:47 -04:00
k.preventDefault()
$('#backButton').trigger('click')
}
});
2019-10-23 02:54:19 +03:00
2020-09-22 18:37:21 -04:00
$(document).on('click', '.brownbox', function (e) {
e.stopPropagation();
})
$(document).on('click', '.popup', function () {
$('.popup').hide()
})
2019-10-15 22:42:47 -04:00
< / script >
