1- <!DOCTYPE html>
1+ <!doctype html>
22< html lang ="en ">
3- < head >
4- < meta charset ="UTF-8 ">
5- < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6- < title > Greetings App</ title >
7- < link href ="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css " rel ="stylesheet ">
8- </ head >
9- < body class ="bg-purple-900 text-white font-sans flex flex-col items-center justify-center min-h-screen ">
3+ < head >
4+ < meta charset ="UTF-8 " />
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6+ < title > Halifax Harbour Greetings</ title >
7+ < link
8+ href ="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css "
9+ rel ="stylesheet "
10+ />
11+ < style >
12+ .maritime-gradient {
13+ background : linear-gradient (
14+ 135deg ,
15+ # 1e3a8a 0% ,
16+ # 0369a1 50% ,
17+ # 059669 100%
18+ );
19+ }
20+ .harbor-blue {
21+ background-color : # 1e40af ;
22+ }
23+ .lighthouse-beacon {
24+ animation : pulse 2s infinite;
25+ }
26+ </ style >
27+ </ head >
28+ < body
29+ class ="maritime-gradient text-white font-sans flex flex-col items-center justify-center min-h-screen "
30+ >
1031 < div class ="container mx-auto px-4 py-8 max-w-screen-md ">
11- < h1 class ="text-3xl font-bold mb-4 "> Greetings Daggernauts</ h1 >
12- < div id ="greetingDisplay " class ="greeting bg-purple-700 rounded shadow p-4 min-h-20 flex items-center justify-center ">
13- Click the button to see a greeting!
14- </ div >
15- < button id ="randomGreetingButton " class ="bg-purple-500 hover:bg-purple-400 text-white font-bold py-2 px-4 rounded mt-4 "> 👋</ button >
32+ < h1 class ="text-3xl font-bold mb-2 "> 🌊 Halifax Harbour Greetings ⚓</ h1 >
33+ < p class ="text-blue-200 mb-4 text-center ">
34+ Welcome to the Atlantic's finest port city!
35+ </ p >
36+ < div
37+ id ="greetingDisplay "
38+ class ="greeting harbor-blue rounded-lg shadow-lg p-6 min-h-20 flex items-center justify-center border-2 border-blue-300 "
39+ >
40+ Click the button to receive a Maritime welcome!
41+ </ div >
42+ < button
43+ id ="randomGreetingButton "
44+ class ="bg-teal-600 hover:bg-teal-500 text-white font-bold py-3 px-6 rounded-lg mt-4 lighthouse-beacon shadow-lg transition-all duration-200 hover:shadow-xl "
45+ >
46+ 🦞 Ahoy!
47+ </ button >
1648 </ div >
1749
1850 < script >
19- async function getRandomGreeting ( ) {
20- try {
21- const response = await fetch ( 'http://localhost:8080/random' ) ;
22- const data = await response . json ( ) ;
23- document . getElementById ( 'greetingDisplay' ) . textContent = data . greeting ;
24- } catch ( error ) {
25- console . error ( 'Error fetching greeting:' , error ) ;
26- document . getElementById ( 'greetingDisplay' ) . textContent = 'Error fetching greeting' ;
27- } }
51+ async function getRandomGreeting ( ) {
52+ try {
53+ const response = await fetch ( "http://localhost:8080/random" ) ;
54+ const data = await response . json ( ) ;
55+ document . getElementById ( "greetingDisplay" ) . textContent =
56+ data . greeting ;
57+ } catch ( error ) {
58+ console . error ( "Error fetching greeting:" , error ) ;
59+ document . getElementById ( "greetingDisplay" ) . textContent =
60+ "Error fetching greeting" ;
61+ }
62+ }
2863
29- document . getElementById ( 'randomGreetingButton' ) . addEventListener ( 'click' , getRandomGreeting ) ;
64+ document
65+ . getElementById ( "randomGreetingButton" )
66+ . addEventListener ( "click" , getRandomGreeting ) ;
3067 </ script >
31- </ body >
32- </ html >
68+ </ body >
69+ </ html >
0 commit comments