web-assignment/script.js at main · shrinithihegde29/web-assignment · 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
window.onload = function() {
  let today = new Date();
  let hour = today.getHours();
  let greet;
  if(hour < 12) greet = "Good Morning!";
  else if(hour < 17) greet = "Good Afternoon!";
  else greet = "Good Evening!";

  // Create greeting banner
  let banner = document.createElement('div');
  banner.setAttribute('role', 'status');
  banner.setAttribute('aria-live', 'polite');
  banner.setAttribute('tabindex', '0');
  banner.style.position = 'fixed';
  banner.style.top = '0';
  banner.style.left = '50%';
  banner.style.transform = 'translateX(-50%) translateY(-100%)';
  banner.style.background = 'linear-gradient(90deg, #185a9d 0%, #1e90ff 100%)';
  banner.style.backgroundSize = '200% 200%';
  banner.animate([
    { backgroundPosition: '0% 50%' },
    { backgroundPosition: '100% 50%' },
    { backgroundPosition: '0% 50%' }
  ], {
    duration: 6000,
    iterations: Infinity
  });
  banner.style.color = '#fff';
  banner.style.padding = '16px 32px';
  banner.style.borderRadius = '0 0 12px 12px';
  banner.style.boxShadow = '0 8px 32px #185a9d33, 0 2px 8px #fff8';
  banner.style.fontSize = '1.1em';
  banner.style.zIndex = '9999';
  banner.style.opacity = '0';
  banner.style.maxWidth = '95vw';
  banner.style.minWidth = '220px';
  banner.style.display = 'flex';
  banner.style.alignItems = 'center';
  banner.style.justifyContent = 'center';
  banner.style.gap = '12px';
  banner.style.transition = 'opacity 0.7s, transform 0.7s cubic-bezier(.77,0,.18,1)';

  // Add icon
  let icon = document.createElement('span');
  icon.textContent = '👋';
  icon.style.fontSize = '1.5em';
  banner.appendChild(icon);

  // Add text
  let text = document.createElement('span');
  text.textContent = greet + " Welcome to my website.";
  banner.appendChild(text);

  // Dismiss button
  let closeBtn = document.createElement('span');
  closeBtn.textContent = '×';
  closeBtn.style.marginLeft = '18px';
  closeBtn.style.cursor = 'pointer';
  closeBtn.style.fontWeight = 'bold';
  closeBtn.style.fontSize = '1.3em';
  closeBtn.style.lineHeight = '1';
  closeBtn.style.boxShadow = '0 2px 8px #1e90ff55';
  closeBtn.style.borderRadius = '50%';
  closeBtn.style.padding = '0 8px';
  closeBtn.setAttribute('aria-label', 'Close greeting');
  closeBtn.setAttribute('tabindex', '0');
  closeBtn.onclick = function() {
    banner.style.opacity = '0';
    banner.style.transform = 'translateX(-50%) translateY(-100%)';
    setTimeout(() => banner.remove(), 700);
  };
  closeBtn.onkeydown = function(e) {
    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
      e.preventDefault();
      closeBtn.click();
    }
  };
  banner.appendChild(closeBtn);

  document.body.appendChild(banner);
  setTimeout(() => {
    banner.style.opacity = '1';
    banner.style.transform = 'translateX(-50%) translateY(0)';
    banner.focus();
  }, 100);

  // Auto-dismiss after 6 seconds
  setTimeout(() => {
    if(document.body.contains(banner)) {
      banner.style.opacity = '0';
      banner.style.transform = 'translateX(-50%) translateY(-100%)';
      setTimeout(() => banner.remove(), 700);
    }
  }, 6000);
}