CSS-AnimLab/about.html at main · hackerccreative/CSS-AnimLab · GitHub

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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS AnimLab - About</title>
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#00d3f3">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="icon" href="assets/icon.png?v=2" type="image/png" sizes="any">
  <link rel="icon" href="assets/icon.png?v=2" type="image/png" sizes="32x32">
  <link rel="apple-touch-icon" href="assets/icon.png?v=2">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Syne:wght@400;600;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/about.css">
</head>
<body>
  <!-- HEADER -->
  <header class="header">
    <div class="header-logo">
      <img src="assets/logo.png" alt="CSS AnimLab Logo" style="height:40px;width:auto;margin-right:8px;">
      <span>CSS AnimLab</span>
    </div>
    <nav class="nav">
      <a href="index.html" class="nav-link">
        <img src="assets/home.svg" alt="Home" style="width:18px;height:18px;">
        <span>Home</span>
      </a>
      <a href="playground.html" class="nav-link">
        <img src="assets/playground.svg" alt="Playground" style="width:18px;height:18px;">
        <span>Playground</span>
      </a>
      <a href="about.html" class="nav-link active">
        <img src="assets/about.svg" alt="About" style="width:18px;height:18px;">
        <span>About</span>
      </a>
    </nav>
  </header>

  <!-- CONTENT -->
  <div class="container">
    <h1 class="page-title">About CSS AnimLab</h1>
    <p class="page-subtitle">Empowering developers to create beautiful CSS animations without the learning curve.</p>

    <!-- What is CSS AnimLab -->
    <section class="section">
      <h2 class="section-title">What is CSS AnimLab?</h2>
      <div class="section-content">
        <p>CSS AnimLab is an <span class="highlight">interactive playground</span> designed for developers of all skill levels to create, preview, and export CSS animations instantly.</p>
        <p>Instead of guessing CSS values or constantly reloading your browser, our real-time preview lets you see every change as it happens. Build the animation you envision, export it as HTML, and use it anywhere.</p>
      </div>
    </section>

    <!-- Why We Built This -->
    <section class="section">
      <h2 class="section-title">Why We Built This</h2>
      <div class="section-content">
        <p>CSS animations are powerful, but learning them can be frustrating:</p>
        <ul class="list">
          <li>Complex timing and easing values are hard to visualize</li>
          <li>Small tweaks require constant browser refreshes</li>
          <li>Exporting animations to other projects is tedious</li>
          <li>Many developers avoid CSS animations altogether</li>
        </ul>
        <p style="margin-top: 16px;">CSS AnimLab solves these problems with an intuitive interface, real-time feedback, and seamless exports.</p>
      </div>
    </section>

    <!-- Tech Stack -->
    <section class="section">
      <h2 class="section-title">Built With</h2>
      <div class="tech-grid">
        <div class="tech-card">
          <div class="tech-icon">
            <img src="assets/html.svg" alt="HTML5" style="width:32px;height:32px;">
          </div>
          <div class="tech-name">HTML5</div>
          <div class="tech-desc">Semantic markup for structure</div>
        </div>
        <div class="tech-card">
          <div class="tech-icon">
            <img src="assets/css.svg" alt="CSS3" style="width:32px;height:32px;">
          </div>
          <div class="tech-name">CSS3</div>
          <div class="tech-desc">Advanced animations and styling</div>
        </div>
        <div class="tech-card">
          <div class="tech-icon">
            <img src="assets/js.svg" alt="JavaScript" style="width:32px;height:32px;">
          </div>
          <div class="tech-name">Vanilla JS</div>
          <div class="tech-desc">No frameworks, pure JavaScript</div>
        </div>
      </div>
    </section>

    <!-- Features -->
    <section class="section">
      <h2 class="section-title">Key Features</h2>
      <div class="section-content">
        <ul class="list">
          <li><span class="highlight">Real-time Preview</span> - See changes instantly as you adjust settings</li>
          <li><span class="highlight">Shape & Color Customization</span> - Choose from multiple shapes and any color</li>
          <li><span class="highlight">Animation Library</span> - Access preset animations or create custom ones</li>
          <li><span class="highlight">Timing & Easing Control</span> - Fine-tune duration, easing functions, and iteration</li>
          <li><span class="highlight">Live CSS Output</span> - View generated CSS code in real-time</li>
          <li><span class="highlight">Export as HTML</span> - Download standalone HTML files ready to use</li>
          <li><span class="highlight">No Dependencies</span> - Pure HTML, CSS, and JavaScript</li>
          <li><span class="highlight">Client-side Only</span> - All processing happens in your browser</li>
        </ul>
      </div>
    </section>

    <!-- How to Use -->
    <section class="section">
      <h2 class="section-title">How to Use</h2>
      <div class="section-content">
        <p><strong style="color: var(--accent2);">1. Choose a Shape</strong><br>Select from Square, Circle, Pill, or Text options.</p>
        <p><strong style="color: var(--accent2);">2. Customize Appearance</strong><br>Pick your color, set dimensions, and adjust border radius.</p>
        <p><strong style="color: var(--accent2);">3. Select an Animation</strong><br>Choose from our preset animations like Fade, Bounce, Slide, and Spin.</p>
        <p><strong style="color: var(--accent2);">4. Tweak Timing</strong><br>Adjust duration, easing, and iteration count to perfect your animation.</p>
        <p><strong style="color: var(--accent2);">5. Export or Copy</strong><br>Copy the CSS code or download a complete HTML file ready to use.</p>
      </div>
    </section>

    <!-- Learning Path -->
    <section class="section">
      <h2 class="section-title">Perfect For</h2>
      <div class="section-content">
        <ul class="list">
          <li>Beginners learning CSS animations</li>
          <li>Developers who want quick animation prototypes</li>
          <li>Designers collaborating on web interactions</li>
          <li>Students exploring web animation concepts</li>
          <li>Professionals building interactive UI elements</li>
        </ul>
      </div>
    </section>

    <!-- CTA -->
    <div class="cta">
      <h2 class="cta-title">Ready to Create?</h2>
      <p class="cta-text">Start building amazing CSS animations today!</p>
      <a href="playground.html" class="btn">Open Playground</a>
    </div>

    <!-- GLASSMORPHISM SECTION -->
    <section class="glass-section">
      <div class="glass-container">
        <div class="glass-header">
          <h2 class="glass-title">Join the Community</h2>
          <p class="glass-subtitle">Explore our project on GitHub or share with your network</p>
        </div>
        <div class="glass-actions">
          <a href="https://github.com/hackerccreative/CSS-AnimLab.git" target="_blank" class="glass-btn github-btn">
            <img src="assets/github.svg" alt="GitHub" style="width:18px;height:18px;">
            <span class="btn-text">Star on GitHub</span>
          </a>
          <button class="glass-btn share-btn" onclick="shareProject()">
            <img src="assets/share-tool.svg" alt="Share" style="width:18px;height:18px;">
            <span class="btn-text">Share Project</span>
          </button>
        </div>
      </div>
    </section>

    <!-- FOOTER -->
  <footer class="footer">
    <p>&copy; 2026 CSS AnimLab. All rights reserved. | Made with <img src="assets/heart.svg" alt="Love" style="display:inline;vertical-align:middle;margin:0 2px;width:14px;height:14px;"> for developers</p>
  </footer>

  <script>
    function shareProject() {
      const baseUrl = window.location.origin + window.location.pathname.split('/').slice(0, -1).join('/');
      const playgroundUrl = baseUrl + '/index.html';
      const email = 'a4arpit74@gmail.com';
      const subject = 'Check out CSS AnimLab - Animation Playground';
      const body = `Hey! I found this amazing CSS animation playground called CSS AnimLab. Check it out: ${playgroundUrl}`;

      // Try to use Web Share API if available
      if (navigator.share) {
        navigator.share({
          title: 'CSS AnimLab',
          text: 'Create beautiful CSS animations with CSS AnimLab - An interactive browser-native playground!',
          url: playgroundUrl
        }).catch(err => console.log('Share cancelled or failed'));
      } else {
        // Fallback: Open email client
        const mailtoLink = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
        window.location.href = mailtoLink;
      }
    }
  </script>
</body>
</html>