For Custom maps page: List new-gen Steam Workshop maps, their author,…

… and link to the Steam Workshop pages. Add tutorial at the top of the page.

css/style.css

@@ -158,6 +158,19 @@ button:hover {
     transition-duration: 200ms;
     background-color: #1af7ff;
 }
+.maps-tip {
+    text-align: center;
+    text-rendering: optimizeLegibility;
+    font-size: 14px;
+    margin: auto;
+    margin-top: 20px !important;
+    padding: 10px;
+    line-height: 18px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    max-width: 880px;
+    background-color: #00000070;
+}
 .maps_list {
     border-top-style: solid;
     border-top-width: 1px;
@@ -175,45 +188,59 @@ button:hover {
 .map_tile {
     margin: 10px;
     background-color: #FFFFFF20;
-    aspect-ratio: 6 / 1;
     max-width: 200px !important;
     color: #FFF;
     text-align: center;
     font-family: 'Montserrat', sans-serif;
     flex-direction: row;
 	flex-wrap: wrap;
-    max-height: 175px;
+    max-height: 180px;
 }
 .map_tile_preview {
     aspect-ratio: 16 / 9;
     background-color: #FFFFFF10;
     width: 100%;
     margin: 0
 }
-.map_tile_name {
+.map_tile_name, .map_tile_author {
+    line-height: 5px;
     font-size: 12px;
     margin: 10px;
     margin-top: 8px;
 }
-.download_map {
+.map_tile_author {
+    text-rendering: optimizeLegibility;
+    font-size: 8px !important;
+    line-height: 5px;
+    color: #ABABAB;
+}
+.download-map, .download-disabled {
     transition-duration: 400ms;
     background-color: #FFFFFF20;
     color: #000;
 
     margin: 0;
+    margin-bottom: 15px;
     padding: 0;
     width: 18px;
     height: 18px;
 
     font-size: 12px;
     font-family: 'Montserrat', sans-serif;
-    border: 0px;
+    border-style: none !important;
+    border: 0;
+}
+.download-map {
+    background-color: #FFFFFF20;
+}
+.download-disabled {
+    background-color: #FF330030 !important;
 }
-.download_map:hover {
+.download-map:hover {
     transition-duration: 400ms;
     background-color: #FFFFFF40;
 }
-.download_map_icon {
+.download-map-icon {
     margin: 0;
     width: auto;
     height: 18px;

maps.html

@@ -18,32 +18,70 @@
         <a href="https://sectorsedgecommunity.github.io/serverslist">Server List</a>
         <a href="mapmaking">Map Making</a>
     </div>
-    <div class="maps_list">
+    <div>
+        <p class="maps-tip">Here you can find newer maps which are on the Steam Workshop.<br/>Maps which aren't on the Steam Workshop but are ready to play will be displayed here too.</p>
+        <div class="maps_list">
         <div class="map_tile">
-            <img draggable="false" class="map_tile_preview" src="cr.png"><p class="map_tile_name">Blurry Crossing</p>
-            <button class="download_map" onclick="window.location.href='https://example.com'"><img class="download_map_icon" src="download.png"></button>
-            <button class="download_map" onclick="window.location.href='https://example.com'"><img class="download_map_icon" src="workshop.png"></button>
+            <img draggable="false" class="map_tile_preview" src="soltriumcastle.png"><p class="map_tile_name">Soltrium Castle</p>
+            <p class="map_tile_author">fredanie2005</p>
+            <button class="download-disabled" title="Download map"><img draggable="false" class="download-map-icon" src="download.png"></button>
+            <button class="download-map" title="Go to Steam Workshop page" onclick="window.location.href='https://steamcommunity.com/sharedfiles/filedetails/?id=3328251616'"><img draggable="false" class="download-map-icon" src="workshop.png"></button>
         </div>
         <div class="map_tile">
-            <img draggable="false" class="map_tile_preview" src="se_logo_dark.png"><p class="map_tile_name">No preview image example</p>
-            <button class="download_map" onclick="window.location.href='https://example.com'"><img class="download_map_icon" src="download.png"></button>
-            <button class="download_map" onclick="window.location.href='https://example.com'"><img class="download_map_icon" src="workshop.png"></button>
+            <img draggable="false" class="map_tile_preview" src="japan.png"><p class="map_tile_name">Japan</p>
+            <p class="map_tile_author">fredanie2005</p>
+            <button class="download-disabled" title="Download map"><img draggable="false" class="download-map-icon" src="download.png"></button>
+            <button class="download-map" title="Go to Steam Workshop page" onclick="window.location.href='https://steamcommunity.com/sharedfiles/filedetails/?id=3326629038'"><img draggable="false" class="download-map-icon" src="workshop.png"></button>
         </div>
         <div class="map_tile">
             <img draggable="false" class="map_tile_preview" src="cmf.jpg"><p class="map_tile_name">Corahk Mining Facility</p>
-            <button class="download_map" onclick="window.location.href='https://example.com'"><img class="download_map_icon" src="download.png"></button>
-            <button class="download_map" onclick="window.location.href='https://example.com'"><img class="download_map_icon" src="workshop.png"></button>
+            <p class="map_tile_author">Rocket Skeleton/Vercidium</p>
+            <button class="download-disabled" title="Download map"><img draggable="false" class="download-map-icon" src="download.png"></button>
+            <button class="download-map" title="Go to Steam Workshop page" onclick="window.location.href='https://steamcommunity.com/sharedfiles/filedetails/?id=3332384672'"><img draggable="false" class="download-map-icon" src="workshop.png"></button>
         </div>
         <div class="map_tile">
-            <img draggable="false" class="map_tile_preview" src="ca.jpg"><p class="map_tile_name">not so capital now</p>
-            <button class="download_map" onclick="window.location.href='https://example.com'"><img class="download_map_icon" src="download.png"></button>
-            <button class="download_map" onclick="window.location.href='https://example.com'"><img class="download_map_icon" src="workshop.png"></button>
+            <img draggable="false" class="map_tile_preview" src="skyarenaa.png"><p class="map_tile_name">Sky Arena A</p>
+            <p class="map_tile_author">RainlessSky</p>
+            <button class="download-disabled" title="Download map"><img draggable="false" class="download-map-icon" src="download.png"></button>
+            <button class="download-map" title="Go to Steam Workshop page" onclick="window.location.href='https://steamcommunity.com/sharedfiles/filedetails/?id=3337380657'"><img draggable="false" class="download-map-icon" src="workshop.png"></button>
         </div>
         <div class="map_tile">
-            <img draggable="false" class="map_tile_preview" src="r.png"><p class="map_tile_name">mat_fullbright: the map</p>
-            <button class="download_map" onclick="window.location.href='https://example.com'"><img class="download_map_icon" src="download.png"></button>
-            <button class="download_map" onclick="window.location.href='https://example.com'"><img class="download_map_icon" src="workshop.png"></button>
+            <img draggable="false" class="map_tile_preview" src="openworld256.png"><p class="map_tile_name">Open World 256²</p>
+            <p class="map_tile_author">RainlessSky</p>
+            <button class="download-disabled" title="Download map"><img draggable="false" class="download-map-icon" src="download.png"></button>
+            <button class="download-map" title="Go to Steam Workshop page" onclick="window.location.href='https://steamcommunity.com/sharedfiles/filedetails/?id=3337372092'"><img draggable="false" class="download-map-icon" src="workshop.png"></button>
         </div>
+        <div class="map_tile">
+            <img draggable="false" class="map_tile_preview" src="corahkwasteland.png"><p class="map_tile_name">Corahk Wasteland</p>
+            <p class="map_tile_author">RainlessSky</p>
+            <button class="download-disabled" title="Download map"><img draggable="false" class="download-map-icon" src="download.png"></button>
+            <button class="download-map" title="Go to Steam Workshop page" onclick="window.location.href='https://steamcommunity.com/sharedfiles/filedetails/?id=3284252051'"><img draggable="false" class="download-map-icon" src="workshop.png"></button>
+        </div>
+        <div class="map_tile">
+            <img draggable="false" class="map_tile_preview" src="lavaarenac.png"><p class="map_tile_name">Lava Arena C</p>
+            <p class="map_tile_author">RainlessSky</p>
+            <button class="download-disabled" title="Download map"><img draggable="false" class="download-map-icon" src="download.png"></button>
+            <button class="download-map" title="Go to Steam Workshop page" onclick="window.location.href='https://steamcommunity.com/sharedfiles/filedetails/?id=3279050511'"><img draggable="false" class="download-map-icon" src="workshop.png"></button>
+        </div>
+        <div class="map_tile">
+            <img draggable="false" class="map_tile_preview" src="soltecwarehouse.png"><p class="map_tile_name">Soltec Warehouse</p>
+            <p class="map_tile_author">RainlessSky</p>
+            <button class="download-disabled" title="Download map"><img draggable="false" class="download-map-icon" src="download.png"></button>
+            <button class="download-map" title="Go to Steam Workshop page" onclick="window.location.href='https://steamcommunity.com/sharedfiles/filedetails/?id=3279047614'"><img draggable="false" class="download-map-icon" src="workshop.png"></button>
+        </div>
+        <div class="map_tile">
+            <img draggable="false" class="map_tile_preview" src="corahkwastelandnovis.png"><p class="map_tile_name">Corahk Wasteland (NO-VIS)</p>
+            <p class="map_tile_author">RainlessSky</p>
+            <button class="download-disabled" title="Download map"><img draggable="false" class="download-map-icon" src="download.png"></button>
+            <button class="download-map" title="Go to Steam Workshop page" onclick="window.location.href='https://steamcommunity.com/sharedfiles/filedetails/?id=3337381943'"><img draggable="false" class="download-map-icon" src="workshop.png"></button>
+        </div>
+        <div class="map_tile">
+            <img draggable="false" class="map_tile_preview" src="no_preview.png"><p class="map_tile_name">Workshop map</p>
+            <p class="map_tile_author">Author</p>
+            <button class="download-disabled" title="Download map"><img draggable="false" class="download-map-icon" src="download.png"></button>
+            <button class="download-disabled" title="Go to Steam Workshop page" onclick="window.location.href=''"><img draggable="false" class="download-map-icon" src="workshop.png"></button>
+        </div>
+    </div>
     </div>
 </body>