NavigateX | Entwicklung

+ + \ No newline at end of file diff --git a/static/Home.html b/static/Home.html new file mode 100644 index 0000000..651b0c7 --- /dev/null +++ b/static/Home.html @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + NavigateX +

+ + +

+ + + + + +

+ +

+ + + \ No newline at end of file diff --git a/static/IMGS/Eraser.png b/static/IMGS/Eraser.png new file mode 100644 index 0000000..cf20810 Binary files /dev/null and b/static/IMGS/Eraser.png differ diff --git a/static/IMGS/ICONS/Schulogo.png b/static/IMGS/ICONS/Schulogo.png new file mode 100644 index 0000000..3d8f9cd Binary files /dev/null and b/static/IMGS/ICONS/Schulogo.png differ diff --git a/static/IMGS/ICONS/apfel.png b/static/IMGS/ICONS/apfel.png new file mode 100644 index 0000000..120582b Binary files /dev/null and b/static/IMGS/ICONS/apfel.png differ diff --git a/static/IMGS/ICONS/discord.png b/static/IMGS/ICONS/discord.png new file mode 100644 index 0000000..03282d9 Binary files /dev/null and b/static/IMGS/ICONS/discord.png differ diff --git a/static/IMGS/ICONS/dropbox.png b/static/IMGS/ICONS/dropbox.png new file mode 100644 index 0000000..7e159dc Binary files /dev/null and b/static/IMGS/ICONS/dropbox.png differ diff --git a/static/IMGS/ICONS/facebook-messenger.png b/static/IMGS/ICONS/facebook-messenger.png new file mode 100644 index 0000000..c6d847f Binary files /dev/null and b/static/IMGS/ICONS/facebook-messenger.png differ diff --git a/static/IMGS/ICONS/facebook.png b/static/IMGS/ICONS/facebook.png new file mode 100644 index 0000000..1ee7dce Binary files /dev/null and b/static/IMGS/ICONS/facebook.png differ diff --git a/static/IMGS/ICONS/github.png b/static/IMGS/ICONS/github.png new file mode 100644 index 0000000..ec46982 Binary files /dev/null and b/static/IMGS/ICONS/github.png differ diff --git a/static/IMGS/ICONS/google.png b/static/IMGS/ICONS/google.png new file mode 100644 index 0000000..a3515e9 Binary files /dev/null and b/static/IMGS/ICONS/google.png differ diff --git a/static/IMGS/ICONS/instagram.png b/static/IMGS/ICONS/instagram.png new file mode 100644 index 0000000..9aaff4c Binary files /dev/null and b/static/IMGS/ICONS/instagram.png differ diff --git a/static/IMGS/ICONS/linie.png b/static/IMGS/ICONS/linie.png new file mode 100644 index 0000000..35170d3 Binary files /dev/null and b/static/IMGS/ICONS/linie.png differ diff --git a/static/IMGS/ICONS/linkedin.png b/static/IMGS/ICONS/linkedin.png new file mode 100644 index 0000000..6855d8b Binary files /dev/null and b/static/IMGS/ICONS/linkedin.png differ diff --git a/static/IMGS/ICONS/netflix.png b/static/IMGS/ICONS/netflix.png new file mode 100644 index 0000000..0419317 Binary files /dev/null and b/static/IMGS/ICONS/netflix.png differ diff --git a/static/IMGS/ICONS/paypal.png b/static/IMGS/ICONS/paypal.png new file mode 100644 index 0000000..caee1b7 Binary files /dev/null and b/static/IMGS/ICONS/paypal.png differ diff --git a/static/IMGS/ICONS/pinterest.png b/static/IMGS/ICONS/pinterest.png new file mode 100644 index 0000000..58c236a Binary files /dev/null and b/static/IMGS/ICONS/pinterest.png differ diff --git a/static/IMGS/ICONS/reddit.png b/static/IMGS/ICONS/reddit.png new file mode 100644 index 0000000..a5455b9 Binary files /dev/null and b/static/IMGS/ICONS/reddit.png differ diff --git a/static/IMGS/ICONS/skype.png b/static/IMGS/ICONS/skype.png new file mode 100644 index 0000000..cd4c953 Binary files /dev/null and b/static/IMGS/ICONS/skype.png differ diff --git a/static/IMGS/ICONS/snapchat.png b/static/IMGS/ICONS/snapchat.png new file mode 100644 index 0000000..eb60554 Binary files /dev/null and b/static/IMGS/ICONS/snapchat.png differ diff --git a/static/IMGS/ICONS/soundcloud.png b/static/IMGS/ICONS/soundcloud.png new file mode 100644 index 0000000..014d519 Binary files /dev/null and b/static/IMGS/ICONS/soundcloud.png differ diff --git a/static/IMGS/ICONS/spotify.png b/static/IMGS/ICONS/spotify.png new file mode 100644 index 0000000..68ecbca Binary files /dev/null and b/static/IMGS/ICONS/spotify.png differ diff --git a/static/IMGS/ICONS/telegramm.png b/static/IMGS/ICONS/telegramm.png new file mode 100644 index 0000000..8f3ab11 Binary files /dev/null and b/static/IMGS/ICONS/telegramm.png differ diff --git a/static/IMGS/ICONS/tiktok.png b/static/IMGS/ICONS/tiktok.png new file mode 100644 index 0000000..6b8305b Binary files /dev/null and b/static/IMGS/ICONS/tiktok.png differ diff --git a/static/IMGS/ICONS/twitch.png b/static/IMGS/ICONS/twitch.png new file mode 100644 index 0000000..044f743 Binary files /dev/null and b/static/IMGS/ICONS/twitch.png differ diff --git a/static/IMGS/ICONS/twitter.png b/static/IMGS/ICONS/twitter.png new file mode 100644 index 0000000..21be43f Binary files /dev/null and b/static/IMGS/ICONS/twitter.png differ diff --git a/static/IMGS/ICONS/vk.png b/static/IMGS/ICONS/vk.png new file mode 100644 index 0000000..dd1cf31 Binary files /dev/null and b/static/IMGS/ICONS/vk.png differ diff --git a/static/IMGS/ICONS/whatsapp.png b/static/IMGS/ICONS/whatsapp.png new file mode 100644 index 0000000..c57c9ad Binary files /dev/null and b/static/IMGS/ICONS/whatsapp.png differ diff --git a/static/IMGS/ICONS/youtube.png b/static/IMGS/ICONS/youtube.png new file mode 100644 index 0000000..ffe36d3 Binary files /dev/null and b/static/IMGS/ICONS/youtube.png differ diff --git a/static/IMGS/Ich.jpg b/static/IMGS/Ich.jpg new file mode 100644 index 0000000..8885747 Binary files /dev/null and b/static/IMGS/Ich.jpg differ diff --git a/static/IMGS/NavigateX.png b/static/IMGS/NavigateX.png new file mode 100644 index 0000000..bfe5682 Binary files /dev/null and b/static/IMGS/NavigateX.png differ diff --git a/static/IMGS/Neuigkeiten.png b/static/IMGS/Neuigkeiten.png new file mode 100644 index 0000000..f9a63a3 Binary files /dev/null and b/static/IMGS/Neuigkeiten.png differ diff --git a/static/IMGS/Project.png b/static/IMGS/Project.png new file mode 100644 index 0000000..a465805 Binary files /dev/null and b/static/IMGS/Project.png differ diff --git a/static/IMGS/SchulogoTitle.png b/static/IMGS/SchulogoTitle.png new file mode 100644 index 0000000..88c4457 Binary files /dev/null and b/static/IMGS/SchulogoTitle.png differ diff --git a/static/IMGS/Search.png b/static/IMGS/Search.png new file mode 100644 index 0000000..0e22cec Binary files /dev/null and b/static/IMGS/Search.png differ diff --git a/static/IMGS/Startseite.png b/static/IMGS/Startseite.png new file mode 100644 index 0000000..e81a5e1 Binary files /dev/null and b/static/IMGS/Startseite.png differ diff --git a/static/IMGS/Verifiziert.png b/static/IMGS/Verifiziert.png new file mode 100644 index 0000000..18d2a25 Binary files /dev/null and b/static/IMGS/Verifiziert.png differ diff --git a/static/IMGS/Web-entwicklung.png b/static/IMGS/Web-entwicklung.png new file mode 100644 index 0000000..7db223a Binary files /dev/null and b/static/IMGS/Web-entwicklung.png differ diff --git a/static/IMGS/X.png b/static/IMGS/X.png new file mode 100644 index 0000000..2669da9 Binary files /dev/null and b/static/IMGS/X.png differ diff --git a/static/LOOK/Development.css b/static/LOOK/Development.css new file mode 100644 index 0000000..c92fbd9 --- /dev/null +++ b/static/LOOK/Development.css @@ -0,0 +1,133 @@ +body { + font-family: Arial, Helvetica, sans-serif; + background-color: #1c2a38; + text-align: center; + padding: 20px; +} + +.profile-card { + text-align: center; + font-family: Arial, sans-serif; + margin-top: 30px; +} + +.profile-image { + -webkit-user-drag: none; + user-select: none; + width: 150px; + height: 150px; + border: 2px solid #121c27; + box-shadow: 0 0 10px #1d1c22; + border-radius: 50%; + margin: 0 auto; + overflow: hidden; + margin-bottom: 15px; + transition: + border 0.4s, + background-color 0.3s, + box-shadow 0.4s, + width 0.4s; + +} + + +.profile-image:hover { + width: 190px; + border: 2px solid #ffffff; + box-shadow: 0 0 10px #ffffff; + +} + +.profile-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.username { + -webkit-user-drag: none; + user-select: none; + font-family: Arial; + transform: translateY(-7px); + font-size: 22px; + margin-top: 10px; + color: #ffffff; + font-weight: Bold; + margin-left: 8px; +} + +.verification { + display: inline-block; + transform: translateY(3px); + margin-left: 5px; + margin-right: 10px; + overflow: hidden; +} + +.user-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.user-description { + -webkit-user-drag: none; + user-select: none; + padding: 8px 18px; + margin-top: 20px; + border: 2px solid #121c27; + background-color: #1c2a38; + border-radius: 25px; + width: 80%; + margin: 0 auto; + box-shadow: 0 0 10px #121c27; + transition: + border 0.4s, + background-color 0.3s, + box-shadow 0.4s, + width 0.4s; +} + + +.user-description:hover { + background-color: #192d46;; + border: 2px solid #007aff; + box-shadow: 0 0 10px #007aff; + width: 80%; + color: #ffffff; +} + +.text-description { + color: #a8a8a8; + font-size: 15px; + font-weight: bold; + font-family: Arial; +} + +.user-info { + background-color: #121c27; + box-shadow: 0 0 10px #121c27; + border: 2px solid #121c27; + border-radius: 29px; + margin: 0 auto; + width: 210px; + height: 35px; + transition: + border 0.4s, + background-color 0.3s, + box-shadow 0.4s, + width 0.4s; +} + + + +.user-info:hover { + width: 250px; + background-color: #192d46; + border: 2px solid #007aff; + box-shadow: 0px 0px 8px rgb(0, 153, 255); +} + +.strich { + margin-top: 20px; +} \ No newline at end of file diff --git a/static/LOOK/Menu.css b/static/LOOK/Menu.css new file mode 100644 index 0000000..3215947 --- /dev/null +++ b/static/LOOK/Menu.css @@ -0,0 +1,71 @@ +#rotateImage { + display: block; + width: 40px; + height: 40px; + max-width: 40px; + max-height: 40px; + -webkit-touch-callout: none; + -webkit-user-drag: none; + user-select: none; + transition: transform 0.3s ease-in-out; + margin-left: -15px; + margin-top: -15px; +} + +#menu { + justify-content: center; + flex-wrap: wrap; + display: none; + margin-left: -8px; + margin-top: 14px; + width: 140px; + max-width: 80%; +} + +.menu-button { + display: none; + animation: fade-in 0.2s ease-in-out forwards; + margin-bottom: 20px; + border-radius: 10px; + background-color: #121c27; + border: 2px solid #121c27; + color: #a8a8a8; + font-weight: bold; + font-size: 14px; + padding: 5px 12px; + -webkit-user-drag: none; + user-select: none; + box-shadow: 0px 0px 8px #0f0f0f; + transition: + border 0.4s, + background-color 0.3s, + box-shadow 0.4s, + width 0.5s; +} + +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fade-out { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +.menu-button:hover { + padding: 5px 18px; + background-color: #192d46; + border: 2px solid rgb(0, 153, 255); + box-shadow: 0px 0px 8px rgb(0, 153, 255); + color: #fff; +} + diff --git a/static/LOOK/News.css b/static/LOOK/News.css new file mode 100644 index 0000000..95c5195 --- /dev/null +++ b/static/LOOK/News.css @@ -0,0 +1,58 @@ +#TitleA { + background-color: #42414d; + width: 40%; + height: 25px; + border-radius: 8px; + color: #c9c9c98f; + border: none; + padding-left: 30px; + box-shadow: 0px 0px 10px #1d1c22; + display: block; + margin: 0 auto; + margin-bottom: 20px; + font-size: 120%; + font-weight: lighter; +} + +#TitleA:hover { + transform: scale(1.05); + background-color: #4c5a66; + box-shadow: 0px 0px 15px #7fc0df; + border: 2px solid #b1e6ff; + margin-bottom: 24px; +} + +#googleNewsContainer { + max-width: 500px; + margin: 0 auto; +} +#newsList { + list-style: none; + padding: 0; +} +.newsItem { + margin-bottom: 20px; + background-color: #42414d; + box-shadow: 0px 0px 10px #1d1c22; + padding: 10px; + border-radius: 5px; + +} + +.newsItem:hover { + transform: scale(1.01); + background-color: #644c66; + box-shadow: 0px 0px 15px #df7fd7; + border: 2px solid #ffb1f2; + +} + +.newsItem a { + color: #ffffff; + text-decoration: none; + font-weight: bold; +} +.newsItem a:hover { + font-weight: bold; + color: #00aeff; +} \ No newline at end of file diff --git a/static/LOOK/Start.css b/static/LOOK/Start.css new file mode 100644 index 0000000..91b79f0 --- /dev/null +++ b/static/LOOK/Start.css @@ -0,0 +1,199 @@ +body { + font-family: Arial, Helvetica, sans-serif; + background-color: #1c2a38; + text-align: center; + padding: 20px; +} + +.XTitle { + position: relative; + display: block; + margin: 0 auto; + margin-top: 70px; + margin-bottom: 80px; + max-width: 120%; + animation: pulse 3s infinite ease-in-out; + transition: margin 0.3; + -webkit-user-drag: none; + user-select: none; +} + +.XTitle2 { + -webkit-user-drag: none; + user-select: none; + margin-bottom: 10px; + margin-top: 40px; + transition: width 0.3s; + animation: pulse 4s infinite ease-in-out; +} + +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 0.8; + } + 50% { + transform: scale(1.08); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 0.8; + } +} + +#searchBox { + margin-bottom: 10px; + padding: 10px; + width: 52%; + font-weight: bold; + border: solid 2px #121c27; + color:#ccc; + border-radius: 15px; + -webkit-user-drag: none; + user-select: none; + font-size: 13.5px; + background-color: #121c27; + box-shadow: 0px 0px 6px #1d1c22; + transition: + border 0.4s, + background-color 0.3s, + box-shadow 0.4s, + width 0.3s; +} + +#searchBox:hover { + width: 57%; + background-color: #152538; + border: 2px solid rgb(0, 140, 255); + box-shadow: 0px 0px 6px rgb(0, 140, 255); +} + +#clear-button { + padding: 2px 4px; + background-color: #c50000; + border: solid 2px #c50000; + color: #fff; + border: none; + border-radius: 30px; + font-size: 12px; + -webkit-user-drag: none; + user-select: none; + cursor: pointer; + transform: translateY(8px); + margin-left: 10px; + box-shadow: 0px 0px 8px #1d1c22; + transition: + background-color 0.3s, + box-shadow 0.4s, + width 0.3s; +} + +#clear-button:hover { + background-color: #ff0000; + border: 2px solid rgb(255, 255, 255); + box-shadow: 0px 0px 6px rgb(174, 218, 255); +} + +#search-button { + padding: 4px 6px; + background-color: #006de1; + border: solid 2px #006de1; + color: #fff; + border-radius: 30px; + font-size: 12px; + -webkit-user-drag: none; + user-select: none; + cursor: pointer; + transform: translateY(8px); + margin-left: 3px; + box-shadow: 0px 0px 8px #1d1c22; + transition: + background-color 0.3s, + box-shadow 0.4s, + width 0.3s; +} + +#search-button:hover { + background-color: #007bff; + border: 2px solid rgb(255, 255, 255); + box-shadow: 0px 0px 6px rgb(174, 218, 255); +} + +.separator { + margin: auto; + height: 5px; + margin-bottom: 40px; + margin-top: 40px; + background-color: #007bff; + border-radius: 20px; + box-shadow: 0px 0px 6px rgb(18, 26, 35); + border: 1px solid rgb(18, 36, 54); + width: 90%; +} + + +@keyframes borderAnimation { + 0% { + border: 2px solid rgb(0, 119, 255); + box-shadow: 0px 0px 6px rgb(0, 119, 255); + + } + 50% { + border: 2px solid rgb(255, 255, 255); + box-shadow: 0px 0px 6px rgb(255, 255, 255); + } + 100% { + border: 2px solid rgb(0, 119, 255); + box-shadow: 0px 0px 6px rgb(0, 119, 255); + + } +} + +.box-container { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-top: 40px; + max-width: 950px; + margin: 0 auto; +} + +.box-container2 { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-top: 20px; + margin-bottom: 20px; + max-width: 100%; + margin: 0 auto; +} + +.box { + width: 60px; + height: 55px; + background-color: #121c27; + border: 2px solid #121c27; + margin: 0 12.5px; + border-radius: 15px; + display: flex; + -webkit-user-drag: none; + user-select: none; + align-items: center; + justify-content: center; + margin-top: 20px; + box-shadow: 0px 0px 10px #1d1c22; + transition: + border 0.4s, + background-color 0.3s, + box-shadow 0.3s, + width 0.3s; +} + +.box:hover { + background-color: #152538FF; + border: 2px solid rgb(0, 140, 255); + box-shadow: 0px 0px 6px rgb(0, 140, 255); + width: 85px; + transform: scale(1.05); +} diff --git a/static/Narichten.html b/static/Narichten.html new file mode 100644 index 0000000..7d2e791 --- /dev/null +++ b/static/Narichten.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + NavigateX +

+ + +

+ + + + + \ No newline at end of file diff --git a/static/SCRIPTS/Menu.js b/static/SCRIPTS/Menu.js new file mode 100644 index 0000000..5b385e2 --- /dev/null +++ b/static/SCRIPTS/Menu.js @@ -0,0 +1,43 @@ +let rotated = false; +const image = document.getElementById("rotateImage"); +const menu = document.getElementById("menu"); +const buttons = document.querySelectorAll(".menu-button"); + +function toggleImage() { + if (rotated) { + image.style.transform = "rotate(0deg)"; + menu.style.animation = "fade-out 0.2s ease-in-out forwards"; + buttons.forEach((button, index) => { + setTimeout(() => { + button.style.animation = "fade-out 0.3s ease-in-out forwards"; + setTimeout(() => { + button.style.display = "none"; + }, 500); + }, 80 * index); + }); + rotated = false; + } else { + image.style.transform = "rotate(270deg)"; + menu.style.animation = "fade-in 0.2s ease-in-out forwards"; + buttons.forEach((button, index) => { + setTimeout(() => { + button.style.animation = "fade-in 0.3s ease-in-out forwards"; + button.style.display = "block"; + }, 80 * index); + }); + menu.style.display = "block"; + rotated = true; + } +} + +document.addEventListener("DOMContentLoaded", function () { + var buttons = document.querySelectorAll(".menu-button"); + buttons.forEach(function (button) { + button.addEventListener("click", function () { + var pageName = button.getAttribute("data-page"); + if (pageName) { + window.location.href = pageName; + } + }); + }); +}); diff --git a/static/SCRIPTS/Search.js b/static/SCRIPTS/Search.js new file mode 100644 index 0000000..745bb6f --- /dev/null +++ b/static/SCRIPTS/Search.js @@ -0,0 +1,34 @@ +function searchGoogle() { + const searchText = document.getElementById("searchBox").value; + if (searchText.trim() !== "") { + const googleURL = `https://www.google.com/search?q=${encodeURIComponent(searchText)}`; + window.location.href = googleURL; + } +} + +document.getElementById("searchBox").addEventListener("keyup", function(event) { + if (event.key === "Enter") { + searchGoogle(); + } +}); + +document.querySelector(".search-button").addEventListener("click", function() { + searchGoogle(); +}); + +function clearSearchBox() { + document.getElementById("searchBox" + + "" + + "" + + "").value = ''; + searchBox.style.backgroundColor = '#2a1212' + searchBox.style.border = '2px solid #ff0000'; + searchBox.style.boxShadow = '0 0 5px #ff0000'; + + setTimeout(function() { + searchBox.style.backgroundColor = ''; + searchBox.style.border = ''; + searchBox.style.boxShadow = ''; + }, 350); +} +