jolzem/jolzem.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added schule

Browse Source
This commit is contained in:
Johannes Olzem 2023-01-20 19:11:42 +01:00
parent 4a9c1cb02e
commit 5fbe2e5c68
30 changed files with 866 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
schule/M3_220309_115557.pdf Normal file
View File

Binary file not shown.

63
schule/info/html/projekt/contact.html Normal file
View File

@ -0,0 +1,63 @@
<!--My Contact inforamtion. Used for the footer.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h2> Contact me</h2>
<p> Johannes Olzem
<br>
Heerstr. 1
<br>
53359 Rheinbach </p>
<a href="mailto:olzemjo@sjg-rheinbach.de" title="Mail Adress">olzemjo@sjg-rheinbach.de</a>
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

BIN
schule/info/html/projekt/css/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

127
schule/info/html/projekt/css/style.css Normal file
View File

@ -0,0 +1,127 @@
body {
font-size: 80%;
font-family: 'Share Tech Mono', Monospace, Courier;
text-align: center;
background-color: #202020;
}
#wrap {
width: 760px;
margin: 0 auto;
text-align: left;
}
#navigation {
float: right;
width: 55px;
height: 803px;
border-bottom: 1px solid #999;
border-top: 1px solid #999;
font-size: 25px;
text-align: right;
font-family: 'Share Tech Mono', Monospace, Courier;
color: white;
}
#navigation ul {
list-style-type: none;
}
#navigation ul li {
display: inline;
}
#header {
float: left;
width: 760px;
height: 90px;
background-image: header.png;
text-align: middle;
border-top: 1px solid #999;
}
#content {
float: left;
height: 400px;
width: 559px;
border-right: 1px solid #999;
}
#content ul {
list-style-type: circle;
}
#content ul li {
display: inline;
}
#content ol {
color: teal;
}
#content ul li {
display: inline;
}
#sidebar {
float: left;
height: 350px;
width: 100px;
top: 0;
font-size: 90%;
}
#footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: light-gray;
color: white;
text-align: center;
}
/*the . before the word means i am defining a class and not an ID. When using an ID a # is used*/
.price {
font-size: 15px;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
color: teal;
}
.specs ul {
list-style-type: disc;
}
.dotted {
border: 5px dotted #555;
}
/*This defines the Table*/
table, th, td {
border: 2px solid teal;
border-collapse: collapse;
color: white;
}
h2, h3, h4, h5, h6 {
margin: 20px;
color: white;
}
/*I wanted heading1 to be teal so i seperated it from h2-h6*/
h1 {
color: teal;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
p {
margin: 20px 25px;
color: white;
}
/*This defines the hyperlinks*/
a {
color: teal;
}

120
schule/info/html/projekt/details.html Normal file
View File

@ -0,0 +1,120 @@
<!--This is used for more detailed information-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Details</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Details</h1>
<h2>Sizes</h2>
<p>There are several sizes of keyboard, defined by the number of keys.</p>
<table>
<tr>
<td>
<h3>40&#37;</h3>
<p>A 40&#37; Keyboard only has Keys for lettering, such as letters and a shift and backspace
as well as a backspace and a Tab.</p>
<img src="images/fourty.jpg" alt="a fourty percent keyboard"
style="width:139px;height:45px;" align="center">
<br>
</td>
</tr>
<tr>
<td>
<h3>60&#37;</h3>
<p>Probably the most common size in the custom keyboard Industry.
Has the same keys as a 40&#37; as well as numbers and certain others.</p>
<img src="images/sixty.jpg" alt="a sixty percent keyboard"
style="width:132px;height:51px;">
</td>
</tr>
<tr>
<td>
<h3>65&#37;</h3>
<p>My favourite size, because of the extra arrow keys. It also has three additional keys.
These are most commonly Delete, Page Up and Page Down.</p>
<img src="images/keyboard.jpg" alt="a sixty percent keyboard"
style="width:131px;height:44px;">
</td>
</tr>
<tr>
<td>
<h3>75&#37;&#47;TKL</h3>
<p>A "normal" keyboard, just without the numpad. TKL stands for TenKeyLess.</p>
<img src="images/seventyfive.jpg" alt="a seventyfive percent keyboard"
style="width:150px;height:58px;">
</td>
</tr>
<tr>
<td>
<h3>95&#37;&#47;100&#37;&#47;full size</h3>
<p>Has the keys of the keyboard you are probably using, if you have a mainstream Keyboard.</p>
<img src="images/hundred.jpg" alt="a full size keyboard" style="width:128px;height:44px;">
</td>
</tr>
</table>
<br>
<br>
<h2>Lube</h2>
<p>Lube is used to significantly silent switches. I&#39;ve included some typing sounds under here.</p>
<h4>Unlubed Cherry MX Red switches</h4>
<!--Here is the audio tag as seen in index.html-->
<audio controls>
<source src="sounds/redunlubed.mp3" type="audio/mpeg">
</audio>
<h4>Lubed Cherry MX Red switches</h4>
<audio controls>
<source src="sounds/redlubed.mp3" type="audio/mpeg">
</audio>
<h4>Overlubed Gateron Black Ink Switches</h4>
<audio controls>
<source src="sounds/overlubed.mp3" type="audio/mpeg">
</audio>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

75
schule/info/html/projekt/downloads.html Normal file
View File

@ -0,0 +1,75 @@
<!--This is a download page with different software, which is downlaodable-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Downloads</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Downloads</h1>
<!--I used the download tag to indicate, that the file that is being linked to, is supposed to be downloaded-->
<a href="https://github.com/the-via/releases/releases/download/v1.3.1/via-1.3.1-win.exe" download>
<h3>VIA</h3>
</a>
<p> VIA is a software, you can use to program a Keyboard.
<br>
Before you build, you normally test the PCB, which you can do with this Software too.
<br>
It is also used to change the RGB lightning on the switches or the PCB.
</p>
<br>
<br>
<a href="https://www.autohotkey.com/download/ahk-install.exe" download>
<h3>AutoHotkey</h3>
</a>
<p>AutoHotkey is a software, which is used to program macros to either to special macro keys,
or your normal Keys. It is normally used for Macro keyboards, which you can find
<a href="https://kbdfans.com/collections/20/products/kbdfans-kbdpad-pcb-v2" target="_blank">here</a>.
</p>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

BIN
schule/info/html/projekt/images/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 734 KiB

BIN
schule/info/html/projekt/images/epbt/close.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 512 KiB

BIN
schule/info/html/projekt/images/epbt/front.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 KiB

BIN
schule/info/html/projekt/images/epbt/main.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 192 KiB

BIN
schule/info/html/projekt/images/epbt/main2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
schule/info/html/projekt/images/epbt/side.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

BIN
schule/info/html/projekt/images/fourty.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
schule/info/html/projekt/images/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
schule/info/html/projekt/images/hundred.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
schule/info/html/projekt/images/keyboard.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
schule/info/html/projekt/images/seventyfive.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
schule/info/html/projekt/images/sixty.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

116
schule/info/html/projekt/index.html Normal file
View File

@ -0,0 +1,116 @@
<!--This is my index Page. I listed some interesting information about custom keyboards here.
This is actually my second website made for this course, the first one being about my favorite anime.
I wasn't happy with the results, so i made this one. It is inspired by n-o-d-e.net.
This was written in englsih because when I write code I am in English mode, because the words
in the code are in english(background, title etc.)-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Keyboards</title>
<link rel=stylesheet href=css/style.css>
<style>
body {
background: #000000 url(images/background.jpg) no-repeat fixed center center;
}
<!--The Background image-->
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png>
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Custom Keyboards</h1>
<p>The hobby of building a custom keyboard is massively gaining popularity at the moment.
<br>
To Build a Custom Keyboard you need 5 parts.
</p>
<ol>
<li>
<h3>Case</h3>
<p>The Case is basically just the Housing of the Keyboard.
All the Parts get screwed into it, so that they get held in place.</p>
</li>
<li>
<h3>PCB</h3>
<p>The PCB is basically just the Motherboard of the Keyboard.
You can either solder or just place the switches in,
depending of which type of PCB you have.</p>
</li>
<li>
<h3>Switches</h3>
<p>The switches are the actuators of the typing. They send a signal through
the PCB, which sends it over the Cable to the PC.</p>
</li>
<li>
<h3>Plate</h3>
<p>The Plate is inbetween the Switches and the PCB. The Stabilisers,
which stabilize the longer keycaps are also mounted on the Plate.</p>
</li>
<li>
<h3>Keycaps</h3>
<p>The Keycaps are placed on the switches, so you can actually type.
They come in different colors and sizes.
There are also Printed Keycaps and blank ones.</p>
</li>
</ol>
<img class="dotted" src="images/keyboard.jpg">
<h3>Here you can see a Keyboard Timelapse Build</h3>
<!--Here I embedded a Youtube Video with the code Youtube gave me. It also has Privacy Mode enabled, because i know IT people care about their privacy.-->
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/8yvk7KDMx8A"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<br>
<br>
<br>
<!--This is my favorite song. I used the autoplay tag to play it when you open the page-->
<audio controls autoplay>
<source src="sounds/welcome.mp3" type="audio/mpeg">
</audio>
<h5>Background image</h5>
<p>A Rose Gold Kyuu built for Lilypichu by the Youtuber and Streamer Taeha Types.</p>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

99
schule/info/html/projekt/keycaps.html Normal file
View File

@ -0,0 +1,99 @@
<!--This is the Store page for tghe Product shown in shop.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EPBT Samurai 75&#37; Keycap set</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<!--The text would'nt align next to the picture, so i put it in the paragraph tag-->
<p style="float: left;"><img src=images/epbt/main.jpg style="width:275px;height:275px;" border="3px"></p>
<h2>EPBT Samurai 75&#37; Keycap set</h2>
<p class="price">99,80&euro;</p>
<p>This is one of my favourite Keycap sets</p>
<button>
Buy here
<a href="https://kbdfans.com/collections/keycaps/products/samurai?variant=34191898771595" target="_blank">
</button>
</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h3>Specs</h3>
<!--A Table(Tabelle)-->
<table style="width:65%">
<tr>
<td>Reverse Dyesub</td>
</tr>
<tr>
<td>PBT Material</td>
</tr>
<tr>
<td>Made in china</td>
</tr>
<tr>
<td>with chinese letters</td>
</tr>
<tr>
<td>includes iso Enter</td>
</tr>
</table>
<br>
<br>
<!--this is a gallery of images-->
<h3>Product Images</h3>
<img src="images/epbt/main2.jpg" style="width:200px;height:200px;" align="left">
<img src="images/epbt/side.jpg" style="width:200px;height:200px;" align="left">
<img src="images/epbt/close.jpg" style="width:200px;height:200px;" align="left">
<img src="images/epbt/front.jpg" style="width:200px;height:200px;" align="left">
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

64
schule/info/html/projekt/legal_notice.html Normal file
View File

@ -0,0 +1,64 @@
<!--A notice about copyright. Also used for the footer.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Legal Notice</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h2>Legal Notice</h2>
<p>Some of the Content on this site is Copyrighted.
If you have a complaint about Copyright infringement,
please send an email to <a href="mailto:olzemjo@sjg-rheinbach.com">olzemjo@sjg-rheinbach.de</a>.
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
<br>
Also Contact this e-mail, if you are a content owner and
you would like to contribute your content to this Website.
</p>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

85
schule/info/html/projekt/privacy_policy.html Normal file
View File

@ -0,0 +1,85 @@
<!--The Privacy Policy of this Website. Inspired by the Privacy Policy of Crunchyroll.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Privacy Policy</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h2> Privacy Policy</h2>
<h3>Data Collection</h3>
<ul>
<li>
<p>I will neither collect, nor sell your data.</p>
</li>
</ul>
<h3>Deletion of personal Data</h3>
<ul>
<li>
<p>If you would like to request the deletion of your personal
data, send an e-mail to <a href="mailto:olzemjo@sjg-rheinbach.de">olzemjo@sjg-rheinbach.de</a> </p>
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
</li>
</ul>
<h3> Cookies</h3>
<ul>
<li>
<p>Cookies are not used on this Website, because I am too lazy
to put a popup on this.</p>
</li>
</ul>
<h3>Links to other Sites</h3>
<ul>
<li>
<p>If you click on a banner or a Hyperlink, which leads to an external site,
this Privacy Policy is not in force anymore. If you would like to
know about the Privacy Policy of the external site, please read it there.</p>
</li>
<ul>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

62
schule/info/html/projekt/shop.html Normal file
View File

@ -0,0 +1,62 @@
<!--This is a shop. I made this because I wanted to implement a store page(keycaps.html)-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shop</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Shop</h1>
<a href="keycaps.html">
<img src=images/epbt/main.jpg style="width:90px;height:90px;">
<h4>EPBT Samurai 65&#37; Keycap set
<br>
99,90&euro;</h4>
</a>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

BIN
schule/info/html/projekt/sounds/overlubed.mp3 Normal file
View File

Binary file not shown.

BIN
schule/info/html/projekt/sounds/redlubed.mp3 Normal file
View File

Binary file not shown.

BIN
schule/info/html/projekt/sounds/redunlubed.mp3 Normal file
View File

Binary file not shown.

BIN
schule/info/html/projekt/sounds/welcome.mp3 Normal file
View File

Binary file not shown.

29
schule/info/index.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index for ~/schule/info | Johannes Olzem</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrap">
<h1>Index for &nbsp;~ / schule / info /</h1>
<ul style="list-style: inside '\1F4C1'";>
<li>
<a href="../../" style="margin-left:5px;">
../../
</a>
</li>
<li>
<a href="html/projekt/" style="margin-left:5px;">
html/projekt/
</a>
</li>
<li>
<a href="python/roulette/" style="margin-left:5px;">
python/roulette/
</a>
</li>
</ul>
</div>
</body>
</html>

26
schule/info/python/roulette/index.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index for ~/pages/schule/info/python/roulette/ | Johannes Olzem</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="/img/favico.png">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
</head>
<body>
<div id="wrap">
<h1>Index for &nbsp;~ / pages / schule / info / python / roulette /</h1>
<ul style="list-style: inside '\1F4C1'";>
<li>
<a href="../../" style="margin-left:5px;">
../../
</a>
</li>
<li style="list-style: inside '\1F4C4';">
<a href="werte.png" style="margin-left:5px;">
werte.png
</a>
</li>
</ul>
</div>
</body>
</html>

BIN
schule/info/python/roulette/werte.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 446 KiB