CheerUP/popup.html at master · calebhyun/CheerUP · 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
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        height: 200px;
        width: 300px;
        outline: none;
      }
      .range-wrap {
      position: relative;
        margin: 0 auto 3rem;
        }
        .range {
            -webkit-appearance: none;  /* Override default CSS styles */
            appearance: none;
            width: 100%; /* Full-width */
            height: 10px; /* Specified height */
            background: #d3d3d3; /* Grey background */
            outline: none; /* Remove outline */
            opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
            -webkit-transition: .2s; /* 0.2 seconds transition on hover */
            transition: opacity .2s;
        }
        .range::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        appearance: none;
        width: 15px; /* Set a specific slider handle width */
        height: 15px; /* Slider handle height */
        background: gray; /* Green background */
        border-radius: 50%;
        cursor: pointer; /* Cursor on hover */
        }
        .bubble {
        background: linear-gradient(to right, red , yellow);
        color: white;
        padding: 4px 12px;
        position: absolute;
        border-radius: 4px;
        left: 50%;
        transform: translateX(-50%);
        }
        .bubble::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 2px;
        background: red;
        top: -9px;
        left: 50%;
        }

a {
  color: black;
  text-decoration: none;


}
button {
color: #494949 !important;
text-transform: uppercase;
text-decoration: none;
background: #ffffff;
padding: 10px;
border: 4px solid #494949 !important;
display: inline-block;
transition: all 0.4s ease 0s;
}
button:hover {
color: #ffffff !important;
background: grey;
border-color:grey !important;
transition: all 0.2s ease 0s;
}
.bottomrightbutton{
    position: fixed;
    bottom: 5px;
    right: 5px;
    padding: 3px;
}
.bottomleftbutton {
    position: fixed;
    bottom: 5px;
    left: 5px;
    padding: 3px;
    }

    </style>
    <script src="jQuery.min.js"></script>
  </head>
  <body>
    <div id="frontpage">

    <h2>How biased was this article?</h2>
    <div class="range-wrap" style="width: 60%;" tabindex="1">
        <input type="range" id="politicbias" class="range"  min="-3" max="3" step="1">

        <output class="bubble"></output>
      </div>
      <button type="submit" id="submit">Submit</button>
        <a href="https://www.balancedmedia.org/"><button class='bottomleftbutton'>About us</a>
        <button type='submit' id='statbutton' class='bottomrightbutton'>See your stats.</button>
    </div>
    <div id="statspage">
        <p>Your general bias: Left leaning</p>
        <p>You rated that article right learning.</p>
        <p>Average bias of that article: neutral</p>

        <button type='button' id='backbutton'class='bottomleftbutton'>Submit a bias report</button>
        <button type='button' id='historybutton' class='bottomrightbutton'>History</button>

    </div>
    <script src="popup.js"></script>
  </body>
</html>