-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (118 loc) · 3.58 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<head>
<title>THE BOZEMAN BIKE</title>
<style>
body {
background-color: #00205B;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
padding:0;
margin:0;
}
li:not(:last-child) {
margin-bottom: 15px;
}
li {
text-align: left;
line-height: 1.4;
}
#content ol {
text-align: left;
display: inline-block;
font-size: 150%;
padding: 30px;
}
.button {
font: bold 21px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #000000;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
.rotatedletter {
height:6px;
line-height:10px;
position:relative;
display:block;
float:left;
}
</style>
</head>
<body>
<br>
<div style="background-color: #000000; margin:0px; padding:0px;">
<div style="margin: auto ;display:inline-block; text-align:center; padding: 0px; ">
<h1 id="banner" class="rotatedletter" style="font-family: 'Impact', sans-serif;">THE BOZEMAN BIKE</h1>
</div>
</div>
<p><i>Community Bicycle</i></p>
<div style="max-width:300px; margin: 0 auto;">
<ol id="content">
<li>Text a selfie of you and the bike to   <a class="button" style="color: #000000; background-color: #B9975B" href="sms:315-207-4805">315-207-4805</a>.</li>
<li>If I am awake, I will text you back with the lock combination.</li>
<li>Ride around.</li>
<li>Lock the bike up someplace public so the next person can find it.</li>
<li>Text me again to LMK that you are done with it.</li>
</ol>
</div>
<hr>
<div style="padding-left: 50px; padding-right: 50px; font-family: Garamond, serif;">Note that if you do not get a text back within a minute then I am probably asleep so try again later. I am usually awake about 10AM-1AM MT.</div>
<hr>
<a class="button" href="more.html">More info</a>
<script type="text/javascript">
function isLetter(str) {
return str.match(/[a-z]/i);
}
const banner = document.getElementById("banner");
bannerText = banner.innerHTML;
bannerTextLen = bannerText.length;
newBannerText = "";
for (i=0; i<bannerTextLen; i++)
{
letter = bannerText[i];
if ( ! isLetter(letter) ) {
newBannerText += '<span style="' +
'margin-right:0.2em;' +
'float:left;' +
'display:block;' +
'"> </span>';
} else {
rot = Math.trunc((Math.random()-0.5)*10);
newBannerText += '<span style="position:relative;' +
'top :' + ( Math.random() > 0.8 ? ((Math.random()-0.5)/5 ) + 'em;' : ' 0em') +';' +
'-webkit-transform: rotate( ' + rot +'deg);' +
'-moz-transform: rotate( '+ rot + 'deg);' +
'float:left;' +
'display:block;' +
'margin-right:0.01em;' +
'">' + letter + '</span>';
}
}
banner.innerHTML = newBannerText;
</script>
<!-- Default Statcounter code for bozeman bike
http://thebozemanbike.com -->
<script type="text/javascript">
var sc_project=12439767;
var sc_invisible=1;
var sc_security="09619033";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="https://statcounter.com/" target="_blank"><img
class="statcounter"
src="https://c.statcounter.com/12439767/0/09619033/1/"
alt="Web Analytics"></a></div></noscript>
<!-- End of Statcounter Code -->
</body>
</html>