aziascreations/Web-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished base for about page, fixed height issue on mobile, Improved config and lang utils

Browse Source 
Update index.php, config.php, and 8 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2023-11-10 03:24:30 +01:00
parent faf5837650
commit e5429e4484
10 changed files with 295 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
about/index.php
View File

@@ -4,85 +4,149 @@ set_include_path('../');
include_once 'commons/config.php';
include_once 'commons/langs.php';
?>
<!DOCTYPE html>
<html lang="<?php echo($user_language); ?>">
<head>
<?php include 'commons/DOM/head.php'; ?>
<title><?php print(localize('about.head.title')); ?></title>
<meta name="description" content="<?php print(localize('about.head.description')); ?>">
<meta property="og:title" content="<?php print(localize('about.og.title')); ?>"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="<?php echo($host_uri . l10n_url_abs('/')); ?>"/>
<meta property="og:image" content="<?php echo($host_uri); ?>/resources/NibblePoker/images/logos/v2_opengraph.png"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:description" content="<?php print(localize('about.og.description')); ?>"/>
</head>
<body>
<?php
include_once 'commons/DOM/utils.php';
$SIDEBAR_IDS = ['about'];
include 'commons/DOM/sidebar.php';
?>
<header class="w-full p-m pl-s">
<h1 class="t-size-17 t-w-500">
<i class="fad fa-user t-size-16 mr-s t-muted"></i><?php print(localize("about.header.title")); ?>
</h1>
<?php include 'commons/DOM/header-lang.php'; ?>
</header>
<main id="main" class="rl-m border border-r-0 p-l">
<?php printMainHeader(localize("about.intro.title")); ?>
<?php printSubHeader(localize("about.history.title")); ?>
<p class="mt-xs ml-s">
<?php print(localize("about.history.text.90")); ?><br>
<?php print(localize("about.history.text.91")); ?>
</p>
<?php printSubHeader(localize("about.future.title")); ?>
<p class="mt-xs ml-s">
<?php print(localize("about.future.text.01")); ?>
</p>
<p class="mt-xs ml-s">
<?php print(localize("about.future.text.10")); ?>
</p>
<p class="mt-xs ml-s">
<?php print(localize("about.future.text.20")); ?><br>
<?php print(localize("about.future.text.21")); ?>
</p>
<p class="mt-xs ml-s">
<?php print(localize("about.future.text.30")); ?>
</p>
<?php printSubHeader(localize("about.nibblepoker.title")); ?>
<p class="mt-xxs ml-s">
<?php print(localize("about.nibblepoker.text.01")); ?>
</p>
<p class="mt-xs ml-s">
<?php print(localize("about.nibblepoker.text.10")); ?><br>
<?php print(localize("about.nibblepoker.text.11")); ?>
</p>
<p class="mt-xs ml-s">
<?php print(localize("about.nibblepoker.text.20")); ?>
</p>
<?php printSubHeader(localize("about.aziascreations.title")); ?>
<p class="mt-xxs ml-s">
<?php print(localize("about.aziascreations.text.01")); ?>
</p>
<p class="mt-xxs ml-s">
<?php print(localize("about.aziascreations.text.10")); ?>
</p>
<!--<img src="/resources/NibblePoker/images/about/profile-pic.jpg" alt="" class="r-r">-->
</main>
<?php
include 'commons/DOM/footer.php';
include 'commons/DOM/scripts.php';
?>
</body>
</html>
<!DOCTYPE html>
<html lang="<?php echo($user_language); ?>">
<head>
<?php include 'commons/DOM/head.php'; ?>
<title><?php print(localize('about.head.title')); ?></title>
<meta name="description" content="<?php print(localize('about.head.description')); ?>">
<meta property="og:title" content="<?php print(localize('about.og.title')); ?>"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="<?php echo($host_uri . l10n_url_abs('/about/')); ?>"/>
<meta property="og:image" content="<?php echo($host_uri); ?>/resources/NibblePoker/images/logos/v2_opengraph_v2.png"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:description" content="<?php print(localize('about.og.description')); ?>"/>
</head>
<body>
<?php
include_once 'commons/DOM/utils.php';
$SIDEBAR_IDS = ['about'];
include 'commons/DOM/sidebar.php';
?>
<header class="w-full p-m pl-s">
<h1 class="t-size-17 t-w-500">
<i class="fad fa-user t-size-16 mr-s t-muted"></i><?php print(localize("about.header.title")); ?>
</h1>
<?php include 'commons/DOM/header-lang.php'; ?>
</header>
<main id="main" class="rl-m border border-r-0 p-l">
<?php printMainHeader(localize("about.intro.title")); ?>
<img src="/resources/NibblePoker/images/about/profile-pic.jpg" alt="" class="r-r img-profile f-right m-xs ml-xxs" draggable="false">
<p class="mt-xs ml-s">
<?php print(localize("about.intro.text.01")); ?><br>
<?php print(localize("about.intro.text.02")); ?>
</p>
<p class="mt-xs ml-s">
<?php print(localize("about.intro.text.10")); ?><br>
<?php print(localize("about.intro.text.11")); ?>
</p>
<p class="mt-xs ml-s">
<?php print(localize("about.intro.text.20")); ?><br>
<?php print(localize("about.intro.text.21")); ?>
</p>
<?php printSubHeader(localize("about.tenets.title")); ?>
<p class="mt-xs ml-s">
<!-- TODO: This section -->
TODO
</p>
<?php printSubHeader(localize("about.future.title")); ?>
<p class="mt-xs ml-s">
<?php print(localize("about.future.text.01")); ?><br>
<?php print(localize("about.future.text.02")); ?>
</p>
<p class="mt-xs ml-s">
<?php print(localize("about.future.text.10")); ?>
</p>
<p class="mt-xs ml-s">
<?php print(localize("about.future.text.20")); ?>
</p>
<?php printSubHeader(localize("about.financing.title")); ?>
<p class="mt-xxs ml-s">
<?php print(localize("about.financing.text.01")); ?><br>
<?php print(localize("about.financing.text.02")); ?>
</p>
<p class="mt-xs ml-s">
<?php print(localize("about.financing.text.10")); ?>
</p>
<p class="mt-xs ml-s">
<?php print(localize("about.financing.text.20")); ?><br>
<?php print(localize("about.financing.text.21")); ?>
</p>
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center mt-xs mx-s">
<thead>
<tr>
<th><?php print(localize("about.financing.part.service")); ?></th>
<th><?php print(localize("about.financing.part.cost.yearly")); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td><?php print(localize("about.financing.part.domain.lu")); ?></td>
<td><?php print(number_format(17,2, $lang_number_decimal, $lang_number_thousands)); ?> €</td>
</tr>
<tr>
<td><?php print(localize("about.financing.part.domain.com")); ?></td>
<td><?php print(number_format(14.5,2, $lang_number_decimal, $lang_number_thousands)); ?> €</td>
</tr>
<tr>
<td><?php print(localize("about.financing.part.proxy.europe")); ?></td>
<td><?php print(number_format(14.5,2, $lang_number_decimal, $lang_number_thousands)); ?> €</td>
</tr>
<tr>
<td><?php print(localize("about.financing.part.emails")); ?></td>
<td><?php print(number_format(14.4,2, $lang_number_decimal, $lang_number_thousands)); ?> €</td>
</tr>
<tr>
<td><?php print(localize("about.financing.part.electricity")); ?></td>
<td>&pm;<?php print(number_format(30,2, $lang_number_decimal, $lang_number_thousands)); ?> €</td>
</tr>
<tr>
<td><b class="f-right"><?php print(localize("about.financing.part.cost.yearly.total")); ?>:</b></td>
<td>&pm;<?php print(number_format(
16.93 + 14.5 + 14.52 + 14.4 + 30,
2, $lang_number_decimal, $lang_number_thousands)
); ?> €
</td>
</tr>
</tbody>
</table>
<p class="mt-xxs ml-s t-super-muted">
<?php print(localize("about.financing.text.isp")); ?>
</p>
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center mt-xxs mx-s mb-xs">
<thead>
<tr>
<th><?php print(localize("about.financing.part.equipment")); ?></th>
<th><?php print(localize("about.financing.part.cost")); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td><?php print(localize("about.financing.part.nanopir4s")); ?></td>
<td>&pm;<?php print(number_format(80,2, $lang_number_decimal, $lang_number_thousands)); ?> €</td>
</tr>
<tr>
<td><?php print(localize("about.financing.part.storage")); ?></td>
<td>&pm;<?php print(number_format(10,2, $lang_number_decimal, $lang_number_thousands)); ?> €</td>
</tr>
<tr>
<td><b class="f-right"><?php print(localize("about.financing.part.cost.total")); ?>:</b></td>
<td>&pm;<?php print(number_format(90, 2, $lang_number_decimal, $lang_number_thousands)); ?> €
</td>
</tr>
</tbody>
</table>
</main>
<?php
include 'commons/DOM/footer.php';
include 'commons/DOM/scripts.php';
?>
</body>
</html>
<?php
$end_time = microtime(true);
if($print_execution_timer) {

18
commons/config.php
View File

@@ -4,9 +4,21 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
header('HTTP/1.1 403 Forbidden'); die();
}
// Only being used in 'head' for opengraph data.
$host = "nibblepoker.lu";
$host_uri = "https://nibblepoker.lu";
// Used for opengraph head tags.
switch($_SERVER['SERVER_NAME']) {
case "localhost":
case "nibblepoker.lu":
$host = "nibblepoker.lu";
$host_uri = "https://nibblepoker.lu";
break;
case "nibblepoker.com":
$host = "nibblepoker.com";
$host_uri = "https://nibblepoker.com";
break;
default:
http_response_code(400);
exit(1);
}
$dir_commons = dirname(__FILE__);
$dir_root = realpath($dir_commons . "/../");

6
commons/langs.php
View File

@@ -4,6 +4,8 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
header('HTTP/1.1 403 Forbidden');
die();
}
// FIXME: Make a note of which variables are being used from that file !
include_once 'commons/config.php';
// This helper requires PHP 8 or newer !
@@ -61,6 +63,10 @@ if(str_starts_with($_SERVER['REQUEST_URI'], "/en/")) {
}
}
// Preparing other related variables
$lang_number_decimal = $user_language == "en" ? "." : ",";
$lang_number_thousands = $user_language == "en" ? "," : ".";
// Setting headers
header("Content-Language: " . $user_language);

63
commons/strings/en/about.json
View File

@@ -5,12 +5,71 @@
"about.og.description": "TODO: description",
"about.header.title": "About",
"about.intro.title": "Introduction",
"about.intro.text.01": "My name is Herwin Bozet, I'm an experienced developer with extensive experience in PureBasic, Python, Java, VBA; and intermediate knowledge in C, Win32 APIs, embedded systems and general web development.",
"about.intro.text.02": "I've been programming for about 10 years now, and for the last 5 years I've been actively working on applying that experience to a variety of projects with the aim of helping programmers and people in their day-to-day life.",
"about.intro.text.10": "NibblePoker is, in essence, a simple moniker and the front-end for most of my public-focused work.",
"about.intro.text.11": "It houses all my work made and tailored for usage by other people.",
"about.intro.text.20": "This entire website, as well as all my work for it and other personal projects, is completely open-source and available under permissive <abbr title=\"Open Source Initiative\">OSI</abbr> approved licenses.",
"about.intro.text.21": "All of it is maintained, developed and expanded in my free time with the occasional help from people in the open-source community.",
"about.tenets.title": "Core tenets",
"about.tenets.text.01": "",
"about.tenets.text.02": "",
"about.future.title": "Future plans",
"about.future.text.01":"It is planned to turn NibblePoker into a <abbr title=\"Private company with limited liability\">SPRL</abbr> in a couple years if everything goes as planned.",
"about.future.text.02":"This would allow me to centralize many things and invest properly in my targetted fields to achieve my goals.",
"about.future.text.10":"The goal would be to create a small sustainable local business that offers a wide range of products and solutions covering <abbr title=\"Internet of things\">IoT</abbr> devices, programming, and technological independence ; All while including the required software and hardware components often lacking in such products and solutions.",
"about.future.text.20":"Ultimately, all this work and research would be made available to the public under open-source licenses, enabling anyone who wishes to learn, reuse, and resell open-source products, to do so in a similar way as companies like Adafruit do.",
"about.nibblepoker.title": "The 'NibblePoker' name",
"about.aziascreations.title": "The 'AziasCreations' name"
"_about.nibblepoker.title": "The 'NibblePoker' name",
"_about.nibblepoker.text.01": "TODO",
"_about.nibblepoker.text.10": "TODO",
"_about.nibblepoker.text.11": "TODO",
"_about.nibblepoker.text.20": "TODO",
"about.financing.title": "Financing",
"about.financing.text.01": "This website, as well as the surrounding infrastructure, was made to cost as little as possible while not being reliant on any censor-happy companies.",
"about.financing.text.02": "Following my core tenets, I also wanted to retain some sort of \"technological sovereignty\", and therefore refuse to support or use companies that actively fight against legal free speech.",
"about.financing.text.10": "The details of the operating costs are provided below to illustrate the low price of such independence.",
"about.financing.text.20": "And for those of you who are more motivated, I hope to inspire you to at least try this kind of activity.",
"about.financing.text.21": "It may seem daunting at first, but for a fraction of the cost presented here, <b>and with a bit of motivation</b>, you can already accomplish a lot of things and gain valuable knowledge for a world as interconnected as ours.",
"about.financing.text.isp": "The main ISP bill isn't accounted for since this could run off some random public Wi-Fi.",
"about.financing.part.service": "Service",
"about.financing.part.cost": "Cost",
"about.financing.part.cost.total": "Total Cost",
"about.financing.part.equipment": "Equipment",
"about.financing.part.cost.yearly": "Yearly Cost",
"about.financing.part.cost.yearly.total": "Yearly Cost",
"about.financing.part.domain.lu": "<i>.lu</i> domain",
"about.financing.part.domain.com": "<i>.com</i> domain",
"about.financing.part.proxy.europe": "European reverse-proxy",
"about.financing.part.proxy.america": "American reverse-proxy",
"about.financing.part.proxy.asia": "Asian reverse-proxy",
"about.financing.part.emails": "Emails",
"about.financing.part.electricity": "Electricity",
"about.financing.part.nanopir4s": "NanoPi R4S",
"about.financing.part.storage": "Local storage",
"about.aziascreations.title": "The 'AziasCreations' name",
"_about.aziascreations.text.01": "TODO",
"_about.aziascreations.text.10": "TODO"
}

72
commons/strings/fr/about.json
View File

@@ -5,27 +5,71 @@
"about.og.description": "TODO: description",
"about.header.title": "À-propos",
"about.intro.title": "Introduction",
"_about.history.title": "",
"about.history.text.90": "Nowadays, for the low sum of ~46€ per year, or ~70€ including the electricity bill, I can provide a decently reliable service to people around the world, and to myself when using this infrastructure for side-projects.",
"about.history.text.91": "The ability to [tech souver] for the price is something I've always strived to achieve and actively encourage other people to, at the very least, play around with in order to learn about and take back control of [???]",
"about.intro.text.01": "Je m'appelle Herwin Bozet, et je suis un développeur expérimenté en PureBasic, Python, Java, VBA ; et de manière plus modérée en C, API Win32, systèmes embarqués et le développement web général.",
"about.intro.text.02": "Je programme depuis environ 10 ans, et au cours des 5 dernières années, j'ai activement travaillé à l'application de cette expérience à divers projets dans le but d'aider les programmeurs et les gens dans leur vie quotidienne.",
"about.intro.text.10": "NibblePoker est, en essence, un simple pseudonyme et une ombrelle sous laquelle la majeure partie de mon travail axé sur le public sera présente.",
"about.intro.text.11": "Il abrite l'ensemble de mon travail créé et adapté pour être utilisé par d'autres personnes.",
"about.intro.text.20": "L'ensemble de ce site web, ainsi que l'ensemble de mon travail et autres projets personnels réalisés pour lui, sont entièrement open-source et disponibles sous des licences permissives approuvées par l'<abbr title=\"Open Source Initiative\">OSI</abbr>.",
"about.intro.text.21": "Tout cela est maintenu, développé et étendu pendant mon temps libre, avec l'aide occasionnelle de personnes de la communauté open source.",
"about.tenets.title": "Principes fondamentaux",
"about.tenets.text.01": "",
"about.tenets.text.02": "",
"about.future.title": "Projet d'avenir",
"about.future.text.01": "Dans le futur, il est prévu de décliner <i>NibblePoker</i> en une <abbr title=\"Société privée à responsabilité limitée\">SPRL</abbr>",
"about.future.text.10": "Cela aura pour bût de me permettre d'investir dans des domaines ???.",
"about.future.text.20": "La finalité serait de pouvoir créer un projet d'entreprise durable et proposer un large gamme de produits et solutions couvrant les domaines de [?? & ???, en full-stack].",
"about.future.text.21": "Sette dernière serait soutenu, de manière ouverte en interne, par des services de conception de produits, de création de librairies et autres parties soutenable de la chaine de production.",
"about.future.text.30": "[Open-source & instructif].",
"about.nibblepoker.title": "Le nom 'NibblePoker'",
"about.nibblepoker.text.01": "Le sobriquet 'NibblePoker' est un mot inventé qui est composé de plusieurs termes [techniques] plus anciens.",
"about.nibblepoker.text.10": "●&nbsp;&nbsp;'<i>Nibble</i>' est un terme technique anglais historiquement utilisé pour décrire décrit un demi-octet, ou 4 bits d'information.",
"about.nibblepoker.text.11": "●&nbsp;&nbsp;'<i>Poker</i>' viens du verbe anglais '<i>to poke</i>' qui, dans le domaine rétro-informatique, décrit le fait d'écrire des données dans la mémoire d'un ordinateur.",
"about.nibblepoker.text.20": "Finalement, lors de la création de ce surnom, je travaillais depuis quelques temps sur d'anciennes machines telle la Commodore64, Acorn Electron et [???]",
"about.future.text.01":"Il est prévu que je décline NibblePoker en une petite <abbr title=\"Societé privée à responsibilité limitée\">SPRL</abbr> d'ici quelques années si tout se déroule comme prévu.\n",
"about.future.text.02":"Cela aura pour but de me permettre de centraliser plein de choses et d'investir correctement dans mes domaines de prédilection.",
"about.future.text.10":"La finalité serait de pouvoir créer un petit projet local d'entreprise durable, ainsi que de proposer une large gamme de produits et solutions couvrant les domaines de l'électronique connectée et intelligente, la programmation et l’indépendance technologique tout en incluant les composantes logicielles et physiques souvent manquantes dans de tels produits et solutions.",
"about.future.text.20":"Finalement tout ce travail et recherches seraient mis à disposition du public sous des licences open-source afin de permettre permettant à quiconque le souhaite d’apprendre, réutiliser et revendre des produits ouverts tels que le font des compagnies comme Adafruit.",
"_about.nibblepoker.title": "Le nom 'NibblePoker'",
"_about.nibblepoker.text.01": "Le surnom '<i>NibblePoker</i>' est un mot composé de plusieurs termes [techniques] plus anciens.",
"_about.nibblepoker.text.10": "●&nbsp;&nbsp;'<i>Nibble</i>' est un terme technique anglais historiquement utilisé pour décrire décrit un demi-octet, ou 4 bits d'information.",
"_about.nibblepoker.text.11": "●&nbsp;&nbsp;'<i>Poker</i>' viens du verbe anglais '<i>to poke</i>' qui, dans le domaine rétro-informatique, décrit le fait d'écrire des données dans la mémoire d'un ordinateur.",
"_about.nibblepoker.text.20": "Finalement, lors de la création de ce surnom, je travaillais depuis quelques temps sur d'anciennes machines telle la Commodore64, Acorn Electron et [???]ironique.",
"about.financing.title": "Financement",
"about.financing.text.01": "Ce site web, ainsi que son infrastructure environnante, ont été conçus pour coûter le moins possible tout en étant indépendants d'entreprises qui se prennent pour des censeurs.",
"about.financing.text.02": "Et en suivant mes principes fondamentaux, je souhaitais également conserver une \"souveraineté technologique\", et, par conséquent, refuse de soutenir ou d'utiliser des entreprises qui luttent activement contre la liberté d'expression.",
"about.financing.text.10": "Le détail des coûts opérationnels sont présents ci-dessous afin d'illustrer le faible prix d'une telle indépendance.",
"about.financing.text.20": "Et pour les plus motivés d'entre-vous, j'espère pouvoir vous motiver à au moins tester ce genre d'activités.",
"about.financing.text.21": "C'est un domaine qui peut paraître intimidant de prime abord, mais pour une fraction du coût présenté ici, <b>et avec un rien de motivation</b>, vous pouvez déjà accomplir énormément de choses et acquérir des connaissances essentielles dans un monde aussi connecté que le nôtre.",
"about.financing.text.isp": "Le coût de la connexion internet n'est pas compté car elle pourrait être remplacée par un Wi-Fi public lambda.",
"about.financing.part.service": "Service",
"about.financing.part.cost": "Coût",
"about.financing.part.cost.total": "Coût Total",
"about.financing.part.equipment": "Matériel",
"about.financing.part.cost.yearly": "Coût Annuel",
"about.financing.part.cost.yearly.total": "Coût Annuel",
"about.financing.part.domain.lu": "Domaine en <i>.lu</i>",
"about.financing.part.domain.com": "Domaine en <i>.com</i>",
"about.financing.part.proxy.europe": "Reverse-proxy en Europe",
"about.financing.part.proxy.america": "Reverse-proxy en Amérique",
"about.financing.part.proxy.asia": "Reverse-proxy en Asie",
"about.financing.part.emails": "Adresses email",
"about.financing.part.electricity": "Électricité",
"about.financing.part.nanopir4s": "NanoPi R4S",
"about.financing.part.storage": "Stockage local",
"about.aziascreations.title": "Le nom 'AziasCreations'",
"about.aziascreations.text.01": "L'ancien surnom 'AziasCreations' était utilisé entre 2013 et 2020 et est à présent abandonné au profit de <i>NibblePoker</i>.",
"about.aziascreations.text.10": "Cependant, il reste utilisé sur GitHub et Gitea à cause de certaines limitations concernant les changements de pseudonyme qui m'ont empèché de faire un changement complet."
}

2
index.php
View File

@@ -39,7 +39,7 @@ include 'commons/DOM/sidebar.php';
<p class="mt-xs ml-s"><?php print(localize("home.intro.text.2")); ?></p>
<?php printMainHeader(localize("home.showcase.title")); ?>
<div class="mt-xs mx-s">
<div class="mt-xs mx-s border r-s">
<div class="glider">
<img src="/resources/NibblePoker/images/content/lscom/lscom-legacy-simple.png" alt="test123">
<img src="/resources/NibblePoker/images/content/lscom/lscom-legacy-simple.png" alt="test123">

BIN
resources/NibblePoker/images/about/profile-pic.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
resources/NibblePoker/images/logos/v2_opengraph_v2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

9
resources/NibblePoker/scss/site/base.scss
View File

@@ -7,12 +7,15 @@
/* Site > Base > Layout > Root */
html, body {
// Do not use 100vh !
// See: https://stackoverflow.com/a/59020698
min-width: 100vw;
min-height: 100vh;
min-height: 100%;
width: 100vw !important;
height: 100vh !important;
height: 100% !important;
max-width: 100vw;
max-height: 100vh;
max-height: 100%;
}
/* Site > Base > Layout > Main Grid */

5
resources/NibblePoker/scss/site/image.scss
View File

@@ -10,6 +10,11 @@
height: 1em;
}
.img-profile {
width: 7.5rem;
height: 7.5rem;
}
.sidebar-entry > i {
}