Codice per PWA

di
marcoporzio
il
8 risposte
M
marcoporzio
Pochi posts
Iscritto da
ago, 2023
Messaggi:
5

Codice per PWA

Buongiorno a tutti,

sono alle prime armi e ho creato un codice html (per app) ma non mi funziona in PWA, è urgente.

8 Risposte

  • M
    marcoporzio
    Pochi posts
    Iscritto da
    ago, 2023
    Messaggi:
    5

    Re: Codice per PWA

    <script src="https://kit.fontawesome.com/0dbc7de96f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<a href="https://www.toppoint.one">
<script>
var val = 0;
function cambiaOpacita(){
var immagine = document.getElementById("im");
immagine.style.opacity = val/100;
immagine.style.filter = 'alpha(opacity = ' + val + ')';      
}
function aumentaOpacita()
{
val += 2; 
cambiaOpacita();
if(val<100)
{ 
setTimeout("aumentaOpacita();", 100);
}
}
function cambia(){
var immagine = document.getElementById("im");
immagine.style.display = "none";
}
setTimeout("cambia();", 20000);
</script>
<img id="im" style="width:20%; max-width:100px" src="https://toppoint.one/LogoMarco/Icona_Logo_APP_Nero.png" align="center" Hspace="135" Vspace="10" 
Border="0" onLoad="aumentaOpacita();">
</a>
<nav class="menu">
 <input checked="checked" class="menu-toggler" type="checkbox">
 <label for="menu-toggler"></label>
 <ul>
   <li class="menu-item">
    <a class="fa-regular fa-user" 
    a href="uspapp://#!section=58391081">
    <span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:14;top:45" 
    aria-hidden="true">PROFILO<a>
     <li class="menu-item">
     <a class="las fa-shop"
     a href="uspapp://#!section=58637134">
    <span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:13;top:45" 
    aria-hidden="true">SHOWROOM<a>
     <li class="menu-item">
     <a class="fa-regular fa-address-card"
    a href="uspapp://#!section=58391085">
    <span style="font-family:Trebuchet MS,Helvetica;Italic;font-size:10px;color: #000000;position:absolute;left:14;top:45" 
    aria-hidden="true">FIDELITY<a> 
     <li class="menu-item">
     <a class="fa-regular fa-life-ring"
    a href="uspapp://#!section=58393206">
    <span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:18;top:45" 
    aria-hidden="true">SERVIZI<a>
     <li class="menu-item">
     <a class="fa-regular fa-handshake"
    a href="uspapp://#!section=58391269">
    <span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:12;top:45" 
    aria-hidden="true">MARCHI<a>
     <li class="menu-item">
     <a class="fa-solid fa-globe"
    a href="https://www.uspitaly.it">
    <span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:10;top:45" 
    aria-hidden="true">WEB<a>
     <li class="menu-item">
     <a class="las la-info"
         a href="uspapp://#!section=58390993">
    <span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:12;top:45" 
    aria-hidden="true">CONTATTI<a> 
     <li class="menu-item">
     <a class="las la-share-alt"
    a href="uspapp://#!section=57978438">
    <span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:12;top:45" 
    aria-hidden="true">CONDIVIDI<a>
<html>
<style type="text/css">
body {background: white;}
p {color: black;}
body {
 background-image: url(https://toppoint.one/images/SFONDO_USP_ULTIMO.png);
 background-size: 100%;
 background-repeat: no-repeat;
 background-position: 0px 0px;
}
.menu-toggler {
 position: absolute;
 display: block;
 top:00;
 bottom:-270;
 right:0;
 left:0;
 margin:auto;
 width:40px;
 height:40px;
 z-index:2;
 opacity:0;
 cursor:pointer;
}
.menu-toggler:hover + label,
.menu-toggler:hover + label:before,
.menu-toggler:hover + label:after,{
 background: black;
}
.menu-toggler:checked + label {
 background: transparent;
}
.menu-toggler:checked + label:before,
.menu-toggler:checked + label:after,{
 top:0;
 width:40px;
 transform-origin: 50% 50%;
}
.menu-toggler:checked + label:before {
 transform: rotate(45deg) translateY(-15px) translateX(-15px);
}
.menu-toggler:checked + label:after {
 transform: rotate(-45deg);
}
.menu-toggler:checked ~ ul .menu-item { 
 opacity: 1;
}
.menu-toggler:checked ~ ul .menu-item:nth-child(1) {
 transform: rotate(0deg) translate(-130px);
 transform: translate(-130px, 0px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(2) {
 transform: rotate(40deg) translateX(-130px);
 transform: translate(-90px,-90px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(3) {
 transform: rotate(80deg) translateX(-130px);
 transform: translate(0px,-130px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(4) {
 transform: rotate(120deg) translateX(-130px);
 transform: translate(90px,-90px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(5) {
 transform: rotate(160deg) translateX(-130px);
 transform: translate(130px,0px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(6) {
 transform: rotate(200deg) translateX(-130px);
 transform: translate(90px,90px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(7) {
 transform: rotate(240deg) translateX(-130px);
 transform: translate(0px,130px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(8) {
 transform: rotate(280deg) translateX(-130px);
 transform: translate(-90px,90px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(9) {
 transform: rotate(280deg) translateX(-130px);
 transform: translate(0px,250px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item a {
 pointer-events:auto;
}
.menu-toggler + label {
 width: 40px;
 height: 5px;
 display: block;
 z-index: 1;
 border-radius: 2.5px;
 background: rgba(230, 239, 250, 0.9);
 transition: transform 0.5s top 0.5s;
 position: absolute;
 display: block;
 top: 0;
 bottom: -300;
 left: 0;
 right: 0;
 margin: auto;
}
.menu-toggler + label:before,
.menu-toggler + label:after {
 width: 40px;
 height: 5px;
 display: block;
 z-index: 1;
 border-radius: 2.5px;
 background: rgba(0, 0, 0, 1);
 transition: transform 0.5s top 0.5s;
 content: "";
 position: absolute;
 display: block;
 left: 0;
}
.menu-toggler + label:before {
 top: 10px;
}
.menu-toggler + label:after {
 top: -10px;
}
.menu-item:nth-child(1) a {
 transform: rotate(0deg);
}
.menu-item:nth-child(2) a {
 transform: rotate(0deg);
}
.menu-item:nth-child(3) a {
 transform: rotate(0deg);
}
.menu-item:nth-child(4) a {
 transform: rotate(0deg);
}
.menu-item:nth-child(5) a {
 transform: rotate(0deg);
}
.menu-item:nth-child(6) a {
 transform: rotate(0deg);
}
.menu-item:nth-child(7) a {
 transform: rotate(0deg);
}
.menu-item:nth-child(8) a {
 transform: rotate(0deg);
}
.menu-item:nth-child(9) a {
 transform: rotate(0deg);
}
.menu-item {
 position: absolute;
 display: block;
 top: 0;
 bottom: -270;
 left: 0;
 right: 0;
 margin: auto;
 width: 70px;
 height: 60px;
 opacity: 0;
 transition: 0.5s;
}
.menu-item a {
 width: 70px;
 height: 70px;
 line-height: 70px;
 color: rgba(255,255,255,1);
 background: rgba(0, 0, 0, 1);
 border-radius: 50%;
 text-align: center;
 text-decoration: none;
 font-size: 35px;
 transition: 0s;
}
});
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3331

    Re: Codice per PWA

    29/08/2023 - marcoporzio ha scritto:

    sono alle prime armi e ho creato un codice html (per app) ma non mi funziona in PWA, è urgente.

    Qui di urgenze non ce ne sono: chiunque contribuisce se, come e quando può, e se vuole.
    Per le urgenze, ci sono professionisti a pagamento.

    29/08/2023 - marcoporzio ha scritto:

    ho creato un codice html (per app) ma non mi funziona in PWA

    Intanto, definisci cosa si intende con “non mi funziona in PWA”.

    Le PWA potremmo definirle in modo triviale “una modalità particolare di sviluppare applicazioni Web”, facendo riferimento alle istruzioni che contengono o all'utilizzo della cache e di risorse (es. connettività) in un modo particolare.

    Dire “non mi funziona” non indica nulla: c'è un errore? cosa si ottiene di diverso da quello che ci si aspetta? e cosa ci si aspetta?

    Devi fornire più dettagli riguardo il problema.

  • M
    marcoporzio
    Pochi posts
    Iscritto da
    ago, 2023
    Messaggi:
    5

    Re: Codice per PWA

    Se io apro il codice mi apre tutta la schermata ti indico il link https://uspapp.marcoporzio.it , non mi accedere al menu.

    Mi hanno riferito che non funziona in quanto il mio codice non ha apertura corretta e ci sono alcuni punti non chiusi

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3331

    Re: Codice per PWA

    29/08/2023 - marcoporzio ha scritto:

    Se io apro il codice mi apre tutta la schermata

    Cioé? Se apri un codice, vedrai il codice. Cosa vuol dire che “apre la schermata”. Di quale schermata parliamo, dell'editor? Del browser?

    29/08/2023 - marcoporzio ha scritto:

    non mi accedere al menu.

    A me il menu si apre usando un browser tradizionale, però non so da mobile.
    Non possiamo però fare i beta tester del prodotto: bisogna essere precisi sulla problematica.
    Non ti accede perché il menu non si apre? Non riesci a visualizzarlo? Finisce fuori dallo schermo? Non riesci ad arrivare il menu?

    29/08/2023 - marcoporzio ha scritto:

    Mi hanno riferito che non funziona in quanto il mio codice non ha apertura corretta e ci sono alcuni punti non chiusi

    In effetti, se il codice è quello che hai incollato sopra, c'è un tag <a> con all'interno uno <script>, che non ha alcun senso.

    La struttura corretta della pagina è indispensabile per visualizzare correttamente il sito e fare sì che funzioni come si deve, ma quali sono gli elementi da usare, il loro ruolo, il significato degli attributi e la corretta struttura li trovi ovunque sul Web, con migliaia e migliaia di esempi da studiare.

    Se le indicazioni sono frammentarie, il sito è scritto male sia dal punto di vista del codice che del markup HTML, e vi sono più difetti da sistemare, non c'è molto che un forum possa fare, a meno di non riscrivere l'intera pagina correttamente, ma è chiaro che questo significherebbe fare il lavoro al posto tuo. :|

  • M
    marcoporzio
    Pochi posts
    Iscritto da
    ago, 2023
    Messaggi:
    5

    Re: Codice per PWA

    Chiedo troppo se me lo sistemasse in maniera da capire?

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3331

    Re: Codice per PWA

    29/08/2023 - marcoporzio ha scritto:

    Chiedo troppo se me lo sistemasse in maniera da capire?

    Oltre al fatto che esula dalle prerogative del forum, siamo qui per dare una mano a chi lavora, non a chi lo delega a terzi, anche perché tutti facciamo lo stesso mestiere, quindi ben volentieri darsi una mano imparando qualcosa senza impegno.

    Se mi devi assegnare un lavoro da fare al posto tuo, essendo lavoro, è tutta un'altra questione, visto che si tratta appunto di lavoro.

  • M
    marcoporzio
    Pochi posts
    Iscritto da
    ago, 2023
    Messaggi:
    5

    Re: Codice per PWA

    Come faccio a sapere quali sono le scritture di apertura e chiusura

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3331

    Re: Codice per PWA

    29/08/2023 - marcoporzio ha scritto:

    Come faccio a sapere quali sono le scritture di apertura e chiusura

    Come hai scritto il codice fino a questo momento?
    Conosci l'HTML?

Devi accedere o registrarti per scrivere nel forum
8 risposte