ecopontos.github.io/index.html at main · ecopontos/ecopontos.github.io · 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecopontos</title>
<style>
    :root {
        color-scheme: light dark;
        --bg: #eef3ec;
        --fg: #33403a;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --bg: #1c211e;
            --fg: #e7ede9;
        }
    }

    * { box-sizing: border-box; }

    html, body {
        height: 100%;
        margin: 0;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .capivara {
        width: min(70vw, 420px);
        height: auto;
    }
</style>
</head>
<body>
    <svg class="capivara" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Ilustração de uma capivara">
        <!-- água -->
        <ellipse cx="220" cy="252" rx="175" ry="16" fill="#9cc3dd" opacity="0.5"/>

        <!-- patas -->
        <ellipse cx="130" cy="242" rx="11" ry="15" fill="#6b4a35"/>
        <ellipse cx="175" cy="246" rx="11" ry="15" fill="#6b4a35"/>
        <ellipse cx="270" cy="246" rx="11" ry="15" fill="#5c3e2c"/>
        <ellipse cx="315" cy="242" rx="11" ry="15" fill="#5c3e2c"/>

        <!-- corpo -->
        <ellipse cx="235" cy="190" rx="145" ry="78" fill="#a9764f"/>
        <ellipse cx="240" cy="205" rx="125" ry="52" fill="#bc8a5f"/>

        <!-- cabeça -->
        <ellipse cx="100" cy="168" rx="58" ry="52" fill="#a9764f"/>

        <!-- orelhas (desenhadas por cima da cabeça) -->
        <circle cx="75" cy="122" r="15" fill="#8a6041"/>
        <circle cx="75" cy="122" r="8" fill="#6b4a35"/>
        <circle cx="112" cy="120" r="15" fill="#8a6041"/>
        <circle cx="112" cy="120" r="8" fill="#6b4a35"/>

        <!-- focinho -->
        <ellipse cx="58" cy="192" rx="32" ry="22" fill="#d2a678"/>

        <!-- olho -->
        <circle cx="88" cy="155" r="7" fill="#2c211a"/>
        <circle cx="91" cy="152" r="2.4" fill="#fff"/>

        <!-- narina -->
        <ellipse cx="33" cy="188" rx="8" ry="6" fill="#2c211a"/>

        <!-- bigode -->
        <path d="M 18 178 Q 6 182 16 190" stroke="#7d5a3d" stroke-width="3" fill="none" stroke-linecap="round"/>
    </svg>

<script>
    // Atualiza/desativa qualquer service worker antigo que ainda esteja
    // servindo o app legado que existia nesta raiz.
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js');
    }
</script>
</body>
</html>