Update index.html

wanghaisheng · Dec 15, 2024 · c74f49a · c74f49a
1 parent a2fe5bb
commit c74f49a
Showing 1 changed file with 172 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- SEO Meta Tags -->
+  <meta name="description" content="A mobile simulator designed to demonstrate mobile interface design.">
+  <meta name="keywords" content="mobile, simulator, mobile design, mobile app">
+  <meta name="author" content="Your Name or Company">
+  <meta http-equiv="Content-Language" content="en">
+
+  <!-- Canonical Link -->
+  <link rel="canonical" href="https://www.yourwebsite.com/mobile-simulator" />
+
+  <!-- Open Graph for Social Media -->
+  <meta property="og:title" content="Mobile Simulator">
+  <meta property="og:description" content="A mobile simulator designed to demonstrate mobile interface design.">
+  <meta property="og:image" content="https://www.yourwebsite.com/mobile-simulator-image.jpg">
+  <meta property="og:url" content="https://www.yourwebsite.com/mobile-simulator">
+  <meta property="og:type" content="website">
+
+  <!-- Twitter Card Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Mobile Simulator">
+  <meta name="twitter:description" content="A mobile simulator designed to demonstrate mobile interface design.">
+  <meta name="twitter:image" content="https://www.yourwebsite.com/mobile-simulator-image.jpg">
+
+  <!-- Hreflang Tags for Multilingual Support -->
+  <link rel="alternate" href="https://www.yourwebsite.com/en/mobile-simulator" hreflang="en" />
+  <link rel="alternate" href="https://www.yourwebsite.com/es/mobile-simulator" hreflang="es" />
+  <link rel="alternate" href="https://www.yourwebsite.com/fr/mobile-simulator" hreflang="fr" />
+
+  <!-- Favicon -->
+  <link rel="icon" href="favicon.ico" type="image/x-icon">
+
+  <!-- Manifest for PWA -->
+  <link rel="manifest" href="/manifest.json">
+
+  <!-- Structured Data (JSON-LD) -->
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebPage",
+      "name": "Mobile Simulator",
+      "description": "A mobile simulator designed to demonstrate mobile interface design.",
+      "publisher": {
+        "@type": "Organization",
+        "name": "Your Company Name",
+        "logo": {
+          "@type": "ImageObject",
+          "url": "https://www.yourwebsite.com/logo.jpg"
+        }
+      },
+      "url": "https://www.yourwebsite.com/mobile-simulator"
+    }
+  </script>
+
+  <!-- Google Analytics (Gtag) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-XXXXXX-X');
+  </script>
+
+  <!-- Microsoft Clarity -->
+  <script type="text/javascript">
+    (function(c, l, a, r, i, t, y) {
+      window.clarity = window.clarity || function() {
+        (window.clarity.q = window.clarity.q || []).push(arguments)
+      };
+      t = l.createElement(a);
+      t.async = 1;
+      t.src = r;
+      t.id = "clarity-script";
+      y = l.getElementsByTagName(a)[0];
+      y.parentNode.insertBefore(t, y)
+    })(document, "script", "https://www.clarity.ms/analytical.js", "https://www.clarity.ms");
+
+    clarity('set', 'user-id', 'YOUR_USER_ID');
+  </script>
+
+  <!-- Google Ads (AdSense) -->
+  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+  <script>
+    (adsbygoogle = window.adsbygoogle || []).push({
+      google_ad_client: "ca-pub-XXXXXX",
+      enable_page_level_ads: true
+    });
+  </script>
+
+  <title>Mobile Simulator</title>
+
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      background-color: #f0f0f0;
+      flex-direction: column;
+    }
+
+    .mobile-container {
+      width: 360px;
+      height: 640px;
+      border: 16px solid black;
+      border-radius: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #fff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+
+    .mobile-screen {
+      width: 90%;
+      height: 90%;
+      background-color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 1.2em;
+      color: #333;
+    }
+
+    .adsense-ad {
+      margin-top: 20px;
+      width: 100%;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="mobile-container">
+    <div class="mobile-screen">
+      <p>Mobile Simulator Screen</p>
+    </div>
+
+    <div class="adsense-ad">
+      <ins class="adsbygoogle"
+           style="display:block"
+           data-ad-client="ca-pub-XXXXXX"
+           data-ad-slot="XXXXXX"
+           data-ad-format="auto"></ins>
+      <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+      </script>
+    </div>
+  </div>
+
+  <script>
+    // Service Worker registration for PWA
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function() {
+        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
+          console.log('Service Worker registered with scope: ', registration.scope);
+        }, function(error) {
+          console.log('Service Worker registration failed: ', error);
+        });
+      });
+    }
+  </script>
+</body>
+
+</html>