forked from ceeoinnovations/prev-ceeoinnovations
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCreate.html
254 lines (198 loc) · 9.24 KB
/
Create.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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html>
<head>
<title>Markdown Creator</title>
<link rel="stylesheet preload" as="style" href="web/mycss/create.css">
</head>
<body style="align-items:center;">
<div style="width:100%;">
<div style="background-color:#5fd938;width: 50%; margin:0px auto; text-align: center;"> <h2>Markdown Creator</h2></div>
<div style=" background-color:#5fd938;padding-top:30px; padding-bottom: 30px;;max-width:1200px; margin:0px auto; text-align: center;">
To create a project page in ceeoinnovations site you will need two things. </br></br> 1. <b> project markdown file </b> </br> 2. <b>project assets folder </b></br>
</div>
</br>
<div style=" background-color:#aaaaaa; padding-top:30px; padding-bottom: 30px;;max-width:1200px; margin:0px auto; text-align: left;">
<h2 style="padding-left:20px;"> Creating markdown file </h2>
<p style="padding-left:20px;">Fill out the form below with accurate information and hit DOWNLOAD MARKDOWN button.
A partially filled markdown file will download.</p>
</div>
<div style=" display:flex; margin:auto;max-width:1200px">
<div style="flex: 1;max-width:800px;padding: 20px;border: 2px solid red;">
<div class="all">
<form style="text-align: left; align-items: left; margin:10px;" id="form" onsubmit="return false;">
<h2 style="text-align: center;">For Thumbnail</h2> <br><br><br>
<div class="box"><input class="fill" type="text" id="title" placeholder="Project Title" /> <br><br> </div>
<div class="box"><label for="Draft"> Draft</label><input type="checkbox" id="Draft" name="Draft" value="True"><br><br> </div>
<div class="box"><label for="Featured"> Featured</label><input type="checkbox" id="Featured" name="Featured" value="Truedd"> <br><br><br> </div>
<div class="box"><input class="fill" type="text" id="date" placeholder="mm-dd-yyyy (make sure you get the format right)" /> <br><br> </div>
<div class="box"><textarea class="boxtextarea" id="description" maxlength="40" >Description</textarea> <br><br> </div>
<div class="box" id="countWordD"></div>
<div class="box"><input class="fill" type="text" id="author" placeholder="Author" /><br><br> </div>
<div class="box" >
Check categories that apply to your project: </br></br>
<div id="box1">
<label for="catetory1"> SPIKE Prime</label><input type="checkbox" id="catetory1" name="Featured" value="SPIKE Prime"> <br>
<label for="catetory2"> 3D Printing</label><input type="checkbox" id="catetory2" name="Featured" value="3D Printing"> <br>
<label for="catetory3"> EV3/NXT</label><input type="checkbox" id="catetory3" name="Featured" value="EV3/NXT"> <br>
<label for="catetory1"> Robotics</label><input type="checkbox" id="catetory1" name="Featured" value="Robotics"> <br>
<label for="catetory2"> Makerspaces</label><input type="checkbox" id="catetory2" name="Featured" value="Makerspaces"> <br>
<label for="catetory3"> LabVIEW</label><input type="checkbox" id="catetory3" name="Featured" value="LabVIEW"> <br>
</div>
<br><br>
</div>
<h2 style="text-align: center;">For Project Page:</h2> </br></br>
<div class="box" ><input class="fill" type="text" id="url" placeholder="URL" /><br><br> </div>
<div class="box" ><input class="fill" type="text" id="linkname" placeholder="URL Name" /> <br><br> </div>
<div class="box"><input class="fill" type="text" id="header" placeholder="Header" /> <br><br> </div>
<div class="box"><input class="fill" type="text" id="subheader" placeholder="Sub Header" /> <br><br> </div>
<div class="box"><textarea class="boxtextarea" id="abstract" maxlength="300" >Synopsis of Project </textarea> <br><br> </div>
<div class="box" id="countWordS"></div>
Check sections you want to create:</br></br>
<div class="box"><label for="FreeWriteSection"> Free Write Section</label><input type="checkbox" id="FWS" name="FWS" value="True"><br><br> </div>
<div class="box"><label for="Video"> Video </label><input type="checkbox" id="Vid" name="Vid" value="True"><br><br> </div>
<div class="box"><label for="Documents"> Document </label><input type="checkbox" id="Doc" name="Doc" value="True"><br><br> </div>
<div > <input style="position:relative; top:70%; height:40px ;width:100%; background-color: #5fd938;" type="SUBMIT" value="DOWNLOAD MAKDOWN" onclick="createMarkdown();" /></div>
</form>
</div>
</div >
<div style="width: 40%;max-width: 400px;float: left;padding: 00px;border: 2px solid red;">
<div>
<h2 style="text-align: center;">Thumbnail</h2>
<img style="width: 100%; max-width: 400px" alt="Thumbnail" src="web/img/thumbnail.png"></br></br>
<h2 style="text-align: center;">Project Page</h2>
<img style="width: 100%; max-width: 400px" alt="Thumbnail" src="web/img/post.png">
</div>
</div>
</div>
</br>
<div style=" background-color:#aaaaaa; padding-top:30px; padding-bottom: 30px;;max-width:1200px; margin:0px auto; text-align: left;">
<h2 style="padding-left:20px;"> Project Assets folder </h2>
<p style="padding-left:20px;">
<ol>
<li> Download the zip file by clicking the image below.</li>
<li> Extract the zip file and rename the folder with your <i>Project Title</i> without spaces For example if you project tile is Create Game, your folder should be CreateGame.</li>
<li> Replace the existing files with files from your project.</li>
<li> Add your assets (images, pdfs, etc.) to the folder.</li>
<li> Add the folder to _projects/project_assests folder in GitHub. Simply go to tuftsceeo github, and open projects_assests folder inside _projects folder and click and drag the folder to the GitHub WebUI. </li>
</ol></p>
</div>
<div style=" padding-top:30px; padding-bottom: 30px;;max-width:1200px; margin:auto; align-items:center;border: 2px solid red;">
<a href="project.zip" download="project"> <img style="width: 100%; max-width: 400px;" src="web/img/download.png" alt="download"></a>
</div>
<script type="text/javascript">
var textContent1 = document.getElementById("description");
var showWordCount1 = document.getElementById("countWordD");
textContent1.addEventListener("input", function(){
showWordCount1.innerHTML = (
"Characters Remaining: "+ (40 - this.value.length) + "</br></br>"
);
}, false);
var textContent2 = document.getElementById("abstract");
var showWordCount2 = document.getElementById("countWordS");
textContent2.addEventListener("input", function(){
showWordCount2.innerHTML = (
"Characters Remaining: "+ (300 - this.value.length) + "</br></br>"
);
}, false);
function createMarkdown() {
Title = document.getElementById("title").value;
Foldername=Title.replace(/\s/g, "");
Description = document.getElementById("description").value;
Author = document.getElementById("author").value;
_date = document.getElementById("date").value;
URL = document.getElementById("url").value;
LinkName = document.getElementById("linkname").value;
Draft = document.getElementById('Draft').checked;
Featured = document.getElementById("Featured").checked;
var container = document.querySelector("#box1");
var chks = container.querySelectorAll('input[type="checkbox"]');
var checked = [];
for(var i = 0; i < chks.length; i++){
if(chks[i].checked){
checked.push('"'+chks[i].value+'"')
}
}
Header = document.getElementById("header").value;
Subheader = document.getElementById("subheader").value;
Abstract = document.getElementById("abstract").value;
Free_Write="";
DocumentSection="";
VideoSection="";
if(document.getElementById("FWS").checked){
Free_Write=
`
<!--document creates a grid of documentss--------------------->
<div class="free_write" markdown="1">
<!-- this is a free write section. Use Markdown language -->
 <!-- This is how you can insert an image-->
{:.left}{:.right} <!-- This is how you can insert two images side by side-->
<!--try using {.half} to make the image appear smaller-->
</div>
`
}
if(document.getElementById("Doc").checked){
DocumentSection=
`
<div class="document" markdown="1">
[Poster](` + Foldername + `/poster.pdf)
</div>
`
}
if(document.getElementById("Vid").checked){
VideoSection=
`
<div class="video_text_overlay" markdown="1">
[TITLE OF VIDEO](--- paste a youtu.be link here--)
# YOUR VIDEO TITLE
## YOUR VIDEO SUBTITLE
THIS IS WHERE YOU CAN WRITE A DESCRIPTION ABOUT YOUR VIDEO.
</div>
`
}
var front_matter =
`---
layout: post
title: ` + Title +
`
description: ` + Description +
`
displayimg: ` + Foldername + `/cover.jpg` +
`
categories: [` + checked + "]" +
`
authors: [` + Author + "]" +
`
featured: ` + Featured +
`
date: ` + _date +
`
linker: ` + URL +
`
linkname: ` + LinkName +
`
draft: ` + Draft +
`
---
<div class="image_text_overlay" markdown="1">
# ` + Header + `\n## ` + Subheader + `\n` + Abstract +
`
</div>
`
text=front_matter + Free_Write + VideoSection + DocumentSection;
console.log(text);
blob = new Blob([text], { type: 'text/plain' }),
anchor = document.createElement('a');
filename= Foldername + ".markdown";
anchor.download = filename;
anchor.href = (window.webkitURL || window.URL).createObjectURL(blob);
anchor.dataset.downloadurl = ['text/plain', anchor.download, anchor.href].join(':');
anchor.click();
}
function sendData() {
console.log(dd);
}
</script>
</div>
</body>
</html>