Added store page for simpliCity, tank shooter not finished

14 files changed, 383 insertions, 21 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..50db685
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+temp
+conf
+logs
diff --git a/about/index.html b/about/index.html
index c705b60..530b38b 100644
--- a/about/index.html
+++ b/about/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/style.css">
     <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
-    <title>Projects • altaf-creator</title>
+    <title>About Me • altaf-creator</title>
     <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
 </head>
 
@@ -91,4 +91,4 @@
     </section>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/assets/images/game-hero/simpliCity.png b/assets/images/game-hero/simpliCity.png
new file mode 100644
index 0000000..e31067c
--- /dev/null
+++ b/assets/images/game-hero/simpliCity.png
diff --git a/assets/images/logo/simpliCity.png b/assets/images/logo/simpliCity.png
new file mode 100644
index 0000000..ec1d856
--- /dev/null
+++ b/assets/images/logo/simpliCity.png
diff --git a/assets/videos/trailer_simpliCity.mp4 b/assets/videos/trailer_simpliCity.mp4
new file mode 100644
index 0000000..e3e3694
--- /dev/null
+++ b/assets/videos/trailer_simpliCity.mp4
diff --git a/blog/index.html b/blog/index.html
index 65a4d79..89ad846 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -35,7 +35,7 @@
                         <img src="/assets/images/blog/33_cover.png"
                             alt="">
                         <div>
-                            <div class="flex-container-normal"> <span class="colored-text">Devlog</span>, <span class="colored-text"> simpliCity</span></div>
+                            <div class="flex-container-normal"> <span class="colored-text">Devlog</span>,&nbsp;<span class="colored-text"> simpliCity</span></div>
                             <a href="simpliCity/well-that-was-dumb/" class="link">This Week's Devlog: Well that was dumb. (33nd Week of 2023)</a>
                             <p>Wed, 16 August 2023</p>
                         </div>
@@ -66,4 +66,4 @@
     </section>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index 9439c2c..e39384d 100644
--- a/index.html
+++ b/index.html
@@ -60,7 +60,7 @@
                     <div class="flex-container flex" style="min-height: 600px;">
                         <div class="flex full-img-card"
                             style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); ">
-                            <a href="https://store.steampowered.com/app/2381230/simpliCity/" class="fill-div gradient-overlay">
+                            <a href="/projects/simpliCity/" class="fill-div gradient-overlay">
                                 <span>simpliCity</span>
                             </a>
 
@@ -94,7 +94,7 @@
                         <img src="/assets/images/blog/33_cover.png"
                             alt="">
                         <div>
-                            <div class="flex-container-normal"> <span class="colored-text">Devlog</span>, <span class="colored-text"> simpliCity</span></div>
+                            <div class="flex-container-normal"> <span class="colored-text">Devlog</span>,&nbsp;<span class="colored-text"> simpliCity</span></div>
                             <a href="blog/simpliCity/well-that-was-dumb/" class="link">This Week's Devlog: Well that was dumb. (33nd Week of 2023)</a>
                             <p>Wed, 16 August 2023</p>
                         </div>
@@ -109,7 +109,9 @@
                         </div>
         	    </div>
                 </div>
-		<a href="blog/" class="button" style="margin-left: auto; margin-right: auto;">View More</a>
+		<div class="flex-container flex-center">
+		    <a href="blog/" class="button" style="margin-left: auto; margin-right: auto;">View More</a>
+		</div>
                 <hr>
                 <h1 class="center">Socials</h1>
                 <div class="center-grid" style="min-height: 0;">
diff --git a/projects/index.html b/projects/index.html
index 92e38c9..b2477c7 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -34,7 +34,7 @@
                     <div class="flex-container flex" style="height: 800px;">
                         <div class="flex full-img-card"
                             style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); ">
-                            <a href="https://store.steampowered.com/app/2381230/simpliCity/" class="fill-div gradient-overlay">
+                            <a href="/projects/simpliCity/" class="fill-div gradient-overlay">
                                 <span>simpliCity</span>
                             </a>
 
@@ -115,4 +115,4 @@
     </section>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/projects/simpliCity/index.html b/projects/simpliCity/index.html
new file mode 100644
index 0000000..dd2a876
--- /dev/null
+++ b/projects/simpliCity/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+    <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+    <title>simpliCity • altaf-creator</title>
+    <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+</head>
+
+<body onload="addNodes()">
+    <script defer src="/scripts/onload.js"></script>
+    <script defer src="/scripts/scroll.js"></script>
+    <script defer src="/scripts/video.js"></script>
+    <div class="floating-nav-container">
+        <div class="floating-nav">
+            <a href="/about/" class="link">About Me</a>
+            <a href="/projects/" class="link">Projects</a>
+            <a href="/blog/" class="link">(dev)Blog</a>
+        </div>
+    </div>
+    <div class="sidebar" id="sidebar">
+        <a href="/">
+            <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> 
+        </a>
+        <span>altaf-creator</span>
+    </div>
+    <div class="sidebar-progress-container" id="progressContainer">
+    </div>
+    <div class="banner-top-bar flex-container">
+	<a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy on Steam</a>
+	<img class="center-absolute" src="/assets/images/logo/simpliCity.png" alt="">
+    </div>
+    <section style="border-top: none; overflow: hidden;" id="simpliCity-img">
+	<video src="/assets/videos/trailer_simpliCity.mp4" class="banner-video" id="video" onended="stopVideo('video')"></video>
+	<div class="banner-bottom-bar flex-container">
+	    <div class="flex">
+		<a class="button" href="#" onclick="playVideo('video')">▶ Trailer</a>
+		<i class="fa-brands fa-windows" title="Windows 8+ 64-bit"></i>
+	    </div>
+	    <div class="flex-right">
+		<a class="button" href="#"><i class="fa-brands fa-windows"></i> Download Demo</a>
+		<a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy on Steam</a>
+	    </div>
+	</div>
+    </section>
+    <section>
+        <div class="center-grid">
+            <div class="div-sizing">
+		<h1>What is simpliCity?</h1>
+		<p>simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.</p>
+		<p><i>Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!</i></p>
+		<h1>This Game Offers:</h1>
+		<ul>
+		    <li>30+ different buildings</li>
+		    <li>Save & load system</li>
+		    <li>Simple worker system</li>
+		    <li>Relaxing feel & atmosphere</li>
+		    <li>Simple residential system</li>
+		    <li>Sandbox mode if you want no challanges at all</li>
+		</ul>
+		<h1>Gameplay</h1>
+		<p>The gameplay of the game is simple. You start with an empty island in the middle of the ocean. You start building houses, trees, and offices. Residents will come to your city and you can expand the city into whatever you'd like!</p>
+		<h1>Feedback & Discord</h1>
+		<p>Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our <a class="link" href="https://discord.gg/Mg5WFqrHk3">Discord Server</a>!</p>
+            </div>
+        </div>
+    </section>
+    <section class="normal-section">
+	<div class="center-grid" style="min-height: 0px;">
+	    <div class="div-sizing">
+		<h1>Minimum System Requirements</h1>
+		<ul>
+		    <li><b>Operating System:</b> Windows 8+ 64-bit</li>
+		    <li><b>Processor:</b> Intel Dual Core 2GHz</li>
+		    <li><b>Memory:</b> 2 GB of RAM</li>
+		    <li><b>Graphics:</b> Intergrated Graphics Card</li>
+		    <li><b>DirectX:</b> Version 11</li>
+		    <li><b>Storage:</b> 512 MB available space</li>
+		</ul>
+	    </div>
+	</div>
+    </section>
+    <section>
+        <div class="center-grid">
+            <div class="div-sizing">
+		<h1>Downloads</h1>
+		<div class="flex-container">
+		    <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy Latest Version on Steam (beta0.2)</a>
+		    <a class="button" href="#"><i class="fa-solid fa-download"></i> Download Latest Demo (demo0.1)</a>
+		</div>
+		<h1>Older Versions (coming soon)</h1>
+		<div class="flex-container">
+		    <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3.1</a>
+		    <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3</a>
+		    <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.2</a>
+		    <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.1</a>
+		    <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.0</a>
+		</div>
+		<h1>Changelogs (coming soon)</h1>
+		<a class="button button-disabled"><i class="fa-solid fa-list"></i> View Changelogs</a>
+            </div>
+        </div>
+    </section>
+</body>
+
+</html>
diff --git a/projects/tank-shooter/index.html b/projects/tank-shooter/index.html
new file mode 100644
index 0000000..3a79dc9
--- /dev/null
+++ b/projects/tank-shooter/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+    <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+    <title>simpliCity • altaf-creator</title>
+    <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+</head>
+
+<body onload="addNodes()">
+    <script defer src="/scripts/onload.js"></script>
+    <script defer src="/scripts/scroll.js"></script>
+    <script defer src="/scripts/video.js"></script>
+    <div class="floating-nav-container">
+        <div class="floating-nav">
+            <a href="/about/" class="link">About Me</a>
+            <a href="/projects/" class="link">Projects</a>
+            <a href="/blog/" class="link">(dev)Blog</a>
+        </div>
+    </div>
+    <div class="sidebar" id="sidebar">
+        <a href="/">
+            <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> 
+        </a>
+        <span>altaf-creator</span>
+    </div>
+    <div class="sidebar-progress-container" id="progressContainer">
+    </div>
+    <div class="banner-top-bar flex-container">
+	<a class="button" href="#"><i class="fa-brands fa-windows"></i> Windows 64-bit</a>
+	<a class="button" href="#"><i class="fa-brands fa-android"></i> Android</a>
+	<img class="center-absolute" src="/assets/images/logo/simpliCity.png" alt="">
+    </div>
+    <section style="border-top: none; overflow: hidden;" id="simpliCity-img">
+	<video src="/assets/videos/trailer_simpliCity.mp4" class="banner-video" id="video" onended="stopVideo('video')"></video>
+	<div class="banner-bottom-bar flex-container">
+	    <div class="flex desktop" style="margin-left: 20px;">
+		<i class="fa-brands fa-windows" title="Windows 8+ 64-bit"></i>
+		<i class="fa-brands fa-android" title="Android"></i>
+		<i class="fa-solid fa-globe" title="Web Browsers (desktop only)"></i>
+	    </div>
+	    <div class="flex-right">
+		<a class="button desktop" href="#"><i class="fa-brands fa-windows"></i> Windows 64-bit</a>
+		<a class="button" href="#"><i class="fa-brands fa-android"></i> Android</a>
+		<a class="button" href="#"><i class="fa-solid fa-globe"></i> itch.io (Browser)</a>
+	    </div>
+	</div>
+    </section>
+    <section>
+        <div class="center-grid">
+            <div class="div-sizing">
+		<h1>What is simpliCity?</h1>
+		<p>simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.</p>
+		<p><i>Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!</i></p>
+		<h1>This Game Offers:</h1>
+		<ul>
+		    <li>30+ different buildings</li>
+		    <li>Save & load system</li>
+		    <li>Simple worker system</li>
+		    <li>Relaxing feel & atmosphere</li>
+		    <li>Simple residential system</li>
+		    <li>Sandbox mode if you want no challanges at all</li>
+		</ul>
+		<h1>Gameplay</h1>
+		<p>The gameplay of the game is simple. You start with an empty island in the middle of the ocean. You start building houses, trees, and offices. Residents will come to your city and you can expand the city into whatever you'd like!</p>
+		<h1>Feedback & Discord</h1>
+		<p>Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our <a class="link" href="https://discord.gg/Mg5WFqrHk3">Discord Server</a>!</p>
+            </div>
+        </div>
+    </section>
+    <section class="normal-section">
+	<div class="center-grid" style="min-height: 0px;">
+	    <div class="div-sizing">
+		<h1>Minimum System Requirements</h1>
+		<ul>
+		    <li><b>Operating System:</b> Windows 8+ 64-bit</li>
+		    <li><b>Processor:</b> Intel Dual Core 2GHz</li>
+		    <li><b>Memory:</b> 2 GB of RAM</li>
+		    <li><b>Graphics:</b> Intergrated Graphics Card</li>
+		    <li><b>DirectX:</b> Version 11</li>
+		    <li><b>Storage:</b> 512 MB available space</li>
+		</ul>
+	    </div>
+	</div>
+    </section>
+    <section>
+        <div class="center-grid">
+            <div class="div-sizing">
+		<h1>Downloads</h1>
+		<div class="flex-container">
+		    <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy Latest Version on Steam (beta0.2)</a>
+		    <a class="button" href="#"><i class="fa-solid fa-download"></i> Download Latest Demo (demo0.1)</a>
+		</div>
+		<h1>Older Versions (coming soon)</h1>
+		<div class="flex-container">
+		    <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3.1</a>
+		    <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3</a>
+		    <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.2</a>
+		    <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.1</a>
+		    <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.0</a>
+		</div>
+		<h1>Changelogs (coming soon)</h1>
+		<a class="button button-disabled"><i class="fa-solid fa-list"></i> View Changelogs</a>
+            </div>
+        </div>
+    </section>
+</body>
+
+</html>
diff --git a/scripts/onload.js b/scripts/onload.js
index 5c63f35..165f80d 100644
--- a/scripts/onload.js
+++ b/scripts/onload.js
@@ -3,6 +3,13 @@ function addNodes() {
     const container = document.getElementById("progressContainer");
 
     for (var i = 0; i < collection.length; i++) {
-        container.innerHTML += "<nodes class=\"sidebar-progress-node\"></nodes>\n";
+	var node = document.createElement("a");
+	node.className = "node";
+        container.appendChild(node);
+	if (collection.item(i).getAttribute('id') == null) {
+	    collection.item(i).setAttribute('id', `section-${i}`);
+	}
+	node.setAttribute('id', `node-${i}`)
+	node.href = `#${collection.item(i).getAttribute('id')}`
     }
-}
\ No newline at end of file
+}
diff --git a/scripts/scroll.js b/scripts/scroll.js
index b7a6fa0..6c20890 100644
--- a/scripts/scroll.js
+++ b/scripts/scroll.js
@@ -5,17 +5,19 @@ document.addEventListener('scroll', function () {
 
 function progress() {
     const sections = document.getElementsByTagName("section");
-    const nodes = document.getElementsByTagName("nodes");
+    const nodes = document.getElementsByClassName("node");
 
     if (nodes[0]) {
         for (var i = 0; i < sections.length; i++) {
             if (isInViewport(sections[i])) {
-                nodes[i].style.width = "20px";
-                nodes[i].style.height = "20px";
+                nodes[i].style.width = "22px";
+                nodes[i].style.height = "22px";
+		nodes[i].style.backgroundColor = "black";
             }
             else {
-                nodes[i].style.width = "10px";
-                nodes[i].style.height = "10px";
+                nodes[i].style.width = "13px";
+                nodes[i].style.height = "13px";
+		nodes[i].style.backgroundColor = "#555";
             }
         }
     }
diff --git a/scripts/video.js b/scripts/video.js
new file mode 100644
index 0000000..e1d5948
--- /dev/null
+++ b/scripts/video.js
@@ -0,0 +1,16 @@
+function playVideo(elementId) {
+    var element = document.getElementById(elementId);
+    
+    element.style.visibility = "visible";
+    element.style.opacity = "100%";
+    element.play();
+}
+
+function stopVideo(elementId) {
+    var element = document.getElementById(elementId);
+    
+    element.style.visibility = "hidden";
+    element.style.opacity = "0%";
+    element.pause();
+    element.currentTime = 0;
+}
diff --git a/style.css b/style.css
index 0031062..c5e207a 100644
--- a/style.css
+++ b/style.css
@@ -65,6 +65,10 @@ pre {
     color: #444;
 }
 
+.desktop {
+    visibility: visible;
+}
+
 .center {
     text-align: center;
 }
@@ -168,12 +172,12 @@ pre {
     transition: left .3s;
 }
 
-.sidebar-progress-node {
-    width: 10px;
-    height: 10px;
+.node {
+    width: 13px;
+    height: 13px;
     margin-top: 50px;
     margin-bottom: 50px;
-    background-color: black;
+    background-color: #555;
     border-radius: 20px;
     transition: all .3s cubic-bezier(0, .38, .48, 1.35);
 }
@@ -227,6 +231,18 @@ pre {
     width: 100%;
 }
 
+.center-absolute {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.grid {
+    display: grid;
+    grid-auto-flow: column;
+}
+
 .big-text {
     font-size: clamp(1rem, -0.875rem + 30vw, 2rem);
     max-width: 80%;
@@ -283,6 +299,20 @@ pre {
     height: 100%;
 }
 
+.flex-right {
+    display: flex;
+    flex-direction: row;
+    justify-content: right;
+}
+
+.item-left {
+    place-self: start;
+}
+
+.item-center {
+    place-self: center;
+}
+
 .full-img-card {
     background-color: var(--accent);
     margin: 5px;
@@ -324,6 +354,59 @@ pre {
     background: linear-gradient(180deg, transparent calc(100% - 2px), white 0);
 }
 
+.banner-bottom-bar {
+    height: auto;
+    width: 100%;
+    background-color: #0008;
+    backdrop-filter: blur(10px);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 4;
+    align-items: center;
+    color: white;
+}
+
+.banner-top-bar > img {
+    height: 40px;
+}
+
+.banner-bottom-bar > i {
+    font-size: 1.1rem;
+    display: inline-block;
+}
+
+.banner-top-bar {
+    position: fixed;
+    z-index: 3;
+    height: 69px;
+    width: 100%;
+    background-color: #0008;
+    backdrop-filter: blur(10px);
+    top: 0;
+    left: 70px;
+    color: white;
+    box-sizing: border-box;
+    align-content: center;
+}
+
+.banner-video {
+    position: absolute;
+    z-index: 4;
+    top: 0;
+    left: 0;
+    min-width: calc(100vw - 70px); 
+    min-height: 100%;
+    width: calc(100vw - 70px); 
+    height: auto; 
+    background-size: cover;
+    overflow: hidden;
+    object-fit: cover;
+    opacity: 0;
+    transition: all .5s;
+    visibility: hidden;
+}
+
 .card {
     height: 200px;
     max-width: 800px;
@@ -388,7 +471,7 @@ pre {
 }
 
 .button {
-    display: block;
+    display: inline-block;
     width: fit-content;
     padding: 15px;
     background-color: var(--accent);
@@ -398,6 +481,7 @@ pre {
     transition: background-color .2s;
     box-shadow: none;
     position: relative;
+    align-content: center;
 }
 
 .button:hover {
@@ -416,6 +500,13 @@ pre {
     filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.4));
 }
 
+.button-disabled, .button-disabled:hover, .button-disabled:active, .button-disabled:focus {
+    cursor: not-allowed;
+    opacity: .5;
+    background-color: var(--accent1);
+    box-shadow: none !important;
+}
+
 .banner {
     max-width: 100%;
     height: 500px;
@@ -424,6 +515,13 @@ pre {
     box-sizing: border-box;
 }
 
+#simpliCity-img {
+    z-index: 4;
+    background-image: url(/assets/images/game-hero/simpliCity.png);
+    background-size: cover;
+    background-position: center;
+}
+
 #simpliCity-link {
     position: absolute;
     right: 30px;
@@ -445,6 +543,11 @@ pre {
 }
 
 @media only screen and (max-width: 600px) {
+    .desktop {
+	visibility: collapse;
+	display: none;
+    }
+
     .flex {
         flex-direction: column;
     }
@@ -467,4 +570,8 @@ pre {
     .gallery-card {
 	flex: 1 0 300px;	    
     }
+
+    .banner-top-bar {
+	left: 0;
+    }
 }