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 @@

- + simpliCity @@ -115,4 +115,4 @@ - \ No newline at end of file + 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 @@ + + + + + + + + + + + simpliCity • altaf-creator + + + + + + + +

+ About Me + Projects + (dev)Blog +

+ + + +

+ +

What is simpliCity?

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.

Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!

This Game Offers:

30+ different buildings
Save & load system
Simple worker system
Relaxing feel & atmosphere
Simple residential system
Sandbox mode if you want no challanges at all

Gameplay

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!

Feedback & Discord

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 Discord Server!

Minimum System Requirements

Operating System: Windows 8+ 64-bit
Processor: Intel Dual Core 2GHz
Memory: 2 GB of RAM
Graphics: Intergrated Graphics Card
DirectX: Version 11
Storage: 512 MB available space

Downloads

+ Buy Latest Version on Steam (beta0.2) + Download Latest Demo (demo0.1) +

Older Versions (coming soon)

+ alpha2.3.1 + alpha2.3 + alpha2.2 + alpha2.1 + alpha2.0 +

Changelogs (coming soon)

+ View Changelogs +

+ + + 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 @@ + + + + + + + + + + + simpliCity • altaf-creator + + + + + + + +

+ About Me + Projects + (dev)Blog +

+ + + +

+ +

What is simpliCity?

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.

Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!

This Game Offers:

30+ different buildings
Save & load system
Simple worker system
Relaxing feel & atmosphere
Simple residential system
Sandbox mode if you want no challanges at all

Gameplay

Feedback & Discord

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 Discord Server!

Minimum System Requirements

Operating System: Windows 8+ 64-bit
Processor: Intel Dual Core 2GHz
Memory: 2 GB of RAM
Graphics: Intergrated Graphics Card
DirectX: Version 11
Storage: 512 MB available space

Downloads

+ Buy Latest Version on Steam (beta0.2) + Download Latest Demo (demo0.1) +

Older Versions (coming soon)

+ alpha2.3.1 + alpha2.3 + alpha2.2 + alpha2.1 + alpha2.0 +

Changelogs (coming soon)

+ View Changelogs +

+ + + 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 += "\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; + } } -- cgit v1.2.3

Socials

What is simpliCity?

This Game Offers:

Gameplay

Feedback & Discord

Minimum System Requirements

Downloads

Older Versions (coming soon)

Changelogs (coming soon)

What is simpliCity?

This Game Offers:

Gameplay

Feedback & Discord

Minimum System Requirements

Downloads

Older Versions (coming soon)

Changelogs (coming soon)