diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Javascript/20231018_172955.jpg b/Javascript/20231018_172955.jpg
new file mode 100644
index 0000000..7cde895
Binary files /dev/null and b/Javascript/20231018_172955.jpg differ
diff --git a/Javascript/20231018_173004.jpg b/Javascript/20231018_173004.jpg
new file mode 100644
index 0000000..a593306
Binary files /dev/null and b/Javascript/20231018_173004.jpg differ
diff --git a/Javascript/20231018_173015.jpg b/Javascript/20231018_173015.jpg
new file mode 100644
index 0000000..232007c
Binary files /dev/null and b/Javascript/20231018_173015.jpg differ
diff --git a/Javascript/20240110_193419.jpg b/Javascript/20240110_193419.jpg
new file mode 100644
index 0000000..c62dfde
Binary files /dev/null and b/Javascript/20240110_193419.jpg differ
diff --git a/Javascript/20240111_223630.jpg b/Javascript/20240111_223630.jpg
new file mode 100644
index 0000000..629dc8a
Binary files /dev/null and b/Javascript/20240111_223630.jpg differ
diff --git a/Javascript/20240114_211115.jpg b/Javascript/20240114_211115.jpg
new file mode 100644
index 0000000..ddf246f
Binary files /dev/null and b/Javascript/20240114_211115.jpg differ
diff --git a/Javascript/20240114_211328.jpg b/Javascript/20240114_211328.jpg
new file mode 100644
index 0000000..0168f4a
Binary files /dev/null and b/Javascript/20240114_211328.jpg differ
diff --git a/Javascript/20240114_211345.jpg b/Javascript/20240114_211345.jpg
new file mode 100644
index 0000000..057fd61
Binary files /dev/null and b/Javascript/20240114_211345.jpg differ
diff --git a/Javascript/Fireshield PC.jpg b/Javascript/Fireshield PC.jpg
new file mode 100644
index 0000000..a4e75aa
Binary files /dev/null and b/Javascript/Fireshield PC.jpg differ
diff --git a/Javascript/Funktion.js b/Javascript/Funktion.js
new file mode 100644
index 0000000..895bf09
--- /dev/null
+++ b/Javascript/Funktion.js
@@ -0,0 +1,44 @@
+document.addEventListener("DOMContentLoaded", function () {
+ // Hauptbild-Element
+ var mainImg = document.getElementById("mainImgElement");
+
+ // Bereich, der angeklickt werden soll
+ var clickArea = { x: 200, y: 450, width: 200, height: 200 };
+
+ // Funktion zum Einfügen des neuen Bildes
+ function insertNewImage(x, y) {
+ // Hier kannst du die Logik für das Einfügen des Bildes implementieren
+ // In diesem Beispiel wird ein einfaches Overlay-Bild erstellt
+ var overlayImage = document.createElement("img");
+ overlayImage.src = "Grafikkarte.jpg";
+ overlayImage.classList.add("overlayImage");
+ overlayImage.style.left = 150% + "px";
+ overlayImage.style.top = 200 + "px";
+ document.body.appendChild(overlayImage);
+ }
+
+ // Klick-Ereignis für das Hauptbild
+ mainImg.addEventListener("click", function (event) {
+
+ var clickX = event.clientX - mainImg.offsetLeft;
+ var clickY = event.clientY - mainImg.offsetTop;
+
+ // Überprüfen, ob der Klick im definierten Bereich liegt
+ if (
+ clickX >= clickArea.x &&
+ clickX <= clickArea.x + clickArea.width &&
+ clickY >= clickArea.y &&
+ clickY <= clickArea.y + clickArea.height
+ ) {
+ // Ein neues Bild einfügen
+ insertNewImage(clickX, clickY);
+ }
+ });
+ });
+
+ function insertImage() {
+ alert('Button wurde geklickt!');
+ // Hier kannst du weitere Aktionen ausführen, z.B. das Bild ändern oder andere Funktionen aufrufen.
+ }
+
+
\ No newline at end of file
diff --git a/Javascript/Gestaltung.css b/Javascript/Gestaltung.css
new file mode 100644
index 0000000..3c38ded
--- /dev/null
+++ b/Javascript/Gestaltung.css
@@ -0,0 +1,81 @@
+body{
+ height: 100%;
+ background-image: linear-gradient(to right, rgba(21, 45, 70, 0.192), rgba(40, 16, 63, 0.671)), url(Setup.jpg);
+ background-size: cover;
+ background-attachment: fixed;
+}
+.myh{
+ font-size: 200%;
+ text-decoration: underline;
+ text-align:center;
+ letter-spacing: 2pt;
+
+ color: rgb(255, 115, 0);
+}
+#mainImage {
+ cursor: pointer;
+ margin-top: 200px;
+ margin-left: 63%;
+ }
+
+ .overlayImage {
+ position: absolute;
+ width: 300px;
+ height: 150px;
+ top: 600;
+ left: 400;
+}
+body {
+ margin: 200;
+ padding: 0;
+ }
+
+ .image-container {
+ position: relative;
+ overflow: hidden;
+ width: 1000px; /* Ändere die Breite und Höhe entsprechend deinem Bild */
+ height: 1000px;
+ }
+
+ .overlay-image {
+ margin-top: 0%;
+ width: 100%;
+ height: auto;
+ }
+ S
+ .overlay-container {
+ position: relative;
+ }
+
+ .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(117, 15, 15, 0.582); /* Ändere die Hintergrundfarbe und die Deckkraft nach Bedarf */
+ transform-origin: 0 0;
+ transform: skewY(-10deg); /* Ändere den Winkel des schrägen Overlays */
+ z-index: 1; /* Stelle sicher, dass das Overlay über dem Bild liegt */
+ }
+ #image-container {
+ position: relative;
+ }
+
+ #insertedImage {
+ width: 100%; /* Beispiel: Das Bild nimmt die volle Breite des Containers ein */
+ height: auto;
+ display: block;
+ }
+
+ #insertButton {
+ position: absolute;
+ top: 50px; /* Beispiel: Der Button befindet sich 50 Pixel von oben */
+ left: 100px; /* Beispiel: Der Button befindet sich 100 Pixel von links */
+ background-color: black;
+ border: none;
+ cursor: pointer;
+ z-index: 1; /* Damit der Button über dem Bild erscheint */
+ }
+
+
\ No newline at end of file
diff --git a/Javascript/Gigabyte Aorus GeForce RTX 3090 Master 24G (24 GB), Grafikkarte.jpg b/Javascript/Gigabyte Aorus GeForce RTX 3090 Master 24G (24 GB), Grafikkarte.jpg
new file mode 100644
index 0000000..1909685
Binary files /dev/null and b/Javascript/Gigabyte Aorus GeForce RTX 3090 Master 24G (24 GB), Grafikkarte.jpg differ
diff --git a/Javascript/Grafikkarte.jpg b/Javascript/Grafikkarte.jpg
new file mode 100644
index 0000000..7190e6e
Binary files /dev/null and b/Javascript/Grafikkarte.jpg differ
diff --git a/Javascript/Grundgerüst.html b/Javascript/Grundgerüst.html
new file mode 100644
index 0000000..730a8d0
--- /dev/null
+++ b/Javascript/Grundgerüst.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+ Computer Setup
+
+
+
+
+
+
+Mein Computer
+
+
+
+
+
+
+
+
+