EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

(Hopefully) finish generator page

Browse source
This commit is contained in:
lilith 2025-03-09 19:32:31 +01:00
commit c7cc398bb8
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
2 changed files with 20 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

29
styleguide/generator/index.html
View file

@ -20,7 +20,7 @@
type="text/css"
href="../assets/style/styleguide.css"
/>
<title>Document</title>
<title>Image Generator</title>
</head>
<body style="height: 100vh">
@ -98,15 +98,24 @@
</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>
<h1>Image Generator</h1>
<p>
We wanted images to (optionally) have a glitchy, distorted appearance.
To achieve this, we apply two effects to an image. Firstly, bright
vertical edges in an image are highlighted by adding a parallel line
in our primary color to their left and in our secondary color to their
right hand side. Secondly, the image gets distorted by offsetting
different parts of the image horizontally, seemingly by random
amounts, but it is actually somewhat osscilating.
</p>
<p>
This page utilizes a small bit of Javascript to add an SVG filter to
an image of your choice. The resulting image will then be previewed
further below and can be downloaded using a button at the end of the
page. Not all browsers' canvas implementations generate the same
outcome, especially firefox tends to create wrong results, so we
recommend using a chromium based browser for creating these exports.
</p>
<div class="generator">
<div>
<input id="file_input" type="file" name="image" accept="image/*" />