New identity

build/webpack.config.js

@@ -102,7 +102,7 @@ module.exports = (env, argv) => {
 			new CopyWebpackPlugin({
 				patterns: [
 					{ from: path.resolve(LIB, 'index.php'), to: 'index.php' },
-					{ from: path.resolve(SRC, 'images', 'logo_black.png'), to: 'images' },
+					{ from: path.resolve(SRC, 'images', 'logo_title.png'), to: 'images' },
 					{ from: path.resolve(SRC, 'images', 'spot-logo-only.svg'), to: 'images' }
 				]
 			}),

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "franzz/spot",
-    "description": "Spotty",
+    "description": "LiveTrail",
     "type": "project",
 	"license": "GPL-3.0-or-later",
 	"repositories": [

i18n/en.json

@@ -17,7 +17,7 @@
 	"credits": {
 		"git": "Git Repository",
 		"license": "under GPLv3 license",
-		"project": "Spotty Project"
+		"project": "$0 Project"
 	},
 	"email": {
 		"confirmation": {

i18n/es.json

@@ -17,7 +17,7 @@
 	"credits": {
 		"git": "Repositorio de Git",
 		"license": "bajo licencia GPLv3",
-		"project": "Proyecto Spotty"
+		"project": "Proyecto $0"
 	},
 	"email": {
 		"confirmation": {

i18n/fr.json

@@ -17,7 +17,7 @@
 	"credits": {
 		"git": "Dépôt Git",
 		"license": "sous licence GPLv3",
-		"project": "Projet Spotty"
+		"project": "Projet $0"
 	},
 	"email": {
 		"confirmation": {

lib/Email.php

@@ -57,8 +57,8 @@ class Email extends PhpObject {
 		$oPHPMailer->Password   = Settings::MAIL_PASS;					//SMTP password
 		$oPHPMailer->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;		//Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` encouraged
 		$oPHPMailer->Port       = 587;									//TCP port to connect to, use 465 for `PHPMailer::ENCRYPTION_SMTPS` above
-		$oPHPMailer->setFrom(Settings::MAIL_FROM, 'Spotty');
+		$oPHPMailer->setFrom(Settings::MAIL_FROM, Spot::PROJECT_NAME);
-		$oPHPMailer->addReplyTo(Settings::MAIL_FROM, 'Spotty');
+		$oPHPMailer->addReplyTo(Settings::MAIL_FROM, Spot::PROJECT_NAME);
 
 		$bSuccess = true;
 		foreach($this->asDests as $asDest) {

lib/Spot.php

@@ -41,6 +41,7 @@ class Spot extends Main
 	const MAIL_CHUNK_SIZE = 5;
 
 	const DEFAULT_LANG = 'en';
+	const PROJECT_NAME = 'LiveTrail';
 
 	const MAIN_PAGE = 'index';
 
@@ -184,14 +185,15 @@ class Spot extends Main
 					'default_maps'				=> $this->oMap->getProjectMaps(-1),
 					'chunk_size'				=> self::FEED_CHUNK_SIZE,
 					'hash_sep'					=> '-',
-					'title'						=> 'Spotty',
+					'title'						=> self::PROJECT_NAME,
 					'default_page'				=> 'project'
 				)
 			),
 			self::MAIN_PAGE,
 			array(
 				'tags' => [
-					'language' => $this->oLang->getLanguage()
+					'language'	=> $this->oLang->getLanguage(),
+					'title'		=> self::PROJECT_NAME,
 				],
 				'instances' => [
 					'entrypoint' => $this->getAppEntryPoints()

src/components/projectNewsletter.vue

@@ -53,7 +53,6 @@ export default {
 </script>
 
 <template>
-	<h1><SpotIcon :icon="'newsletter'" width="fixed" :text="lang.get('newsletter.title')" /></h1>
 	<div class="newsletter-form">
 		<input type="email" name="email" id="email" :placeholder="lang.get('newsletter.email_placeholder')" v-model="user.email" :disabled="loading || subscribed" />
 		<SpotButton :classes="buttonClasses" :title="lang.get('newsletter.'+action)" :icon="action" @click="manage" />

src/components/projectSettings.vue

@@ -76,15 +76,15 @@ export default {
 <template>
 	<div id="settings" class="map-container map-container-left">
 		<div id="settings-panel" class="map-panel">
-			<div class="settings-header">
+			<div class="settings-header settings-box">
-				<div class="logo"><img width="289" height="72" src="images/logo_black.png" alt="Spotty" /></div>
+				<a class="logo" href="#project"><img src="images/logo_title.png" :alt="consts.title" /></a>
-				<div id="last_update" v-if="project?.mode == consts.modes.blog && lastUpdate.unix_time > 0">
+				<div class="last_update" v-if="project?.mode == consts.modes.blog && lastUpdate.unix_time > 0">
 					<p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr :title="lastUpdate.formatted_time">{{ lang.get('feed.last_update')+' '+lastUpdate.relative_time }}</abbr></p>
 				</div>
 			</div>
 			<div class="settings-sections">
 				<Simplebar id="settings-sections-scrollbox">
-					<div class="settings-section">
+					<div class="settings-section settings-box">
 						<h1><SpotIcon :icon="'project'" width="fixed" :text="lang.get('project.hikes')" /></h1>
 						<div class="settings-section-body">
 							<div class="radio" v-for="project in projects" :key="'project-'+project.id">
@@ -98,7 +98,7 @@ export default {
 							</div>
 						</div>
 					</div>
-					<div class="settings-section">
+					<div class="settings-section settings-box">
 						<h1><SpotIcon :icon="'map'" width="fixed" :text="lang.get('map.title')" /></h1>
 						<div class="settings-section-body">
 							<div class="radio" v-for="bm in baseMaps" :key="'map-'+bm.id_map">
@@ -107,21 +107,24 @@ export default {
 							</div>
 						</div>
 					</div>
-					<div class="settings-section newsletter">
+					<div class="settings-section settings-box newsletter">
-						<ProjectNewsletter />
+						<h1><SpotIcon :icon="'newsletter'" width="fixed" :text="lang.get('newsletter.title')" /></h1>
+						<div class="settings-section-body">
+							<ProjectNewsletter />
+						</div>
 					</div>
-					<div class="settings-section admin" v-if="user.hasClearance(consts.clearances.admin)">
+					<div class="settings-section settings-box admin" v-if="user.hasClearance(consts.clearances.admin)">
 						<h1><SpotIcon :icon="'admin'" width="fixed" :text="lang.get('admin.title')" /></h1>
-						<div class="admin-actions">
+						<div class="settings-section-body admin-actions">
 							<a class="button" href="#admin"><SpotIcon :icon="'config'" :text="lang.get('admin.config')" /></a>
 							<a class="button" href="#upload"><SpotIcon :icon="'upload'" :text="lang.get('admin.upload')" /></a>
 						</div>
 					</div>
 				</Simplebar>
 			</div>
-			<div class="settings-footer">
+			<div class="settings-footer settings-box">
 				<a href="https://git.lutran.fr/franzz/spot" :title="lang.get('credits.git')" target="_blank" rel="noopener">
-					<SpotIcon :icon="'credits'" :text="lang.get('credits.project')" />
+					<SpotIcon :icon="'credits'" :text="lang.get('credits.project', consts.title)" />
 				</a>
 				<span>&nbsp;{{ lang.get('credits.license') }}</span>
 			</div>

src/images/icons/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/images/icons/mstile-150x150.png?v=GvmqYyKwbb"/>
-            <TileColor>#00a300</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>

src/images/icons/safari-pinned-tab.svg

@@ -1,32 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M5041 5784 c366 -384 572 -817 630 -1323 17 -156 7 -495 -20 -641
--78 -415 -250 -717 -1091 -1915 -108 -154 -338 -482 -510 -730 -172 -247 -328
--469 -346 -492 -21 -25 -56 -52 -91 -68 -48 -23 -66 -27 -127 -23 -46 2 -86
-11 -113 24 l-42 21 36 -44 c47 -58 122 -116 191 -150 50 -25 68 -28 152 -28
-88 0 100 2 163 34 80 40 167 121 254 236 102 137 967 1375 1158 1660 429 639
-578 959 636 1365 20 140 17 485 -5 630 -37 237 -101 440 -205 655 -162 331
--404 620 -696 830 -33 24 -28 16 26 -41z"/>
-<path d="M2750 5673 c-63 -22 -143 -75 -197 -131 -192 -196 -318 -616 -298
--990 9 -174 36 -314 118 -607 l34 -120 316 -3 317 -2 0 62 c1 81 22 199 49
-265 11 29 42 87 69 130 143 230 186 366 185 588 -1 420 -140 736 -356 809 -60
-20 -177 20 -237 -1z"/>
-<path d="M4017 5056 c-174 -62 -301 -280 -348 -591 -19 -129 -17 -337 4 -425
-32 -136 85 -257 159 -368 81 -119 127 -268 128 -410 l0 -62 317 2 316 3 34
-120 c106 374 136 590 115 816 -22 225 -66 391 -153 566 -48 97 -74 138 -131
-198 -39 42 -90 87 -115 102 -99 58 -241 79 -326 49z"/>
-<path d="M2412 3548 c3 -109 7 -129 30 -173 120 -232 445 -231 559 0 28 58 32
-76 37 180 l5 115 -318 0 -317 0 4 -122z"/>
-<path d="M3960 2962 c0 -234 106 -368 300 -380 98 -5 168 20 233 83 75 75 91
-119 95 263 l4 122 -316 0 -316 0 0 -88z"/>
-</g>
-</svg>

src/images/icons/site.webmanifest

@@ -1,22 +1,21 @@
 {
-    "name": "Spotty",
+  "name": "LiveTrail",
-    "short_name": "Spotty",
+  "short_name": "LiveTrail",
-    "icons": [
+  "icons": [
-        {
+    {
-            "src": "/images/icons/android-chrome-192x192.png?v=GvmqYyKwbb",
+      "src": "/images/icons/web-app-manifest-192x192.png?v=20260525",
-            "sizes": "192x192",
+      "sizes": "192x192",
-            "type": "image/png",
+      "type": "image/png",
-			"purpose": "any maskable"
+      "purpose": "maskable"
-        },
+    },
-        {
+    {
-            "src": "/images/icons/android-chrome-512x512.png?v=GvmqYyKwbb",
+      "src": "/images/icons/web-app-manifest-512x512.png?v=20260525",
-            "sizes": "512x512",
+      "sizes": "512x512",
-            "type": "image/png",
+      "type": "image/png",
-			"purpose": "any maskable"
+      "purpose": "maskable"
-        }
+    }
-    ],
+  ],
-    "theme_color": "#ffffff",
+  "theme_color": "#081b19",
-    "background_color": "#ffffff",
+  "background_color": "#081b19",
-    "display": "browser",
+  "display": "standalone"
-	"orientation": "portrait"
 }

src/masks/index.html

@@ -4,23 +4,21 @@
 	<meta http-equiv="content-type" content="text/html; charset=utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta name="description" content="[#]lang:meta.page_og_desc[#]">
-	<meta property="og:title" content="Spotty" />
+	<meta property="og:title" content="[#]title[#]" />
 	<meta property="og:description" content="[#]lang:meta.page_og_desc[#]" />
 	<meta property="og:type" content="website" />
 	<meta property="og:url" content="[#]server[#]" />
 	<meta property="og:image" content="images/ogp.png" />
 	<meta property="og:locale" content="[#]lang:meta.locale[#]" />
-	<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png?v=GvmqYyKwbb">
+	<link rel="icon" type="image/png" href="images/icons/favicon-96x96.png?v=20260525" sizes="96x96" />
-	<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png?v=GvmqYyKwbb">
+	<link rel="icon" type="image/svg+xml" href="images/icons/favicon.svg?v=20260525" />
-	<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png?v=GvmqYyKwbb">
+	<link rel="shortcut icon" href="images/icons/favicon.ico?v=20260525" />
-	<link rel="manifest" href="images/icons/site.webmanifest?v=GvmqYyKwbb">
+	<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png?v=20260525" />
-	<link rel="mask-icon" href="images/icons/safari-pinned-tab.svg?v=GvmqYyKwbb" color="#44d15a">
+	<meta name="apple-mobile-web-app-title" content="[#]title[#]" />
-	<link rel="shortcut icon" href="images/icons/favicon.ico?v=GvmqYyKwbb">
+	<link rel="manifest" href="images/icons/site.webmanifest?v=20260525" />
-	<meta name="msapplication-TileColor" content="#00a300">
+	<meta name="theme-color" content="#081b19">
-	<meta name="msapplication-config" content="images/icons/browserconfig.xml?v=GvmqYyKwbb">
-	<meta name="theme-color" content="#ffffff">
 	<script id="app-config" type="application/json">[#]app_config[#]</script>
-	<title>Spotty</title>
+	<title>[#]title[#]</title>
 </head>
 <body>
 <div id="container"></div>

src/styles/_color.scss

@@ -37,7 +37,8 @@ $over-img-bg:		color.adjust($default, $lightness: 70%, $alpha: -0.5, $space: hsl
 $over-img-shadow:	rgba(0, 0, 0, 0.5);
 
 //Settings colors
-$title: 			$default;
+$night:				#061D19;
+$title: 			$message;
 $subtitle: 			#999;
 $download-hover:	#0078A8;
 

src/styles/_page.project.panel.feed.scss

@@ -27,7 +27,7 @@
 				}
 			}
 
-			.archived {
+			.post-item {
 				background: color.$default-bg-light;
 			}
 		}

src/styles/_page.project.panel.scss

@@ -34,10 +34,6 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 
 		.map-container-left {
 			transform: translateX(0);
-
-			.map-panel {
-				box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
-			}
 		}
 	}
 
@@ -84,13 +80,13 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 			color: color.$default-inv;
 	
 			&:hover, &:hover a, &:hover a:visited {
-				background-color: color.$default-bg-light;
+				background-color: color.$default-bg;
 				color: color.$default;
 			}
 	
 			a, a:visited {
-				background-color: color.$default;
+				background-color: color.$default-inv-bg;
-				color: color.$default-bg;
+				color: color.$default-inv;
 				text-decoration: none;
 			}
 	
@@ -105,7 +101,6 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 			margin: var.$block-spacing;
 			border-radius: var.$block-radius;
 			color: color.$default;
-			background: color.$default-bg-trans;
 			display: flex;
 			flex-direction: column;
 			flex-wrap: nowrap;

src/styles/_page.project.panel.settings.scss

@@ -4,48 +4,56 @@
 
 #settings {
 	#settings-panel {
+		gap: var.$block-spacing;
+
+		.settings-box {
+			background: color.$default-bg;
+			border-radius: var.$block-radius;
+			box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
+		}
+
 		.settings-header {
 			text-align: center;
-			flex: 0 1 auto;
 
 			.logo {
-				background: color.$default-bg;
+				display: block;
-				padding: 2rem var.$block-spacing;
+				border-radius: var.$block-radius;
-				border-radius: var.$block-radius var.$block-radius 0 0;
+				background: color.$default-bg-light;
+				padding: var.$block-spacing;
+
+				&:has(+ .last_update) {
+					padding: 2 * var.$block-spacing;
+				}
 				
 				img {
-					width: 100%;
+					width: 65%;
-					height: auto;
-					max-width: 180px;
-					transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
 				}
 			}
 
-			#last_update {
+			.last_update {
 				position: absolute;
-				margin-top: -2em;
+				margin-top: -2 * var.$block-spacing;
+				line-height: 2 * var.$block-spacing;
 				padding: 0 var.$block-spacing;
-				width: calc(100% - 2rem);
+				width: calc(100% - 2 * var.$block-spacing);
 
 				p {
-					text-align: center;
 					font-size: 0.8em;
 					margin: 0;
 					color: color.$subtitle;
-					transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
 
 					span {
-						margin-right: 0.5em;
+						margin-right: var.$elem-spacing;
 						img {
 							width: 12px;
-							vertical-align: middle;
+							vertical-align: center;
 							animation: spotlogo 20s infinite;
 						}
 					}
 
 					abbr {
 						text-decoration: none;
-						vertical-align: middle;
+						vertical-align: center;
 					}
 				}
 			}
@@ -55,8 +63,6 @@
 			flex: 0 1 auto;
 			display: flex;
 			justify-content: center;
-			background: color.$default-bg;
-			border-radius: 0 0 var.$block-radius var.$block-radius;
 			font-size: 0.7em;
 			padding: var.$text-spacing;
 			color: color.$default;
@@ -74,6 +80,7 @@
 		.settings-sections {
 			flex: 1 1 auto;
 			overflow: auto;
+			border-radius: var.$block-radius;
 
 			#settings-sections-scrollbox {
 				height: 100%;
@@ -82,20 +89,21 @@
 
 			.settings-section {
 				display: inline-block;
-				margin: 2rem var.$block-spacing 0 var.$block-spacing;
+				margin-bottom: var.$block-spacing;
-				width: calc(100% - 2 * var.$block-spacing);
+				width: 100%;
-
-				&:last-child {
-					margin-bottom: 2rem;
-				}
 
 				h1 {
-					margin: 0 0 var.$block-spacing;
+					margin: 0;
+					padding: var.$block-spacing;
+					border-radius: var.$block-radius var.$block-radius 0 0;
 					color: color.$title;
-					font-size: 1.5em;
+					font-size: 1.75em;
+					background: color.$default-bg-light;
 				}
 
 				.settings-section-body {
+					padding: var.$block-spacing;
+
 					.radio {
 						&:not(:first-child) {
 							margin-top: var.$elem-spacing;