webHTML/arBanner1.html at main · error420notfound/webHTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>

    <style>
      html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background: transparent;
      }

      /* Default (Light Mode) */
      body {
        color: #000000;
      }

      /* Dark Mode */
      @media (prefers-color-scheme: dark) {
        body {
          color: #ffffff;
        }
      }
    </style>
  </head>

  <body class="w-full h-full">
    <div
      class="w-full h-full
             bg-white/[0.01]
             flex items-center justify-between
             px-4"
    >
      <!-- Left: Text -->
      <div class="flex items-center gap-2">
        <!-- Cube Icon -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="1.8"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M21 16.5V7.5L12 3 3 7.5v9L12 21l9-4.5z"
          />
        </svg>

        <div class="leading-tight">
          <div class="text-sm font-semibold">
            Modular Lounge Chair
          </div>
          <div class="text-xs opacity-70">
            View details in real space
          </div>
        </div>
      </div>

      <!-- Right: CTA Icon -->
      <div
        class="flex items-center justify-center
               h-8 w-8
               rounded-full
               bg-black text-white
               dark:bg-white dark:text-black"
      >
        <!-- Arrow Icon -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M9 5l7 7-7 7"
          />
        </svg>
      </div>
    </div>
  </body>
</html>