Commit 0ce86de9 authored by Andreas Heimann's avatar Andreas Heimann

added settings, added localization, added connection error section

parent 728f1fc3
...@@ -12,10 +12,12 @@ ...@@ -12,10 +12,12 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" />
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css" /> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="assets/css/main.css" /> <link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/connectionerror.css" />
<link rel="stylesheet" href="assets/css/download.css" /> <link rel="stylesheet" href="assets/css/download.css" />
<link rel="stylesheet" href="assets/css/startup.css" /> <link rel="stylesheet" href="assets/css/startup.css" />
<link rel="stylesheet" href="assets/css/songdetail.css" /> <link rel="stylesheet" href="assets/css/songdetail.css" />
<link rel="stylesheet" href="assets/css/library.css" /> <link rel="stylesheet" href="assets/css/library.css" />
<link rel="stylesheet" href="assets/css/settings.css" />
</head> </head>
<body> <body>
<main> <main>
...@@ -37,7 +39,7 @@ ...@@ -37,7 +39,7 @@
</div> </div>
<div class="song-row song-row-new"> <div class="song-row song-row-new">
<div class="song-header"> <div class="song-header">
<div class="row-title">NEW SONGS</div> <div class="row-title" locale>startup.newsongs.header</div>
<div class="row-controls"> <div class="row-controls">
<div class="item disabled row-controls-previous" onclick="NewSongsPrevious()"><i class="mdi mdi-chevron-left"></i></div> <div class="item disabled row-controls-previous" onclick="NewSongsPrevious()"><i class="mdi mdi-chevron-left"></i></div>
<div class="item row-controls-next" onclick="NewSongsNext()"><i class="mdi mdi-chevron-right"></i></div> <div class="item row-controls-next" onclick="NewSongsNext()"><i class="mdi mdi-chevron-right"></i></div>
...@@ -96,7 +98,7 @@ ...@@ -96,7 +98,7 @@
</div> </div>
<div class="song-row song-row-popular"> <div class="song-row song-row-popular">
<div class="song-header"> <div class="song-header">
<div class="row-title">POPULAR SONGS</div> <div class="row-title" locale>startup.popularsongs.header</div>
<div class="row-controls"> <div class="row-controls">
<div class="item disabled row-controls-previous" onclick="PopularSongsPrevious()"><i class="mdi mdi-chevron-left"></i></div> <div class="item disabled row-controls-previous" onclick="PopularSongsPrevious()"><i class="mdi mdi-chevron-left"></i></div>
<div class="item row-controls-next" onclick="PopularSongsNext()"><i class="mdi mdi-chevron-right"></i></div> <div class="item row-controls-next" onclick="PopularSongsNext()"><i class="mdi mdi-chevron-right"></i></div>
...@@ -160,8 +162,9 @@ ...@@ -160,8 +162,9 @@
<section class="section-library"> <section class="section-library">
<div class="song-row song-row-library"> <div class="song-row song-row-library">
<div class="song-header"> <div class="song-header">
<div class="row-title">INSTALLED SONGS</div> <div class="row-title" locale>library.installed.header</div>
<div class="row-controls"> <div class="row-controls">
<div></div>
<div class="item row-controls-reload" onclick="RefreshLibrary()"><i class="mdi mdi-refresh"></i></div> <div class="item row-controls-reload" onclick="RefreshLibrary()"><i class="mdi mdi-refresh"></i></div>
</div> </div>
</div> </div>
...@@ -171,17 +174,53 @@ ...@@ -171,17 +174,53 @@
<div class="song-icon"><i class="mdi mdi-folder-music"></i></div> <div class="song-icon"><i class="mdi mdi-folder-music"></i></div>
</div> </div>
<div class="song-metadata"> <div class="song-metadata">
<div class="song-title">Install</div> <div class="song-title" locale>library.installed.install.title</div>
<div class="song-artist">Install a local .zip</div> <div class="song-artist" locale>library.installed.install.text</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="section-settings"> <section class="section-settings">
SETTINGS<br /><br /> <div class="settings-box">
GAME DIRECTORY<br /> <div class="settings-title" locale>settings.general.header</div>
EXPLICIT? YES/NO <div class="settings-item">
<div class="settings-label" locale>settings.general.version.label</div>
<div class="settings-input">
<span class="settings-input-version"></span>
</div>
</div>
<div class="settings-item">
<div class="settings-label" locale>settings.general.update.label</div>
<div class="settings-input">
<button onclick="CheckForUpdate()" locale>settings.general.update.button</button>
</div>
</div>
</div>
<div class="settings-box">
<div class="settings-title" locale>settings.language.header</div>
<div class="settings-item">
<div class="settings-label" locale>settings.language.selectLanguage.label</div>
<div class="settings-input">
<select onchange="SettingsChangeLanguage()" class="settings-input-language">
<option value="en">English (English)</option>
<option value="de">Deutsch (German)</option>
<option value="br">Broken (Broken)</option>
</select>
</div>
</div>
</div>
<div class="settings-box">
<div class="settings-title" locale>settings.directories.header</div>
<div class="settings-item">
<div class="settings-label" locale>settings.directories.gameDirectory.label</div>
<div class="settings-input settings-input-twobuttons">
<input type="text" disabled class="settings-input-gamedirectory" />
<button onclick="SettingsSelectGameDirectory()" locale>settings.directories.gameDirectory.changeButton</button>
<button onclick="SettingsResetGameDirectory()" locale>settings.directories.gameDirectory.resetButton</button>
</div>
</div>
</div>
</section> </section>
<section class="section-song-detail"> <section class="section-song-detail">
<div class="song-detail-background"> <div class="song-detail-background">
...@@ -211,6 +250,20 @@ ...@@ -211,6 +250,20 @@
<button class="button-report button" onclick="SongDetailReport()">Report</button> <button class="button-report button" onclick="SongDetailReport()">Report</button>
</div> </div>
</section> </section>
<section class="section-connectionerror">
<div class="connectionerror-box">
<div class="icon"><i class="mdi mdi-server-off"></i></div>
<div class="title">Connection error</div>
<div class="text">Please check your internet connection or try again later. You can still access your library and install local .zip backups.</div>
</div>
</section>
<section class="section-connectionerror">
<div class="connectionerror-box">
<div class="icon"><i class="mdi mdi-server-off"></i></div>
<div class="title">404 &dash; Not Found</div>
<div class="text">Sorry, we couldn't find that. It was either removed or never available in the first place.</div>
</div>
</section>
</main> </main>
<div class="download-overlay"> <div class="download-overlay">
...@@ -224,10 +277,10 @@ ...@@ -224,10 +277,10 @@
<!-- Scripts --> <!-- Scripts -->
<script src="./assets/js/init.js"></script> <script src="./assets/js/init.js"></script>
<script src="./assets/js/userData.js"></script>
<script src="./assets/js/section.startup.js"></script> <script src="./assets/js/section.startup.js"></script>
<script src="./assets/js/section.songdetail.js"></script> <script src="./assets/js/section.songdetail.js"></script>
<script src="./assets/js/section.library.js"></script> <script src="./assets/js/section.library.js"></script>
<script src="./assets/js/section.settings.js"></script>
<script src="./assets/js/download.js"></script> <script src="./assets/js/download.js"></script>
<script src="./assets/js/navigation.js"></script> <script src="./assets/js/navigation.js"></script>
<!-- <script src="./assets/js/app.js"></script> --> <!-- <script src="./assets/js/app.js"></script> -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment