EcoIndex_browser-plugin/src/popup/popup.html at 682e6811836d5e8401a1d009f45d70b4afd44c50 · cnumr/EcoIndex_browser-plugin · 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
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ecoindex</title>
    <link rel="stylesheet" href="./popup.css">
</head>

<body class="container">
    <h1 id="title">Ecoindex</h1>
    <img class="space center-l shadow screenshot" id="screenshot" alt="Capture d'écran de la page">
    <div class="text-align:center space" id="loader">
        <span class="loader"></span>
    </div>
    <div id="result">
        <hr>
        <div class="text-align:center space">Analyse du <span id="result-date"></span></div>
        <div class="result-notation-content space">
            <div class="result-notation-levels">
                <div class="result-notation-levels-chart cluster-l --no-margin">
                    <div>
                        <div class="notation-level-chart" data-grade-result="A">
                            <div class="chart-part"></div>
                            <div class="level-chart-label">A</div>
                        </div>
                        <div class="notation-level-chart" data-grade-result="B">
                            <div class="chart-part"></div>
                            <div class="level-chart-label">B</div>
                        </div>
                        <div class="notation-level-chart" data-grade-result="C">
                            <div class="chart-part"></div>
                            <div class="level-chart-label">C</div>
                        </div>
                        <div class="notation-level-chart" data-grade-result="D">
                            <div class="chart-part"></div>
                            <div class="level-chart-label">D</div>
                        </div>
                        <div class="notation-level-chart" data-grade-result="E">
                            <div class="chart-part"></div>
                            <div class="level-chart-label">E</div>
                        </div>
                        <div class="notation-level-chart" data-grade-result="F">
                            <div class="chart-part"></div>
                            <div class="level-chart-label">F</div>
                        </div>
                        <div class="notation-level-chart" data-grade-result="G">
                            <div class="chart-part"></div>
                            <div class="level-chart-label">G</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-align:center">
            <div class="space"><b>Score :</b> <span id="result-score"></span> / 100</div>
            <div class="space display:flex justify-content:end text-align:end">
                <a target="_blank" class="button" href="#" id="result-link">Plus d'infos</a>
                <a href="#" class="button button-icon" id="retest" title="Retester">
                    <span class="icon-square-wrapper bg-darkish" aria-label="Retester">
                        <svg aria-hidden="true">
                            <use xlink:href="#icon-refresh">
                                <symbol id="icon-refresh" viewBox="0 0 25 25">
                                    <path
                                        d="m17.856 5.476 2.56-2.56v7.657h-7.66l3.524-3.523c-1.181-1.191-2.8-1.946-4.614-1.947-2.854.003-5.28 1.829-6.177 4.375h-.02c-.124.352-.22.718-.283 1.094h-2.202c.537-4.318 4.21-7.656 8.677-7.656h.011c2.417 0 4.602.977 6.184 2.559zm-14.94 14.94 2.562-2.559c1.58 1.582 3.766 2.56 6.183 2.56h.011c4.467 0 8.14-3.339 8.677-7.657h-2.201c-.064.377-.16.742-.284 1.094h-.02c-.896 2.547-3.322 4.372-6.176 4.375-1.815-.001-3.433-.755-4.614-1.947l3.524-3.522h-7.661v7.657z"
                                        transform="translate(.833 .833)"></path>
                                </symbol>
                            </use>
                        </svg>
                    </span>
                </a>
            </div>
        </div>
    </div>
    <div id="no-analysis" class="text-align:center">
        <button>Lancer une analyse</button>
        <div class="text-align:center;">
            <div class="dot-typing text-align:center"></div>
        </div>
    </div>
    <details id="error">
        <summary data-error="title"></summary>
        <code data-error="detail"></code>
    </details>
    <div id="other-results" class="space">
        <hr>
        <h2 class="space">Derniers résultats</h2>
        <div id="older-results">
            <details class="space">
                <summary>Sur la même page</summary>
                <ul></ul>
            </details>
        </div>
        <div id="host-results">
            <details class="space">
                <summary>Sur d'autres pages du site</summary>
                <ul></ul>
            </details>
        </div>
    </div>
    <details id="badge-integration" class="space">
        <hr>
        <summary>Intégrer le badge Ecoindex <a id="badge-preview-link" target="_blank" rel="noopener noreferrer">
                <img id="badge-preview-img" alt="Ecoindex Badge" />
            </a></summary>
        <p>Vous pouvez intégrer un badge Ecoindex pour la page analysée avec le snippet suivant :</p>
        <label for="badge-theme">Thème du badge :</label>
        <select id="badge-theme" class="space">
            <option value="light" selected>light</option>
            <option value="dark">dark</option>
        </select>
        <code id="badge-snippet"></code>
        <p class="space --s-3">En savoir plus : <a href="https://www.jsdelivr.com/package/gh/cnumr/ecoindex_badge"
                target="_blank" rel="noopener noreferrer">cnumr/ecoindex_badge sur jsDelivr</a></p>
    </details>
    <footer class="space text-align:center">
        <hr>
        <div class="space --s-3">Plus d'infos sur <a href="https://www.ecoindex.fr" target="_blank">www.ecoindex.fr</a>
        </div>
    </footer>
    <script type="module" src="../common.js"></script>
    <script type="module" src="./popup.js"></script>

</body>

</html>