-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
148 lines (132 loc) · 7.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Roadside America API</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Roadside America API">
<meta name="twitter:image" content="https://roadside-america.dumbprojects.com/images/roadside-america-twitter.jpg" />
<meta property="og:title" content="Roadside America API" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Free to Use and Reuse: John Margolies Roadside America Photograph Archive" />
<meta property="og:url" content="https://roadside-america.dumbprojects.com" />
<meta property="og:image" content="https://roadside-america.dumbprojects.com/images/roadside-america.jpg" />
<meta property="og:site_name" content="roadside-america.dumbprojects.com" />
<link rel="apple-touch-icon" sizes="57x57" href="images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/favicon/ms-icon-144x144.png">
<link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="mobile-menu">
<a href="index.html"><i class="fa fa-navicon"></i></a>
</div>
<div class="vertical-nav">
<h1>Roadside America API</h1>
<ul>
<li><a href="https://www.loc.gov/free-to-use/john-margolies-roadside-america-photograph-archive"><i class="fa fa-book"></i> Library Of Congress Gallery</a></li>
<li><a href="https://www.flickr.com/photos/library_of_congress/albums/72157686396348231"><i class="fa fa-flickr"></i> Flickr Gallery</a></li>
<li><a href="https://roadside-america.dumbprojects.com/demo/"><i class="fa fa-globe"></i> Demo Site</a></li>
<li><a href="https://github.com/mhancoc7/Roadside-America-API"><i class="fa fa-github"></i> View on GitHub</a></li>
</ul>
<span class="logo"><img src="images/roadside-america.jpg" alt="Roadside America" style="max-width: 100%; margin-bottom: 1.5em;" /></span>
<ul>
<li>Powered By: <a href="https://www.loc.gov/free-to-use/"><img class="powered-by" src="images/logo-loc-new-branding.svg" alt="Library of Congress" /></a></li>
</ul>
</div>
<div id="main-content" class="api-side home">
<h1 class="mobile-h1">Roadside America API</h1>
<h2 class="title">Free to Use and Reuse: John Margolies Roadside America Photograph Archive</h2>
<p>Take a journey along U.S. main streets, byways, and highways through photographs taken by John Margolies between 1969 and 2008.</p>
<div class="code-wrapper">
<pre class="code">https://roadside-america.dumbprojects.com/api</pre>
<a href='javascript:void(0);' class='get-image button'>Submit</a>
</div>
<div class="try">
<div class="image">
<div class="image-content"></div>
</div>
<div class="json">
<pre></pre>
</div>
</div>
</div>
<div id="social">
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
</div>
<script src="//static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/vendor/jquery-3.4.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script>
function getImage() {
$.getJSON("api/index.php", function (data) {
$(".json pre").html(JSON.stringify(data, null, 4));
$(".image-content").html("<img src='" + data.results.images.large + "'>");
});
}
$('.get-image').click(function () {
getImage();
});
$(document).ready(function () {
getImage();
});
function mobileMenu() {
var x = document.getElementById("main-content");
if (x.style.display === "none") {
x.style.display = "block";
document.body.style.backgroundColor = "#fff";
} else {
x.style.display = "none";
document.body.style.backgroundColor = "#eee";
}
}
$('.mobile-menu').click(function () {
mobileMenu();
});
$(".mobile-menu").click(function (e) { e.preventDefault(); $(".vertical-nav").toggleClass("active"); }); $(".vertical-nav ul a").click(function (e) { $(".vertical-nav").removeClass("active"); });
</script>
<!-- Default Statcounter code for Roadside America (Site) https://roadside-america.dumbprojects.com/ -->
<script>
var sc_project = 12101527;
var sc_invisible = 1;
var sc_security = "93e2582a";
</script>
<script src="https://www.statcounter.com/counter/counter.js" async></script>
<noscript>
<div class="statcounter">
<a title="Web Analytics Made Easy - StatCounter" href="https://statcounter.com/" target="_blank">
<img class="statcounter"src="https://c.statcounter.com/12101527/0/93e2582a/1/" alt="Web Analytics Made Easy -StatCounter">
</a>
</div>
</noscript>
<!-- End of Statcounter Code -->
</body>
</html>