DataVision/index.html at Dev · Shoormax/DataVision · 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
<HTML>
<head>
    <link href="CSS/css.css" rel="stylesheet" type="text/css" />
    <link href="CSS/animation.css" rel="stylesheet" type="text/css" />
    <link href="CSS/cartes.css" rel="stylesheet" type="text/css" />
    <link href="CSS/graph.css" rel="stylesheet" type="text/css" />
    <link href="font/fontello-5cf4ce55/css/fontello.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Coiny|Lobster|Montserrat|Raleway" rel="stylesheet">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Le recyclage en France</title>
</head>
<body>

<div id="container">
    <div id="entete">
        <div class="intros fleft" id="intro"><span>Le recyclage en France</span></div>
        <div class="intros fright" id="trashCan">
            <div title="Code: 0xe83d" class="the-icons span3">
                <i class="demo-icon icon-trash"></i>
            </div>
        </div>
    </div>
    <div id="souscontainer">
        <div class="textPart"><span id="compteurDechet"></span> millions de tonnes de déchets / an</div>
        <table id="tableCarte">
            <tr>
                <td>
                    <div class="infosCarte" id="infosCarteChiffre62"><span id="compteur62"></span> %</div>
                    <div class="infosCarte" id="infosCarteText62">sont récyclés</div>
                    <div id="fond62" class="fond"></div>
                    <img class="france" src="img/boldFranceFull.min.png">
                </td>
                <td id="carte34">
                    <div class="infosCarte" id="infosCarteChiffre34"><span id="compteur34"></span> %</div>
                    <div class="infosCarte" id="infosCarteText34">sont mis en <br>décharge</div>
                    <div id="fond34" class="fond"></div>
                    <img class="france" src="img/boldFranceFull.min.png">
                </td>
            </tr>
        </table>
        <div class="textPart">Recyclage par catégorie</div>
        <ul  id="graphs">
            <li class="barre clnCarton" id="cln1">
                <p>75 %</p>
            </li>
            <li class="barre clnConserves" id="cln2">
                <p>55 %</p>
            </li>
            <li class="barre clnVerre" id="cln3">
                <p>60 %</p>
            </li>
            <li class="barre clnAluminium" id="cln4">
                <p>35%</p>
            </li>
            <li class="barre clnPlastique" id="cln5">
                <p>20 %</p>
            </li>
        </ul>
        <ul id="texteGraphs">
            <li class="barre clnCarton"><p>Carton</p></li>
            <li class="barre clnConserves"><p>Conserves</p></li>
            <li class="barre clnVerre"><p>Verre</p></li>
            <li class="barre clnAluminium"><p>Aluminium</p></li>
            <li class="barre clnPlastique"><p>Plastique</p></li>
        </ul>
    </div>
</div>

</body>

<script src="js/compteur.js"></script>

</HTML>