TemplateJs/index.html at main · cs-util/TemplateJs · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!-- For the user stories & requirements see the README.md file -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Decoupled Modules Example with Person Class</title>
    <!-- Favicon: A white box -->
    <link
      rel="icon"
      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23fff'/%3E%3C/svg%3E"
      type="image/svg+xml"
    />
    <!-- Use Tailwind CSS for all CSS styling -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      @view-transition {
        navigation: auto;
      }

      nav a[aria-current='page']:after {
        border-color: white;
        view-transition-name: posts-nav;
      }

      /* Old stuff going out */
      ::view-transition-old(posts-nav) {
        animation: fade 0.2s linear forwards;
        height: 100%;
      }

      /* New stuff coming in */
      ::view-transition-new(posts-nav) {
        animation: fade 0.3s linear reverse;
        height: 100%;
      }

      @keyframes fade {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
    </style>
    <script>
      // Only use if browser supports View Transitions
      if (document.startViewTransition) {
        window.addEventListener('click', (e) => {
          // Only handle internal links
          if (
            e.target.tagName === 'A' &&
            e.target.origin === window.location.origin
          ) {
            e.preventDefault();
            document.startViewTransition(() => {
              window.location.href = e.target.href;
            });
          }
        });
      }
    </script>
    <script src="src/index.js"></script>
  </head>
  <body class="font-mono p-8 bg-gray-50">
    <div class="max-w-4xl mx-auto">
      <header class="mb-8">
        <h1 class="text-3xl font-bold text-blue-600 mb-4">Template Web App</h1>
        <nav class="bg-blue-600 text-white p-4 rounded-lg mb-4">
          <a
            href="index.html"
            class="mr-6 hover:underline font-bold relative"
            aria-current="page"
          >
            Home
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white"></span>
          </a>
          <a href="pages/features.html" class="mr-6 hover:underline"
            >Features</a
          >
          <a href="pages/about.html" class="hover:underline">About</a>
        </nav>
        <div class="bg-blue-100 border-l-4 border-blue-500 p-4 mb-6">
          <p class="text-sm text-blue-700">
            This is a Tailwind CSS demonstration with modular JavaScript.
          </p>
        </div>
      </header>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <!-- Card 1 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h2 class="text-xl font-bold mb-4 text-gray-800">Greeting Card</h2>
          <p class="text-gray-600 mb-4">
            Click the button below to greet the person.
          </p>
          <button
            id="greetBtn"
            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300"
          >
            Greet
          </button>
        </div>

        <!-- Card 2 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h2 class="text-xl font-bold mb-4 text-gray-800">
            Tailwind Features
          </h2>
          <ul class="list-disc pl-5 space-y-2 text-gray-600">
            <li>
              Responsive design with
              <span class="font-bold text-blue-500">breakpoints</span>
            </li>
            <li>Utility-first CSS framework</li>
            <li>Customizable with configuration</li>
          </ul>
          <div class="mt-4">
            <div class="flex gap-2">
              <span class="bg-red-200 text-red-800 text-xs p-1 rounded"
                >Tag</span
              >
              <span class="bg-green-200 text-green-800 text-xs p-1 rounded"
                >Utility</span
              >
              <span class="bg-yellow-200 text-yellow-800 text-xs p-1 rounded"
                >Responsive</span
              >
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white p-6 rounded-lg shadow">
        <h2 class="text-xl font-bold mb-4 text-gray-800">
          Interactive Components
        </h2>
        <div class="mb-4">
          <label
            class="block text-gray-700 text-sm font-bold mb-2"
            for="username"
          >
            Username
          </label>
          <input
            class="w-full p-2 border rounded text-gray-700 focus:outline-none focus:shadow-outline"
            id="username"
            type="text"
            placeholder="Username"
          />
        </div>
        <div class="flex justify-between">
          <button
            class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none transition"
          >
            Save
          </button>
          <button
            class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none transition"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>

    <!-- Load the main module -->
    <script type="module">
      import { tellBirthday } from './src/utils/utils.js';
      import { Person } from './src/components/person.js';

      // Create a new Person instance with values defined in the HTML.
      const person = new Person('Alice', 40);
      document.getElementById('greetBtn').addEventListener('click', () => {
        alert(tellBirthday(person));
      });
    </script>
  </body>
</html>