Hugging Face's logo

Spaces:
WebashalarForML
/
Ai_lip_sync
Running

App Files Community
Ai_lip_sync
File size: 2,826 Bytes 
c51a38f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en" data-theme="{{ theme }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Dark Theme App{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    {# THIS LINE IS CRUCIAL FOR ICONS TO WORK #}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    {% block head_extra %}{% endblock %}
</head>
<body>
    <header class="main-header">
        <div class="container header-content">
            <a href="/" class="logo">🚀 AI AVATAR CREATOR</a>
            <nav class="main-nav">
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about">About</a></li>
                    <li><a href="/contact">Contact</a></li>
                </ul>
            </nav>
            <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark/light theme">
                <i class="fas fa-sun icon-sun"></i>  {# Font Awesome sun icon #}
                <i class="fas fa-moon icon-moon"></i> {# Font Awesome moon icon #}
            </button>
        </div>
    </header>

    <main class="main-content">
        <div class="container">
            {% block content %}{% endblock %}
        </div>
    </main>

    <footer class="main-footer">
        <div class="container footer-content">
            <p>&copy; 2025 My Dark Theme App. All rights reserved.</p>
            <div class="social-links">
                <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
                <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
            </div>
        </div>
    </footer>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    {% block scripts_extra %}{% endblock %}

    {# ADDED: JavaScript for auto-hiding flash messages #}
    <script>

        document.addEventListener('DOMContentLoaded', function() {

            const flashMessages = document.querySelectorAll('.flash-messages li');

            flashMessages.forEach(message => {

                setTimeout(() => {

                    message.style.opacity = '0';

                    message.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';

                    message.style.transform = 'translateY(-20px)';

                    message.addEventListener('transitionend', () => {

                        message.remove();

                    });

                }, 5000); // 5 seconds

            });

        });

    </script>
</body>
</html>