Hugging Face's logo

Spaces:
Danyray101
/
avatar-commander-ai
Running

App Files Community
avatar-commander-ai
File size: 3,177 Bytes 
744a895
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
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);