Skip to content

Commit ebeae14

Browse files
dinoboy197dinoboy197
committed
Update to single-page tutorial
1 parent 6ce2f29 commit ebeae14

8 files changed

+165
-21
lines changed

‎background.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -361,7 +361,7 @@ function showSplashScreenOnFirstRun() {
361361
getFromStorage('tutorialShown', function(item) {
362362
if (!('shown' in item)) {
363363
chrome.tabs.create({
364-
url: chrome.extension.getURL("firstRun.html")
364+
url: chrome.extension.getURL("firstRun2.html")
365365
});
366366
setToStorage('tutorialShown', {'shown':true}, function() {});
367367
}

‎chrome/arrow.png

4.9 KB
Loading

‎colors.css

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
3+
Copyright 2016 Taylor Raack.
4+
5+
This file is part of PageAccel.
6+
7+
PageAccel is free software: you can redistribute it and/or modify
8+
it under the terms of the GNU General Public License as published by
9+
the Free Software Foundation, either version 3 of the License, or
10+
(at your option) any later version.
11+
12+
PageAccel is distributed in the hope that it will be useful,
13+
but WITHOUT ANY WARRANTY; without even the implied warranty of
14+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15+
GNU General Public License for more details.
16+
17+
You should have received a copy of the GNU General Public License
18+
along with PageAccel. If not, see <http://www.gnu.org/licenses/>.
19+
*/
20+
21+
body {
22+
color: #004b25;
23+
}
24+
25+
.enabled {
26+
background-color: #70e270;
27+
}
28+
29+
.disabled {
30+
background-color: #ffda81;
31+
}
32+
33+
.vlightbg {
34+
background-color: #a4ffd1;
35+
}
36+
37+
.lightbg {
38+
background-color: #00ff7d;
39+
}
40+
41+
.mediumbg {
42+
background-color: #00578a;
43+
}
44+
45+
hr {
46+
border-color: #00753a;
47+
}
48+
49+
.darkbg {
50+
background-color: #2333ff;
51+
}

‎firstRun.html

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
<!-- Bootstrap -->
3232
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
3333
<link rel="stylesheet" href="style.css" />
34+
<link rel="stylesheet" href="colors.css" />
3435
</head>
3536
<body>
3637
<div class="container">

‎firstRun2.html

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
3+
<!--
4+
5+
Copyright 2016 Taylor Raack.
6+
7+
This file is part of PageAccel.
8+
9+
PageAccel is free software: you can redistribute it and/or modify
10+
it under the terms of the GNU General Public License as published by
11+
the Free Software Foundation, either version 3 of the License, or
12+
(at your option) any later version.
13+
14+
PageAccel is distributed in the hope that it will be useful,
15+
but WITHOUT ANY WARRANTY; without even the implied warranty of
16+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
17+
GNU General Public License for more details.
18+
19+
You should have received a copy of the GNU General Public License
20+
along with PageAccel. If not, see <http://www.gnu.org/licenses/>.
21+
-->
22+
23+
<html lang="en">
24+
<head>
25+
<meta charset="utf-8">
26+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
27+
<meta name="viewport" content="width=device-width, initial-scale=1">
28+
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
29+
<title>Thank you for installing PageAccel!</title>
30+
31+
<!-- Bootstrap -->
32+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
33+
<link rel="stylesheet" href="style.css" />
34+
<link rel="stylesheet" href="colors.css" />
35+
</head>
36+
<body>
37+
<div class="container">
38+
<div class="row row-margin mediumbg">
39+
<div class="col-md-12 text-center">
40+
<img src="amplifier128.png" class="img-responsive center-block" alt="PageAccel logo" /><br />
41+
<h1 style="color: #000"><strong>Thank you for installing PageAccel!</strong></h1>
42+
</div>
43+
</div>
44+
<div class="row row-margin vlightbg">
45+
<div class="col-md-12 text-center lead">
46+
<strong>PageAccel</strong> displays streamlined, accelerated, easy-to-use web pages on websites that offer it.
47+
</div>
48+
</div>
49+
<div class="row row-margin vlightbg">
50+
<div class="col-sm-5 col-sm-offset-1">
51+
<img class="center-block img-responsive" src="chrome/bowie_standard.jpg"></img><br />
52+
<div class="lead text-center" style="color: #000">Without <strong>PageAccel</strong>:<br />Standard, non-streamlined, slow-loading</div>
53+
</div>
54+
<div class="col-sm-1">
55+
<img class="arrow center-block img-responsive" src="chrome/arrow.png"></img>
56+
</div>
57+
<div class="col-sm-4">
58+
<img class="center-block img-responsive" src="chrome/bowie_simplified.jpg"></img>
59+
<div class="lead text-center" style="color: #000">With <strong>PageAccel</strong>:<br />Simplified, streamlined, faster-loading</div>
60+
</div>
61+
</div>
62+
<div class="row row-margin vlightbg">
63+
<div class="col-md-12 text-center">
64+
<hr />
65+
<div class="lead">
66+
When you're on a page, look for the <strong>PageAccel</strong> icon in the URL bar: <img src="chrome/bolt.jpg" />
67+
</div>
68+
<div class="lead text-left">
69+
<ul>
70+
<li><strong>If it's green</strong>, like this: <img src="canonical.png" />, then you are browsing <strong>a simplified web page</strong>.</li>
71+
<li><strong>If it's yellow</strong>, like this: <img src="amplify.png" />, then you have elected to view <strong>the standard, non-streamlined version of a web page</strong>.</li>
72+
</ul>
73+
</div>
74+
<hr />
75+
<div class="lead">
76+
<strong>You can toggle</strong> between simplified and standard content<br />
77+
by clicking the <img src="amplify.png" /> or <img src="canonical.png" /> icon in the URL bar and clicking "Enable" or "Disable" for that web site.
78+
</div>
79+
<hr />
80+
<div class="lead">
81+
We hope you like PageAccel. Enjoy!
82+
</div>
83+
<br />
84+
(You may now close this tutorial window / tab.)
85+
</div>
86+
</div>
87+
</div>
88+
89+
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
90+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
91+
<!-- Include all compiled plugins (below), or include individual files as needed -->
92+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
93+
94+
<script src="firstRun.js"></script>
95+
</body>
96+
</html>

‎popup.html

+3
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<head>
2525
<script src="popup.js"></script>
2626
<link rel="stylesheet" href="style.css" />
27+
<link rel="stylesheet" href="colors.css" />
2728
</head>
2829

2930
<body tabindex="1">
@@ -35,5 +36,7 @@
3536
<br />
3637
<div><a id="moreinfo" href="https://github.com/pageaccel/pageaccel-chrome/blob/master/README.md#pageaccel-chrome-extension">More information...</a></div>
3738
<div><a id="help" href="https://chrome.google.com/webstore/detail/pageaccel/homgapmnacbmbflidhpenianmeidfcjp/support">Help / questions / support</a></div>
39+
<div><a id="tutorial1" href="firstRun.html">Tutorial 1</a></div>
40+
<div><a id="tutorial2" href="firstRun2.html">Tutorial 2</a></div>
3841
</body>
3942
</html>

‎popup.js

+8
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,12 @@ document.addEventListener('DOMContentLoaded', function() {
4141
event.preventDefault();
4242
chrome.tabs.create({url: event.currentTarget.href });
4343
});
44+
document.getElementById('tutorial1').addEventListener('click', function(event){
45+
event.preventDefault();
46+
chrome.tabs.create({url: event.currentTarget.href });
47+
});
48+
document.getElementById('tutorial2').addEventListener('click', function(event){
49+
event.preventDefault();
50+
chrome.tabs.create({url: event.currentTarget.href });
51+
});
4452
});

‎style.css

+5-20
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,13 @@ body {
2222
font-family: Segoe UI, Arial, sans-serif;
2323
}
2424

25-
.vlightbg {
26-
background-color: #ffd8a4;
25+
.row-margin {
26+
padding-top: 10px;
27+
padding-bottom: 10px
2728
}
2829

29-
.lightbg {
30-
background-color: #ffc270;
31-
}
32-
33-
.mediumbg {
34-
background-color: #d97c00;
35-
}
36-
37-
.darkbg {
38-
background-color: #a75f00;
30+
.arrow {
31+
padding-top: 100px;
3932
}
4033

4134
#enabledStatus {
@@ -46,11 +39,3 @@ body {
4639
font-weight: bold;
4740
font-size: 24px;
4841
}
49-
50-
.enabled {
51-
background-color: #70e270;
52-
}
53-
54-
.disabled {
55-
background-color: #ffda81;
56-
}

0 commit comments

Comments
 (0)