Elle-Hacks/Credits.html at main · snoort/Elle-Hacks · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale = 1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Env-Credit</title>
    <link rel="stylesheet" href="Credits.css">
</head>
    <body>
<!--Here is the head of the page, which contains the page title and the log in button.-->
        <div id="top">
            <div id="title">Env-Credit</div>
            <button id="login" onclick=login()>login</button>
        </div>

<!--Here is the first part: Earning-->
        <div class="earning">
            <div class="subtitle">Earning</div>
            <div class="explanation">Click to earn today's Env-credit.</div>
<!--Here is the first box in Earning: My daily action-->
        <div class="box">
            <div class="boxTitle">My daily actions</div>
            <p id="bus"><input class="check" type="checkbox" onclick="ScoreAdder(1, 'bus')">I took the bus today</p>
            <p id="walk"><input class="check" type="checkbox" onclick="ScoreAdder(1, 'walk')">I walked today</p>
            <p id="meat"><input  class="check" type="checkbox" onclick="ScoreAdder(1, 'meat')">I ate at least one meal without meat</p>
            <p id="dairy"><input class="check" type="checkbox" onclick="ScoreAdder(1, 'lights')">I ate at least one meal without dairy</p>
            <p id="lights"><input class="check" type="checkbox" onclick="ScoreAdder(1, 'lights')">I turned off the lights before leaving the house</p>
            <p id="shower"><input class="check" type="checkbox" onclick="ScoreAdder(1, 'shower')">I took a shower less than 10 minutes</p>
            <p id="secondhand"><input class="check" type="checkbox" onclick="ScoreAdder(1, 'secondhand')">I bought used instead of new</p>
            <p id="repair"><input class="check" type="checkbox" onclick="ScoreAdder(1, 'repair')">I repaired instead of buying new</p>
            <p id="free"><input class="check" type="checkbox" onclick="ScoreAdder(1, 'free')">I used something available for free online instead of buying new</p>
            <p id="diy"><input class="check" type="checkbox" onclick="ScoreAdder(1, 'diy')">I DIYd instead of buying new</p>
            <p id="recycle"><input class="check" type="checkbox" onclick="ScoreAdder(1, 'recycle')">I recycled</p>
            <p id="compost"><input class="check" type="checkbox" onclick="ScoreAdder(1, 'compost')">I composted</p>
        </div>
<!--Here is the second box in the Earning: I brought my own-->
        <div class="box">
            <div class="boxTitle">I brought my own</div>
            <p id="straw"><input type="checkbox" onclick="ScoreAdder(1, 'straw')">Straw</p>
            <p id="bag"><input type="checkbox" onclick="ScoreAdder(1, 'bag')">Bag</p>
            <p id="cup"><input type="checkbox" onclick="ScoreAdder(1, 'cup')">Coffee cup</p>
            <p id="cutlery"><input type="checkbox" onclick="ScoreAdder(1, 'cutlery')">Cutlery</p>
            <p id="mask" ><input type="checkbox" onclick="ScoreAdder(1, 'mask')">Mask</p>
        </div>

        <div class="score">
            Your daily credits:
            <div id="score"></div>
        </div>

        <div class="overall-score">
            Your overall credits:
            <div id="overall-score"></div>
        </div>

        <div>
            <button id="addCredits"> Register your credits </button></div>
            <script type="text/javascript" src = "./Score-Calculator.js"></script>
        </div>

<!--Here is the second part: Donating-->
        <div class="donating">
            <div class="subtitle">Donating</div>
            <div class="explanation">
                <p>You can donate your Env-credit to win titles.</p>
                <button id="donate" onclick=donate()>Donate</button>
            </div>
<!--Here is the users's donating information-->
                <div id="donatingInfo">
                    <p>You have donated:</p>
                    <p>Your donating ranking:</p>
                </div>
<!--Here is the donating ranking list-->
            <div class="box">
                <div class="boxTitle">Donating Ranking List</div>
<!--Here we need data for ranking-->
                <div id="donatingRaking"></div>
            </div>
        </div>

<!--Here is the third part: Dealing-->
        <div class="dealing">
            <div class="subtitle">Dealing</div>
            <div class="explanation">You can sell your used items to other users to earn Env-credit or buy used items from other users using Env-credit.</div>
            <div class="explanation">Choose a market for dealing</div>
            <img class="figure" src="https://cdn.pixabay.com/photo/2016/09/04/13/53/books-1644060_1280.jpg" width="50%"/>
            <img class="figure" src="https://cdn.pixabay.com/photo/2015/06/10/11/49/flea-market-804760_1280.jpg" width="50%"/>
            <img class="figure" src="https://cdn.pixabay.com/photo/2018/01/20/09/42/sofa-3094153_1280.jpg" width="50%"/>
            </div>

<!--Here is the copyright part-->
        <div id="copyright">Copyright 2021 Aastha Puri, Junru Lin, Sarah Bellemare and Tasneem Ishaq</div>
    </body>
</html>