summaryrefslogtreecommitdiffstats
path: root/src/skin/firstRun.html
blob: 307a90a47571e583378ce2eb1ede899f56cc9ca3 (plain)
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
129
130
131
<!doctype html>
<html>
<head>
  <title class="i18n_firstRun_title"></title>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" href="css/firstRun.css" rel="stylesheet" />
  <script type="text/javascript" src="/lib/vendor/jquery-3.5.1.js"></script>
  <script type="text/javascript" src="/lib/vendor/jquery.smooth-scroll.js"></script>
  <script type="text/javascript" src="/lib/i18n.js"></script>
  <script type="text/javascript" src="js/firstRun.js"></script>
</head>
<body>
  <div class="grid-container full">

    <div class="top-bar small-12 align-center cell">
      <img src ="images/eff-logo.png" alt="">
      <span class="i18n_intro_by_eff"></span>
    </div>

    <header class="grid-padding-y align-center">
      <div class="small-12 text-center cell">
        <img src="../icons/badger-bw-noborder.svg" alt="">
      </div>
      <div class="title-bar small-12 text-center cell">
        <h1 class="i18n_name"></h1>
      </div>
    </header>

    <!-- intro -->
    <div id="intro" class="grid-x grid-padding-x align-center">
      <div class="small-12 medium-10 text-center cell">
        <h3 class="i18n_firstRun_title"></h3>
      </div>
      <div class="small-12 medium-10 large-4 text cell">
        <p class="i18n_intro_welcome"></p>
      </div>
      <div class="small-12 text-center cell">
        <a href="#pb-features-1" class="i18n_intro_next_button button large scroll-it"></a>
      </div>
    </div>

    <!-- privacy badger features -->
    <div id="pb-features-1" class="align-center">
      <div>
        <img src="images/learns-trackers.png" alt="">
      </div>
      <div>
        <h3 class="i18n_intro_learns"></h3>
        <p class="i18n_intro_learns_paragraph"></p>
      </div>
    </div>
    <div id="pb-features-2" class="align-center">
      <div class="cell hide-for-small-only">
        <h3 class="i18n_intro_beyond_ads"></h3>
        <p class="i18n_intro_beyond_ads_paragraph"></p>
      </div>
      <div class="small-12 large-3 cell">
        <img src="images/catches-trackers.png" alt="">
      </div>
      <div class="cell hide-for-large hide-for-medium">
        <h3 class="i18n_intro_beyond_ads"></h3>
        <p class="i18n_intro_beyond_ads_paragraph"></p>
      </div>
    </div>
    <div id="pb-features-3" class="align-center">
      <div class="cell">
        <img src="images/not-ad-blocker.png" alt="">
      </div>
      <div class="cell">
        <h3 class="i18n_intro_not_an_adblocker"></h3>
        <p class="i18n_intro_not_an_adblocker_paragraph"></p>
      </div>
    </div>
    <div class="caret-down align-center">
      <a href="#pb-settings" class="scroll-it"><img src="images/carrot-down.svg" alt="i18n_next_section"></a>
    </div>

    <!-- privacy badger settings -->
    <div id="pb-settings" class="align-center">
      <div class="text">
        <img src="images/disable-badger.png" alt="">
        <p class="i18n_intro_disable_button text"></p>
        <p class="i18n_intro_report_button"></p>
        <p class="i18n_intro_privacy_note"></p>
      </div>
    </div>
    <div class="caret-down align-center">
      <a href="#pb-donate" class="scroll-it"><img src="images/carrot-down.svg" alt="i18n_next_section"></a>
    </div>

    <!-- donate ask -->
    <div id="pb-donate" class="align-center">
      <div class="text-center">
        <img src="images/pb-logo-outline.svg" alt="">
        <h3 class="i18n_intro_donate_heading"></h3>
        <p class="i18n_intro_donate1 text"></p>
      </div>
    </div>
    <div id="pb-donate-button" class="align-center">
      <div class="text-center">
        <a class="i18n_donate_to_eff button large" target="_blank" href="https://supporters.eff.org/donate/support-privacy-badger"></a>
      </div>
    </div>
    <div id="pb-donate-help" class="align-center">
      <span class="i18n_intro_donate_subheading"></span>
    </div>
  </div>

  <!-- social media icons -->
  <div class="share-links">
    <a class="share-facebook" target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/share.php?u=https%3A%2F%2Feff.org%2Fprivacybadger">
      <i></i>
      <span class="i18n_share_button_title_facebook"></span>
    </a>
    <a class="share-twitter" target="_blank" rel="noopener noreferrer" href="https://twitter.com/home?status=I%20just%20installed%20Privacy%20Badger%2C%20a%20new%20tool%20from%20@EFF%20to%20stop%20companies%20from%20spying%20on%20your%20browsing%20habits%20https%3A%2F%2Feff.org%2Fprivacybadger&related=eff">
      <i></i>
      <span class="i18n_share_button_title_twitter"></span>
    </a>
  </div>

  <!-- privacy policy link -->
  <div class="grid-container full">
    <div id="pb-privacy-policy">
      <a class="i18n_intro_link_policy" target="_blank" href="https://www.eff.org/code/privacy/policy"></a>
    </div>
  </div>

</body>
</html>