website/index.html at master · izens-net/website · 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
<!DOCTYPE html>
<html lang="en" id="home">
<head>
    <meta charset="UTF-8">
    <title>izens.net</title>
    <meta name="description" content="izens.net website">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" type="image/x-icon" href="./favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/skeleton.css">
    <link rel="stylesheet" href="css/custom.css">
</head>
<body>
<!-- Main navigation -->
  <nav>
      <div class="wrap">
          <a href="" class="nav-logo">izens.net</a>
          <p class="mobile-nav-icon">Menu</p>
      </div>
      <ul class="nav-links">
          <li><a href="#home" class="active-nav">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#campaigns">Campaigns</a></li>
          <button onclick="linkToExtension(); return false">Download extension</button>
      </ul>
  </nav>
<!-- Main section with articles -->
  <main>
    <article class="hero">
        <div class="cta">
            <h2>Join us in action and
  reclaim the internet!</h2>
            <p>United we bargain divided we beg!</p>
            <button onclick="linkToExtension()">Download browser extension</button>
        </div>
    </article>
    <article class="container about" id="about">
        <h1>About</h1>
        <p>The toolbox for collective organization that we've inherited is failing us in the internet age. The shops of today have no physical location for us protest in front of. The labor we provide is too subtle and diffuse for us to even recognize it. Platform economies don't facilitate the community that made striking easier.</p>
        <p>izens.net is our attempt to change that. Our browser extension allows you to participate in one or more unions. These unions can, if they decide that a company or organization has misbehaved, decide to:</p>
        <ul>
          <li>Warn their members with a banner when they visit a website</li>
          <li>Block the website for a period of time - i.e., a boycott</li>
          <li>Send the website a request indicating the reasons for protesting</li>
        </ul>
        <p>If you visit a page that has such a policy, you'll be informed as to why. You'll also find a link to the discussion that led to that policy. You can always participate in those discussions, or propose new policies.</p>
    </article>
    <article class="container campaigns" id="campaigns">
        <h1>Campaigns</h1>
        <p>Below you'll find the most recent campaigns that have been created. You can join any campaign by cliking join.</p>
        <ul>
            <li>
                <h4>Sample campaign</h4>
                <p>Only an example</p>
                <a href="#" onclick="addPolicy('https://raw.githubusercontent.com/izens-net/picket/master/policy.sample.json'); return false">Join</a>
            </li>
            <li>
                <h4>Faceless</h4>
                <p>A picket against the social media giant!</p>
                <a href="https://github.com/anikarni/faceless">Link</a>
                <a href="#" onclick="addPolicy('https://raw.githubusercontent.com/anikarni/faceless/master/policy.json'); return false">Join</a>
            </li>
            <li>
                <h4>Carbon Majors</h4>
                <p>A picket for climate accountability</p>
                <a href="https://github.com/anikarni/fossil-fuels-campaign">Link</a>
                <a href="#" onclick="addPolicy('https://raw.githubusercontent.com/anikarni/fossil-fuels-campaign/master/policy.json'); return false">Join</a>
            </li>
        </ul>
        <p> Have an idea for a a campaign?  Creating campaigns is easy! All you
        need is a policy file hosted on the web. You can do this any way you
        like, but <a href="https://github.com/izens-net/union-template">
            here's an easy way!</a></p>
        <p>Have a campaign already? Add it <a href="https://github.com/izens-net/campaigns/blob/master/README.md">here</a> to let others know about it.</p>
    </article>
    <!-- Notification -->
      <div class="success" id="notification">
        <i class="fas fa-fist-raised"></i>
        <p>You've joined a union!</p>
      </div>
  </main>
<!-- Scripts -->
  <footer>
    <ul class="footer-actions">
        <li>
            <a href="https://github.com/izens-net">
             <i class="fab fa-github"></i>
            </a>
        </li>
        <li>
            <a href="mailto:picket@izens.net">
              <i class="fas fa-envelope"></i>
            </a>
        </li>
    <ul>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>