Resent files uploaded

archive.html

@@ -54,16 +54,51 @@
 
         <div class="accordion">
             <div class="accordion-item">
-                <input type="checkbox" name="accordion" id="item1" checked>
+                <input class="accordion-checkbox" type="checkbox" name="accordion" id="item1">
                 <label for="item1">
                     <div class="accordion-title">
-                        <img src="./assets/icons/SF Symbols/arrowtriangle_right_circle_fill.png" alt="chevron_down">
+                        <img class="chevron" src="./assets/icons/SF Symbols/arrowtriangle_right_circle_fill.png" alt="chevron_down">
-                        <img src="./assets/images/ResentIcon.png" alt="">
+                        <img class="accordion-icon" src="./assets/images/ResentIcon.png" alt="">
                         <p>Resent</p>
                     </div>
                 </label>
                 <div class="accordion-content">
-                    <p>Content for item 1.</p>
+                    <div class="client-item">
+                        <div class="client-item-title">
+                            <img class="client-icon" src="./assets/images/ResentIcon.png" alt="">
+                            <p>Resent 3.3.2 - patch 1 US </p>                            
+                        </div>
+                        <div class="client-item-buttons">
+                            <a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" target="_blank">Play</a>
+                            <a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" download>Download</a>
+                        </div>
+                    </div>
+
+                    <!-- --------------------------------------------------------------------------------------------- -->
+
+                    <div class="client-item">
+                        <div class="client-item-title">
+                            <img class="client-icon" src="./assets/images/ResentIcon.png" alt="">
+                            <p>Resent 3.4 - patch 1 US</p>                            
+                        </div>
+                        <div class="client-item-buttons">
+                            <a href="./clients/1.8/Resent/Resent_3.4_patch_1_1.8_US.html" target="_blank">Play</a>
+                            <a href="./clients/1.8/Resent/Resent_3.4_patch_1_1.8_US.html" download>Download</a>
+                        </div>
+                    </div>
+
+                    <!-- --------------------------------------------------------------------------------------------- -->
+
+                    <div class="client-item">
+                        <div class="client-item-title">
+                            <img class="client-icon" src="./assets/images/ResentIcon.png" alt="">
+                            <p>Resent</p>                            
+                        </div>
+                        <div class="client-item-buttons">
+                            <a href="./clients/1.8/Resent" target="_blank">Play</a>
+                            <a href="./clients/1.8/Resent" download>Download</a>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="accordion-item">
@@ -73,15 +108,6 @@
                     <p>Content for item 2.</p>
                 </div>
             </div>
-            <div class="accordion-item">
-                <input type="checkbox" name="accordion" id="item3">
-                <label for="item3">Accordion Item 3</label>
-                <div class="accordion-content">
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tortor vitae purus faucibus ornare suspendisse sed. Viverra accumsan in nisl nisi scelerisque eu. Eleifend quam adipiscing vitae proin sagittis nisl. Cursus risus at ultrices mi tempus imperdiet. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Donec massa sapien faucibus et molestie ac feugiat. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Ac tincidunt vitae semper quis lectus nulla at volutpat diam. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Vestibulum lectus mauris ultrices eros. Id porta nibh venenatis cras sed felis eget. Nec sagittis aliquam malesuada bibendum arcu vitae. Et ultrices neque ornare aenean euismod.
-
-Viverra suspendisse potenti nullam ac. Ac orci phasellus egestas tellus rutrum tellus pellentesque. Tellus molestie nunc non blandit massa enim nec dui. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Cursus vitae congue mauris rhoncus aenean. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Nulla pharetra diam sit amet nisl. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.</p>
-                </div>
-            </div>
         </div>
     </div>
 </body>

archive_stylesheet.css

@@ -1,11 +1,28 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 .accordion {
     width: 100%;
-    border-radius: 20px;
+}
-    background-color: #333;
+
+.chevron {
+    margin: 10px;
+    width: 25px;
+    transition: transform 0.5s ease;
+}
+
+.accordion-icon {
+    width: 50px;
+    margin-right: 10px;
 }
 
 .accordion-item {
-    margin: 10px;
+    background-color: #333;
+    border-radius: 10px;
+    margin: 10px 0;
 }
 
 .accordion-item input {
@@ -18,23 +35,62 @@
     cursor: pointer;
 }
 
-.accordion-item .accordion-content {
+.accordion-content {
-    max-height: 0;
+    max-height: 0px;
     overflow: hidden;
-    transition: max-height 0.2s ease;
+    background-color: #555;
-    background-color: #222;
+    border-radius: 0 0 10px 10px;
-    padding: 0 10px;
+    transition: max-height 0.1s ease-out;
 }
 
 .accordion-item input:checked ~ .accordion-content {
-    max-height: 100%; /* You can adjust this value depending on your content */
+    max-height: calc(71px * 18); /* You can adjust this value depending on your content */
 
 }
 
-.accordion-item input:checked > .accordion-title img:first-child {
+.accordion-item input:checked ~ label .chevron {
     transform: rotate(90deg);
 }
+
 .accordion-title {
     display: flex;
     align-items: center;
 }
+
+.accordion-content p {
+    padding: 10px;
+    color: white;
+}
+
+.client-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid #555;
+}
+
+.client-item * {
+    display: flex;
+    align-items: center;
+}
+
+.client-item img {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: #333;
+}
+
+.client-item-buttons {
+    margin-left: auto;
+}
+
+.client-item-buttons a {
+    margin: 0 5px;
+    padding: 10px;
+    text-decoration: none;
+    border-radius: 10px;
+    background-color: #333;
+    color: white;
+    cursor: pointer;
+}

stylesheet.css

@@ -36,8 +36,8 @@ body {
     color: white;
 
     width: 100%;;
-    padding-left: 10%;
+    padding-left: var(--side_distance);
-    padding-right: 10%;
+    padding-right: var(--side_distance);
 }
 
 #view .page-title {