diff options
Diffstat (limited to 'templates/editor.html')
| -rw-r--r-- | templates/editor.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/templates/editor.html b/templates/editor.html new file mode 100644 index 0000000..b6b7130 --- /dev/null +++ b/templates/editor.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<html style="height:100%"> + <head> + <title>Photocosm - Editor</title> + <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico"> + + <link rel="stylesheet" href="{{ url_for('static', filename='css/leaflet.css') }}" + integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" + crossorigin=""/> + <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}"/> + <script src="{{ url_for('static', filename='js/leaflet.js') }}" + integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" + crossorigin=""></script> + <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script> + <!-- <script src="{{ url_for('static', filename='js/utils.js') }}"></script> --> + <script src="{{ url_for('static', filename='js/editor.js') }}"></script> + <link rel="stylesheet" href="{{ url_for('static', filename='css/navbar.css') }}"> + <link rel="stylesheet" href="{{ url_for('static', filename='css/editor.css') }}"> + </head> + + <body> + <div onclick="close_media_preview()" id="media-preview-modal" class="modal"> + <img class="modal-content" id="modal-img"> + <video class="modal-content" id="modal-video"></video> + </div> + <div id="share-modal" class="modal"> + <div id="share-box" class="share-box"> + <p style="margin-top:5px; margin-bottom:5px; margin-left:10px;">Sharing options</p> + <hr style="width: 100%; border-top: 3px double lightgray; margin:0;"> + <div> + <label style="margin-left: 10px" for="visibility-dropdown">Visibility: </label> + <select onchange="update_visibility()" id="visibility-dropdown"> + <option value="public">Public</option> + <option value="private">Private</option> + </select> + </div> + <div class="user-share-section " id="shared-users"> + <!-- shared users --> + </div> + <div style="margin:10px; display:flex; flex-direction:row; padding:10px;"> + <input style="flex:1; margin-right:10px;" id="share-email" placeholder="<user@email.com>"> + <select style="margin-right:10px;" id="share-permissions"> + <option value="viewer">Viewer</option> + <option value="editor">Editor</option> + </select> + <button onclick="add_shared_user()">Share</button> + </div> + </div> + </div> + <div id="collection-modal" class="modal"> + <div id="collection-box" class="collection-box"> + <p style="margin-top:5px; margin-bottom:5px; margin-left:10px;">Collection options</p> + <hr style="width: 100%; border-top: 3px double lightgray; margin:0"> + <div style="display:grid; grid-template-columns: 30% 70%; margin:15px"> + <label for="collection-title-field">Title: </label> <input onblur="collection_info_updated('title')" id="collection-title-field"> + <label for="collection-subtitle-field">Subtitle: </label> <input onblur="collection_info_updated('subtitle')" id="collection-subtitle-field"> + <label for="collection-info-field">Information: </label> <input onblur="collection_info_updated('info')" id="collection-info-field"> + </div> + </div> + </div> + <p style="display:none" id="collection_id">{{ collection_id }}</p> + <div class="topnav"> + <a onclick="open_collection_modal()" class="collection-title" id="collection-title"></a> + <a onclick="open_share_modal()">Share</a> + <a href="/viewer?collection={{ collection_id }}">Viewer</a> + <a class="split" href="/">Home</a> + </div> + + <div class="page-container"> + <div class="left-column"> + <div class="tab-section"> + <div class="tab-header"> + <button class="tab active" onclick="set_tab(event, 'media_tab')">Media</button> + <button class="tab" onclick="set_tab(event, 'text_tab')">Text</button> + <button class="tab" onclick="set_tab(event, 'routes_tab')">Routes</button> + </div> + <div id="media_tab" class="tab-content" style="display:flex; flex-direction:column"> + <div class="tab-filters" id="media-filters"> + <input type="file" id="media_upload" style="display:none" accept=".JPG,.PNG,.JPEG,.HEIC,.HEIF,.MOV,.MP4,.WEBM" onchange="upload_media_files();" multiple/> + <label for="media_upload"><a style="text-decoration:underline; cursor:pointer;">Upload Media</a></label> + <label style="margin-left:15px;" for="sort-type">Sort by: </label> + <select onchange="update_media_grid()" id="sort-type"> + <option value="none">None</option> + <option value="name">Name</option> + <option value="timestamp">Date/time</option> + <option value="id">Filename</option> + </select> + <button id="sort-direction-media" onclick="toggle_sort_direction('media')">Ascending</button> + <label style="margin-left:15px;" for="hide-location">Hide media with location: </label> + <input onchange="update_media_grid()" id="hide-location" type="checkbox"> + <label style="margin-left:15px;" for="hide-timestamp">Hide media with timestamp: </label> + <input onchange="update_media_grid()" id="hide-timestamp" type="checkbox"> + </div> + <div style="overflow:auto; flex-grow:1"> + <div class="media-grid" id="media_grid"></div> + </div> + </div> + <div id="text_tab" class="tab-content" style="display:flex; flex-direction:column"> + <div class="tab-filters"> + <button id="add-note">Add Note</button> + <label for="sort-notes">Sort by:</label> + <select onchange="update_media_grid()" id="sort-type"> + <option value="none">None</option> + <option value="name">Name</option> + <option value="timestamp">Date/time</option> + </select> + <button id="sort-direction-media" onclick="toggle_sort_direction('media')">Ascending</button> + </div> + </div> + <div id="routes_tab" class="tab-content">Not yet supported.</div> + </div> + <div class="media-preview" id="media-preview"> + <img id="preview-img" onclick="open_media_preview()" style="object-fit: contain; max-width:100%; max-height:100%; position: relative; height: 60vh; width: auto;"> + <video type="video/mp4" id="preview-video" style="object-fit: contain; max-width:100%; max-height:100%; position: relative; height: 60vh; width: auto;" controls></video> + </div> + </div> + <div class="right-column"> + <div class="map-frame"> + <div id="map"></div> + </div> + <div id="content_info" class="content-info" style="display:none"> + <div id="media-content" class="content-info-edit"> + <span style="font-weight: bold; margin-left: 10px; margin-top:5px;">Edit Media</span> <a class="delete-button" onclick="delete_media()">Delete</a> + <hr style="grid-column: 1 / 3; width: 100%; margin: 0;"> + + <label class="content-info-edit-label" for="media_name">Name:</label> + <input onblur="submit_edit_changes()" onchange="mark_info_change('name')" class="content-info-edit-field" type="text" id="media_name" autocomplete="off"> + + <label class="content-info-edit-label" for="media_id">Filename:</label> + <input class="content-info-edit-field" type="text" id="media_id" disabled autocomplete="off"> + + <label class="content-info-edit-label" for="media_timestamp">Date/time:</label> + <input onblur="submit_edit_changes()" onchange="mark_info_change('timestamp')" class="content-info-edit-field" type="datetime-local" id="media_timestamp" autocomplete="off"> + + <span class="content-info-edit-label">Location:</span> + <div style="display: flex; align-items: center; gap: 8px;"> + <span id="media_coords">No location given!</span> + <button onclick="picker_clicked()" style="padding: 2px;"> + <img src="static/img/picker.png" width="20px" height="20px"> + </button> + </div> + + <label class="content-info-edit-label" for="media_info">Information:</label> + <textarea onblur="submit_edit_changes()" onchange="mark_info_change('info')" class="content-info-edit-field" id="media_info" style="min-height: 60px; resize:none;"></textarea> + </div> + </div> + </div> + </div> + </body> + +</html>
\ No newline at end of file |