File size: 2,872 Bytes
d51dbe5
 
 
 
 
 
67c755a
 
2db1da7
d51dbe5
67c755a
 
c368f70
d51dbe5
 
2db1da7
 
13d0f88
2db1da7
 
 
 
13d0f88
67c755a
 
2db1da7
 
 
 
 
 
 
 
 
67c755a
13d0f88
2db1da7
d51dbe5
2db1da7
67c755a
 
2db1da7
 
 
 
 
 
 
67c755a
2db1da7
 
 
67c755a
 
d51dbe5
2db1da7
 
67c755a
d51dbe5
67c755a
2db1da7
 
 
 
 
 
 
 
d51dbe5
 
 
 
2db1da7
0b19f78
 
 
2db1da7
1f36718
2db1da7
1f36718
 
 
4a97429
 
2db1da7
 
1f36718
2db1da7
 
 
 
 
 
 
0b19f78
 
d51dbe5
 
 
 
 
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
class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        footer {
          background: rgba(0, 0, 0, 0.98);
          color: #10b981;
          padding: 2rem 1rem;
          text-align: center;
          border-top: 1px solid #10b981;
}
        .footer-content {
          max-width: 1200px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 2rem;
          text-align: left;
        }
        .footer-section h3 {
          font-weight: 600;
          margin-bottom: 1rem;
          color: #10b981;
}
        .footer-section ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        .footer-section li {
          margin-bottom: 0.5rem;
        }
        .footer-section a {
          color: #10b981;
          text-decoration: none;
          transition: color 0.2s;
        }
        .footer-section a:hover {
          color: #34d399;
}
        .social-links {
          display: flex;
          gap: 1rem;
          justify-content: center;
          margin-top: 2rem;
        }
        .social-links a {
          color: #10b981;
          transition: color 0.2s;
        }
        .social-links a:hover {
          color: #34d399;
}
        .copyright {
          margin-top: 2rem;
          padding-top: 1rem;
          border-top: 1px solid #10b981;
          font-size: 0.875rem;
}
        @media (max-width: 768px) {
          .footer-content {
            grid-template-columns: 1fr;
            text-align: center;
          }
          .social-links {
            justify-content: center;
          }
        }
      </style>
      <footer>
        <div class="footer-content">
          <div class="footer-section">
            <h3>Mrs T's Funhouse</h3>
            <p>A world of fun and creativity!</p>
</div>
          <div class="footer-section">
            <h3>Quick Links</h3>
            <ul>
              <li><a href="/create.html">New Project</a></li>
              <li><a href="/projects.html">Recent Projects</a></li>
              <li><a href="/help.html">Help Center</a></li>
              <li><a href="/download.html">Download App</a></li>
</ul>
          </div>
        </div>
<div class="social-links">
          <a href="#"><i data-feather="twitter"></i></a>
          <a href="#"><i data-feather="instagram"></i></a>
          <a href="#"><i data-feather="facebook"></i></a>
          <a href="#"><i data-feather="github"></i></a>
          <a href="#"><i data-feather="linkedin"></i></a>
        </div>
        <div class="copyright">
          &copy; ${new Date().getFullYear()} Mrs T's Funhouse. All rights reserved.
</div>
      </footer>
    `;
  }
}
customElements.define('custom-footer', CustomFooter);