Hugging Face's logo

Spaces:
mb672038
/
python-mastery-academy
Running

App Files Community
python-mastery-academy
File size: 4,163 Bytes
7ebc062
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
class AnimatedHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: relative;
          width: 100%;
          height: 600px;
          overflow: hidden;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 0 0 40px 40px;
        }
        
        .header-content {
          position: relative;
          z-index: 2;
          padding: 4rem 2rem;
          text-align: center;
          color: white;
        }
        
        .title {
          font-size: 4rem;
          font-weight: 800;
          margin-bottom: 1rem;
          text-shadow: 0 2px 10px rgba(0,0,0,0.2);
          background: linear-gradient(to right, #ffffff, #f0f0f0);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          animation: titleGlow 3s ease-in-out infinite alternate;
        }
        
        .subtitle {
          font-size: 1.5rem;
          opacity: 0.9;
          max-width: 800px;
          margin: 0 auto 2rem;
        }
        
        .floating-shapes {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }
        
        .shape {
          position: absolute;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
          animation: floatShape 20s infinite linear;
        }
        
        @keyframes titleGlow {
          from { filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); }
          to { filter: drop-shadow(0 0 20px rgba(255,255,255,0.6)); }
        }
        
        @keyframes floatShape {
          0% { transform: translateY(0) rotate(0deg); }
          100% { transform: translateY(-1000px) rotate(720deg); }
        }
        
        .cta-button {
          display: inline-block;
          padding: 1rem 2rem;
          background: rgba(255, 255, 255, 0.2);
          backdrop-filter: blur(10px);
          border: 2px solid rgba(255, 255, 255, 0.3);
          border-radius: 50px;
          color: white;
          font-weight: 600;
          text-decoration: none;
          transition: all 0.3s ease;
          margin: 0 0.5rem;
        }
        
        .cta-button:hover {
          background: rgba(255, 255, 255, 0.3);
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        
        @media (max-width: 768px) {
          .title {
            font-size: 2.5rem;
          }
          
          .subtitle {
            font-size: 1.2rem;
          }
        }
      </style>
      
      <div class="floating-shapes" id="shapes"></div>
      <div class="header-content">
        <h1 class="title">پایتون مستری آکادمی</h1>
        <p class="subtitle">یادگیری پایتون را با تجربه‌ای گرافیکی و تعاملی آغاز کنید. محیطی جذاب با انیمیشن‌های زیبا و جلوه‌های بصری خیره‌کننده</p>
        <div>
          <a href="/courses" class="cta-button">مشاهده دوره‌ها</a>
          <a href="/register" class="cta-button">شروع رایگان</a>
        </div>
      </div>
    `;
    
    this.createShapes();
  }
  
  createShapes() {
    const shapesContainer = this.shadowRoot.getElementById('shapes');
    
    for (let i = 0; i < 50; i++) {
      const shape = document.createElement('div');
      shape.className = 'shape';
      
      const size = Math.random() * 100 + 20;
      const left = Math.random() * 100;
      const duration = Math.random() * 20 + 10;
      const delay = Math.random() * 20;
      
      shape.style.width = `${size}px`;
      shape.style.height = `${size}px`;
      shape.style.left = `${left}%`;
      shape.style.animationDuration = `${duration}s`;
      shape.style.animationDelay = `${delay}s`;
      shape.style.opacity = Math.random() * 0.3 + 0.1;
      
      shapesContainer.appendChild(shape);
    }
  }
}

customElements.define('animated-header', AnimatedHeader);