From 44a7a2140ed0274a61e193fc1902cce9e59fe88e Mon Sep 17 00:00:00 2001
From: Peter <42907716+MrShack@users.noreply.github.com>
Date: Sat, 5 Apr 2025 21:10:36 +0200
Subject: [PATCH] Added darkmode styles and optimized class structure

Introduced dark mode styling across sections and improved CSS for better readability and maintainability. Replaced generic class names with more descriptive ones and reorganized structure for consistency. Adjusted responsive design to ensure better display on various screen sizes.
---
 frontend/src/app/home/home.component.html |  34 ++--
 frontend/src/app/home/home.component.scss | 235 ++++++++++++++++++++++
 frontend/src/styles.scss                  |   8 +-
 3 files changed, 259 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
index cc0c1f0..8f4cfbd 100644
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -13,7 +13,7 @@
     </div>
   </app-header>
   <main>
-    <section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0px;">
+    <section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0;">
       <!--      TODO load player count from old api or backend?-->
       <h2 style="color: white;"><span class="player-count">Loading...</span></h2>
       <h2 style="color: white;">Server IP: play.alttd.com</h2>
@@ -50,7 +50,7 @@
     -->
     <section class="darkmodeSection">
       <div class="container">
-        <iframe id="discordwidget" src="https://discordapp.com/widget?id=141644560005595136&theme=dark"></iframe>
+        <iframe id="discord-widget" src="https://discordapp.com/widget?id=141644560005595136&theme=dark"></iframe>
         <div class="paragraph" id="discordp">
           <h2>Meet the Community</h2>
           <p>Altitude is home to players young and old from all around the globe, and here, everyone is family. Altitude
@@ -68,13 +68,13 @@
       </div>
     </section>
     <section id="section2">
-      <div class="customcontainer">
+      <div class="customContainer">
         <h2 style="color: white; padding-bottom: 35px; font-size:2.8em">Survival Shaped by You</h2>
         <p style="color: white; padding-bottom: 35px; margin: auto; font-size: 1.1em;">Altitude is built by the
           community, for the community. We've added features requested by our members and several custom plugins to
           create our "perfect" survival experience.</p>
-        <div id="customcontainer2">
-          <div class="customcontainer3">
+        <div class="survivalShapedContainerPlugins">
+          <div class="pluginColumn">
             <h2>McMMO & MyPet</h2>
             <p>Two of the most requested plugins on Altitude, level up yourself and your pet with these MMO-based
               plugins!</p>
@@ -84,7 +84,7 @@
               </div>
             </a>
           </div>
-          <div class="customcontainer3">
+          <div class="pluginColumn">
             <h2>Dynamic map</h2>
             <p>See the world and the players around it in real-time! The map shows the entire survival world with claims
               and warps.</p>
@@ -94,7 +94,7 @@
               </div>
             </a>
           </div>
-          <div class="customcontainer3">
+          <div class="pluginColumn">
             <h2>Player Shops</h2>
             <p>Our economy is built on player shops, encouraging player interaction and putting the control in your
               hands.</p>
@@ -108,13 +108,15 @@
       </div>
     </section>
     <section class="removemobile darkmodeSection">
-      <div class="customcontainer">
-        <div id="slider-wrapper">
-          <div class="slider-content">
-            <div class="indexslider">
-              <div id="go-left" onclick="previousSlide()" class="circleBehind go-left"></div><!-- show prev image -->
-              <div id="go-right" onclick="nextSlide()" class="circleBehind go-right"></div><!-- show  next image -->
-              <span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
+      <div class="customContainer">
+        <div class="sliderWrapper">
+          <div class="sliderContent">
+            <div class="indexSlider">
+              <div id="go-left" onclick="previousSlide()" class="circleBehind goLeft"></div><!-- show prev image -->
+              <div id="go-right" onclick="nextSlide()" class="circleBehind goRight"></div><!-- show  next image -->
+              <div class="display">
+                <span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
+              </div>
             </div>
             <!-- dots/indicators controls here from js-->
           </div>
@@ -122,7 +124,7 @@
       </div>
     </section>
     <section style="background: #202020;">
-      <div class="customcontainer">
+      <div class="customContainer">
         <h2 id="quote" style="color: white; font-family: 'minecraft-text',sans-serif; line-height: 1.3em;">"Great
           community, great people, great server all round . . . If it can bring back my love for minecraft, it could
           work wonders for you."</h2>
@@ -130,7 +132,7 @@
       </div>
     </section>
     <section class="darkmodeSection">
-      <div class="customcontainer">
+      <div class="customContainer">
         <img ngSrc="/public/img/logos/log.png" alt="Alternative Altitude Server Logo" height="129"
              width="120">
         <h2 style="margin: 20px 0; font-size: 1.8em;">play.alttd.com</h2>
diff --git a/frontend/src/app/home/home.component.scss b/frontend/src/app/home/home.component.scss
index 51e76e1..a145c1c 100644
--- a/frontend/src/app/home/home.component.scss
+++ b/frontend/src/app/home/home.component.scss
@@ -19,7 +19,30 @@
   background-size: cover;
 }
 
+main .container {
+  padding: 80px 0;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
 
+.customContainer {
+  width: 80%;
+  max-width: 1020px;
+  margin: auto;
+  padding: 80px 0;
+  text-align: center;
+}
+
+// Discord Widget
+#discord-widget {
+  margin: 0 auto;
+  width: 40%;
+  max-width: 380px;
+  height: 400px;
+}
+
+//Scroll button/anchorpoint
 #scroll-button {
   position: absolute;
   bottom: 50px;
@@ -118,3 +141,215 @@
     opacity: 0;
   }
 }
+
+// Survival Shaped by You section
+.survivalShapedContainerPlugins {
+  display: flex;
+  justify-content: space-between;
+}
+
+.pluginColumn {
+  width: 250px;
+}
+
+.pluginColumn div {
+  margin-top: 30px;
+}
+
+.pluginColumn h2 {
+  color: var(--white);
+  font-size: 1.4em;
+  margin-bottom: 10px;
+}
+
+.pluginColumn p {
+  color: var(--white);
+}
+
+// Community builds section, removed if on mobile
+.sliderWrapper, .sliderContent {
+  display: flex;
+  margin: auto;
+}
+
+.sliderContent {
+  position: relative;
+  box-shadow: 8px 8px 25px 0 rgba(0, 0, 0, 0.2);
+}
+
+.indexSlider {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: rgba(0, 0, 0, 0.9);
+  font-size: 21px;
+  text-align: center;
+  border-radius: 5px;
+}
+
+.goLeft, .goRight {
+  display: block;
+  text-align: center;
+  position: absolute;
+  width: 250px;
+}
+
+.goRight:hover, .goLeft:hover {
+  background: rgba(155, 155, 155, 0.3);
+  box-shadow: -2px 0 15px rgba(200, 200, 200, 0.5);
+  cursor: pointer;
+}
+
+.goLeft {
+  height: 100%;
+  color: white;
+  left: 0;
+}
+
+.goRight {
+  height: 100%;
+  color: white;
+  right: 0;
+}
+
+.slide {
+  border-radius: 5px;
+}
+
+.display > span {
+  animation: fadein 1.5s;
+}
+
+.display > span {
+  width: 700px;
+  height: 400px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.dots {
+  text-align: center;
+  position: absolute;
+  bottom: 3%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+
+.dot {
+  position: relative;
+  cursor: pointer;
+  height: 1rem;
+  width: 1rem;
+  border: 1px solid rgb(255, 255, 255);
+  opacity: 0.5;
+  margin: 0 5px;
+  border-radius: 50%;
+  display: inline-block;
+  transition: all 0.3s ease;
+}
+
+.dot:hover {
+  box-shadow: -2px 0 10px 5px rgba(200, 200, 200, 0.3);
+  background-color: rgba(200, 200, 200, 0.8);
+  border: 1px solid rgb(255, 255, 255);
+  transform: scale(1.2);
+}
+
+// Different resolution changes
+@media (max-width: 1150px) {
+  .container {
+    width: 90%;
+  }
+
+  h1 {
+    font-size: 3em;
+  }
+
+  .title h2 {
+    font-size: 1em;
+  }
+
+  #homeh2 {
+    font-size: 1.6em;
+  }
+
+  .title {
+    height: calc(100% - 150px);
+    margin-top: 0;
+  }
+
+  .container, .customContainer {
+    width: 90%;
+  }
+
+  #header-img {
+    width: 45%;
+  }
+}
+
+@media (max-width: 900px) {
+  .removemobile {
+    display: none;
+  }
+}
+
+@media (max-width: 690px) {
+  #discordwidget {
+    margin: 0 auto;
+    width: 60%;
+    max-width: 380px;
+    height: 400px;
+  }
+
+  #discordp {
+    margin: 50px auto;
+  }
+
+  .title h2 {
+    font-size: 0.9em;
+  }
+
+  #homeh2 {
+    font-size: 1.4em;
+    width: 100%;
+  }
+
+  #header-img {
+    width: 65%;
+  }
+
+  .title {
+    height: calc(100% - 110px);
+    margin-top: 100px;
+  }
+
+  .columnContainer {
+    width: 100%;
+    text-align: center;
+  }
+
+  main .container {
+    text-align: center;
+    width: 90%;
+    padding: 30px 0;
+  }
+
+  .paragraph {
+    width: 80%;
+    margin: 0 auto 30px auto;
+  }
+
+  .survivalShapedContainerPlugins {
+    display: block;
+  }
+
+  .pluginColumn {
+    margin: 30px auto;
+  }
+
+  #quote {
+    font-size: 1em;
+  }
+}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index ed268ec..3c983a8 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -299,6 +299,12 @@ tr {
   background: #8b8a8f;
 }
 
+// Everything for darkmode
+
+.darkmodeSection {
+  background-color: var(--color-secondary);
+  transition: 0.5s background ease;
+}
 
 @media (max-width: 1150px) {
   .container {
@@ -315,5 +321,3 @@ tr {
   }
 
 }
-
-/* main css end */