-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (164 loc) · 10.6 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Github to Latex</title>
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/shaheenhyderk/slideon@master/slideon.css"/>
</head>
<body class="bg-gradient-to-t from-gray-800 via-gray-900 to-black p-5">
<main>
<section>
<div class="container">
<div class="row">
<div class="col-12">
<div class="p-8">
<h1 class="pt-4 pb-2 text-slate-200 text-4xl text-center font-bold">Code-2-Doc</h1>
<h1 class="pb-4 text-slate-400 text-xl text-center font-semibold">Rapidly transform code from GitHub repository to custom template</h1>
<div class="d-flex gap-3 justify-content-center">
<a class="github-button" href="https://github.com/abdulhakkeempa/github-to-latex" data-color-scheme="no-preference: dark; light: light; dark: dark;" data-icon="octicon-star" data-size="large" aria-label="Star abdulhakkeempa/github-to-latex on GitHub">Star</a>
<a class="github-button" href="https://github.com/abdulhakkeempa/github-to-latex/issues" data-color-scheme="no-preference: dark; light: light; dark: dark;" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue abdulhakkeempa/github-to-latex on GitHub">Issue</a>
<a class="github-button" href="/docs" data-color-scheme="no-preference: dark; light: light; dark: dark;" data-size="large" aria-label="Issue abdulhakkeempa/github-to-latex on GitHub">Docs</a>
</div>
<!-- Place this tag where you want the button to render. -->
</div>
<div class="">
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<form id="record-form">
<div class="mb-3">
<label for="title" class="form-label text-slate-200 text-base">Title</label>
<input type="text" class="form-control text-white bg-slate-800" id="title" name="title" placeholder="FLOYD WARSHALL'S ALGORITHM" required>
</div>
<div class="mb-3">
<label for="aim" class="form-label text-slate-200 text-base">Aim</label>
<textarea type="text" class="form-control text-white bg-slate-800" id="aim" name="aim" placeholder="Program to implement Floyd Warshall's Algorithm" rows="10"></textarea required>
</div>
<div class="mb-3">
<label for="github_username" class="form-label text-slate-200 text-base">Github Username</label>
<input type="text" class="form-control text-white bg-slate-800" id="github_username" onchange="fetchRepoNames(this.value,1)" placeholder="abdulhakkeempa" name="github_username" required>
</div>
<div class="col-12 mb-3 d-md-flex align-items-center">
<div class="col-12 col-md-6">
<label for="github_repo" class="form-label text-slate-200 text-base">Github Repository Name</label>
<select class="form-select text-white bg-dropdown" aria-label= "Default select example" id="github_repo" name="github_repo" onchange="fetchRepoFiles(this.value)" required data-bs-theme="dark">
<option value="0" selected>Your Github Repository</option>
</select>
</div>
<div class="col-12 col-md-6">
<button class="btn btn-secondary mt-2 ms-0 ms-md-2 mt-md-4 w-100" onclick="incrementPageValues(event)">
Next Repositories
</button>
</div>
</div>
<div class="mb-3 col-12 text-secondary">
If you don't find your repository on the dropdown, click the Next Repository button.
</div>
<div class="mb-3">
<label for="folder_structure" class="form-label text-slate-200 text-base">File Structure</label>
<select class="form-select text-white bg-dropdown" aria-label="Default select example" id="folder_structure" name="folder_structure" required data-bs-theme="dark">
<option value="0" selected>Your File</option>
</select>
</div>
<div class="flex justify-center gap-2">
<button type="submit" id="submit-button" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 shadow-lg transition duration-300 rounded-md">Generate</button>
<button type="" id="form-clear-button" class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 shadow-lg transition duration-300 rounded-md">Clear</button>
</div>
</form>
</div>
<div class="col-12 col-md-6">
<label for="output" class="form-label text-slate-200 text-base">Document Code</label>
<div id="output-code">
<textarea name="output" id="output" rows="25" class="form-control w-100 text-white bg-slate-800 mb-4" readonly></textarea>
<button id="copy-icon" title="Copy"><i class="bi bi-clipboard text-white h6"></i></button>
<button id="clear-icon" title="Clear"><i class="bi bi-eraser-fill text-white h6"></i></button>
<button id="settings-icon" title="Settings"><i class="bi bi-sliders text-white h6"></i></button>
</div>
</div>
<div class="col-12">
<div class="modal fade modal-style" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content p-2">
<div class="modal-header pb-2">
<h1 class="modal-title fs-5 text-white" id="staticBackdropLabel">Add your custom template</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body pt-1">
<div class="col-12">
<!-- <div class="alert alert-warning alert-dismissible" id="modalAlert" role="alert">
A simple success alert—check it out!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> -->
<!-- </div> -->
<div id="modalAlert"></div>
<form action="" id="custom-latex">
<div class="pt-2 pb-2">
<div class="form-check">
<input class="form-check-input" type="radio" name="use_custom_code" id="flexRadioDefault1" value="false" checked>
<label class="form-check-label text-white" for="use_custom_code">
Predefined Template
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="use_custom_code" id="flexRadioDefault2" value="true">
<label class="form-check-label text-white" for="use_custom_code">
Custom Template
</label>
</div>
</div>
<h6 class="text-white" >Available Variables</h6>
<div class="d-flex gap-2 pb-2" id="available-variables">
<button class="btn" onclick="event.preventDefault(); insertVariable('${title}')">title</button>
<button class="btn" onclick="event.preventDefault(); insertVariable('${aim}')">aim</button>
<button class="btn" onclick="event.preventDefault(); insertVariable('${data}')">data</button>
</div>
<div class="mb-3">
<label for="latex_custom" class="form-label text-white">Your Code</label>
<textarea name="latex_custom" id="latex_custom" cols="30" class="form-control text-white" rows="10"></textarea>
</div>
<div class="d-flex justify-content-center gap-2">
<input type="submit" class="btn btn-success" value="Save">
<input type="button" class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 shadow-lg transition duration-300 rounded-md" data-bs-dismiss="modal" value="Close">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- alert toast -->
<div class="col-12">
<div class="position-fixed top-0 end-0 p-3">
<div class="toast align-items-center text-bg-primary border-0" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body" id="toast-content">
Blah Blah
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>