Skip to content

Commit c487cab

Browse files
evanplaiceevanplaice
committed
Add Demo template
1 parent a77c3d4 commit c487cab

File tree

2 files changed

+133
-0
lines changed

2 files changed

+133
-0
lines changed

‎examples/_demo.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
body {
2+
font-family: 'Lato', san-serif;
3+
}
4+
5+
h1, h2, h3, h4, h5 {
6+
font-family: 'Roboto', sans-serif;
7+
font-weight: 900;
8+
margin: 0;
9+
}
10+
11+
h2 {
12+
margin-bottom: 10px;
13+
}
14+
15+
hr {
16+
margin: 20px;
17+
}
18+
19+
textarea {
20+
width:100%;
21+
}
22+
23+
code {
24+
font-family: 'Source Code Pro', monospace;
25+
}
26+
27+
#header {
28+
position: fixed;
29+
top: 0px;
30+
left: 0px;
31+
width: 100%;
32+
height: 50px;
33+
background: #333333;
34+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
35+
}
36+
37+
#title {
38+
float: left;
39+
padding-top: 10px;
40+
padding-left: 10%;
41+
color: white;
42+
font-size: 1.25rem;
43+
}
44+
45+
#link {
46+
float: right;
47+
padding-top: 10px;
48+
padding-right: 10%;
49+
font-size: 1.25rem;
50+
font-weight: 600;
51+
text-decoration: none;
52+
}
53+
54+
#link a, #link a:hover {
55+
color: mediumorchid;
56+
text-decoration: none;
57+
}
58+
59+
#container {
60+
width: 80%;
61+
max-width: 960px;
62+
padding: 0 50px 0 50px;
63+
margin: 0 auto;
64+
display: block;
65+
overflow-x: hidden;
66+
background: #F0F0F0;
67+
}
68+
69+
#content {
70+
background: #F0F0F0;
71+
margin: 50px auto 0 auto;
72+
padding: 20px 0 20px 0;
73+
}
74+
75+
#run {
76+
margin-top: 10px;
77+
border-radius: 15%;
78+
}
79+
80+
#result {
81+
width: 100%;
82+
height: 200px;
83+
overflow: auto;
84+
}

‎examples/_template.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<html>
2+
<head>
3+
<link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Source+Code+Pro" rel="stylesheet">
4+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai.min.css">
5+
<link rel="stylesheet" href="_demo.css">
6+
</head>
7+
8+
<body>
9+
10+
<div id="header">
11+
<h1 id="title">[operator]</h1>
12+
<div id="link"><a href="https://github.com/evanplaice/jquery-csv">GitHub</a></div>
13+
</div>
14+
<div id="container">
15+
<section id="content">
16+
<h2>Description</h2>
17+
<p>[description]</p>
18+
<hr>
19+
<h2>Usage</h2>
20+
<pre><code class="javascript">[code]</code></pre>
21+
<hr />
22+
<h2>Input</h2>
23+
<textarea id="input" style="height: 25px;">[input]</textarea>
24+
<input id="run" type="button" value="Run" />
25+
<hr />
26+
<h2>Result</h2>
27+
<textarea id="result" style="height: 82px;"></textarea>
28+
</section>
29+
</div>
30+
31+
<script src="http://code.jquery.com/jquery-3.3.1.slim.js" integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA=" crossorigin="anonymous"></script>
32+
<script src="../src/jquery.csv.js"></script>
33+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
34+
<script>
35+
// enable syntax highlighting
36+
hljs.initHighlightingOnLoad();
37+
38+
$(document).ready(() => {
39+
// set initial state
40+
});
41+
42+
$('#run').bind('click', function () {
43+
// this executes when the run 'Run' button is clicked
44+
});
45+
46+
// add additional functionality here
47+
</script>
48+
</body>
49+
</html>

0 commit comments

Comments
 (0)