Skip to content

Commit aff7553

Browse files
fractalwrenchfractalwrench
committed
style html/css, add copy
1 parent 69e4956 commit aff7553

File tree

2 files changed

+116
-64
lines changed

2 files changed

+116
-64
lines changed

‎spring/src/main/resources/static/main.css‎

Lines changed: 81 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,97 @@
11
/* --- General --- */
2+
3+
4+
.title {
5+
text-align: center;
6+
font-size: 2em;
7+
padding:60px;
8+
margin:0px;
9+
}
10+
11+
.j2kcontainer {
12+
text-align:center;
13+
padding-top: 60px;
14+
padding-bottom: 60px;
15+
}
16+
17+
p {
18+
margin-left: 20%;
19+
margin-right: 20%;
20+
}
21+
222
textarea {
323
width:60%;
424
resize: vertical;
525
min-height:300px;
26+
font-size: 1em;
27+
padding-top: 5px;
28+
padding-bottom: 5px;
29+
padding-left: 10px;
30+
padding-right: 10px;
31+
}
32+
33+
.button {
34+
font-size: 1em;
35+
padding: 20px;
36+
margin: 10px;
37+
text-align: center;
38+
min-width: 140px;
39+
cursor: pointer;
40+
}
41+
42+
43+
pre {
44+
font-size: 16px;
45+
line-height: 1.5em;
46+
margin-left:20%;
47+
margin-right:20%;
48+
}
49+
pre code {
50+
white-space: pre;
51+
}
52+
53+
code {
54+
font-weight: bold;
55+
text-align: left;
56+
padding: 2px 4px;
57+
font-size: 90%;
58+
color: #c7254e;
59+
background-color: #f9f2f4;
60+
border-radius: 2px;
61+
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
62+
}
63+
64+
code.hljs {
65+
background: #F5F5F5;
66+
padding: 16px;
67+
border-style: solid;
68+
border-width: 1px;
69+
border-radius: 4px;
70+
border-color: #ccc;
71+
}
72+
73+
.container {
74+
margin-bottom: 50px;
75+
margin-left: 15%;
76+
margin-right: 15%;
677
}
78+
79+
input {
80+
font-family:monospace;
81+
}
82+
83+
/* Portfolio stuff */
84+
85+
86+
787
body {
8-
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
88+
font-family: monospace;
989
font-size: 18px;
1090
color: #404040;
1191
position: relative;
1292
background: #FFFFFF;
1393
margin: 0;
1494
}
15-
.container {
16-
margin-bottom: 50px;
17-
margin-left: 15%;
18-
margin-right: 15%;
19-
}
2095
p {
2196
line-height: 1.5;
2297
}
@@ -356,40 +431,6 @@ table tr td {
356431

357432
/* --- Code blocks --- */
358433

359-
pre {
360-
font-size: 16px;
361-
line-height: 1.5em;
362-
margin-left:20%;
363-
margin-right:20%;
364-
}
365-
pre code {
366-
white-space: pre;
367-
}
368-
369-
code {
370-
font-weight: bold;
371-
text-align: left;
372-
padding: 2px 4px;
373-
font-size: 90%;
374-
color: #c7254e;
375-
background-color: #f9f2f4;
376-
border-radius: 2px;
377-
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
378-
}
379-
380-
code.hljs {
381-
background: #F5F5F5;
382-
padding: 16px;
383-
border-style: solid;
384-
border-width: 1px;
385-
border-radius: 4px;
386-
border-color: #ccc;
387-
}
388-
389-
.j2kcontainer {
390-
margin-top:60px;
391-
}
392-
393434
/* MailChimp Form Embed Code - Horizontal Super Slim - 12/16/2015 v10.7
394435
Adapted from: http://blog.heyimcat.com/universal-signup-form/ */
395436

‎spring/src/main/resources/templates/conversion.html‎

Lines changed: 35 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -23,33 +23,45 @@
2323
<meta property="og:type" content="website"/>
2424
<meta property="og:site_name" content="Fractalwrench"/>
2525
</head>
26-
<body>
27-
<div class="container" style="text-align:center">
28-
<div class="j2kcontainer">
29-
<h1 id="home">Convert JSON to Kotlin Data Class</h1>
30-
<form id="jsonForm" action="#" th:action="@{/}" th:object="${conversionForm}"
31-
method="post" onsubmit="return validateForm()">
32-
<textarea maxlength="10000" placeholder="Paste JSON here..." th:field="*{json}"></textarea>
33-
<p><input type="reset" value="Reset"/> <input type="submit" value="Convert"/></p>
34-
</form>
35-
</div>
36-
<div class="j2kcontainer" th:if="${kotlin != null}">
37-
<h2 id="results">Generated Kotlin</h2>
3826

39-
<input type="hidden" id="filename" th:value="${filename}"/>
40-
<textarea id="kotlinText" th:text="${kotlin}"></textarea>
27+
<!-- Slightly ashamed of this JavaScript/CSS but it works ¯\_(ツ)_/¯ -->
4128

29+
<body>
30+
<h1 class="title" id="home">Convert JSON to Kotlin Data Class</h1>
31+
<div class="j2kcontainer" style="background:#3F51B5">
32+
<form id="jsonForm" action="#" th:action="@{/}" th:object="${conversionForm}"
33+
method="post" onsubmit="return validateForm()">
34+
<textarea maxlength="10000" placeholder="Paste JSON here..." th:field="*{json}"></textarea>
4235
<p>
43-
<input id="copyBtn" type="button" value="Copy to Clipboard"
44-
onclick="copyToClipboard()" />
45-
<input type="button" value="Download" onclick="downloadAsFile()"/>
36+
<input class="button" type="reset" value="Reset"/>
37+
<input class="button" type="submit" value="Convert"/>
4638
</p>
39+
</form>
40+
</div>
41+
<h2 th:if="${kotlin != null}" class="title" id="results">Generated Kotlin Data Classes</h2>
42+
<div class="j2kcontainer" style="background:#4CAF50" th:if="${kotlin != null}">
43+
44+
<input type="hidden" id="filename" th:value="${filename}"/>
45+
<textarea id="kotlinText" th:text="${kotlin}"></textarea>
46+
47+
<p>
48+
<input class="button" id="copyBtn" type="button" value="Copy to Clipboard"
49+
onclick="copyToClipboard()"/>
50+
<input class="button" type="button" value="Download" onclick="downloadAsFile()"/>
51+
</p>
4752

48-
</div>
49-
<div class="j2kcontainer">
50-
<h2 id="about">About</h2>
51-
<p>TODO WORDS from README, link to blog post, github, twitter</p>
52-
</div>
53+
</div>
54+
<h2 class="title" id="about">About</h2>
55+
<div class="j2kcontainer" style="padding-top:0px;">
56+
<p>As you've probably guessed by now, this project automatically converts JSON to Kotlin source files.
57+
The <a href="https://github.com/fractalwrench/json-2-kotlin">tool itself</a> is implemented 100% in Kotlin,
58+
and makes heavy use of Square's excellent
59+
<a href="https://github.com/square/kotlinpoet">KotlinPoet</a> library.</p>
60+
<br></br>
61+
62+
<p>Read the blog post which covers how this multi-platform tool was written.</p> <!-- TODO link it! -->
63+
<p>View <a href="https://github.com/fractalwrench/json-2-kotlin">the source on Github</a> to grab the command line tool, or suggest improvements.</p>
64+
<p>Get in touch <a href="https://twitter.com/fractalwrench">on Twitter</a> if you have questions, comments, or simply enjoy high-quality cat gifs.</p>
5365
</div>
5466
<footer>
5567
<div>
@@ -81,8 +93,7 @@ <h2 id="about">About</h2>
8193

8294
<script type="text/javascript" th:if="${kotlin != null}">
8395
window.location = '#results'; // autoscroll to results
84-
8596
</script>
97+
8698
</body>
8799
</html>
88-
<!-- TODO GA -->

0 commit comments

Comments
 (0)