New installer - initial commit (work in progress)

2026-03-22 10:24:14 +00:00 · 2024-01-27 20:25:35 +01:00
parent 8fe410fbee
commit ff87c09a55
7 changed files with 16829 additions and 106 deletions
--- a/assets/js/sections/common.js
+++ b/assets/js/sections/common.js
@@ -636,3 +636,7 @@ if ($('.table-responsive .dropdown-toggle').length>0) {
 function getDataTablesLanguageUrl() {
    return "../assets/json/datatables_languages/" + lang_datatables_language + ".json";
 }
+
+console.log("Ready to unleash your coding prowess and join the fun?\n\n" +
+    "Check out our GitHub Repository and dive into the coding adventure:\n\n" +
+    "🚀 https://www.github.com/wavelog/wavelog");
--- a/install/assets/bootstrap/bootstrap.bundle.min.js
+++ b/install/assets/bootstrap/bootstrap.bundle.min.js
--- a/install/assets/bootstrap/bootstrap.min.css
+++ b/install/assets/bootstrap/bootstrap.min.css
--- a/install/assets/bootstrap/overrides.css
+++ b/install/assets/bootstrap/overrides.css
@@ -0,0 +1,203 @@
+/*!
+ * No overrides for the default theme as it aligns with general.css
+*/
+:root {
+	--cl-border-btn-pwd: var(--bs-body-bg);
+}
+
+.table {
+	--bs-table-border-color: #444444;
+	--bs-table-color: #fff;
+	--bs-table-striped-color: #fff;
+	--bs-table-active-color: #fff;
+	--bs-table-hover-color: #fff;
+	--bs-table-accent-bg: #303030;
+}
+
+.qslprint {
+	--bs-table-striped-bg: none;
+}
+
+.table-striped tbody > tr.activeRow {
+    background-color: #5cb85c !important;
+	--bs-table-accent-bg: none;
+}
+
+.border-top {
+	--bs-border-color: #444444;
+}
+
+.text-bg-light {
+	color: black !important;
+}
+
+.awardsBgDanger a {
+	color: white;
+}
+
+.awardsBgSuccess a{
+	color: white;
+}
+
+/*
+*	Dark Maps
+*/
+
+.leaflet-tile {
+	filter: invert() hue-rotate(180deg) grayscale(0.8) brightness(1.2) !important;
+}
+
+path.grid-rectangle {
+	stroke: rgba(200, 200, 200, 0.5);
+}
+
+span.grid-text > font {
+	color: rgba(220, 220, 220, 0.85) !important;
+	-webkit-text-stroke: 1px black !important;
+}
+
+path.grid-confirmed {
+	fill: rgba(144, 238, 144, 0.15) !important;
+	stroke: rgba(144, 238, 144, 0.15) !important;
+}
+
+path.grid-worked {
+	fill: rgba(220, 50, 50, 0.25) !important;
+	stroke: rgba(220, 50, 50, 0.25) !important;
+}
+
+.map-leaflet {
+	background-color: #343d3f!important;
+}
+
+/* 
+*	Dark Navigation 
+*/
+
+/* Navigation background */
+
+.bg-light {
+	background-color: #303030 !important;
+}
+
+/* Inactive Links */
+
+.navbar-light .navbar-nav .nav-link {
+	color: rgba(255, 255, 255, 0.6);
+}
+
+/* Active Links and Logo */
+
+.navbar-light .navbar-brand,
+.navbar-light .navbar-brand:focus,
+.navbar-light .navbar-brand:hover,
+.navbar-light .navbar-nav .active > .nav-link,
+.navbar-light .navbar-nav .nav-link:focus,
+.navbar-light .navbar-nav .nav-link:hover {
+	color: #fff;
+}
+
+/* Hamburger Menu */
+
+.navbar-light .navbar-toggler-icon {
+	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+/* 
+*	Dark inputs 
+*/
+
+.form-control,
+.form-control-sm,
+.form-control:focus,
+.form-control:disabled,
+.form-select {
+	background-color: rgba(20, 20, 20, 0.5);
+	color: #eee;
+}
+.form-select {
+	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+}
+
+select optgroup,
+select option {
+	background-color: #222;
+}
+
+div.alert-success a,
+div.alert-danger a,
+div.alert-danger {
+	color: #ffffff;
+}
+
+.bootstrap-dialog.type-primary .modal-header {
+	background-color: #222222;
+}
+
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+	color: #fff;
+}
+
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+	background: #222222;
+	color: #fff;
+}
+
+.selectize-input.full {
+	background-color: #222222;
+}
+
+.selectize-dropdown,
+.selectize-dropdown.form-control {
+	background: #222222;
+}
+
+.selectize-input.focus {
+	color: #444;
+	background-color: #fff;
+	border-color: #739ac2;
+	box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+}
+
+.selectize-dropdown,
+.selectize-dropdown.form-control {
+	border-radius: 0;
+}
+
+#edit_qso:not(.btn) {
+	float: left;
+}
+
+.qso_call {
+	float: left;
+	width: 140px;
+}
+
+.qso_icons {
+	float: right;
+}
+
+#qsoList_wrapper th {
+	text-align: left !important;
+	white-space: nowrap;
+}
+#qsoList_wrapper td {
+	text-align: left !important;
+	white-space: nowrap;
+}
+
+.accordion {
+	--bs-accordion-active-color: #FFFFFF;
+	--bs-accordion-btn-bg: #444444;
+	--bs-accordion-active-bg: #444444;
+	--bs-accordion-border-color: #444444;
+	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+}
+.accordion-button.collapsed {
+	border-bottom:1px solid var(--bs-body-bg);
+}
+
+
--- a/install/assets/logo/wavelog_logo.png
+++ b/install/assets/logo/wavelog_logo.png
--- a/install/config/config.php
+++ b/install/config/config.php
@@ -14,7 +14,7 @@ defined('BASEPATH') OR exit('No direct script access allowed');

 $config['app_name'] = "Wavelog";
 $config['directory'] = "%directory%";
-$config['callbook'] = "hamqth"; // Options are hamqth or qrz
+$config['callbook'] = "qrz"; // Options are hamqth or qrz

 $config['datadir'] = null; // default to install directory

--- a/install/index.php
+++ b/install/index.php
@@ -1,27 +1,32 @@
+<!--
+	New Wavelog Installer
+
+	This installer guides an user through the install process and all 
+	necessary parameters for the new Wavelog Installation.
+
+	Version 1.0 - January 2024
+-->
+
+
 <?php

-
 $db_config_path = '../application/config/';
+$db_file_path = $db_config_path . "database.php";

-$db_file_path = $db_config_path."database.php";
-
-function delDir($dir) {
-	$files = glob( $dir . '*', GLOB_MARK );
-    foreach ( $files as $file ) {
-        if ( substr( $file, -1 ) == '/' ) {
+function delDir($dir)
+{
+	$files = glob($dir . '*', GLOB_MARK);
+	foreach ($files as $file) {
+		if (substr($file, -1) == '/') {
 			if (file_exists($file)) {
-            	delDir( $file );
+				delDir($file);
 			}
 		} else {
 			if (file_exists($file)) {
-				unlink( $file );
+				unlink($file);
 			}
 		}
-    }
-	// This step may be not needed
-    // if (file_exists($dir)) {
-	// 	rmdir( $dir );
-	// }
+	}
 }

 if (file_exists($db_file_path)) {
@@ -31,7 +36,7 @@ if (file_exists($db_file_path)) {
 }

 // Only load the classes in case the user submitted the form
-if($_POST) {
+if ($_POST && isset($_POST['submit'])) {

 	// Load the classes and create the new objects
 	require_once('includes/core_class.php');
@@ -40,134 +45,308 @@ if($_POST) {
 	$core = new Core();
 	$database = new Database();

-
 	// Validate the post data
-	if($core->validate_post($_POST) == true)
-	{
+	if ($core->validate_post($_POST) == true) {

 		// First create the database, then create tables, then write config file
-		if($database->create_database($_POST) == false) {
-			$message = $core->show_message('error',"The database could not be created, please verify your settings.");
-		} else if ($database->create_tables($_POST) == false) {
-			$message = $core->show_message('error',"The database tables could not be created, please verify your settings.");
-		} else if ($core->write_config($_POST) == false) {
-			$message = $core->show_message('error',"The database configuration file could not be written, please chmod /application/config/database.php file to 777");
+		if ($database->create_database($_POST) == false) {
+			$message = $core->show_message('error', "The database could not be created, please verify your settings.");
+		} elseif ($database->create_tables($_POST) == false) {
+			$message = $core->show_message('error', "The database tables could not be created, please verify your settings.");
+		} elseif ($core->write_config($_POST) == false) {
+			$message = $core->show_message('error', "The database configuration file could not be written, please chmod /application/config/database.php file to 777");
 		}

 		if ($core->write_configfile($_POST) == false) {
-			$message = $core->show_message('error',"The config configuration file could not be written, please chmod /application/config/config.php file to 777");
+			$message = $core->show_message('error', "The config configuration file could not be written, please chmod /application/config/config.php file to 777");
 		}

 		// If no errors, redirect to registration page
-		if(!isset($message)) {
+		if (!isset($message)) {
 			sleep(1);
 			$ch = curl_init();
-			$protocol=((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || $_SERVER['SERVER_PORT'] == 443) ? "https" : "http";
-			list($realHost,)=explode(':',$_SERVER['HTTP_HOST']);
-			$wavelog_url=$protocol."://".$realHost.":".$_SERVER['SERVER_PORT'];
-			curl_setopt($ch, CURLOPT_URL,$wavelog_url);
+			$protocol = ((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || $_SERVER['SERVER_PORT'] == 443) ? "https" : "http";
+			list($realHost,) = explode(':', $_SERVER['HTTP_HOST']);
+			$wavelog_url = $protocol . "://" . $realHost . ":" . $_SERVER['SERVER_PORT'];
+			curl_setopt($ch, CURLOPT_URL, $wavelog_url);
 			curl_setopt($ch, CURLOPT_VERBOSE, 0);
 			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 			$result = curl_exec($ch);
-			curl_setopt($ch, CURLOPT_URL,$wavelog_url."/index.php/update/dxcc");
+			curl_setopt($ch, CURLOPT_URL, $wavelog_url . "/index.php/update/dxcc");
 			$result = curl_exec($ch);
 			delDir(getcwd());
-			header('Location: '.$protocol."://".$_SERVER['HTTP_HOST'].$_POST['directory']);
+			header('Location: ' . $protocol . "://" . $_SERVER['HTTP_HOST'] . $_POST['directory']);
 			echo "<h1>Install successful</h1>";
 			echo "<p>Please delete the install folder";
 			exit;
 		}
-	}
-	else {
-		$message = $core->show_message('error','Not all fields have been filled in correctly. The host, username, password, and database name are required.');
+	} else {
+		$message = $core->show_message('error', 'Not all fields have been filled in correctly. The host, username, password, and database name are required.');
 	}
 }

 ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

-		<title>Install | Wavelog</title>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+	<title>Install | Wavelog</title>
+
+	<link rel="stylesheet" href="assets/bootstrap/bootstrap.min.css">
+	<link rel="stylesheet" href="assets/bootstrap/overrides.css">
+
+	<script type="text/javascript" src="assets/bootstrap/bootstrap.bundle.min.js"></script>
+</head>
+
+<?php if (is_writable($db_config_path)) : ?>
+	<?php if (isset($message)) {
+		echo '<p class="error">' . $message . '</p>';
+	} ?>

-		<style type="text/css">
-		  body {
-		    font-size: 75%;
-		    font-family: Helvetica,Arial,sans-serif;
-		    width: 300px;
-		    margin: 0 auto;
-		  }
-		  input, label {
-		    display: block;
-		    font-size: 18px;
-		    margin: 0;
-		    padding: 0;
-		  }
-		  label {
-		    margin-top: 20px;
-		  }
-		  input.input_text {
-		    width: 270px;
-		  }
-		  input#submit {
-		    margin: 25px auto 0;
-		    font-size: 25px;
-		  }
-		  fieldset {
-		    padding: 15px;
-		  }
-		  legend {
-		    font-size: 18px;
-		    font-weight: bold;
-		  }
-		  .error {
-		    background: #ffd1d1;
-		    border: 1px solid #ff5858;
-        padding: 4px;
-		  }
-		</style>
-	</head>
 	<body>
+		<div class="container mt-4" style="max-width: 1000px; ">

-    <h1>Install Wavelog</h1>
-   <?php if(is_writable($db_config_path)):?>
+			<h4>Wavelog Installer</h4>

-		  <?php if(isset($message)) {echo '<p class="error">' . $message . '</p>';}?>
+			<div class="card mt-4" style="min-height: 650px; margin: 0 auto;">

-		  <form id="install_form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
+				<div class="card-header">
+					<ul class="nav nav-tabs nav-fill card-header-tabs">
+						<li class="nav-item">
+							<a class="nav-link active disabled" id="welcome-tab" data-bs-toggle="tab" href="#welcome" role="tab" aria-controls="welcome" aria-selected="true">1. Welcome</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link disabled" id="precheck-tab" data-bs-toggle="tab" href="#precheck" role="tab" aria-controls="precheck" aria-selected="false">2. Pre Checks</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link disabled" id="configuration-tab" data-bs-toggle="tab" href="#configuration" role="tab" aria-controls="configuration" aria-selected="false">3. Configuration</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link disabled" id="database-tab" data-bs-toggle="tab" href="#database" role="tab" aria-controls="database" aria-selected="false">4. Database</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link disabled" id="firstuser-tab" data-bs-toggle="tab" href="#firstuser" role="tab" aria-controls="firstuser" aria-selected="false">5. First User</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link disabled" id="finish-tab" data-bs-toggle="tab" href="#finish" role="tab" aria-controls="finish" aria-selected="false">6. Finish</a>
+						</li>
+					</ul>
+				</div>

-		  <fieldset>
-		  	<legend>Configuration Settings</legend>
-		  	<label for="directory">Directory</label><input type="text" id="directory" value="<?php echo str_replace("index.php", "", str_replace("/install/", "", $_SERVER['REQUEST_URI'])); ?>" class="input_text" name="directory" />
-		  	<label for="websiteurl">Website URL</label><input type="text" id="websiteurl" value="<?php echo $_SERVER['REQUEST_SCHEME']; ?>://<?php echo str_replace("index.php", "", $_SERVER['HTTP_HOST'].str_replace("/install/", "", $_SERVER['REQUEST_URI'])); ?>" class="input_text" name="websiteurl" />
-		  	<label for="locator">Default Gridsquare</label><input type="text" id="locator" value="IO91JS" class="input_text" name="locator" />
-		  </fieldset>
+				<div class="card-body">
+					<form id="install_form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
+						<div class="tab-content" id="myTabContent">

-		  	<br>
+							<!-- Tab 1: Welcome -->
+							<div class="tab-pane fade show active p-3" id="welcome" role="tabpanel" aria-labelledby="welcome-tab">
+								<div class="row">
+									<div class="col-md-6">
+										<img src="assets/logo/wavelog_logo.png" alt="" style="max-width: 100%; height: auto;">
+									</div>

-        <fieldset>
-          <legend>Database settings</legend>
-          <label for="hostname">Hostname</label><input type="text" id="hostname" value="localhost" class="input_text" name="hostname" />
-          <label for="username">Username</label><input type="text" id="username" class="input_text" name="username" />
-          <label for="password">Password</label><input type="password" id="password" class="input_text" name="password" />
-          <label for="database">Database Name</label><input type="text" id="database" class="input_text" name="database" />
-          <input type="submit" value="Install" id="submit" />
-        </fieldset>
-		  </form>
+									<div class="col-md-6">
+										<h5 style="margin-top: 50px;">Welcome to the Wavelog Installer</h5>
+										<p style="margin-top: 50px;">This installer will guide you through the necessary steps for the installation of Wavelog. <br>Wavelog is a powerful web-based amateur radio logging software. Follow the steps in each tab to configure and install Wavelog on your server.</p>
+										<p>If you encounter any issues or have questions, refer to the documentation or community forum for assistance.</p>
+										<p>Visit our GitHub repository: <a href="https://www.github.com/wavelog/wavelog" target="_blank">Wavelog on GitHub</a></p>
+									</div>
+								</div>
+							</div>

-		 <h2>Demo User Account</h2>
+							<!-- Tab 2: Pre-Checks --> <!-- TODO Needs some Layout and maybe check for other packages aswell-->
+							<div class="tab-pane fade" id="precheck" role="tabpanel" aria-labelledby="precheck-tab">
+								<div class="row">
+									<div class="col-md-6">
+										<p>PHP Modules</p>
+										<table width="100%">
+											<tr>
+												<td>curl</td>
+												<td>
+													<?php if (in_array('curl', get_loaded_extensions())) { ?>
+														<span class="badge text-bg-success">Installed</span>
+													<?php } else { ?>
+														<span class="badge text-bg-danger">Not Installed</span>
+													<?php } ?>
+												</td>
+											</tr>

-		  	<ul>
-		  		<li>Username: 4w7est</li>
-		  		<li>Password: password</li>
-		  	</ul>
+											<tr>
+												<td>MySQL</td>
+												<td>
+													<?php if (in_array('mysqli', get_loaded_extensions())) { ?>
+														<span class="badge text-bg-success">Installed</span>
+													<?php } else { ?>
+														<span class="badge text-bg-danger">Not Installed</span>
+													<?php } ?>
+												</td>
+											</tr>

-		  	<p>When you login create a new admin account and delete the 4w7est user account.</p>
+											<tr>
+												<td>mbstring</td>
+												<td>
+													<?php if (in_array('mbstring', get_loaded_extensions())) { ?>
+														<span class="badge text-bg-success">Installed</span>
+													<?php } else { ?>
+														<span class="badge text-bg-danger">Not Installed</span>
+													<?php } ?>
+												</td>
+											</tr>

-	 <?php else: ?>
-     <p class="error">Please make the /application/config/ folder writable. <strong>Example</strong>:<br /><br /><code>chmod -R 777 /application/config/</code><br /><br /><i>Don't forget to restore the permissions afterwards.</i></p>
-	 <?php endif; ?>
+											<tr>
+												<td>xml</td>
+												<td>
+													<?php if (in_array('xml', get_loaded_extensions())) { ?>
+														<span class="badge text-bg-success">Installed</span>
+													<?php } else { ?>
+														<span class="badge text-bg-danger">Not Installed</span>
+													<?php } ?>
+												</td>
+											</tr>

+											<tr>
+												<td>zip</td>
+												<td>
+													<?php if (in_array('zip', get_loaded_extensions())) { ?>
+														<span class="badge text-bg-success">Installed</span>
+													<?php } else { ?>
+														<span class="badge text-bg-danger">Not Installed</span>
+													<?php } ?>
+												</td>
+											</tr>
+
+											<tr>
+												<td>openssl</td>
+												<td>
+													<?php if (in_array('openssl', get_loaded_extensions())) { ?>
+														<span class="badge text-bg-success">Installed</span>
+													<?php } else { ?>
+														<span class="badge text-bg-danger">Not Installed</span>  <!-- TODO Disable Continue Button if one is not installed -->
+													<?php } ?>
+												</td>
+											</tr>
+										</table>
+									</div>
+								</div>
+							</div>
+
+							<!-- Tab 3: Configuration --> <!-- TODO Needs some Layout -->
+							<div class="tab-pane fade" id="configuration" role="tabpanel" aria-labelledby="configuration-tab">
+
+								<div class="mb-3">
+									<label for="directory" class="form-label">Directory</label>
+									<input type="text" id="directory" value="<?php echo str_replace("index.php", "", str_replace("/install/", "", $_SERVER['REQUEST_URI'])); ?>" class="form-control" name="directory" />
+								</div>
+								<div class="mb-3">
+									<label for="websiteurl" class="form-label">Website URL</label>
+									<input type="text" id="websiteurl" value="<?php echo $_SERVER['REQUEST_SCHEME']; ?>://<?php echo str_replace("index.php", "", $_SERVER['HTTP_HOST'] . str_replace("/install/", "", $_SERVER['REQUEST_URI'])); ?>" class="form-control" name="websiteurl" />
+								</div>
+								<div class="mb-3">
+									<label for="locator" class="form-label">Default Gridsquare</label>
+									<input type="text" id="locator" value="IO91JS" class="form-control" name="locator" />
+								</div>
+							</div>
+
+							<!-- Tab 4: Database --> <!-- TODO Needs some Layout -->
+							<div class="tab-pane fade" id="database" role="tabpanel" aria-labelledby="database-tab"> 
+								<div class="mb-3">
+									<label for="hostname" class="form-label">Hostname</label>
+									<input type="text" id="hostname" value="localhost" class="form-control" name="hostname" />
+								</div>
+								<div class="mb-3">
+									<label for="username" class="form-label">Username</label>
+									<input type="text" id="username" class="form-control" name="username" />
+								</div>
+								<div class="mb-3">
+									<label for="password" class="form-label">Password</label>
+									<input type="password" id="password" class="form-control" name="password" />
+								</div>
+								<div class="mb-3">
+									<label for="database" class="form-label">Database Name</label>
+									<input type="text" id="database" class="form-control" name="database" />
+								</div>
+							</div>
+
+							<!-- Tab 5: First User -->
+							<div class="tab-pane fade" id="firstuser" role="tabpanel" aria-labelledby="firstuser-tab">
+								<p>here we will ask for the first user.</p> <!-- TODO User Form -->
+							</div>
+
+							<!-- Tab 6: Finish -->
+							<div class="tab-pane fade" id="finish" role="tabpanel" aria-labelledby="finish-tab">
+								<p>Here will be the Install Button</p> <!-- TODO Install Button -->
+							</div>
+						</div>
+					</form>
+				</div>
+				<div class="card-footer">
+					<button type="button" id="BackButton" class="btn btn-primary float-start" onclick="prevTab()" style="display: none">Back</button>
+					<button type="button" id="ContinueButton" class="btn btn-info float-end" onclick="nextTab()" style="display: none">Continue</button>
+				</div>
+			</div>
+		</div>
+
+		<script>
+			document.addEventListener('DOMContentLoaded', function() {
+				document.getElementById('ContinueButton').style.display = 'block';
+				console.log("Ready to unleash your coding prowess and join the fun?\n\n" +
+					"Check out our GitHub Repository and dive into the coding adventure:\n\n" +
+					"🚀 https://www.github.com/wavelog/wavelog");
+			});
+
+			const tabs = new bootstrap.Tab(document.getElementById('welcome-tab'));
+			tabs.show();
+
+			let firstTabId = 'welcome-tab';
+			let lastTabId = 'finish-tab';
+
+			function nextTab() {
+				const activeTab = document.querySelector('.nav-link.active');
+				const nextTab = activeTab.parentElement.nextElementSibling.querySelector('.nav-link');
+
+				if (nextTab) {
+					const tab = new bootstrap.Tab(nextTab);
+					tab.show();
+				}
+
+				if (nextTab.id != lastTabId) {
+					document.getElementById('ContinueButton').style.display = 'block';
+					document.getElementById('BackButton').style.display = 'block';
+				} else {
+					document.getElementById('ContinueButton').style.display = 'none';
+				}
+			}
+
+			function prevTab() {
+				const activeTab = document.querySelector('.nav-link.active');
+				const prevTab = activeTab.parentElement.previousElementSibling.querySelector('.nav-link');
+
+				if (prevTab) {
+					const tab = new bootstrap.Tab(prevTab);
+					tab.show();
+				}
+
+				if (prevTab.id != firstTabId) {
+					document.getElementById('ContinueButton').style.display = 'block';
+					document.getElementById('BackButton').style.display = 'block';
+				} else {
+					document.getElementById('BackButton').style.display = 'none';
+				}
+			}
+		</script>
 	</body>
-</html>
+
+<?php else : ?>
+
+	<body>
+		<div class="container mt-4 p-2" style="max-width: 600px; ">
+			<div class="card p-2 justify-content-center" style="min-height: 200px; margin-top: 200px;">
+				<p class="error text-center">Please make the /application/config/ folder writable. <strong>Example</strong>:<br /><br /><code>chmod -R 777 application/config/</code><br /><br /><i>Don't forget to restore the permissions afterwards.</i></p>
+			</div>
+		</div>
+	</body>
+
+<?php endif; ?>
+
+</html>