Skip to content

Commit

Permalink
Updated to Cub's Contraption v1.0.1 release
Browse files Browse the repository at this point in the history
> Added more `meta`s, removed Roboto as loaded font
> Major changes
    1. Made design more flexible
    2. Changed design very much
    3. Coloring of elements now moves around a new variable --theme-color
    4. Improved color accessibility
    5. Changed finishEditing()
> Added "Info", "Share" and "Clear canvas" buttons
> Added option to remove background image
> Added dark mode functionality
> Major changes
    1. Boosted performance
    2. Improved accessibility
    3. Cleaned code
> Changed background-color for PWA
> Totally revamped the service worker
> Updated the webpage for Thumbnail-Maker
  • Loading branch information
mmaismma authored Nov 30, 2020
1 parent c14c3de commit 08a0e20
Show file tree
Hide file tree
Showing 7 changed files with 556 additions and 417 deletions.
138 changes: 99 additions & 39 deletions cubfan135/index.html
Original file line number Diff line number Diff line change
@@ -1,61 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" prefix="og: https://ogp.me/ns#">

<head>
<title>Cub's Contraption by Hermit Tools</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="manifest" href="./manifest.webmanifest" />
<link rel="icon" type="image/png" href="../Resources/Icons/Cub's Head.png" />
<link rel="apple-touch-icon" href="../Resources/Icons/Cub's Head.png" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<meta property="og:site_name" content="Cub's Contraption by Hermit Tools" />
<meta property="og:title" content="Cub's Contraption" />
<title>Cub's Contraption by Hermit Tools | Make thumbnails like cubfan135 in 3 steps</title>

<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="manifest" href="./manifest.webmanifest">

<link rel="icon" type="image/png" href="../Resources/Icons/Cub's Head.png">
<link rel="apple-touch-icon" href="../Resources/Icons/Cub's Head.png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:site_name" content="Cub's Contraption">
<meta property="og:title" content="Cub's Contraption by Hermit Tools | Make thumbnails like cubfan135 in 3 steps">
<meta property="og:type" content="website">
<meta property="og:url" content="https://hermit-tools.github.io/Thumbnail-Maker/cubfan135">
<meta property="og:image" content="https://hermit-tools.github.io/Thumbnail-Maker/Resources/Icons/Cub's%20Head.png">
<meta name="description"
content="An automated and smart thumbnail maker for cubfan135's HermitCraft videos. Crafted with love from Hermit Tools." />
<meta name="theme-color" content="#037de1" />
content="An automated and smart thumbnail maker for cubfan135's Hermitcraft videos. Create and download YouTube thumbnails like cubfan135 in just three steps with this PWA which can be installed and even runs offline. Crafted with love from Hermit Tools.">
<meta name="og:description"
content="An automated and smart thumbnail maker for cubfan135's HermitCraft videos. Crafted with love from Hermit Tools." />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="https://hermit-tools.github.io/Thumbnail-Maker/cubfan135" />
content="An automated and smart thumbnail maker for cubfan135's Hermitcraft videos. Create and download YouTube thumbnails like cubfan135 in just three steps with this PWA which can be installed and even runs offline. Crafted with love from Hermit Tools.">
<meta name="theme-color" content="#037de1">
</head>

<body>
<div id="preview-area">
<script>
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
darken('dark', false);
}

// Set Theme If Exists
if (localStorage.getItem("HTCC-theme")) {
if (localStorage.getItem("HTCC-theme") === "dark") {
darken();
} else {
darken('light');
}
} else {
// Set Theme To Current theme
document.classList.contains('dark') ? darken() : darken('light')
}

function darken(state = "dark", setLocalStorage = true) {
if (state === 'dark') {
if (!document.body.classList.contains('dark')) {
document.body.classList.toggle('dark')
}
} else {
if (document.body.classList.contains('dark')) {
document.body.classList.toggle('dark')
}
}
// Check Theme and Save in Local Storage
if (setLocalStorage) {
if (document.body.classList.contains("dark")) {
localStorage.setItem("HTCC-theme", "dark")
} else {
localStorage.setItem("HTCC-theme", "light")
}
}
}
</script>

<section id="preview-area">
<div id="preview-text">
<i class="material-icons md-48">remove_red_eye</i>Preview
<i class="material-icons">remove_red_eye</i> Preview
</div>
<canvas width="1920" height="1080" id="canvas">

<canvas width="1920" height="1080" id="canvas" aria-label="A preview area of your thumbnail">
Your browser does not support the canvas element. Consider upgrading to a newer browser.
</canvas>
</div>
</section>

<main id="form">
<hr id="line" />
<span id="bgArea">
<label id="bgInputLabel" class="area" for="bgInput" role="button" tabindex="0" title="Choose background image">
<i class="material-icons">publish</i> Choose Background
</label>
<input type="file" accept="image/*" id="bgInput" onchange="process()">
<button class="area" onclick="javascript: bgInput.value = ''; process()" title="Remove background image">
<i class="material-icons">close</i>
</button>
</span>

<label id="bgInputLabel" for="bgInput" title="Choose background image or nothing."><i
class="material-icons md-18">publish</i> Choose Background Image</label>
<input type="file" accept="image/*" onchange="process()" id="bgInput" /><br />
<label for="epNumSelector" style="border: none;width: 100%;">
<input type="text" id="epNumSelector" class="area" autocomplete="off" oninput="process()"
onclick="this.focus();this.select();" title="Enter episode number here. It can accept number, text or nothing."
placeholder="Enter Episode Number" aria-label="Enter Episode Number">
</label>

<input type="text" title="Enter episode number here. It can accept number, text or nothing." oninput="process()"
onclick="this.focus();this.select();" id="epNumSelector" placeholder="Enter Episode Number"
autocomplete="off" /><br />
<span class="area" id="show-hc-logo" style="cursor: auto;">
<label for="hcLogoToggler" style="cursor: pointer;">Show HC7 Logo:</label>
<input type="checkbox" checked id="hcLogoToggler" class="mdc-switch" onchange="process()">
</span>

<div id="show-hc-logo">
Show HC7 Logo:
<input type="checkbox" checked onchange="process()" id="hcLogoToggler" class="mdc-switch" />
</div>

<a style="text-decoration: none; margin: 20px" href="#" id="downloader" onclick="finishEditing()"
download="image.png">
<i class="material-icons md-18">get_app</i>Download Thumbnail
<a class="area" href="#" id="downloader" onclick="finishEditing()" style="text-decoration: none;">
<i class="material-icons">get_app</i>Download Thumbnail
</a>

<span id="etc">
<button class="area" onclick="javascript: window.location = 'https\:\/\/github.com/hermit-tools/Thumbnail-Maker'" title="Check out the repository">
<i class="material-icons">info</i>
</button>
<button class="area" onclick="javascript: navigator.share({title: `Cub's Contraption by Hermit Tools`, url: ''})" title="Share Cub's Contraption">
<i class="material-icons">share</i>
</button>
<button class="area" onclick="ctx.clearRect(0, 0, canvas.width, canvas.height)" title="Clear canvas and start over">
<i class="material-icons">backspace</i>
</button>
<button class="area" onclick="darken(document.body.classList.contains('dark') ? 'light' : 'dark')" title="Toggle dark theme">
<i class="material-icons">invert_colors</i>
</button>
</span>
</main>
<div id="downloadShow">Thumbnail downloaded successfully.</div>
<script src="./script.js"></script>
</body>

Expand Down
4 changes: 2 additions & 2 deletions cubfan135/manifest.webmanifest
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"start_url": ".",
"display": "standalone",
"orientation": "portrait",
"background_color": "#037de1",
"background_color": "#fff",
"theme_color": "#037de1",
"description": "Smart thumbnail maker for cubfan135's HermitCraft videos.",
"icons": [{
Expand All @@ -20,4 +20,4 @@
"purpose": "any"
}],
"scope": "."
}
}
110 changes: 69 additions & 41 deletions cubfan135/script.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,40 @@
const bgInput = document.getElementById("bgInput");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const bgInputLabel = document.getElementById("bgInputLabel");
const epNumSelector = document.getElementById("epNumSelector");
const hcLogoToggler = document.getElementById("hcLogoToggler");
const previewText = document.getElementById("preview-text");

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const downloader = document.getElementById("downloader");

// Cookies Stuff
let epNumValueFromCookie;
const hc7Logo = new Image();
hc7Logo.src =
"https://hermit-tools.github.io/Thumbnail-Maker/Resources/Hermitcraft Logos/HC7 Logo.png";
hc7Logo.crossOrigin = "Anonymous";

//Focus Choose Background Label
bgInputLabel.addEventListener("focus", (e) => {
e.preventDefault();
});

//Make Label Interactive
bgInputLabel.addEventListener("keyup", (e) => {
if (e.key === "Enter" || e.key === "Spacebar" || e.key === " ") {
bgInput.click();
}
});


// Cookies Stuff
downloader.addEventListener("click", () => {
document.cookie = `epNumCookie=${epNumSelector.value}`;
document.cookie = `epNumCookie=${epNumSelector.value}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
});

if (document.cookie.length === 0) {
epNumValueFromCookie = "";
epNumSelector.value = "";
} else {
epNumValueFromCookie = document.cookie.split("=")[1];
let epNumValueFromCookie = document.cookie.split("=")[1];
epNumSelector.value = Number(epNumValueFromCookie) + 1;
}

Expand All @@ -29,15 +47,11 @@ if ("serviceWorker" in navigator) {

function addBgImage() {
let bgImage = new Image();
bgImage.addEventListener(
"load",
() => {
ctx.drawImage(bgImage, 0, 0, 1920, 1080);
hcLogo();
episodeNum();
},
false
);
bgImage.onload = () => {
ctx.drawImage(bgImage, 0, 0, 1920, 1080);
hcLogoToggler.checked ? hcLogo() : null
epNumSelector.value.length === 0 ? null : episodeNum()
}
bgImage.src = URL.createObjectURL(bgInput.files[0]);
}

Expand All @@ -55,42 +69,56 @@ function episodeNum() {
ctx.fillText(epNum, 15, 1120);
ctx.strokeText(epNum, 15, 1120);
ctx.restore();

ctx.fill();
ctx.stroke();
}

function hcLogo() {
if (hcLogoToggler.checked) {
let hc7Logo = new Image();
hc7Logo.addEventListener("load", () => {
ctx.drawImage(hc7Logo, 15.7, 40, 1887.5, 244);
});
hc7Logo.src =
"https://hermit-tools.github.io/Thumbnail-Maker/Resources/Hermitcraft Logos/HC7 Logo.png";
hc7Logo.crossOrigin = "Anonymous";
}
ctx.drawImage(hc7Logo, 15.7, 40, 1887.5, 244);
}

function process() {
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (bgInput.files.length != 0) {
addBgImage();
} else {
hcLogo();
episodeNum();
}
ctx.clearRect(0, 0, canvas.width, canvas.height)

bgInput.files.length === 0 ? (
hcLogoToggler.checked ? hcLogo() : null,
epNumSelector.value.length === 0 ? null : episodeNum()
) : addBgImage()
}

function finishEditing() {
const downloadShow = document.getElementById("downloadShow");
downloadShow.style.opacity = "1";
let downloadShow = document.createElement('div');
downloadShow.className = "downloadShow";
downloadShow.textContent = "Your thumbnail will be downloaded."
document.body.appendChild(downloadShow);
setTimeout(() => {
downloadShow.style.opacity = "1"
}, 0)
setTimeout(() => {
downloadShow.style.opacity = "0";
setTimeout(() => {
document.body.removeChild(downloadShow)
}, 100)
}, 5000);
downloader.download = `Ep${epNumSelector.value} HC7 Cub's Contraption.jpg`;
downloader.href = canvas
.toDataURL("image/png")
.replace("data:image/png", "data:concorp>sahara");

downloader.download = `Ep${epNumSelector.value} HC7 - Cub's Contraption.jpg`;
downloader.href = canvas.toDataURL("image/png")
}

let keyCheat = [];
let darkText = "invert"
let oldTime = Date.now();

document.onkeydown = (e) => {
if (darkText.indexOf(e.key.toLowerCase()) !== -1) {
let newTime = Date.now();
if (newTime - oldTime > 1000) {
keyCheat = []
}
oldTime = newTime;

keyCheat.push(e.key.toLowerCase())
keyCheat.join('') === "invert" ? (darken(document.body.classList.contains("dark") ? "light" : "dark"), keyCheat = []) : null
}
}
51 changes: 37 additions & 14 deletions cubfan135/service-worker.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,43 @@
self.addEventListener("install", function(event) {
event.waitUntil(
caches.open("Cub'sContraption").then(function(cache) {
return cache.addAll([
"./style.css",
"./script.js",
"../Resources/Hermitcraft Logos/HC7 Logo.png",
"https://fonts.googleapis.com/icon?family=Material+Icons"
]);
})
);
});
function precache() {
caches.open("CubsContraption").then(function (cache) {
return cache.addAll([
"./style.css",
"./script.js",
"./index.html",
"./manifest.webmanifest",
"../Resources/Hermitcraft Logos/HC7 Logo.png",
"https://fonts.googleapis.com/icon?family=Material+Icons"
]);
})
}

function fromCache(request) {
return caches.open("CubsContraption").then(function (cache) {
return cache.match(request).then(function (matching) {
return matching || Promise.reject('no-match');
});
});
}

function update(request) {
return caches.open("CubsContraption").then(function (cache) {
return fetch(request).then(function (response) {
return cache.put(request, response);
});
});
}

self.addEventListener("install", function (event) {
console.log("SW is installing.");
event.waitUntil(precache())
})

self.addEventListener("activate", event => {
console.log("Inside the activate handler:", event);
});

self.addEventListener("fetch", event => {
console.log("Inside the fetch handler:", event);
});
console.log("SW is being fetched.");
event.respondWith(fromCache(event.request));
update(event.request);
});
Loading

0 comments on commit 08a0e20

Please sign in to comment.