waha-docs/test.html at main · devlikeapro/waha-docs · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Bubbles Background</title>
    <link rel="stylesheet" href="styles.css">
    <style>

        body {
            margin: 0;
            overflow: hidden;
        }

        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .bubble {
            animation: rotate 60s linear infinite;
            transform-origin: center;
        }

        .st0 {
            fill: #94DB77;
        }

        .st1 {
            fill: #4AAD20;
            opacity: 0.4;
        }

        .st2 {
            fill: #388616;
            opacity: 0.3;
        }

        .st3 {
            fill: #388716;
            opacity: 0.5;
        }

        .st4 {
            fill: #E9F3E4;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="background">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <!-- Define your bubble shapes and colors here -->
        <circle class="bubble st0" cx="20" cy="20" r="1"/>
        <circle class="bubble st0" cx="21" cy="21" r="1"/>
        <circle class="bubble st1" cx="40" cy="60" r="1"/>
        <circle class="bubble st2" cx="80" cy="30" r="1"/>
        <circle class="bubble st3" cx="60" cy="40" r="1"/>
        <circle class="bubble st4" cx="30" cy="70" r="1"/>
        <circle class="bubble st0" cx="70" cy="10" r="1"/>
        <circle class="bubble st1" cx="90" cy="50" r="1"/>
        <circle class="bubble st2" cx="10" cy="80" r="1"/>
        <circle class="bubble st3" cx="50" cy="90" r="1"/>
        <circle class="bubble st4" cx="45" cy="20" r="1"/>
        <circle class="bubble st0" cx="35" cy="80" r="1"/>
        <circle class="bubble st1" cx="75" cy="30" r="1"/>
        <circle class="bubble st2" cx="85" cy="70" r="1"/>
        <circle class="bubble st2" cx="88" cy="70" r="1"/>
        <ellipse class="bubble st1" cx="45" cy="15" rx="2" ry="1"/>
        <ellipse class="bubble st0" cx="15" cy="15" rx="2" ry="1"/>
        <ellipse class="bubble st4" cx="27" cy="96" rx="2" ry="1"/>
        <ellipse class="bubble st3" cx="14" cy="33" rx="2" ry="1"/>
        <filter id="blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
        </filter>

        <circle class="bubble st4" cx="55" cy="15" r="1" filter="url(#blur)" rx="3" ry="1.5"/>
        <!-- Add more bubbles as needed -->
    </svg>
</div>
</body>
</html>