-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (182 loc) · 8.87 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
178
179
180
181
182
<!doctype html>
<html>
<head>
<title>Grade Helper – v1.2</title>
<link rel="stylesheet" href="resources/bootstrap-5.3.2-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="static/grade_helper.css">
</head>
<body>
<div class="container">
<div class="row">
<h1>Grade Helper</h1>
<h5>v1.2 – Requires Google Chrome.</h5>
</div>
<div class="row">
<!-- INPUT OCN CLIPS -->
<div class="col section app_input_ocn">
<h3>Add clips</h3>
<p>Add list of original camera negative (OCN) clips.</p>
<div class="container">
<div class="row">
<div class="col-12 input input_ocn">
<div id="app_input_ocn_droparea" class="droparea">
<form data-contenttype="ocn">
<input type="file" class="form-control" id="app_input_ocn_filepicker" data-contenttype="ocn" multiple>
<label for="app_input_ocn_filepicker" class="form-label">
<div>Drag & drop. Accepted file types: <span class="badge rounded-pill text-bg-light">ALE</span>
<span class="badge rounded-pill text-bg-light">CSV</span>
</div>
</label>
<div class="alert alert-warning input_file_warning" role="alert" id="app_input_ocn_warning" style="display:none;"></div>
</form>
</div>
<div class="input_ocn_filelist">
<ul class="list-group filelist_group" id="app_input_ocn_filelist"></ul>
</div>
<div class="filelist_toolbuttons">
<span id="app_input_ocn_filelist_count" class="">0 files</span> – <span id="app_input_ocn_filelist_removeall" class="link-primary cursor-hover" data-contenttype="ocn">Remove all</span>
</div>
</div>
</div>
</div>
</div>
<!-- INPUT GRADES -->
<div class="col section app_input_grades">
<h3>Add colour grades</h3>
<p>Add colour grades containing ASC SOP and SAT values.</p>
<div class="container">
<div class="row">
<div class="col-12 input input_grades">
<div id="app_input_grades_droparea" class="droparea">
<form data-contenttype="grades">
<input type="file" class="form-control" id="app_input_grades_filepicker" data-contenttype="grades" multiple>
<div class="alert alert-warning input_file_warning" role="alert" id="app_input_grades_warning" style="display:none;"></div>
<label for="app_input_grades_filepicker" class="form-label">
<div>Drag & drop. Accepted file types: <span class="badge rounded-pill text-bg-light">EDL</span>
<span class="badge rounded-pill text-bg-light">CCC</span>
<span class="badge rounded-pill text-bg-light">CDL</span>
<span class="badge rounded-pill text-bg-light">CSV</span>
</div>
</label>
</form>
</div>
<div class="filelist">
<ul class="filelist_group" id="app_input_grades_filelist"></ul>
</div>
<div class="filelist_toolbuttons">
<span id="app_input_grades_filelist_count" class="">0 files</span> – <span id="app_input_grades_filelist_removeall" class="link-primary cursor-hover" data-contenttype="grades">Remove all</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row my-2">
<div class="col section app_match_grades">
<div id="app_match_btn_match_auto" class="btn btn-primary">Auto match</div>
<div id="app_match_btn_match_clear_all" class="btn btn-outline-secondary">Clear</div>
</div>
</div>
<div class="container">
<div class="row g-3 mt-2">
<div class="col-12 section items" id="ocn_clips_section">
<h3>Clip table
<div class="float-end">
<span id="app_ocn_clips_statusinfo"></span>
<span> | </span>
<span id="app_match_statusinfo_count_of_matched_grades"></span>
</div>
</h3>
<div class="items_table_wrapper">
<table class="table items_table" id="app_ocn_clips_table">
<thead>
<tr>
<th class="col-plain">Name</th>
<th class="col-plain">Duration</th>
<th class="col-plain">Start TC</th>
<th class="col-graded"></th>
<th class="col-graded">Matched grade</th>
<th class="col-graded">Scene</th>
<th class="col-graded">Take</th>
<th class="col-graded">SOP</th>
<th class="col-graded">SAT</th>
</tr>
</thead>
<tbody id="app_ocn_clips_tbody"></tbody>
</table>
</div>
</div>
<div class="col-12 section items" id="grades_section">
<h3>Imported grades <div class="float-end" id="app_grades_statusinfo"></div>
</h3>
<div class="items_table_wrapper">
<table class="table items_table" id="app_grades_table">
<thead>
<tr>
<th class="col-graded">Grade name</th>
<th class="col-plain">Start TC</th>
<th class="col-plain">Scene</th>
<th class="col-plain">Take</th>
<th class="col-plain">SOP</th>
<th class="col-plain">SAT</th>
</tr>
</thead>
<tbody id="app_grades_tbody"></tbody>
</table>
</div>
</div>
</div>
<div class="row export my-3">
<div class="col section">
<div class="row">
<div class="col">
<h3 class="mb-3">Export
<div class="btn-group app_output_items_type_buttons" role="group">
<input type="radio" class="btn-check" name="app_output_items_type_button" id="app_output_items_type_ocn_clips" data-inputtype="clips" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="app_output_items_type_ocn_clips">Clip table</label>
<input type="radio" class="btn-check" name="app_output_items_type_button" id="app_output_items_type_grades" data-inputtype="grades" autocomplete="off">
<label class="btn btn-outline-primary" for="app_output_items_type_grades">Grades only</label>
</div>
</h3>
<div class="row g-3 align-items-center">
<div class="col-1-5">
<label for="app_output_filename" class="form-text">Filename prefix</label>
</div>
<div class="col-6">
<input class="form-control" type="text" id="app_output_filename">
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-1-5">
<label class="form-text">Download</label>
</div>
<div class="col-6 d-flex export_buttons">
<div class="btn btn-outline-primary app_output_btn" data-inputtypes="clips,grades" data-outputfiletype="ccc">CCC</div>
<div class="btn btn-outline-primary app_output_btn" data-inputtypes="clips,grades" data-outputfiletype="cdl-multiple">CDLs</div>
<div class="btn btn-outline-primary app_output_btn" data-inputtypes="clips,grades" data-outputfiletype="cdl-single">CDL (single)</div>
<div class="btn btn-outline-primary app_output_btn" data-inputtypes="clips" data-outputfiletype="edl">EDL</div>
<div class="btn btn-outline-primary app_output_btn" data-inputtypes="clips" data-outputfiletype="edl+ccc">EDL + CCC</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col section log">
<h3>Log</h3>
<div class="log-output" id="app_log_output"></div>
</div>
</div>
</div>
<script type="text/javascript" src="lib/uuidv4.min.js"></script>
<script type="text/javascript" src="lib/papaparse.min.js"></script>
<script type="text/javascript" src="lib/lib_ale_cdl_edl/lib/timecode.js"></script>
<script type="text/javascript" src="lib/lib_ale_cdl_edl/lib/cdl.js"></script>
<script type="text/javascript" src="lib/lib_ale_cdl_edl/lib/ale.js"></script>
<script type="text/javascript" src="lib/lib_ale_cdl_edl/lib/edl.js"></script>
<script type="text/javascript" src="resources/bootstrap-5.3.2-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/grade_helper.js"></script>
</body>
</html>