components/avatar.js

class CustomAvatar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .avatar-container {
                    background: white;
                    border-top-left-radius: 1rem;
                    border-top-right-radius: 1rem;
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
                    height: 500px;
                    position: relative;
                    overflow: hidden;
                }
                .avatar-bg {
                    background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .avatar {
                    width: 300px;
                    height: 300px;
                    background-color: #f3f4f6;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
                }
                .avatar-face {
                    width: 180px;
                    height: 120px;
                    background-color: white;
                    border-radius: 50%;
                    position: relative;
                }
                .avatar-eye {
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    background-color: #3b82f6;
                    border-radius: 50%;
                    top: 40px;
                }
                .eye-left {
                    left: 40px;
                }
                .eye-right {
                    right: 40px;
                }
                .avatar-mouth {
                    position: absolute;
                    width: 80px;
                    height: 30px;
                    border-bottom: 4px solid #3b82f6;
                    border-radius: 0 0 50% 50%;
                    bottom: 30px;
                    left: 50%;
                    transform: translateX(-50%);
                }
                @media (max-width: 768px) {
                    .avatar-container {
                        height: 400px;
                    }
                    .avatar {
                        width: 250px;
                        height: 250px;
                    }
                }
            </style>
            <div class="avatar-container">
                <div class="avatar-bg">
                    <div class="avatar" id="avatar">
                        <div class="avatar-face">
                            <div class="avatar-eye eye-left"></div>
                            <div class="avatar-eye eye-right"></div>
                            <div class="avatar-mouth"></div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-avatar', CustomAvatar);