388 lines
12 KiB
HTML
388 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Edit Journey – Journey Mapper</title>
|
||
|
||
<!-- Open Props CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/open-props"/>
|
||
<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
|
||
|
||
<!-- Font Awesome -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
||
<!-- Google Fonts -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<!-- Responsive Design -->
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/responsive.css">
|
||
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
font-family: var(--font-sans);
|
||
background: var(--gray-0);
|
||
color: var(--gray-9);
|
||
line-height: var(--font-lineheight-3);
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* Header */
|
||
.site-header {
|
||
background: var(--gray-9);
|
||
padding: var(--size-4) var(--size-6);
|
||
border-bottom: 1px solid var(--surface-4);
|
||
}
|
||
.site-header .container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: var(--size-2);
|
||
}
|
||
.site-title {
|
||
margin: 0;
|
||
font-size: var(--font-size-4);
|
||
font-weight: var(--font-weight-6);
|
||
}
|
||
.site-title a {
|
||
color: var(--indigo-4);
|
||
text-decoration: none;
|
||
}
|
||
.site-nav {
|
||
display: flex;
|
||
gap: var(--size-4);
|
||
}
|
||
.site-nav a {
|
||
color: var(--gray-2);
|
||
text-decoration: none;
|
||
font-weight: var(--font-weight-5);
|
||
transition: color 0.2s;
|
||
padding: var(--size-1) var(--size-2);
|
||
border-radius: var(--radius-2);
|
||
}
|
||
.site-nav a:hover,
|
||
.site-nav a.active {
|
||
color: var(--indigo-4);
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
/* User menu */
|
||
.user-menu {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--size-2);
|
||
}
|
||
.user-menu .username {
|
||
color: var(--gray-2);
|
||
font-weight: var(--font-weight-5);
|
||
}
|
||
.logout-btn {
|
||
background: var(--indigo-7);
|
||
color: white;
|
||
border: none;
|
||
border-radius: var(--radius-2);
|
||
padding: var(--size-1) var(--size-3);
|
||
cursor: pointer;
|
||
font-size: var(--font-size-1);
|
||
font-weight: var(--font-weight-5);
|
||
transition: background 0.2s;
|
||
}
|
||
.logout-btn:hover {
|
||
background: var(--indigo-8);
|
||
}
|
||
|
||
/* Main content */
|
||
.editor-container {
|
||
max-width: 1000px;
|
||
margin: var(--size-6) auto;
|
||
padding: 0 var(--size-4);
|
||
}
|
||
.editor-form {
|
||
background: var(--surface-1);
|
||
border-radius: var(--radius-3);
|
||
padding: var(--size-6);
|
||
box-shadow: var(--shadow-2);
|
||
}
|
||
.form-group {
|
||
margin-bottom: var(--size-4);
|
||
}
|
||
.sharing-panel {
|
||
display: none;
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--surface-4);
|
||
border-radius: var(--radius-2);
|
||
padding: var(--size-4);
|
||
margin-bottom: var(--size-4);
|
||
}
|
||
.sharing-panel.visible {
|
||
display: block;
|
||
}
|
||
.sharing-panel h3 {
|
||
margin-top: 0;
|
||
margin-bottom: var(--size-2);
|
||
font-size: var(--font-size-3);
|
||
}
|
||
.sharing-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: var(--size-4);
|
||
}
|
||
.sharing-user-list {
|
||
display: grid;
|
||
gap: var(--size-2);
|
||
}
|
||
.sharing-user {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--size-2);
|
||
padding: var(--size-2);
|
||
border-radius: var(--radius-2);
|
||
background: var(--surface-1);
|
||
}
|
||
.sharing-user input {
|
||
width: auto;
|
||
}
|
||
.sharing-help {
|
||
color: var(--gray-6);
|
||
font-size: var(--font-size-1);
|
||
margin-top: 0;
|
||
}
|
||
.empty-share-list {
|
||
color: var(--gray-6);
|
||
font-style: italic;
|
||
margin: 0;
|
||
}
|
||
label {
|
||
display: block;
|
||
margin-bottom: var(--size-2);
|
||
font-weight: var(--font-weight-6);
|
||
color: var(--gray-8);
|
||
}
|
||
input[type="text"],
|
||
input[type="date"],
|
||
input[type="file"],
|
||
textarea,
|
||
select {
|
||
width: 100%;
|
||
padding: var(--size-2) var(--size-3);
|
||
border: 1px solid var(--surface-4);
|
||
border-radius: var(--radius-2);
|
||
background: var(--surface-2);
|
||
color: var(--text-1);
|
||
font-family: inherit;
|
||
font-size: var(--font-size-2);
|
||
}
|
||
textarea {
|
||
min-height: 120px;
|
||
resize: vertical;
|
||
}
|
||
.marker-card {
|
||
background: var(--surface-2);
|
||
border-radius: var(--radius-2);
|
||
padding: var(--size-4);
|
||
margin-bottom: var(--size-4);
|
||
border: 1px solid var(--surface-4);
|
||
position: relative;
|
||
}
|
||
.marker-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--size-2);
|
||
cursor: move;
|
||
}
|
||
.marker-header h4 {
|
||
margin: 0;
|
||
font-size: var(--font-size-3);
|
||
}
|
||
.remove-marker {
|
||
background: none;
|
||
border: none;
|
||
color: var(--red-6);
|
||
cursor: pointer;
|
||
font-size: var(--font-size-3);
|
||
}
|
||
.remove-marker:hover {
|
||
color: var(--red-8);
|
||
}
|
||
.marker-coords {
|
||
font-size: var(--font-size-0);
|
||
color: var(--gray-6);
|
||
margin-bottom: var(--size-2);
|
||
}
|
||
.image-preview-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
|
||
gap: var(--size-2);
|
||
margin-top: var(--size-2);
|
||
}
|
||
.image-preview {
|
||
position: relative;
|
||
aspect-ratio: 1;
|
||
border-radius: var(--radius-2);
|
||
overflow: hidden;
|
||
border: 1px solid var(--surface-4);
|
||
background: var(--surface-1);
|
||
}
|
||
.image-preview img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.remove-image {
|
||
position: absolute;
|
||
top: 4px;
|
||
right: 4px;
|
||
width: 24px;
|
||
height: 24px;
|
||
border: none;
|
||
border-radius: var(--radius-round);
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: white;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.btn {
|
||
padding: var(--size-2) var(--size-4);
|
||
border: none;
|
||
border-radius: var(--radius-2);
|
||
cursor: pointer;
|
||
font-size: var(--font-size-2);
|
||
font-weight: var(--font-weight-5);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--size-2);
|
||
transition: all 0.2s var(--ease-2);
|
||
box-shadow: var(--shadow-2);
|
||
background: var(--gray-7);
|
||
color: white;
|
||
text-decoration: none;
|
||
}
|
||
.btn-primary {
|
||
background: var(--indigo-7);
|
||
}
|
||
.btn-primary:hover {
|
||
background: var(--indigo-8);
|
||
}
|
||
.btn-success {
|
||
background: var(--green-7);
|
||
}
|
||
.btn-success:hover {
|
||
background: var(--green-8);
|
||
}
|
||
.btn-danger {
|
||
background: var(--red-7);
|
||
}
|
||
.btn-danger:hover {
|
||
background: var(--red-8);
|
||
}
|
||
.btn-outline {
|
||
background: transparent;
|
||
border: 1px solid var(--surface-4);
|
||
color: var(--text-2);
|
||
box-shadow: none;
|
||
}
|
||
.btn-outline:hover {
|
||
background: var(--surface-3);
|
||
}
|
||
.button-group {
|
||
display: flex;
|
||
gap: var(--size-3);
|
||
margin-top: var(--size-6);
|
||
flex-wrap: wrap;
|
||
}
|
||
.toast {
|
||
position: fixed;
|
||
bottom: var(--size-4);
|
||
right: var(--size-4);
|
||
background: var(--green-7);
|
||
color: white;
|
||
padding: var(--size-2) var(--size-4);
|
||
border-radius: var(--radius-2);
|
||
display: none;
|
||
z-index: 1100;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<div class="container">
|
||
<h1 class="site-title"><a href="map-page.html">Journey Mapper</a></h1>
|
||
<div style="display: flex; align-items: center; gap: var(--size-4);">
|
||
<nav class="site-nav">
|
||
<a href="map-page.html">Map</a>
|
||
<a href="blog-list.html">Blog</a>
|
||
</nav>
|
||
<div class="user-menu" id="user-menu"></div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="editor-container">
|
||
<div class="editor-form">
|
||
<h2 id="form-title">Edit Journey</h2>
|
||
<form id="journey-form">
|
||
<div class="form-group">
|
||
<label for="journey-title">Title</label>
|
||
<input type="text" id="journey-title" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="journey-description">Description</label>
|
||
<textarea id="journey-description" rows="4"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="journey-visibility">Visibility</label>
|
||
<select id="journey-visibility">
|
||
<option value="private">Private (only you)</option>
|
||
<option value="public">Public (anyone can view)</option>
|
||
<option value="shared">Shared (with specific users)</option>
|
||
</select>
|
||
</div>
|
||
<div id="sharing-panel" class="sharing-panel">
|
||
<h3><i class="fas fa-user-group"></i> Share With Users</h3>
|
||
<p class="sharing-help">Viewers can open the journey. Editors can also update its chapters, markers, and images.</p>
|
||
<div class="sharing-grid">
|
||
<div>
|
||
<label>Can View</label>
|
||
<div id="shared-read-users" class="sharing-user-list"></div>
|
||
</div>
|
||
<div>
|
||
<label>Can Edit</label>
|
||
<div id="shared-edit-users" class="sharing-user-list"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3><i class="fas fa-map-marker-alt"></i> Chapters (Markers)</h3>
|
||
<div id="markers-container"></div>
|
||
<div class="button-group">
|
||
<button type="button" id="add-marker" class="btn btn-outline"><i class="fas fa-plus"></i> Add Chapter</button>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Journey</button>
|
||
<a href="blog-list.html" class="btn"><i class="fas fa-times"></i> Cancel</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</main>
|
||
|
||
<div id="toast" class="toast"></div>
|
||
|
||
<script src="js/auth.js"></script>
|
||
<script src="js/markdown.js"></script>
|
||
<script src="js/journey-edit.js"></script>
|
||
</body>
|
||
</html>
|