From c166c7e84c06ceba5ab21341c8d56bd1aaf042ec Mon Sep 17 00:00:00 2001 From: Miguel Ribeiro Date: Thu, 4 Jul 2024 21:15:47 +0200 Subject: [PATCH] feat: uniformize layout and styles (+ checkboxes and radios) (#423) --- about.php | 2 + admin.php | 42 ++--- includes/i18n/de.php | 1 + includes/i18n/el.php | 1 + includes/i18n/en.php | 1 + includes/i18n/es.php | 1 + includes/i18n/fr.php | 1 + includes/i18n/it.php | 1 + includes/i18n/jp.php | 3 +- includes/i18n/ko.php | 1 + includes/i18n/pl.php | 3 +- includes/i18n/pt.php | 1 + includes/i18n/pt_br.php | 1 + includes/i18n/ru.php | 1 + includes/i18n/sl.php | 1 + includes/i18n/sr.php | 1 + includes/i18n/sr_lat.php | 1 + includes/i18n/tr.php | 1 + includes/i18n/zh_cn.php | 1 + includes/i18n/zh_tw.php | 1 + includes/version.php | 2 +- scripts/theme.js | 326 +++++++++++++++++++-------------------- settings.php | 113 ++++++++------ styles/dark-theme.css | 55 +++++-- styles/styles.css | 232 +++++++++++++++++++++++----- 25 files changed, 501 insertions(+), 293 deletions(-) diff --git a/about.php b/about.php index b46e7a4..bd5f9cf 100644 --- a/about.php +++ b/about.php @@ -9,6 +9,7 @@ require_once 'includes/header.php';

+

Wallos

: @@ -38,6 +39,7 @@ require_once 'includes/header.php';

+

: diff --git a/admin.php b/admin.php index ccf8033..0ae37fd 100644 --- a/admin.php +++ b/admin.php @@ -99,7 +99,7 @@ $loginDisabledAllowed = $userCount == 1 && $settings['registrations_open'] == 0;

-
@@ -185,10 +185,14 @@ $loginDisabledAllowed = $userCount == 1 && $settings['registrations_open'] == 0; class="one-third" value="" />
- /> - - /> - +
+ /> + +
+
+ /> + +
+
+ + +

@@ -211,12 +221,6 @@ $loginDisabledAllowed = $userCount == 1 && $settings['registrations_open'] == 0;

-
- - -
@@ -226,16 +230,12 @@ $loginDisabledAllowed = $userCount == 1 && $settings['registrations_open'] == 0;

-
- -
-
- - -
+ + +

diff --git a/includes/i18n/de.php b/includes/i18n/de.php index c894831..811f989 100644 --- a/includes/i18n/de.php +++ b/includes/i18n/de.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "Zahlungsmethode", // About page 'about_and_credits' => "Informationen und Danksagungen", + "credits" => "Danksagungen", 'license' => "Lizenz", 'issues_and_requests' => "Issues und Anfragen", 'the_author' => "Der Autor", diff --git a/includes/i18n/el.php b/includes/i18n/el.php index 7001976..9692984 100644 --- a/includes/i18n/el.php +++ b/includes/i18n/el.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "Διαχωρισμός τρόπου πληρωμής", // About page 'about_and_credits' => "Σχετικά και Credits", + "credits" => "Credits", 'license' => "License", 'issues_and_requests' => "Προβλήματα και αιτήσεις", 'the_author' => "Προγραμματιστής", diff --git a/includes/i18n/en.php b/includes/i18n/en.php index 5edfffb..c38d4b6 100644 --- a/includes/i18n/en.php +++ b/includes/i18n/en.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "Payment Method Split", // About page 'about_and_credits' => "About and Credits", + "credits" => "Credits", 'license' => "License", 'issues_and_requests' => "Issues and Requests", 'the_author' => "The author", diff --git a/includes/i18n/es.php b/includes/i18n/es.php index c879c76..aba72eb 100644 --- a/includes/i18n/es.php +++ b/includes/i18n/es.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "División por Método de Pago", // About page 'about_and_credits' => "Acerca de y Créditos", + "credits" => "Créditos", 'license' => "Licencia", 'issues_and_requests' => "Problemas y Solicitudes", 'the_author' => "El autor", diff --git a/includes/i18n/fr.php b/includes/i18n/fr.php index dade858..4295ac0 100644 --- a/includes/i18n/fr.php +++ b/includes/i18n/fr.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "Répartition par méthode de paiement", // Page À propos 'about_and_credits' => "À propos et crédits", + "credits" => "Crédits", 'license' => "Licence", 'issues_and_requests' => "Problèmes et demandes", 'the_author' => "L'auteur", diff --git a/includes/i18n/it.php b/includes/i18n/it.php index 9879b73..362208c 100644 --- a/includes/i18n/it.php +++ b/includes/i18n/it.php @@ -113,6 +113,7 @@ $i18n = [ // About 'about_and_credits' => 'Informazioni e crediti', + "credits" => "Crediti", 'license' => 'Licenza', 'issues_and_requests' => 'Problemi e richieste', 'the_author' => "L'autore", diff --git a/includes/i18n/jp.php b/includes/i18n/jp.php index 189bd37..5a31397 100644 --- a/includes/i18n/jp.php +++ b/includes/i18n/jp.php @@ -106,7 +106,8 @@ $i18n = [ 'payment_method_split' => "支払い方法別", // About page 'about_and_credits' => "概要とクレジット", - 'license' => "License", + "credits" => "クレジット", + 'license' => "ライセンス", 'issues_and_requests' => "問題と要望", 'the_author' => "著者", 'icons' => "アイコン", diff --git a/includes/i18n/ko.php b/includes/i18n/ko.php index 3ec1152..ee3365f 100644 --- a/includes/i18n/ko.php +++ b/includes/i18n/ko.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "지불방법별", // About page 'about_and_credits' => "개요 및 크레딧", + "credits" => "크레딧", 'license' => "라이선스", 'issues_and_requests' => "이슈 및 요청", 'the_author' => "제작자", diff --git a/includes/i18n/pl.php b/includes/i18n/pl.php index bb60284..5873c2d 100644 --- a/includes/i18n/pl.php +++ b/includes/i18n/pl.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "Podział metod płatności", // About page 'about_and_credits' => "Informacje i podziękowania", + "credits" => "Podziękowania", 'license' => "Licencja", 'issues_and_requests' => "Problemy i prośby", 'the_author' => "Autor", @@ -181,7 +182,7 @@ $i18n = [ "theme" => "Motyw", "dark_theme" => "Przełącz na jasny/ciemny motyw", "light_theme" => "Przełącz na ciemny/jasny motyw", - "automatic"=> "Automatycznie", + "automatic" => "Automatycznie", "main_color" => "Główny kolor", "accent_color" => "Kolor akcentowy", "hover_color" => "Kolor najechania", diff --git a/includes/i18n/pt.php b/includes/i18n/pt.php index 828f990..f1e2654 100644 --- a/includes/i18n/pt.php +++ b/includes/i18n/pt.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "Por Método de Pagamento", // About page 'about_and_credits' => "Sobre e Créditos", + "credits" => "Créditos", 'license' => "Licença", 'issues_and_requests' => "Problemas e Pedidos", 'the_author' => "O Autor", diff --git a/includes/i18n/pt_br.php b/includes/i18n/pt_br.php index c1be7d9..fe57578 100644 --- a/includes/i18n/pt_br.php +++ b/includes/i18n/pt_br.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "Por método de pagamento", // About page 'about_and_credits' => "Sobre e Créditos", + "credits" => "Créditos", 'license' => "Licença", 'issues_and_requests' => "Problemas e Pedidos", 'the_author' => "O autor", diff --git a/includes/i18n/ru.php b/includes/i18n/ru.php index 4282566..02bbdec 100644 --- a/includes/i18n/ru.php +++ b/includes/i18n/ru.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "По способам оплаты", // About page 'about_and_credits' => "О компании и авторах", + "credits" => "Благодарности", 'license' => "Лицензия", 'issues_and_requests' => "Проблемы и вопросы", 'the_author' => "Автор", diff --git a/includes/i18n/sl.php b/includes/i18n/sl.php index 5672f2e..322bc74 100644 --- a/includes/i18n/sl.php +++ b/includes/i18n/sl.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "Razdelitev načina plačila", // About page 'about_and_credits' => "O programu in zahvale", + "credits" => "Zahvale", 'license' => "Licenca", 'issues_and_requests' => "Težave in zahteve", 'the_author' => "Avtor", diff --git a/includes/i18n/sr.php b/includes/i18n/sr.php index eba5e1d..4149c85 100644 --- a/includes/i18n/sr.php +++ b/includes/i18n/sr.php @@ -105,6 +105,7 @@ $i18n = [ 'payment_method_split' => "Подела по начинима плаћања", // Страница о апликацији 'about_and_credits' => "О апликацији и заслугама", + "credits" => "Заслуге", 'license' => "Лиценца", 'issues_and_requests' => "Проблеми и захтеви", 'the_author' => "Аутор", diff --git a/includes/i18n/sr_lat.php b/includes/i18n/sr_lat.php index 2535d03..79456b0 100644 --- a/includes/i18n/sr_lat.php +++ b/includes/i18n/sr_lat.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "Podela po načinu plaćanja", // Stranica O aplikaciji 'about_and_credits' => "O aplikaciji i zasluge", + "credits" => "Zasluge", 'license' => "Licenca", 'issues_and_requests' => "Problemi i zahtevi", 'the_author' => "Autor", diff --git a/includes/i18n/tr.php b/includes/i18n/tr.php index bf08e2a..91243a8 100644 --- a/includes/i18n/tr.php +++ b/includes/i18n/tr.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "Ödeme Yöntemi Bölümü", // About page 'about_and_credits' => "Hakkında ve Teşekkürler", + "credits" => "Teşekkürler", 'license' => "Lisans", 'issues_and_requests' => "Sorunlar ve İstekler", 'the_author' => "Yazar", diff --git a/includes/i18n/zh_cn.php b/includes/i18n/zh_cn.php index 617b444..1111a88 100644 --- a/includes/i18n/zh_cn.php +++ b/includes/i18n/zh_cn.php @@ -113,6 +113,7 @@ $i18n = [ // 关于页面 'about_and_credits' => "关于和鸣谢", + "credits" => "鸣谢", 'license' => "许可证", 'issues_and_requests' => "问题反馈与功能请求", 'the_author' => "作者", diff --git a/includes/i18n/zh_tw.php b/includes/i18n/zh_tw.php index aafc3f6..2ad410e 100644 --- a/includes/i18n/zh_tw.php +++ b/includes/i18n/zh_tw.php @@ -106,6 +106,7 @@ $i18n = [ 'payment_method_split' => "付款方式分割", // 關於頁面 'about_and_credits' => "關於和致謝", + "credits" => "致謝", 'license' => "授權許可", 'issues_and_requests' => "問題回饋與功能請求", 'the_author' => "作者", diff --git a/includes/version.php b/includes/version.php index 356290f..d35e05d 100644 --- a/includes/version.php +++ b/includes/version.php @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/scripts/theme.js b/scripts/theme.js index f267fba..cfe63cd 100644 --- a/scripts/theme.js +++ b/scripts/theme.js @@ -1,143 +1,143 @@ function switchTheme() { - const darkThemeCss = document.querySelector("#dark-theme"); - darkThemeCss.disabled = !darkThemeCss.disabled; + const darkThemeCss = document.querySelector("#dark-theme"); + darkThemeCss.disabled = !darkThemeCss.disabled; - const themeChoice = darkThemeCss.disabled ? 'light' : 'dark'; - document.cookie = `theme=${themeChoice}; expires=Fri, 31 Dec 9999 23:59:59 GMT`; + const themeChoice = darkThemeCss.disabled ? 'light' : 'dark'; + document.cookie = `theme=${themeChoice}; expires=Fri, 31 Dec 9999 23:59:59 GMT`; - document.body.className = themeChoice; + document.body.className = themeChoice; - const button = document.getElementById("switchTheme"); - button.disabled = true; + const button = document.getElementById("switchTheme"); + button.disabled = true; - fetch('endpoints/settings/theme.php', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ theme: themeChoice === 'dark' }) - }) - .then(response => response.json()) - .then(data => { - if (data.success) { - showSuccessMessage(data.message); - } else { - showErrorMessage(data.errorMessage); - } - button.disabled = false; - }).catch(error => { - button.disabled = false; - }); + fetch('endpoints/settings/theme.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ theme: themeChoice === 'dark' }) + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + showSuccessMessage(data.message); + } else { + showErrorMessage(data.errorMessage); + } + button.disabled = false; + }).catch(error => { + button.disabled = false; + }); } function setDarkTheme(theme) { - const darkThemeButton = document.querySelector("#theme-dark"); - const lightThemeButton = document.querySelector("#theme-light"); - const automaticThemeButton = document.querySelector("#theme-automatic"); - const darkThemeCss = document.querySelector("#dark-theme"); - const themes = { 0: 'light', 1: 'dark', 2: 'automatic' }; - const themeValue = themes[theme]; - const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + const darkThemeButton = document.querySelector("#theme-dark"); + const lightThemeButton = document.querySelector("#theme-light"); + const automaticThemeButton = document.querySelector("#theme-automatic"); + const darkThemeCss = document.querySelector("#dark-theme"); + const themes = { 0: 'light', 1: 'dark', 2: 'automatic' }; + const themeValue = themes[theme]; + const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; - darkThemeButton.disabled = true; - lightThemeButton.disabled = true; - automaticThemeButton.disabled = true; + darkThemeButton.disabled = true; + lightThemeButton.disabled = true; + automaticThemeButton.disabled = true; - fetch('endpoints/settings/theme.php', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ theme: theme }) - }) - .then(response => response.json()) - .then(data => { - if (data.success) { - darkThemeButton.disabled = false; - lightThemeButton.disabled = false; - automaticThemeButton.disabled = false; - darkThemeButton.classList.remove('selected'); - lightThemeButton.classList.remove('selected'); - automaticThemeButton.classList.remove('selected'); + fetch('endpoints/settings/theme.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ theme: theme }) + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + darkThemeButton.disabled = false; + lightThemeButton.disabled = false; + automaticThemeButton.disabled = false; + darkThemeButton.classList.remove('selected'); + lightThemeButton.classList.remove('selected'); + automaticThemeButton.classList.remove('selected'); - document.cookie = `theme=${themeValue}; expires=Fri, 31 Dec 9999 23:59:59 GMT`; + document.cookie = `theme=${themeValue}; expires=Fri, 31 Dec 9999 23:59:59 GMT`; - if (theme == 0) { - darkThemeCss.disabled = true; - document.body.className = 'light'; - lightThemeButton.classList.add('selected'); - } + if (theme == 0) { + darkThemeCss.disabled = true; + document.body.className = 'light'; + lightThemeButton.classList.add('selected'); + } - if (theme == 1) { - darkThemeCss.disabled = false; - document.body.className = 'dark'; - darkThemeButton.classList.add('selected'); - } + if (theme == 1) { + darkThemeCss.disabled = false; + document.body.className = 'dark'; + darkThemeButton.classList.add('selected'); + } - if (theme == 2) { - darkThemeCss.disabled = !prefersDarkMode; - document.body.className = prefersDarkMode ? 'dark' : 'light'; - automaticThemeButton.classList.add('selected'); - document.cookie = `inUseTheme=${prefersDarkMode ? 'dark' : 'light'}; expires=Fri, 31 Dec 9999 23:59:59 GMT`; - } + if (theme == 2) { + darkThemeCss.disabled = !prefersDarkMode; + document.body.className = prefersDarkMode ? 'dark' : 'light'; + automaticThemeButton.classList.add('selected'); + document.cookie = `inUseTheme=${prefersDarkMode ? 'dark' : 'light'}; expires=Fri, 31 Dec 9999 23:59:59 GMT`; + } - showSuccessMessage(data.message); - } else { - showErrorMessage(data.errorMessage); - darkThemeButton.disabled = false; - lightThemeButton.disabled = false; - automaticThemeButton.disabled = false; - } - }).catch(error => { - darkThemeButton.disabled = false; - lightThemeButton.disabled = false; - automaticThemeButton.disabled = false; - }); + showSuccessMessage(data.message); + } else { + showErrorMessage(data.errorMessage); + darkThemeButton.disabled = false; + lightThemeButton.disabled = false; + automaticThemeButton.disabled = false; + } + }).catch(error => { + darkThemeButton.disabled = false; + lightThemeButton.disabled = false; + automaticThemeButton.disabled = false; + }); } function setTheme(themeColor) { - var currentTheme = 'blue'; - var themeIds = ['red-theme', 'green-theme', 'yellow-theme', 'purple-theme']; - - themeIds.forEach(function(id) { - var themeStylesheet = document.getElementById(id); - if (themeStylesheet && !themeStylesheet.disabled) { - currentTheme = id.replace('-theme', ''); - themeStylesheet.disabled = true; - } - }); - - if (themeColor !== "blue") { - var enableTheme = document.getElementById(themeColor + '-theme'); - enableTheme.disabled = false; + var currentTheme = 'blue'; + var themeIds = ['red-theme', 'green-theme', 'yellow-theme', 'purple-theme']; + + themeIds.forEach(function (id) { + var themeStylesheet = document.getElementById(id); + if (themeStylesheet && !themeStylesheet.disabled) { + currentTheme = id.replace('-theme', ''); + themeStylesheet.disabled = true; } - - var images = document.querySelectorAll('img'); - images.forEach(function(img) { - if (img.src.includes('siteicons/' + currentTheme)) { - img.src = img.src.replace(currentTheme, themeColor); - } - }); - - var labels = document.querySelectorAll('.theme-preview'); - labels.forEach(function(label) { - label.classList.remove('is-selected'); - }); - - var targetLabel = document.querySelector(`.theme-preview.${themeColor}`); - if (targetLabel) { - targetLabel.classList.add('is-selected'); + }); + + if (themeColor !== "blue") { + var enableTheme = document.getElementById(themeColor + '-theme'); + enableTheme.disabled = false; + } + + var images = document.querySelectorAll('img'); + images.forEach(function (img) { + if (img.src.includes('siteicons/' + currentTheme)) { + img.src = img.src.replace(currentTheme, themeColor); } - - document.cookie = `colorTheme=${themeColor}; expires=Fri, 31 Dec 9999 23:59:59 GMT`; - - fetch('endpoints/settings/colortheme.php', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ color: themeColor }) - }) + }); + + var labels = document.querySelectorAll('.theme-preview'); + labels.forEach(function (label) { + label.classList.remove('is-selected'); + }); + + var targetLabel = document.querySelector(`.theme-preview.${themeColor}`); + if (targetLabel) { + targetLabel.classList.add('is-selected'); + } + + document.cookie = `colorTheme=${themeColor}; expires=Fri, 31 Dec 9999 23:59:59 GMT`; + + fetch('endpoints/settings/colortheme.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ color: themeColor }) + }) .then(response => response.json()) .then(data => { if (data.success) { @@ -149,16 +149,16 @@ function setTheme(themeColor) { .catch(error => { showErrorMessage(translate('unknown_error')); }); - - } - - function resetCustomColors() { - const button = document.getElementById("reset-colors"); - button.disabled = true; - - fetch('endpoints/settings/resettheme.php', { - method: 'DELETE', - }) + +} + +function resetCustomColors() { + const button = document.getElementById("reset-colors"); + button.disabled = true; + + fetch('endpoints/settings/resettheme.php', { + method: 'DELETE', + }) .then(response => response.json()) .then(data => { if (data.success) { @@ -182,23 +182,23 @@ function setTheme(themeColor) { showErrorMessage(translate('unknown_error')); button.disabled = false; }); - } - - function saveCustomColors() { - const button = document.getElementById("save-colors"); - button.disabled = true; - - const mainColor = document.getElementById("mainColor").value; - const accentColor = document.getElementById("accentColor").value; - const hoverColor = document.getElementById("hoverColor").value; - - fetch('endpoints/settings/customtheme.php', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ mainColor: mainColor, accentColor: accentColor, hoverColor: hoverColor }) - }) +} + +function saveCustomColors() { + const button = document.getElementById("save-colors"); + button.disabled = true; + + const mainColor = document.getElementById("mainColor").value; + const accentColor = document.getElementById("accentColor").value; + const hoverColor = document.getElementById("hoverColor").value; + + fetch('endpoints/settings/customtheme.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ mainColor: mainColor, accentColor: accentColor, hoverColor: hoverColor }) + }) .then(response => response.json()) .then(data => { if (data.success) { @@ -215,22 +215,22 @@ function setTheme(themeColor) { showErrorMessage(translate('unknown_error')); button.disabled = false; }); - - } - function saveCustomCss() { - const button = document.getElementById("save-css"); - button.disabled = true; - - const customCss = document.getElementById("customCss").value; - - fetch('endpoints/settings/customcss.php', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ customCss: customCss }) - }) +} + +function saveCustomCss() { + const button = document.getElementById("save-css"); + button.disabled = true; + + const customCss = document.getElementById("customCss").value; + + fetch('endpoints/settings/customcss.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ customCss: customCss }) + }) .then(response => response.json()) .then(data => { if (data.success) { @@ -244,4 +244,4 @@ function setTheme(themeColor) { showErrorMessage(translate('unknown_error')); button.disabled = false; }); - } \ No newline at end of file +} \ No newline at end of file diff --git a/settings.php b/settings.php index e118b0d..e9ce63a 100644 --- a/settings.php +++ b/settings.php @@ -453,12 +453,18 @@ require_once 'includes/header.php'; class="one-third" value="" />

- /> - - /> - +
+ /> + +
+
+ /> + +
+ +
+
+ + +

-
- - -
@@ -518,9 +525,10 @@ require_once 'includes/header.php'; value="" />
- - +
@@ -548,9 +556,10 @@ require_once 'includes/header.php'; value="" />
- - +
@@ -580,9 +589,10 @@ require_once 'includes/header.php';
- - +
@@ -611,9 +621,10 @@ require_once 'includes/header.php'; value="" />
- - +
@@ -642,9 +653,10 @@ require_once 'includes/header.php'; placeholder="">
- - +
@@ -690,6 +702,13 @@ require_once 'includes/header.php'; placeholder="" value="" /> +
+ + +

: @@ -699,12 +718,6 @@ require_once 'includes/header.php';

-
- - -
@@ -930,6 +943,10 @@ require_once 'includes/header.php'; +
+ +

: @@ -952,10 +969,6 @@ require_once 'includes/header.php';

-
- -
@@ -1091,50 +1104,50 @@ require_once 'includes/header.php';

+ >
+ >
+ >
+ >
+ >