DevlinDecatur/rubric-infographic-wizard

1class CustomFooter extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        :host {7          display: block;8          width: 100%;9          background: #1e293b;10          color: white;11          padding: 2rem 0;12          margin-top: 3rem;13        }14        .footer-container {15          max-width: 1200px;16          margin: 0 auto;17          padding: 0 2rem;18          display: grid;19          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));20          gap: 2rem;21        }22        .footer-section h3 {23          font-size: 1.25rem;24          font-weight: 600;25          margin-bottom: 1rem;26          color: #e2e8f0;27        }28        .footer-section ul {29          list-style: none;30          padding: 0;31        }32        .footer-section li {33          margin-bottom: 0.5rem;34        }35        .footer-section a {36          color: #94a3b8;37          text-decoration: none;38          transition: color 0.2s;39        }40        .footer-section a:hover {41          color: #e2e8f0;42        }43        .copyright {44          text-align: center;45          margin-top: 2rem;46          padding-top: 2rem;47          border-top: 1px solid #334155;48          color: #94a3b8;49          font-size: 0.875rem;50        }51        @media (max-width: 768px) {52          .footer-container {53            grid-template-columns: 1fr;54          }55        }56      </style>57      <div class="footer-container">58        <div class="footer-section">59          <h3>Rubric Wizard</h3>60          <p class="text-slate-400">Creating beautiful infographics for educational rubrics.</p>61        </div>62        <div class="footer-section">63          <h3>Quick Links</h3>64          <ul>65            <li><a href="#">Home</a></li>66            <li><a href="#">Templates</a></li>67            <li><a href="#">Examples</a></li>68            <li><a href="#">Resources</a></li>69          </ul>70        </div>71        <div class="footer-section">72          <h3>Resources</h3>73          <ul>74            <li><a href="#">Help Center</a></li>75            <li><a href="#">Documentation</a></li>76            <li><a href="#">Community</a></li>77            <li><a href="#">Blog</a></li>78          </ul>79        </div>80        <div class="footer-section">81          <h3>Connect</h3>82          <ul>83            <li><a href="#">Twitter</a></li>84            <li><a href="#">Facebook</a></li>85            <li><a href="#">Instagram</a></li>86            <li><a href="#">LinkedIn</a></li>87          </ul>88        </div>89      </div>90      <div class="copyright">91        &copy; ${new Date().getFullYear()} Rubric Infographic Wizard. All rights reserved.92      </div>93    `;94  }95}96customElements.define('custom-footer', CustomFooter);