-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgerate.html
280 lines (240 loc) · 18.7 KB
/
gerate.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
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<html>
<head>
<meta charset="UTF-8">
<title>Code2Slide</title>
<meta name="description" content="">
<meta name="keywords" content="codigo, slide, programção">
<meta name="author" content="Luis Araujo">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- and it's easy to individually load additional languages -->
<link href="css/style_template.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="/images/favicon.png">
</style>
</head>
<body>
<div id="modal-code">
<pre><code class="code language-py hljs language-python" data-highlighted="yes"><span class="hljs-keyword">def</span> <span class="hljs-title function_">printState</span>():
<span class="hljs-built_in">print</span>(<span class="hljs-string">"o seu estado é"</span>, mystate)</code>
</pre>
</div>
<div>
<div id="overground" class="hidden bg-black absolute w-full h-full z-50 opacity-80"></div>
<div id="text-over" class="hidden z-50 absolute p-4 text-center transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<button id="btn-back-print" class="px-4 m-2 text-xl z-90 text-white transition-colors duration-150 rounded-lg focus:shadow-outline hover:text-gray-200 border">Click to back</button>
</div>
<header id="nav" class="bg-white">
<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-10 w-auto" src="images/logo.png" alt="">
</a>
<button id="btn-print-slide" class="h-8 px-4 m-2 text-sm hidden text-indigo-100 transition-colors duration-150 bg-black rounded-lg focus:shadow-outline hover:bg-white hover:text-black">Print Slide</button>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a id="btn-open-nav" href="#" class="text-sm font-semibold leading-6 text-gray-900">Setting <span aria-hidden="true">→</span></a>
</div>
</nav>
<div class="head mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto w-full lg:mx-0">
<!-- <h2 class="text-4xl font-bold tracking-tight text-black sm:text-6xl">Code2Slide</h2>-->
<p class="mt-0 text-lg leading-8 text-gray-500">A translator of code to slide simple. Use comments in code to create slides for your classes. Look <a href="doc.html">more</a></p>
</div>
</div>
</header>
<!-- control button -->
<div id="btn-back-slide" class="btn-controlslide">
Back
</div>
<div id="btn-next-slide" class="btn-controlslide">
Next
</div>
<!-- Sidebar -->
<div id="navsetting" class="fixed hidden top-0 right-0 h-full w-80 bg-white text-black p-6 z-50 shadow-md">
<div class="flex items-center space-x-2 mb-10">
<h2 class="text-2xl mb-0">Setting</h2>
<i id="btn-save-color" class="fa fa-times text-gray-700 cursor-pointer"></i>
</div>
<!-- Input para colorTitle -->
<div class="flex items-center mb-4">
<input type="color" id="inp-colortitle" class="opacity-0 block p-0" onchange="updatePreview('inp-colortitle', 'previewTitle')" /><br>
<div id="previewTitle" class="relative right-10 w-8 h-8 ml-4 border-2 border-gray-300 rounded cursor-pointer" style="background-color: #ffffff;" onclick="triggerInput('inp-colortitle')"></div>
<label class="mb-2 block relative right-5">Title</label>
</div>
<!-- Input para colorBg -->
<div class="flex items-center mb-4">
<input type="color" id="inp-colorbg" class="opacity-0 block p-0" onchange="updatePreview('inp-colorbg', 'previewBg')" />
<div id="previewBg" class="relative right-10 w-8 h-8 ml-4 border-2 border-gray-300 rounded cursor-pointer" style="background-color: #ffffff;" onclick="triggerInput('inp-colorbg')"></div>
<label class="mb-2 block relative right-5">Background</label>
</div>
<!-- Input para colorBgDesc -->
<div class="flex items-center mb-4">
<input type="color" id="inp-colorbgdesc" class="opacity-0 block p-0" onchange="updatePreview('inp-colorbgdesc', 'previewBgDesc')" />
<div id="previewBgDesc" class="relative right-10 w-8 h-8 ml-4 border-2 border-gray-300 rounded cursor-pointer" style="background-color: #ffffff;" onclick="triggerInput('inp-colorbgdesc')"></div>
<label class="mb-2 block relative right-5">Bg Description</label>
</div>
<!-- Input para colorBgFile -->
<div class="flex items-center mb-4">
<input type="color" id="inp-colorbgfile" class="opacity-0 block p-0" onchange="updatePreview('inp-colorbgfile', 'previewBgFile')" />
<div id="previewBgFile" class="relative right-10 w-8 h-8 ml-4 border-2 border-gray-300 rounded cursor-pointer" style="background-color: #ffffff;" onclick="triggerInput('inp-colorbgfile')"></div>
<label class="mb-2 block relative right-5">Bg File Icon</label>
</div>
<!-- Input para colorFont -->
<div class="flex items-center mb-4">
<input type="color" id="inp-colorfont" class="opacity-0 block p-0" onchange="updatePreview('inp-colorfont', 'previewFont')" />
<div id="previewFont" class="relative right-10 w-8 h-8 ml-4 border-2 border-gray-300 rounded cursor-pointer" style="background-color: #ffffff;" onclick="triggerInput('inp-colorfont')"></div>
<label class="mb-2 block relative right-5">Font</label>
</div>
<!-- Input para colorFontFile -->
<div class="flex items-center mb-4">
<input type="color" id="inp-colorfontfile" class="opacity-0 block p-0" onchange="updatePreview('inp-colorfontfile', 'previewFontFile')" />
<div id="previewFontFile" class="relative right-10 w-8 h-8 ml-4 border-2 border-gray-300 rounded cursor-pointer" style="background-color: #ffffff;" onclick="triggerInput('inp-colorfontfile')"></div>
<label class="mb-2 block relative right-5">Font File</label>
</div>
<div class="flex items-center mb-4"></div>
<div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full">
<h1 class="font-bold mb-4 text-center">Background Imagem</h1>
<input type="file" id="imageInput" accept="image/*" class="mb-4 w-full border-2 border-gray-300 p-2 rounded-lg">
<i id="btn-remove-bg" class="fa fa-times text-gray-700 cursor-pointer"></i>
<div id="preview" class="w-full h-40 flex items-center justify-center bg-gray-200 rounded-lg overflow-hidden">
<span class="text-gray-500">Preview da Imagem</span>
</div>
</div>
</div>
</div>
<!-- component -->
<div id="interface-loadfile" class="bg-white p7 rounded w-9/12 h-2/4 mx-auto">
<div class="w-full p-4 bg-white shadow-md rounded-md">
<form class="space-y-4">
<div class="flex space-x-4">
<div class="w-1/2">
<label for="title" class="block text-sm font-medium text-gray-700">Title *</label>
<input type="text" id="maintitle" name="title" placeholder="Tap the title"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
<div class="w-1/2">
<label for="author" class="block text-sm font-medium text-gray-700">Author *</label>
<input type="text" id="nameauthor" name="author" placeholder="Tap you name"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
</div>
<div class="flex space-x-4">
<div class="w-1/2">
<label for="course" class="block text-sm font-medium text-gray-700">Course</label>
<input type="text" id="namecourse" name="course" placeholder="Tap course name"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
<div class="w-1/2">
<label for="institute" class="block text-sm font-medium text-gray-700">Institute</label>
<input type="text" id="nameinstitute" name="institute" placeholder="Tap you institute"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
</div>
</form>
</div>
<div x-data="dataFileDnD()" class="relative h-200 flex flex-col p-4 text-gray-400 border border-gray-200 rounded">
<div x-ref="dnd"
class="relative h-full flex flex-col text-gray-400 border border-gray-200 border-dashed rounded cursor-pointer">
<input accept="*" type="file" multiple
class="absolute inset-0 z-50 w-full p-0 m-0 outline-none opacity-0 cursor-pointer"
@change="addFiles($event)"
@dragover="$refs.dnd.classList.add('border-blue-400'); $refs.dnd.classList.add('ring-4'); $refs.dnd.classList.add('ring-inset');"
@dragleave="$refs.dnd.classList.remove('border-blue-400'); $refs.dnd.classList.remove('ring-4'); $refs.dnd.classList.remove('ring-inset');"
@drop="$refs.dnd.classList.remove('border-blue-400'); $refs.dnd.classList.remove('ring-4'); $refs.dnd.classList.remove('ring-inset');"
title="" />
<div class="flex h-full flex-col items-center justify-center py-10 text-center">
<svg class="w-6 h-6 mr-1 text-current-50" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<p class="m-0">Drag your files here or click in this area.</p>
</div>
</div>
<template x-if="files.length > 0">
<div class="grid grid-cols-2 gap-4 md:grid-cols-6" @drop.prevent="drop($event)"
@dragover.prevent="$event.dataTransfer.dropEffect = 'move'">
<template x-for="(_, index) in Array.from({ length: files.length })">
<div class="relative flex flex-col items-center overflow-hidden text-center bg-gray-100 border rounded cursor-move select-none"
style="padding-top: 100%;" @dragstart="dragstart($event)" @dragend="fileDragging = null"
:class="{'border-blue-600': fileDragging == index}" draggable="true" :data-index="index">
<button class="absolute top-0 right-0 z-50 p-1 bg-white rounded-bl focus:outline-none" type="button" @click="remove(index)">
<svg class="w-4 h-4 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
<template x-if="files[index].type.includes('python')">
<svg class="absolute w-12 h-12 text-gray-400 fill-gray-400 transform top-1/2 -translate-y-2/3">
<rect x="10" y="0" width="20" height="40" rx="10" ry="5"/>
<rect x="0" y="10" width="40" height="20" rx="5" ry="10"/>
<circle cx="14.5" cy="5" r="1.85" fill="white"/>
<circle cx="25.5" cy="35" r="1.85" fill="white"/>
<line x1="10" y1="9.5" x2="20" y2="9.5" stroke="white"/>
<line x1="20" y1="30.5" x2="30" y2="30.5" stroke="white"/>
<path d="m 9.5,30 c 0,-10 2.5,-10 10,-10 8.5,0 11,0 11,-10" stroke="white" fill="none"/>
</svg>
</template>
<template x-if="files[index].type.includes('javascript')">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
<path d="M 6.667969 4 C 5.207031 4 4 5.207031 4 6.667969 L 4 43.332031 C 4 44.792969 5.207031 46 6.667969 46 L 43.332031 46 C 44.792969 46 46 44.796875 46 43.332031 L 46 6.667969 C 46 5.207031 44.796875 4 43.332031 4 Z M 6.667969 6 L 43.332031 6 C 43.703125 6 44 6.296875 44 6.667969 L 44 43.332031 C 44 43.703125 43.703125 44 43.332031 44 L 6.667969 44 C 6.296875 44 6 43.703125 6 43.332031 L 6 6.667969 C 6 6.296875 6.296875 6 6.667969 6 Z M 23 23 L 23 35.574219 C 23 37.503906 22.269531 38 21 38 C 19.671875 38 18.75 37.171875 18.140625 36.097656 L 15 38 C 15.910156 39.925781 18.140625 42 21.234375 42 C 24.65625 42 27 40.179688 27 36.183594 L 27 23 Z M 35.453125 23 C 32.046875 23 29.863281 25.179688 29.863281 28.042969 C 29.863281 31.148438 31.695313 32.617188 34.449219 33.789063 L 35.402344 34.199219 C 37.140625 34.960938 38 35.425781 38 36.734375 C 38 37.824219 37.171875 38.613281 35.589844 38.613281 C 33.707031 38.613281 32.816406 37.335938 32 36 L 29 38 C 30.121094 40.214844 32.132813 42 35.675781 42 C 39.300781 42 42 40.117188 42 36.683594 C 42 33.496094 40.171875 32.078125 36.925781 30.6875 L 35.972656 30.28125 C 34.335938 29.570313 33.625 29.109375 33.625 27.964844 C 33.625 27.039063 34.335938 26.328125 35.453125 26.328125 C 36.550781 26.328125 37.253906 26.792969 37.90625 27.964844 L 40.878906 26.058594 C 39.625 23.84375 37.878906 23 35.453125 23 Z"></path>
</svg>
</template>
<template x-if="files[index].type.includes('text/')">
<svg class="absolute w-12 h-12 text-gray-400 fill-gray-400 transform top-1/2 -translate-y-2/3">
<g id="xxx-file">
<path class="cls-1" d="M325,105H250a5,5,0,0,1-5-5V25a5,5,0,0,1,10,0V95h70a5,5,0,0,1,0,10Z"/>
<path class="cls-1" d="M300,380H100a30,30,0,0,1-30-30V50a30,30,0,0,1,30-30H250a5,5,0,0,1,3.54,1.46l75,75A5,5,0,0,1,330,100V350A30,30,0,0,1,300,380ZM100,30A20,20,0,0,0,80,50V350a20,20,0,0,0,20,20H300a20,20,0,0,0,20-20V102.07L247.93,30Z"/>
<path class="cls-1" d="M275,180H125a5,5,0,0,1,0-10H275a5,5,0,0,1,0,10Z"/>
<path class="cls-1" d="M275,230H125a5,5,0,0,1,0-10H275a5,5,0,0,1,0,10Z"/>
<path class="cls-1" d="M275,280H125a5,5,0,0,1,0-10H275a5,5,0,0,1,0,10Z"/>
<path class="cls-1" d="M200,330H125a5,5,0,0,1,0-10h75a5,5,0,0,1,0,10Z"/>
</g>
</svg>
</template>
<template x-if="files[index].type.includes('java') || files[index].type === ''">
<svg class="absolute w-12 h-12 text-gray-400 fill-gray-400 transform top-1/2 -translate-y-2/3">
<path d="M11.622 24.74s-1.23.748.855.962c2.51.32 3.847.267 6.625-.267a10.02 10.02 0 0 0 1.763.855c-6.25 2.672-14.16-.16-9.244-1.55zm-.8-3.473s-1.336 1.015.748 1.23c2.725.267 4.862.32 8.55-.427a3.26 3.26 0 0 0 1.282.801c-7.534 2.244-15.976.214-10.58-1.603zm14.747 6.09s.908.748-1.015 1.336c-3.58 1.07-15.014 1.39-18.22 0-1.122-.48 1.015-1.175 1.7-1.282.695-.16 1.07-.16 1.07-.16-1.23-.855-8.175 1.763-3.526 2.51 12.77 2.084 23.296-.908 19.983-2.404zM12.2 17.633s-5.824 1.39-2.084 1.87c1.603.214 4.755.16 7.694-.053 2.404-.214 4.81-.64 4.81-.64s-.855.374-1.443.748c-5.93 1.55-17.312.855-14.052-.748 2.778-1.336 5.076-1.175 5.076-1.175zm10.42 5.824c5.984-3.1 3.206-6.09 1.282-5.717-.48.107-.695.214-.695.214s.16-.32.534-.427c3.794-1.336 6.786 4.007-1.23 6.09 0 0 .053-.053.107-.16zm-9.83 8.442c5.77.374 14.587-.214 14.8-2.94 0 0-.427 1.07-4.755 1.87-4.916.908-11.007.8-14.587.214 0 0 .748.64 4.542.855z" />
<path d="M18.996.001s3.313 3.366-3.152 8.442c-5.183 4.114-1.175 6.465 0 9.137-3.046-2.725-5.236-5.13-3.74-7.373C14.294 6.893 20.332 5.3 18.996.001zm-1.7 15.335c1.55 1.763-.427 3.366-.427 3.366s3.954-2.03 2.137-4.542c-1.656-2.404-2.94-3.58 4.007-7.587 0 0-10.953 2.725-5.717 8.763z" />
</svg>
</template>
<div class="absolute bottom-0 left-0 right-0 flex flex-col p-2 text-xs bg-white bg-opacity-50">
<span class="w-full font-bold text-gray-900 truncate"
x-text="files[index].name">Loading</span>
<span class="text-xs text-gray-900" x-text="humanFileSize(files[index].size)">...</span>
</div>
<div class="absolute inset-0 z-40 transition-colors duration-300" @dragenter="dragenter($event)"
@dragleave="fileDropping = null"
:class="{'bg-blue-200 bg-opacity-80': fileDropping == index && fileDragging != index}">
</div>
</div>
</template>
</div>
</template>
</div>
<button id="btn-create-slide" class="bg-blue-500 mb-10 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-6 rounded">
Criar Slide
</button>
</div>
<div id="codeslide">
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<script src="https://unpkg.com/create-file-list"></script>
<script src="js/navSlide.js"></script>
<script src="js/parser.js"></script>
<script src="js/printSlide.js"></script>
<script src="js/saveBackground.js"></script>
<script src="js/setSettings.js"></script>
<script src="js/showSlide.js"></script>
<script src="js/updateFile.js"></script>
<script src="js/mainGerate.js"></script>
</body>
</html>