Ajoute le mode standalone sur iPhone

This commit is contained in:
2026-04-12 15:25:28 +02:00
parent 3bf1e93543
commit c3818e6417
7 changed files with 68 additions and 6 deletions

View File

@@ -2,13 +2,21 @@
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#140700" />
<meta name="application-name" content="ChessCubing Arena" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="ChessCubing" />
<meta
name="description"
content="Application officielle de match pour ChessCubing Arena sur téléphone et tablette."
/>
<title>ChessCubing Arena | Application</title>
<link rel="icon" type="image/png" href="logo.png" />
<link rel="apple-touch-icon" href="logo.png" />
<link rel="manifest" href="site.webmanifest" />
<link rel="stylesheet" href="styles.css" />
</head>
<body data-page="setup">

View File

@@ -2,13 +2,21 @@
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#140700" />
<meta name="application-name" content="ChessCubing Arena" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="ChessCubing" />
<meta
name="description"
content="Phase chrono de ChessCubing Arena avec gros boutons face-à-face."
/>
<title>ChessCubing Arena | Phase Chrono</title>
<link rel="icon" type="image/png" href="logo.png" />
<link rel="apple-touch-icon" href="logo.png" />
<link rel="manifest" href="site.webmanifest" />
<link rel="stylesheet" href="styles.css" />
</head>
<body data-page="chrono" class="phase-body">

View File

@@ -2,13 +2,21 @@
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#140700" />
<meta name="application-name" content="ChessCubing Arena" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="ChessCubing" />
<meta
name="description"
content="Phase cube de ChessCubing Arena avec gros boutons de fin."
/>
<title>ChessCubing Arena | Phase Cube</title>
<link rel="icon" type="image/png" href="logo.png" />
<link rel="apple-touch-icon" href="logo.png" />
<link rel="manifest" href="site.webmanifest" />
<link rel="stylesheet" href="styles.css" />
</head>
<body data-page="cube" class="phase-body">

View File

@@ -2,13 +2,21 @@
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#140700" />
<meta name="application-name" content="ChessCubing Arena" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="ChessCubing" />
<meta
name="description"
content="Découvrez ChessCubing, l'association et le jeu qui réunit échecs et Rubik's Cube dans un format simple, vivant et spectaculaire."
/>
<title>ChessCubing Arena | Accueil</title>
<link rel="icon" type="image/png" href="logo.png" />
<link rel="apple-touch-icon" href="logo.png" />
<link rel="manifest" href="site.webmanifest" />
<link rel="stylesheet" href="styles.css" />
</head>
<body class="home-body">

View File

@@ -2,13 +2,21 @@
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#140700" />
<meta name="application-name" content="ChessCubing Arena" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="ChessCubing" />
<meta
name="description"
content="Page règlement officielle du site ChessCubing Arena avec synthèse des formats Twice et Time."
/>
<title>ChessCubing Arena | Règlement officiel</title>
<link rel="icon" type="image/png" href="logo.png" />
<link rel="apple-touch-icon" href="logo.png" />
<link rel="manifest" href="site.webmanifest" />
<link rel="stylesheet" href="styles.css" />
</head>
<body class="rules-body">

17
site.webmanifest Normal file
View File

@@ -0,0 +1,17 @@
{
"name": "ChessCubing Arena",
"short_name": "ChessCubing",
"description": "Application officielle de match ChessCubing pour chrono, cube et arbitrage.",
"start_url": "/application.html",
"scope": "/",
"display": "standalone",
"background_color": "#140700",
"theme_color": "#140700",
"icons": [
{
"src": "/logo.png",
"sizes": "2048x2048",
"type": "image/png"
}
]
}

View File

@@ -17,6 +17,10 @@
--success: #ffb13a;
--shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
--radius: 28px;
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
}
*,
@@ -31,7 +35,8 @@ html {
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
font-family: "Segoe UI", "Trebuchet MS", sans-serif;
color: var(--text);
background: