styleguide: move scripts, add mobile navigation, style generator
All checks were successful
/ build (push) Successful in 9s
All checks were successful
/ build (push) Successful in 9s
This commit is contained in:
parent
4ebc78ae1f
commit
fa75654b11
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
16 changed files with 390 additions and 112 deletions
|
|
@ -1,77 +0,0 @@
|
|||
let can = document.createElement("canvas");
|
||||
let ctx = can.getContext('2d');
|
||||
let result;
|
||||
const downloadButton = document.querySelector('#download');
|
||||
|
||||
function filterImage(svgDataUrl, width, height) {
|
||||
const filteredImage = new Image();
|
||||
const resultPreview = document.querySelector('#result_img')
|
||||
|
||||
can.width = width;
|
||||
can.height = height;
|
||||
|
||||
filteredImage.onload = function () {
|
||||
ctx.drawImage(filteredImage, 0, 0, width, height);
|
||||
result = can.toDataURL();
|
||||
downloadButton.disabled = false;
|
||||
resultPreview.src = result;
|
||||
};
|
||||
filteredImage.src = svgDataUrl;
|
||||
}
|
||||
|
||||
function loadImage(base64Image) {
|
||||
const sourceImage = new Image();
|
||||
const svg = document.querySelector('svg')
|
||||
const svgImage = svg.querySelector('image')
|
||||
const sourcePreview = document.querySelector('#source_img')
|
||||
let svgDataUrl;
|
||||
|
||||
sourceImage.onload = function () {
|
||||
let svgWidth = this.width;
|
||||
let svgHeight = this.height;
|
||||
|
||||
if (this.height > 1000) {
|
||||
svgHeight = 1000;
|
||||
svgWidth = 1000 * this.width / this.height;
|
||||
}
|
||||
|
||||
svg.setAttribute("height", svgHeight);
|
||||
svg.setAttribute("width", svgWidth);
|
||||
|
||||
let svgString = (new XMLSerializer).serializeToString(svg);
|
||||
svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString);
|
||||
|
||||
filterImage(svgDataUrl, this.width, this.height);
|
||||
};
|
||||
sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
|
||||
}
|
||||
|
||||
|
||||
function handleFileSelect(e) {
|
||||
const files = e.target.files;
|
||||
if (!files || !files.length) return;
|
||||
const file = files[0];
|
||||
if (!file.type.match('image.*')) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (readerEvent) => {
|
||||
loadImage(readerEvent.target.result);
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
document.querySelector('#file_input').addEventListener('change', handleFileSelect, false);
|
||||
|
||||
function downloadURI(_uri, _name) {
|
||||
let link = document.createElement("a");
|
||||
link.download = 'distortedImageEH22.png';
|
||||
link.href = result;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
delete link;
|
||||
}
|
||||
|
||||
downloadButton.addEventListener('click', downloadURI);
|
||||
|
|
@ -2,77 +2,95 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body style="height: 100vh;">
|
||||
<header>
|
||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||
<ul>
|
||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||
<li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main class="generator">
|
||||
<div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 1em; align-items: center">
|
||||
<div>
|
||||
<input id="file_input" type="file" name="image" accept="image/*">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input id="file_input" type="file" name="image" accept="image/*">
|
||||
</div>
|
||||
<img id="source_img" src=""/>
|
||||
<i data-icon="arrow-down"></i>
|
||||
<img id="result_img" src=""/>
|
||||
|
||||
<img id="source_img" src=""
|
||||
style="width: 400px; height: 300px; border: solid 4px darkblue; background-color: darkblue; object-fit: contain;" />
|
||||
<img id="result_img" src=""
|
||||
style="width: 400px; height: 300px; border: solid 4px darkgreen; background-color: darkgreen; object-fit: contain;" />
|
||||
<div style="display: none;">
|
||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
|
||||
primitiveUnits="objectBoundingBox">
|
||||
<feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw"/>
|
||||
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa"/>
|
||||
<feComponentTransfer in="ltoa" result="ltoa_inverse">
|
||||
<feFuncA type="table" tableValues="0 1"/>
|
||||
</feComponentTransfer>
|
||||
|
||||
<div style="display: none;">
|
||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
|
||||
primitiveUnits="objectBoundingBox">
|
||||
<feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw" />
|
||||
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
|
||||
<feComponentTransfer in="ltoa" result="ltoa_inverse">
|
||||
<feFuncA type="table" tableValues="0 1" />
|
||||
</feComponentTransfer>
|
||||
<feConvolveMatrix in="ltoa_inverse" result="pink_edges" kernelMatrix="-4 0 4 0 0 0 -4 0 4"/>
|
||||
<feComponentTransfer in="pink_edges" result="pink">
|
||||
<feFuncR type="table" tableValues="0.7765 0"/>
|
||||
<feFuncG type="table" tableValues="0.1451 0"/>
|
||||
<feFuncB type="table" tableValues="0.4902 0"/>
|
||||
</feComponentTransfer>
|
||||
<feOffset in="pink" result="pink_shift" dx="-0.002"/>
|
||||
|
||||
<feConvolveMatrix in="ltoa_inverse" result="pink_edges" kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
|
||||
<feComponentTransfer in="pink_edges" result="pink">
|
||||
<feFuncR type="table" tableValues="0.7765 0" />
|
||||
<feFuncG type="table" tableValues="0.1451 0" />
|
||||
<feFuncB type="table" tableValues="0.4902 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="pink" result="pink_shift" dx="-0.002" />
|
||||
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges" kernelMatrix="4 0 -4 0 0 0 4 0 -4"/>
|
||||
<feComponentTransfer in="cyan_edges" result="cyan">
|
||||
<feFuncR type="table" tableValues="0.2941 0"/>
|
||||
<feFuncG type="table" tableValues="0.6784 0"/>
|
||||
<feFuncB type="table" tableValues="0.8471 0"/>
|
||||
</feComponentTransfer>
|
||||
<feOffset in="cyan" result="cyan_shift" dx="0.002"/>
|
||||
|
||||
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges" kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
|
||||
<feComponentTransfer in="cyan_edges" result="cyan">
|
||||
<feFuncR type="table" tableValues="0.2941 0" />
|
||||
<feFuncG type="table" tableValues="0.6784 0" />
|
||||
<feFuncB type="table" tableValues="0.8471 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="cyan" result="cyan_shift" dx="0.002" />
|
||||
<feMerge result="pink_cyan_shift">
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
<feMergeNode in="pink_shift"/>
|
||||
<feMergeNode in="cyan_shift"/>
|
||||
</feMerge>
|
||||
|
||||
<feMerge result="pink_cyan_shift">
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
<feMergeNode in="pink_shift" />
|
||||
<feMergeNode in="cyan_shift" />
|
||||
</feMerge>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise"/>
|
||||
<feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02"/>
|
||||
<feOffset in="distorted_raw" result="distorted"/>
|
||||
</filter>
|
||||
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" />
|
||||
<feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" />
|
||||
<feOffset in="distorted_raw" result="distorted" />
|
||||
</filter>
|
||||
<g filter="url(#filter0)">
|
||||
<image href="" width="100%" height="100%"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<g filter="url(#filter0)">
|
||||
<image href="" width="100%" height="100%" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<button id="download" disabled>
|
||||
Download Result
|
||||
</button>
|
||||
|
||||
<button id="download" disabled>
|
||||
Download Result
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="generator.js" type="text/javascript"></script>
|
||||
<script src="../assets/script/generator.js" type="text/javascript"></script>
|
||||
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue