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

@@ -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="survivalShapedContainerPlugins">
-          <div class="customcontainer3">
+          <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 class="customContainer">
-        <div id="slider-wrapper">
+        <div class="sliderWrapper">
-          <div class="slider-content">
+          <div class="sliderContent">
-            <div class="indexslider">
+            <div class="indexSlider">
-              <div id="go-left" onclick="previousSlide()" class="circleBehind go-left"></div><!-- show prev image -->
+              <div id="go-left" onclick="previousSlide()" class="circleBehind goLeft"></div><!-- show prev image -->
-              <div id="go-right" onclick="nextSlide()" class="circleBehind go-right"></div><!-- show  next image -->
+              <div id="go-right" onclick="nextSlide()" class="circleBehind goRight"></div><!-- show  next image -->
-              <span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
+              <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>

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;
+  }
+}

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 */