-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (107 loc) · 3.86 KB
/
index.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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<title>MAL Pebble Configuration</title>
<link rel='stylesheet' type='text/css' href='css/slate.min.css'>
<script src='js/slate.min.js'></script>
<style>
.title {
padding: 15px 10px;
text-transform: uppercase;
font-family: 'PT Sans', sans-serif;
font-size: 1.2em;
font-weight: 500;
color: #888888;
text-align: center;
}
</style>
</head>
<body>
<h1 class='title'>MyAnimeList Pebble Configuration</h1>
<div class='item-container'>
<div class='item-container-header'>Login</div>
<div class='item-container-content'>
<label class='item'>
Username
<input id='username_field' type='text' class='item-input' placeholder='Username'>
</label>
</div>
<div class='item-container-footer'>
Enter the username you use to log into MyAnimeList.
</div>
<div class='item-container-content'>
<label class='item'>
Password
<input id='password_field' type='password' class='item-input' placeholder='Password'>
</label>
</div>
<div class='item-container-footer'>
Enter the password you use to log into MyAnimeList.
</div>
</div>
<div class='item-container'>
<div class='item-container-header'>Customizability</div>
<div class='item-container-content'>
<label class='item'>
Background Color
<input id='background_color_picker' type='text' class='item-color item-color-sunny' value='#000000'>
</label>
</div>
<div class='item-container-footer'>
Choose the app's background color. Used if High Contrast Mode is not selected. Note: Only available on Basalt watches that support many colors.
</div>
</div>
<div class='item-container'>
<div class='button-container'>
<input id='submit_button' type='button' class='item-button' value='SUBMIT'>
</div>
</div>
</body>
<script>
function getConfigData() {
var backgroundColorPicker = document.getElementById('background_color_picker');
var usernameInput = document.getElementById('username_field');
var passwordInput = document.getElementById('password_field');
var options = {
'background_color': backgroundColorPicker.value,
'username': usernameInput.value,
'password': passwordInput.value
};
// Save for next launch
localStorage['background_color'] = options['background_color'];
localStorage['username'] = options['username'];
localStorage['password'] = options['password'];
console.log('Got options: ' + JSON.stringify(options));
return options;
}
function getQueryParam(variable, defaultValue) {
var query = location.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (pair[0] === variable) {
return decodeURIComponent(pair[1]);
}
}
return defaultValue || false;
}
var submitButton = document.getElementById('submit_button');
submitButton.addEventListener('click', function() {
console.log('Submit');
// Set the return URL depending on the runtime environment
var return_to = getQueryParam('return_to', 'pebblejs://close#');
document.location = return_to + encodeURIComponent(JSON.stringify(getConfigData()));
});
(function() {
var backgroundColorPicker = document.getElementById('background_color_picker');
var usernameInput = document.getElementById('username_field');
var passwordInput = document.getElementById('password_field');
// Load any previously saved configuration, if available
if(localStorage['username_field']) {
backgroundColorPicker.value = localStorage['background_color'];
usernameInput.value = localstorage['username'];
passwordInput.value = localstorage['password'];
}
})();
</script>
</html>