API tools faq
paste
ggallozz

MyHomePage

ggallozz
May 9th, 2026 (edited)
34
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.62 KB | Software | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="it">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>GG Home</title>
  7. <style>
  8.   :root {
  9.     --bg: #07080f;
  10.     --card-bg: rgba(255,255,255,0.06);
  11.     --card-hover: rgba(255,255,255,0.13);
  12.     --label: #9ba8c0;
  13.     --label-hover: #e0e8ff;
  14.     --accent: #3a6fff;
  15.     --cols: 8;
  16.   }
  17.  
  18.   * { box-sizing: border-box; margin: 0; padding: 0; }
  19.  
  20.  body {
  21.     background-color: var(--bg);
  22.     background-image:
  23.       radial-gradient(ellipse 80% 60% at 15% 30%, #0d1a3a 0%, transparent 60%),
  24.       radial-gradient(ellipse 60% 50% at 85% 70%, #0a1020 0%, transparent 55%),
  25.       radial-gradient(ellipse 40% 40% at 50% 10%, #111828 0%, transparent 50%);
  26.     min-height: 100vh;
  27.     display: flex;
  28.     flex-direction: column;
  29.     align-items: center;
  30.     justify-content: center;
  31.     padding: 25px;
  32.     font-family: 'Segoe UI', system-ui, sans-serif;
  33.     position: relative;
  34.     overflow-x: hidden;
  35. }
  36.  
  37.   /* puntini stella */
  38.   body::before {
  39.     content: '';
  40.     position: fixed;
  41.     inset: 0;
  42.     background-image:
  43.       radial-gradient(1px 1px at 10% 15%, #ffffff22 0%, transparent 100%),
  44.       radial-gradient(1px 1px at 25% 40%, #ffffff18 0%, transparent 100%),
  45.       radial-gradient(1px 1px at 40% 8%,  #ffffff1a 0%, transparent 100%),
  46.       radial-gradient(1px 1px at 55% 60%, #ffffff15 0%, transparent 100%),
  47.       radial-gradient(1px 1px at 70% 22%, #ffffff20 0%, transparent 100%),
  48.       radial-gradient(1px 1px at 82% 45%, #ffffff18 0%, transparent 100%),
  49.       radial-gradient(1px 1px at 93% 12%, #ffffff1c 0%, transparent 100%),
  50.       radial-gradient(1.5px 1.5px at 5%  80%, #ffffff14 0%, transparent 100%),
  51.       radial-gradient(1px 1px at 35% 75%, #ffffff10 0%, transparent 100%),
  52.       radial-gradient(1px 1px at 65% 88%, #ffffff12 0%, transparent 100%),
  53.       radial-gradient(1.5px 1.5px at 88% 78%, #ffffff16 0%, transparent 100%);
  54.     pointer-events: none;
  55.     z-index: 0;
  56.   }
  57.  
  58.   header {
  59.     display: flex;
  60.     align-items: center;
  61.     gap: 10px;
  62.     margin-bottom: 28px;
  63.     z-index: 1;
  64.  
  65.   }
  66.  
  67.   header img { width: 36px; height: 36px; }
  68.  
  69.   header span {
  70.     font-size: 22px;
  71.     font-weight: 300;
  72.     color: #c8d4f0;
  73.     letter-spacing: 3px;
  74.     text-transform: uppercase;
  75.   }
  76.  
  77. .grid {
  78.     display: grid;
  79.     grid-template-columns: repeat(var(--cols), 1fr);
  80.     gap: 30px;
  81.     width: 85%;
  82.     max-width: 85vw;
  83.     margin: 0 auto;
  84.     z-index: 1;
  85. }
  86.  
  87.   .item {
  88.     display: flex;
  89.     flex-direction: column;
  90.     align-items: center;
  91.     gap: 10px;
  92.     padding: 22px;
  93. /*    border:  222px solid transparent; */
  94.     border-radius: 14px;
  95.     background: var(--card-bg);
  96.     border: 1px solid rgba(255,255,255,0.05);
  97.     text-decoration: none;
  98.     transition: background 0.18s, transform 0.15s, border-color 0.18s, box-shadow 0.18s;
  99.     cursor: pointer;
  100.   }
  101.  
  102.   .item:hover {
  103.     background: var(--card-hover);
  104.     border-color: rgba(58,111,255,0.3);
  105.     transform: translateY(-3px);
  106.     box-shadow: 0 6px 20px rgba(0,0,50,0.5);
  107.   }
  108.  
  109.   .item:hover .label { color: var(--label-hover); }
  110.  
  111.   .icon-wrap {
  112.     width: 68px;
  113.     height: 68px;
  114.     border-radius: 11px;
  115.     overflow: hidden;
  116.     display: flex;
  117.     align-items: center;
  118.     justify-content: center;
  119.     background: rgba(255,255,255,0.08);
  120.     flex-shrink: 0;
  121.   }
  122.  
  123.   .icon-wrap img {
  124.     width: 60px;
  125.     height: 60px;
  126.     object-fit: contain;
  127.   }
  128.  
  129. .iconsize {   /* GG added*/
  130.     width: 64px;
  131.     height:64px;
  132.     }
  133.  
  134.   /* icone locali (localhost, 127.0.0.1) — sfondo colorato */
  135.   .icon-local {
  136.     background: #1a2a1a;
  137.     font-size: 22px;
  138.     line-height: 1;
  139.   }
  140.  
  141.   .label {
  142.     font-size: 19px;
  143.     color: var(--label);
  144.     text-align: center;
  145.     max-width: 110px;
  146.     white-space: nowrap;
  147.     overflow: hidden;
  148.     text-overflow: ellipsis;
  149.     transition: color 0.18s;
  150.     font-weight: 600;
  151.     letter-spacing: 0.2px;
  152.   }
  153.  
  154.  
  155.  
  156.   /* separatore di sezione opzionale — aggiungere classe "sep" a un item vuoto */
  157.   .sep {
  158.     grid-column: 1 / -1;
  159.     height: 1px;
  160.     background: rgba(255,255,255,0.07);
  161.     border: none;
  162.     padding: 0;
  163.     border-radius: 0;
  164.     animation: none;
  165.     opacity: 0.5;
  166.     pointer-events: none;
  167.   }
  168.  </style>
  169.  
  170.  <base target="_blank">
  171. </head>
  172.  
  173. <body>
  174.  
  175. <header>
  176.   <a href="https://accounts.firefox.com/settings" title="Firefox Account" /> <!-- GG added -->
  177.   <img class="iconsize" src="https://www.google.com/s2/favicons?domain=firefox.com" alt="Firefox Account">
  178.   <span>Firefox</span>
  179.   </a>
  180. </header>
  181.  
  182. <div class="grid">
  183.  
  184.   <!-- ═══════════════ RIGA 1 — News & Social ═══════════════ -->
  185.  
  186.   <a class="item" href="https://www.meteoam.it/it/meteo-citta/ravenna" >
  187.     <div class="icon-wrap">
  188.         <img class="iconsize" src="https://www.google.com/s2/favicons?domain=meteoam.it"
  189.             onerror="this.src='https://www.google.com/s2/favicons?domain=meteoam.it&sz=32'"
  190.             alt="">
  191.     </div>
  192.     <span class="label">Meteo RA</span>
  193.   </a>
  194.  
  195.   <a class="item" href="https://www.ilfattoquotidiano.it/" >
  196.     <div class="icon-wrap">
  197.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=ilfattoquotidiano.it" alt="">
  198.     </div>
  199.     <span class="label">Il Fatto Q.</span>
  200.   </a>
  201.  
  202.   <a class="item" href="https://www.facebook.com/" >
  203.     <div class="icon-wrap">
  204.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=facebook.com" alt="">
  205.     </div>
  206.     <span class="label">Facebook</span>
  207.   </a>
  208.  
  209.   <a class="item" href="https://mail.google.com" >
  210.     <div class="icon-wrap">
  211.     <img class="iconsize" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAdVBMVEVHcEznQDPFIh/8vwP7vAT8vATFIh/FIR77vAP8vQPGIBnsRDbqNTf8wwDrQzXqQzXqQzXqQzWTVZHLFwX/vQCwszFBhfVedtZdq0kyqFM4iPo+hfStPV3xPSnTtx8eqFUzqFNChfSIXJ+dsTfpQzRChfQ0qFPrNgnEAAAAJ3RSTlMAJl0FXB6x//+vuPT///9x+sGw//+ot///sf///7P///////8IfXUnM3N5AAAAzElEQVR4Ac3NRRbCUBBE0Yr7F9wd9r9EUjHiI+xN+55q/EmGib4s2wGY63me2XP2fT9AmumxEK0Cn9n5AIsM1DLixGecCHMghESVFH1AaRRpUQeTaQ7S8jeGEiWYzQEslh6JYEpynhHM/NWaYLPdpULk7feiBLPD8ZSB83lzmZZAiRLMrsdTAVKxLIGowOp4KgHFZt8Ee54rwCBFLYlTB8AQZcpAHwB0ftfAAIDM54cBDM6PAdxuGAPsA+A+Bh6gWDC0WjPeh7IsWPiTnqu9I/fRLtEVAAAAAElFTkSuQmCC" alt="">
  212.     </div>
  213.     <span class="label">Gmail</span>
  214.   </a>
  215.  
  216.   <a class="item" href="https://mastodon.social/@GGfrancison" >
  217.     <div class="icon-wrap">
  218.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=mastodon.social" alt="">
  219.     </div>
  220.     <span class="label">Mastodon</span>
  221.   </a>
  222.  
  223.   <a class="item" href="https://contacts.google.com" >
  224.     <div class="icon-wrap">
  225.     <img class="iconsize" src="https://www.gstatic.com/images/branding/product/2x/contacts_2022_48dp.png" alt="">
  226.     </div>
  227.     <span class="label">Contacts</span>
  228.   </a>
  229.  
  230.   <a class="item" href="https://web.telegram.org" >
  231.     <div class="icon-wrap">
  232.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=web.telegram.org" alt="">
  233.     </div>
  234.     <span class="label">Telegram</span>
  235.   </a>
  236.  
  237.   <a class="item" href="https://web.whatsapp.com/" >
  238.     <div class="icon-wrap">
  239.     <img class="iconsize" src="https://e7.pngegg.com/pngimages/132/965/png-clipart-whatsapp-email-web-design-message-icon-whatsapp-whatsapp-logo-text-logo-thumbnail.png" alt="">
  240. <!--    <img class="iconsize" src="https://www.google.com/s2/favicons?domain=web.whatsapp.com" alt=""> -->
  241.     </div>
  242.     <span class="label">WazApp</span>
  243.   </a>
  244.  
  245.   <a class="item" href="https://bsky.app" >
  246.     <div class="icon-wrap">
  247.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=bsky.app" alt="">
  248.     </div>
  249.     <span class="label">Bluesky</span>
  250.   </a>
  251.  
  252.   <a class="item" href="https://account.ring.com/account/dashboard" >
  253.     <div class="icon-wrap">
  254.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=ring.com" alt="">
  255.     </div>
  256.     <span class="label">Ring</span>
  257.   </a>
  258.  
  259.   <!-- ═══════════════ RIGA 2 — Google & Shopping ═══════════════ -->
  260.  
  261.   <a class="item" href="https://keep.google.com" >
  262.     <div class="icon-wrap">
  263.     <img class="iconsize" src="https://www.gstatic.com/images/branding/product/1x/keep_2020q4_48dp.png" alt="">
  264.     </div>
  265.     <span class="label">G Keep</span>
  266.   </a>
  267.  
  268.   <a class="item" href="https://maps.google.com" >
  269.     <div class="icon-wrap">
  270.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=maps.google.com" alt="">
  271.     </div>
  272.     <span class="label">Maps</span>
  273.   </a>
  274.  
  275.   <a class="item" href="https://photos.google.com" >
  276.     <div class="icon-wrap">
  277.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=photos.google.com" alt="">
  278.     </div>
  279.     <span class="label">G Foto</span>
  280.   </a>
  281.  
  282.   <a class="item" href="https://www.amazon.it" >
  283.     <div class="icon-wrap">
  284.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=amazon.it" alt="">
  285.     </div>
  286.     <span class="label">Amazon</span>
  287.   </a>
  288.  
  289.   <a class="item" href="https://www.ebay.it" >
  290.     <div class="icon-wrap">
  291.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=ebay.it" alt="">
  292.     </div>
  293.     <span class="label">eBay</span>
  294.   </a>
  295.  
  296.   <a class="item" href="https://www.temu.com" >
  297.     <div class="icon-wrap">
  298.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=temu.com" alt="">
  299.     </div>
  300.     <span class="label">Temu</span>
  301.   </a>
  302.  
  303.   <a class="item" href="https://www.aliexpress.com" >
  304.     <div class="icon-wrap">
  305.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=aliexpress.com" alt="">
  306.     </div>
  307.     <span class="label">AliExpress</span>
  308.   </a>
  309.  
  310.   <a class="item" href="https://www.zooplus.it" >
  311.     <div class="icon-wrap">
  312.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=zooplus.it" alt="">
  313.     </div>
  314.     <span class="label">Zooplus</span>
  315.   </a>
  316.  
  317.   <a class="item" href="https://my.conad.it/login" >
  318.     <div class="icon-wrap">
  319.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=conad.it" alt="">
  320.     </div>
  321.     <span class="label">My Conad</span>
  322.   </a>
  323.  
  324.   <a class="item" href="https://github.com" >
  325.     <div class="icon-wrap">
  326.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=github.com" alt="">
  327.     </div>
  328.     <span class="label">GitHub</span>
  329.   </a>
  330.  
  331.   <!-- ═══════════════ RIGA 3 — Banche & Retraite ═══════════════ -->
  332.  
  333.   <a class="item" href="https://clients.boursobank.com/connexion/" >
  334.     <div class="icon-wrap">
  335.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=boursobank.com" alt="">
  336.     </div>
  337.     <span class="label">Boursobank</span>
  338.   </a>
  339.  
  340.   <a class="item" href="https://nowbanking.credit-agricole.it" >
  341.     <div class="icon-wrap">
  342.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=credit-agricole.it" alt="">
  343.     </div>
  344.     <span class="label">C.A. Bank</span>
  345.   </a>
  346.  
  347.   <a class="item" href="https://www.lassuranceretraite.fr/portail-info/home.html" >
  348.     <div class="icon-wrap">
  349.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=lassuranceretraite.fr" alt="">
  350.     </div>
  351.     <span class="label">Ass.Retraite</span>
  352.   </a>
  353.  
  354.   <a class="item" href="https://www.info-retraite.fr/portail-services/login" >
  355.     <div class="icon-wrap">
  356.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=info-retraite.fr" alt="">
  357.     </div>
  358.     <span class="label">Info Retraite</span>
  359.   </a>
  360.  
  361.   <a class="item" href="https://www.inps.it/" >
  362.     <div class="icon-wrap">
  363.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=inps.it" alt="">
  364.     </div>
  365.     <span class="label">INPS</span>
  366.   </a>
  367.  
  368.   <!-- ═══════════════ RIGA 3 cont. — Servizi ═══════════════ -->
  369.  
  370.   <a class="item" href="https://www.fascicolo-sanitario.it" >
  371.     <div class="icon-wrap">
  372.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=fascicolo-sanitario.it" alt="">
  373.     </div>
  374.     <span class="label">Fasc. Sanitario</span>
  375.   </a>
  376.  
  377.   <a class="item" href="https://servizionline.gruppohera.it/auth/hera/login" >
  378.     <div class="icon-wrap">
  379.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=gruppohera.it" alt="">
  380.     </div>
  381.     <span class="label">HERA</span>
  382.   </a>
  383.  
  384.   <a class="item" href="https://www.enel.it/it-it/login" >
  385.     <div class="icon-wrap">
  386.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=enel.it" alt="">
  387.     </div>
  388.     <span class="label">ENEL</span>
  389.   </a>
  390.  
  391.   <a class="item" href="https://claude.ai/" >
  392.     <div class="icon-wrap">
  393.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=claude.ai" alt="">
  394.     </div>
  395.     <span class="label">Claude AI</span>
  396.   </a>
  397.  
  398.   <!-- ═══════════════ RIGA 4 — Locale ═══════════════ -->
  399.  
  400.   <a class="item" href="http://127.0.0.1:9117/UI/Dashboard" >
  401.     <div class="icon-wrap icon-local">🧲</div>
  402.     <span class="label">Jackett</span>
  403.   </a>
  404.  
  405.   <a class="item" href="http://localhost:8080" >
  406.     <div class="icon-wrap icon-local">⬇️</div>
  407.     <span class="label">qBittorrent</span>
  408.   </a>
  409.  
  410.   <!-- ═══════════════ SLOT LIBERI — aggiungi qui ═══════════════ -->
  411.   <!--
  412.  <a class="item" href="URL" >
  413.    <div class="icon-wrap">
  414.     <img class="iconsize" src="https://www.google.com/s2/favicons?domain=DOMINIO" alt="">
  415.     </div>
  416.    <span class="label">NOME</span>
  417.  </a>
  418.  -->
  419.  
  420. </div>
  421.  
  422. </body>
  423. </html>
  424.  
Tags: html myhomepage
Comments
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!