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

2
styleguide/demopage/index.html
View file

@ -232,7 +232,7 @@
<figure> <figure>
<img <img
src="../assets/image/example_qrcode_distorted.png" src="../assets/image/example_qrcode_distorted.png"
alt="The same image as before, except with a glitchy filer applied. The first effect applies to bright edges, which get paintet pink and blue to their left and right hand side respectively. The second effect distorts the image by offsetting parts of the image horizontally by seemingly random yet somewhat osscilating amounts." alt="The same image as before, except with a glitchy filer applied. The first effect applies to bright edges, which get painted pink and blue to their left and right hand side respectively. The second effect distorts the image by offsetting parts of the image horizontally by seemingly random yet somewhat osscilating amounts."
/> />
<figcaption>Example image with visual glitches applied.</figcaption> <figcaption>Example image with visual glitches applied.</figcaption>
</figure> </figure>

29
styleguide/generator/index.html
View file

@ -20,7 +20,7 @@
type="text/css" type="text/css"
href="../assets/style/styleguide.css" href="../assets/style/styleguide.css"
/> />
<title>Document</title> <title>Image Generator</title>
</head> </head>
<body style="height: 100vh"> <body style="height: 100vh">
@ -98,15 +98,24 @@
</ul> </ul>
</nav> </nav>
<main> <main>
<div class="alert"> <h1>Image Generator</h1>
<i data-icon="warning"></i> <p>
<p> We wanted images to (optionally) have a glitchy, distorted appearance.
<strong>Work in progress</strong> To achieve this, we apply two effects to an image. Firstly, bright
This style guide is still under development.<br /> vertical edges in an image are highlighted by adding a parallel line
Not all resources may be available yet, explanations and examples in our primary color to their left and in our secondary color to their
may be missing and things may change without notice. right hand side. Secondly, the image gets distorted by offsetting
</p> different parts of the image horizontally, seemingly by random
</div> 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 class="generator">
<div> <div>
<input id="file_input" type="file" name="image" accept="image/*" /> <input id="file_input" type="file" name="image" accept="image/*" />