-
Notifications
You must be signed in to change notification settings - Fork 0
/
settings.html
103 lines (91 loc) · 4.59 KB
/
settings.html
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
<html>
<head>
<!-- Imported Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous" />
<!-- Imported Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Local Scripts -->
<script src="network.js"></script>
<script src="settings.js"></script>
<style type="text/css">
.loader {
width: 100%;
z-index: 5;
height: 0;
}
.loader .loading {
will-change: transform;
top: 50%;
left: 50%;
transform-origin: 50%;
z-index: 101;
position: relative;
width: 1.8rem;
height: 1.8rem;
transform: translate(-50%, 0%);
}
.loader .loading .spinner {
width: 100%;
height: 100%;
border-top-color: rgba(0, 0, 0, 0.9) !important;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: solid 4px rgba(0, 0, 0, 0.1);
-webkit-animation: spin 0.8s infinite cubic-bezier(0.5, 0.65, 0.6, 0.5), opacity 2.4s ease-in-out infinite;
-moz-animation: spin 0.8s infinite cubic-bezier(0.5, 0.65, 0.6, 0.5), opacity 2.4s ease-in-out infinite;
-o-animation: spin 0.8s infinite cubic-bezier(0.5, 0.65, 0.6, 0.5), opacity 2.4s ease-in-out infinite;
animation: spin 0.8s infinite cubic-bezier(0.5, 0.65, 0.6, 0.5), opacity 2.4s ease-in-out infinite;
}
@-webkit-keyframes spin {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes spin {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);}
}
@-o-keyframes spin {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(359deg);}
}
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
@keyframes opacity {
0% {opacity: 0.05;}
10% {opacity: 0.2}
20% {opacity: 0.4}
30% {opacity: 0.6;}
40% {opacity: 0.8;}
50% {opacity: 1;}
60% {opacity: 0.8;}
70% {opacity: 0.6;}
80% {opacity: 0.4}
90% {opacity: 0.2}
100% {opacity: 0.05}
}
</style>
</head>
<body style="min-width: 250px;">
<img id="logo" src="logo.svg" alt="Tag a Doc Logo" class="img-fluid mx-auto d-block py-1 px-4" />
<div id="content" class="jumbotron jumbotron-fluid" style="margin-bottom: 0; padding-top: 1rem; padding-bottom: 1rem; min-height: 430px;">
<div class="d-none container not-auth">
<h1 class="display-4" style="font-size: 2rem;">Hello!</h1>
<p class="lead" style="font-size: 1.1rem; margin-bottom: 0.5rem;">To use this extension, you need to <strong>sign in</strong> using your Google account.</p>
<p style="margin-bottom: 0.5rem;"><a id="btn_signIn" class="btn btn-primary btn-lg" href="#" role="button">Sign In</a></p>
<p class="lead" style="font-size: 1rem">The first time you sign in, you will be asked to <strong>authorise</strong> viewing the files in your Google Drive. This is used to <strong>read the tags</strong> from your docs.</p>
</div>
<div class="d-none container auth">
<h1 class="display-4" style="font-size: 2rem;">Hi<span id="user"></span>,</h1>
<p class="lead" style="font-size: 1.1rem;"><strong>Thanks</strong> for signing in.</p>
<p class="lead" style="font-size: 1rem">Tags will be displayed at the <strong>top of the page</strong>, next to the title, when you are using Google Docs, Sheets, Slides or Drawings.</p>
<p><a id="btn_signOut" class="btn btn-secondary" href="#" role="button">Sign Out</a></p>
</div>
<div class="container">
<p class="lead" style="font-size: 0.9rem">See <a href="https://educ.io/extensions/tag-a-doc" target="_blank" rel="noopener">our site</a> for further info<span class="d-none auth"> and use our <a href="https://educ.io/folders" target="_blank" rel="noopener">folders</a> app to <strong>edit</strong> and <strong>manage</strong> your tags</span>.</p>
</div>
</div>
</body>
</html>