200 lines
6.9 KiB
HTML
200 lines
6.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<script>
|
|
const setTheme = (theme) => {
|
|
theme ??= localStorage.theme || "system";
|
|
document.getElementById("themeLight").checked = theme === "light";
|
|
document.getElementById("themeDark").checked = theme === "dark";
|
|
localStorage.theme = theme;
|
|
};
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
setTheme();
|
|
});
|
|
</script>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<link rel="shortcut icon" href="../assets/image/favicon.png" />
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="../assets/style/styleguide.css"
|
|
/>
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body style="height: 100vh">
|
|
<header>
|
|
<a href="/" id="backToWiki">
|
|
<img
|
|
src="../assets/image/logo_eventname_glow.svg"
|
|
class="header-image dark-only"
|
|
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."
|
|
/>
|
|
<img
|
|
src="../assets/image/logo_eventname_glow_off.svg"
|
|
class="header-image light-only"
|
|
alt="Logo of Easterhegg 2025. In the style of a unpowered 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 dimly glowing in a dark blue, everything else in a dark pink."
|
|
/>
|
|
</a>
|
|
</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="../iconography"><i data-icon="info"></i>Iconography</a>
|
|
</li>
|
|
<li>
|
|
<a href="../logo"><i data-icon="info"></i>Logo</a>
|
|
</li>
|
|
<li>
|
|
<a href="../glow"><i data-icon="info"></i>Glow</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>
|
|
<li id="themeToggleDark" class="themeToggle">
|
|
<input
|
|
id="themeDark"
|
|
type="checkbox"
|
|
aria-label="Switch between dark and light mode"
|
|
/>
|
|
<label for="themeDark">
|
|
<i data-icon="light"></i>
|
|
</label>
|
|
</li>
|
|
<li id="themeToggleLight" class="themeToggle">
|
|
<input
|
|
id="themeLight"
|
|
type="checkbox"
|
|
aria-label="Switch between dark and light mode"
|
|
/>
|
|
<label for="themeLight">
|
|
<i data-icon="light"></i>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<main>
|
|
<div class="alert">
|
|
<i data-icon="warning"></i>
|
|
<p>
|
|
<strong>Work in progress</strong>
|
|
This style guide is still under development.<br />
|
|
Not all resources may be available yet, explanations and examples
|
|
may be missing and things may change without notice.
|
|
</p>
|
|
</div>
|
|
<div class="generator">
|
|
<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="" />
|
|
|
|
<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="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>
|
|
|
|
<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>
|
|
|
|
<button id="download" disabled>Download Result</button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="../assets/script/generator.js" type="text/javascript"></script>
|
|
<script
|
|
src="../assets/script/styleguide.js"
|
|
type="text/javascript"
|
|
></script>
|
|
</body>
|
|
</html>
|