From 4023a8a03a54b176bb75f51429a3684d657329f0 Mon Sep 17 00:00:00 2001 From: CusiMusic <51980838+MarcusGuevarra@users.noreply.github.com> Date: Wed, 22 Jan 2025 11:01:34 +0800 Subject: [PATCH] Download Page Update download.html -> Added Divisions for more clear UI for the users to interact with -> Added Placeholder moving backgrounds using the images available -> Added divisions for each Section ( OpenTaiko Hub Download, Download Tutorial, Source Code and Assets ) download.css -> Added Division box for design -> Added Background movement for dynamic feel -> Changed paragraph font size for better readability style.css -> Added overflow: scroll; for better scrollability --- download.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ download.html | 51 +++++++++++++++++++++++++++++++++++---------------- style.css | 2 ++ 3 files changed, 81 insertions(+), 16 deletions(-) create mode 100644 download.css diff --git a/download.css b/download.css new file mode 100644 index 0000000..270d824 --- /dev/null +++ b/download.css @@ -0,0 +1,44 @@ +p{ + font-size: 28px; +} + +.downloadOuterLayer /* Overall Division Box for the Download Section*/ { + background-image: url('public/image/bg_songs.png'); + background-size: cover; + border-top:solid rgb(144, 32, 8); + border-bottom: solid rgb(0, 10, 120); + border-right: solid rgb(0, 10, 120); + border-left: solid rgb(144, 32, 8); + border-radius: 2px; + margin: 35px 100px; +} + +.OpenTaikoHub /*Individual Sections for The main download, download tutorial and source code & Assets*/ { + background-color: rgb(232,232,232,0.5); + border-top:solid rgb(144, 32, 8); + border-bottom: solid rgb(0, 10, 120); + border-right: solid rgb(0, 10, 120); + border-left: solid rgb(144, 32, 8); + border-radius: 5px; + padding-bottom: 10px; + margin: 20px 200px; +} + +#download-page { + overflow: scroll; + background-image: url('public/image/bg_songs2.png'); + background-size: cover; + background-repeat: repeat-x; + background-position:0 0; + animation: moveBackground 20s linear infinite; +} + +@keyframes moveBackground{ + 0% { + background-position: 0 0; + } + + 100% { + background-position: -2000px 0; + } +} \ No newline at end of file diff --git a/download.html b/download.html index 69f09ee..74a88ac 100644 --- a/download.html +++ b/download.html @@ -3,33 +3,52 @@ OpenTaiko + - +

Home

Download

Songlist

+
-

Download

-

OpenTaiko is available for Windows, and is also available for Linux under experimental builds.

-

OpenTaiko Hub

-

Installer & updater for the base game, songs, skins, characters, and more.

-
-
- Download (GitHub) +
+

Download

+

OpenTaiko is now available for Windows, It is also available for Linux under experimental builds under ubuntu

+
+

OpenTaiko Hub

+

This will be your main application to install and update OpenTaiko including our base game, songs, skins, characters and a lot more!

+
+
+ Download OpenTaiko +
+
-
-

Source Code & Assets

-

Open-source repositories used for OpenTaiko. The main project is licensed under the MIT License, but other assets may have differing licenses. Please refer to each project's README for further details.

-
-
- Main Repository + +
+

Download Video Tutorial

+

For a more detailed download process tutorial, we have provided a video for you to watch in order to know more about download and installment process.

+
+ +
-
- GitHub Organization + + +
+

Source Code & Assets

+

Open-source repositories used for OpenTaiko. The main project is licensed under the MIT License, but other assets may have differing licenses. Please refer to each project's README for further details.

+ +
+ +
+ Main Repository +
+
+ GitHub Organization +
diff --git a/style.css b/style.css index 1e20788..f77c6ec 100644 --- a/style.css +++ b/style.css @@ -11,6 +11,8 @@ html { height: 100%; } body { + overflow: scroll; + min-height: 100%; position: relative; margin: 0; padding: 0;