From 1f71846e23ae4e1b086340be3a430903b4bce4df Mon Sep 17 00:00:00 2001 From: Davide Grilli Date: Sat, 24 Jan 2026 11:23:45 +0100 Subject: [PATCH] Ottimizza layout mobile e setup icone APK Android MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Forza orientamento landscape e blocca scroll su mobile - Aggiunge media queries responsive per schermi <768px - Usa 100dvh e position:fixed per layout fullscreen - Crea setup-android-icons.sh per generazione automatica icone Android - Configura Capacitor per landscape, disabilita splash screen - Refactoring Dockerfile con ImageMagick per icone multi-densità --- Dockerfile | 14 +++++++- capacitor.config.json | 12 +++++++ index.html | 5 ++- setup-android-icons.sh | 40 +++++++++++++++++++++++ src/style.css | 74 ++++++++++++++++++++++++++++++++++++++---- 5 files changed, 137 insertions(+), 8 deletions(-) create mode 100644 setup-android-icons.sh diff --git a/Dockerfile b/Dockerfile index 709a501..afd23c9 100644 --- a/Dockerfile +++ b/Dockerfile @@ -12,6 +12,7 @@ RUN apt-get update && apt-get install -y \ wget \ openjdk-17-jdk \ build-essential \ + imagemagick \ && rm -rf /var/lib/apt/lists/* # Installa Node.js 18.x (LTS compatibile con Vite) @@ -67,4 +68,15 @@ RUN npm ci --legacy-peer-deps || npm install --legacy-peer-deps COPY . . # Build script -CMD ["bash", "-c", "npm run build && npx cap add android && npx cap sync && cd android && ./gradlew assembleDebug --no-daemon && mkdir -p /app/output && cp app/build/outputs/apk/debug/app-debug.apk /app/output/segnapunti-debug.apk && echo '\n✅ APK generato: /app/output/segnapunti-debug.apk'"] +CMD ["bash", "-c", "\ + npm run build && \ + npx cap add android && \ + npx cap sync && \ + sed -i 's/android:configChanges=\"\\([^\"]*\\)\"/android:configChanges=\"\\1\" android:screenOrientation=\"landscape\"/g' android/app/src/main/AndroidManifest.xml && \ + bash setup-android-icons.sh && \ + cd android && ./gradlew assembleDebug --no-daemon && \ + mkdir -p /app/output && \ + cp app/build/outputs/apk/debug/app-debug.apk /app/output/segnapunti-debug.apk && \ + echo '' && \ + echo 'APK generato: /app/output/segnapunti-debug.apk'\ +"] diff --git a/capacitor.config.json b/capacitor.config.json index 1b13245..39e145a 100644 --- a/capacitor.config.json +++ b/capacitor.config.json @@ -5,5 +5,17 @@ "bundledWebRuntime": false, "server": { "androidScheme": "https" + }, + "android": { + "allowMixedContent": true, + "webContentsDebuggingEnabled": true + }, + "plugins": { + "SplashScreen": { + "launchShowDuration": 0 + } + }, + "preferences": { + "orientation": "landscape" } } \ No newline at end of file diff --git a/index.html b/index.html index 6aacd7e..62ae340 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,10 @@ - + + + + Segnapunti - Anto diff --git a/setup-android-icons.sh b/setup-android-icons.sh new file mode 100644 index 0000000..2be3db4 --- /dev/null +++ b/setup-android-icons.sh @@ -0,0 +1,40 @@ +#!/bin/bash +set -e + +echo "Configurazione icone Android..." + +# Rimuove icone default di Capacitor +rm -rf android/app/src/main/res/mipmap-* + +# Crea directory per tutte le densità +for density in mdpi hdpi xhdpi xxhdpi xxxhdpi; do + mkdir -p android/app/src/main/res/mipmap-$density +done + +# Mappa densità -> dimensioni +declare -A sizes=( + ["mdpi"]="48" + ["hdpi"]="72" + ["xhdpi"]="96" + ["xxhdpi"]="144" + ["xxxhdpi"]="192" +) + +# Genera icone per ogni densità +for density in "${!sizes[@]}"; do + size="${sizes[$density]}" + echo " Generando icone ${size}x${size} per $density..." + + convert public/segnap-512x512.png -resize ${size}x${size} \ + android/app/src/main/res/mipmap-$density/ic_launcher.png + + convert public/segnap-512x512.png -resize ${size}x${size} \ + android/app/src/main/res/mipmap-$density/ic_launcher_round.png +done + +# Icona per il file APK (visibile da PC) +mkdir -p android/app/src/main/res/drawable +convert public/segnap-512x512.png -resize 512x512 \ + android/app/src/main/res/drawable/icon.png + +echo "Icone configurate con successo!" diff --git a/src/style.css b/src/style.css index 03f06b1..0ef980b 100644 --- a/src/style.css +++ b/src/style.css @@ -1,17 +1,33 @@ :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - touch-action: pan-x pan-y; - height: 100% + touch-action: none; + height: 100%; + width: 100%; + overflow: hidden; +} + +html { + height: 100%; + width: 100%; + overflow: hidden; + position: fixed; } body { - overscroll-behavior-y: contain; + overscroll-behavior: none; margin: 0; + padding: 0; place-items: center; - min-width: 320px; width: 100%; - min-height: 100vh; + height: 100vh; + height: 100dvh; /* Dynamic viewport height per mobile */ background-color: #000; + overflow: hidden; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; } button { @@ -38,8 +54,13 @@ button:focus-visible { } #app { - margin: 0 auto; + margin: 0; + padding: 0; text-align: center; + width: 100%; + height: 100%; + overflow: hidden; + position: relative; } .campo { user-select: none; @@ -121,4 +142,45 @@ button:focus-visible { background-color: rgb(206, 247, 3); color: blue; border-radius: 5px; +} + +/* Responsive mobile */ +@media (max-width: 768px) { + .hea { + font-size: 4vw; + } + + .hea span { + padding-left: 5px; + padding-right: 5px; + } + + .hea img { + width: 18px !important; + } + + .punt { + font-size: 45vh; + } + + .form { + font-size: 4vh; + border-top: #fff dashed 15px; + padding-top: 30px; + } + + .formdiv { + font-size: 15vh; + } + + .bot button { + font-size: 0.7em; + padding: 0.4em 0.8em; + margin-left: 3px; + margin-right: 3px; + } + + .bot img { + width: 20px !important; + } } \ No newline at end of file