291 lines
12 KiB
HTML
291 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Editor</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
|
|
<script src="js/CKEditor/ckeditor.js"></script>
|
|
<link rel="stylesheet" href="css/main.css">
|
|
|
|
</head>
|
|
<body>
|
|
<nav class="sideNav">
|
|
<a href="#" class="closeBtn" id="navClose">×</a>
|
|
<ul>
|
|
<li>
|
|
<a href="#" id="goToCV">
|
|
<span><</span>CV<span>></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" id="goToProjects">
|
|
<span><</span>Projects<span>></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" id="blog" class="active">
|
|
<span><</span>Blog<span>></span> <i class="fa fa-caret-right"></i>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown">
|
|
<ul>
|
|
<li>
|
|
<a href="#" id="goToAddPost">
|
|
<span><</span>Add Blog Post<span>></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" id="goToEditPost" class="active">
|
|
<span><</span>Edit Blog Post<span>></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#" id="logout"><span><</span>Logout<span>></span></a></li>
|
|
</ul>
|
|
</nav>
|
|
<main class="editor" style="margin-left: 250px;">
|
|
<div class="title">
|
|
<span id="navOpen">☰</span>
|
|
|
|
<h1>Editor</h1>
|
|
</div>
|
|
|
|
<section id="curriculumVitae">
|
|
<h2>curriculum vitae</h2>
|
|
<div class="cvGrid">
|
|
<div>
|
|
<h3>Education</h3>
|
|
|
|
<div class="editorContainer">
|
|
<form action="" method="POST" id="addEdu">
|
|
<div class="formControl">
|
|
<label for="dateFromE">Date From</label>
|
|
<input type="date" id="dateFromE" name="dateFromE" required>
|
|
</div>
|
|
|
|
<div class="formControl">
|
|
<label for="dateToE">Date To</label>
|
|
<input type="date" id="dateToE" name="dateToE" required>
|
|
</div>
|
|
|
|
<div class="formControl">
|
|
<label for="grade">Grade</label>
|
|
<input type="text" id="grade" name="grade" required>
|
|
</div>
|
|
|
|
<div class="formControl">
|
|
<label for="courseTitle">Course Title</label>
|
|
<input type="text" id="courseTitle" name="courseTitle" required>
|
|
</div>
|
|
|
|
<div class="error hidden" id="eduError">
|
|
<button class="close" type="button">×</button>
|
|
<div></div>
|
|
</div>
|
|
|
|
<input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course">
|
|
</form>
|
|
|
|
<div class="timeline" id="edu">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>Work</h3>
|
|
|
|
<div class="editorContainer">
|
|
<form action="" method="POST" id="addWork">
|
|
<div class="formControl">
|
|
<label for="dateFromW">Date From</label>
|
|
<input type="date" id="dateFromW" name="dateFromW" required>
|
|
</div>
|
|
|
|
<div class="formControl">
|
|
<label for="dateToW">Date To</label>
|
|
<input type="date" id="dateToW" name="dateToW">
|
|
</div>
|
|
|
|
<div class="formControl">
|
|
<label for="company">Company</label>
|
|
<input type="text" id="company" name="company" required>
|
|
</div>
|
|
|
|
<div class="formControl">
|
|
<label for="area">Area</label>
|
|
<input type="text" id="area" name="area" required>
|
|
</div>
|
|
|
|
<div class="formControl">
|
|
<label for="jobTitle">Job Title</label>
|
|
<input type="text" id="jobTitle" name="jobTitle" required>
|
|
</div>
|
|
|
|
<div class="error hidden" id="workError">
|
|
<button class="close" type="button">×</button>
|
|
<div></div>
|
|
</div>
|
|
|
|
<input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job">
|
|
</form>
|
|
|
|
<div class="timeline" id="work">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="projects">
|
|
<h2>projects</h2>
|
|
<div class="projectsGrid">
|
|
<form action="" id="addProj">
|
|
<div class="formControl">
|
|
<label for="projTitle">Title </label>
|
|
<input type="text" name="projTitle" id="projTitle" required>
|
|
</div>
|
|
<div class="formControl">
|
|
<label class="checkContainer" for="isMainProject">Is It The Main Project
|
|
<input type="checkbox" id="isMainProject" name="isMainProject">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="projImg">Image</label>
|
|
<input type="file" name="projImg" id="projImg">
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="projInfo">Description</label>
|
|
<textarea name="projInfo" id="projInfo" required></textarea>
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="projLink">Project Link</label>
|
|
<input type="text" name="projLink" id="projLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)">
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="gitLink">Git Link</label>
|
|
<input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required>
|
|
</div>
|
|
<div class="error hidden" id="projError">
|
|
<button class="close" type="button">×</button>
|
|
<div></div>
|
|
</div>
|
|
<input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut">
|
|
</form>
|
|
<div id="projList">
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="addPost">
|
|
<h2>add post</h2>
|
|
<form action="" id="addPostForm" method="POST">
|
|
<div class="formControl">
|
|
<label for="postTitle">Title </label>
|
|
<input type="text" name="postTitle" id="postTitle" required>
|
|
</div>
|
|
<div class="formControl">
|
|
<label class="checkContainer" for="isFeatured">Is It The Featured Post
|
|
<input type="checkbox" id="isFeatured" name="isFeatured">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="headerImg">Header Image</label>
|
|
<input type="file" name="headerImg" id="headerImg">
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="postCategories">Categories</label>
|
|
<input type="text" name="postCategories" id="postCategories"
|
|
pattern='(?:,|\n|^)("(?:(?:"")*[^"]*)*"|[^",\n]*|(?:\n|$))' title="CSV format"
|
|
oninvalid="this.setCustomValidity('This field takes a CSV like format')"
|
|
oninput="this.setCustomValidity('')" required>
|
|
</div>
|
|
|
|
<div class="formControl" style="align-items: stretch;">
|
|
<label for="CKEditorAddPost">Post</label>
|
|
<div id="CKEditorAddPost">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="error hidden" id="addPostError">
|
|
<button class="close" type="button">×</button>
|
|
<div></div>
|
|
</div>
|
|
|
|
<div class="success hidden" id="addPostSuccess">
|
|
<button class="close" type="button">×</button>
|
|
<div></div>
|
|
</div>
|
|
<input type="submit" value="Add new blog post" class="btn btnPrimary boxShadowIn boxShadowOut">
|
|
</form>
|
|
</section>
|
|
|
|
<section id="editPost">
|
|
<h2>edit post</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Date Created</th>
|
|
<th>Date Modified</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<form action="" id="editPostForm" method="POST">
|
|
<div class="formControl">
|
|
<label for="editPostTitle">Title </label>
|
|
<input type="text" name="editPostTitle" id="editPostTitle" required>
|
|
</div>
|
|
<div class="formControl">
|
|
<label class="checkContainer" for="editIsFeatured">Is It The Featured Post
|
|
<input type="checkbox" id="editIsFeatured" name="editIsFeatured">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="editHeaderImg">Header Image</label>
|
|
<input type="file" name="editHeaderImg" id="editHeaderImg">
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="editPostCategories">Categories</label>
|
|
<input type="text" name="editPostCategories" id="editPostCategories"
|
|
pattern='(?:,|\n|^)("(?:(?:"")*[^"]*)*"|[^",\n]*|(?:\n|$))' title="CSV format"
|
|
oninvalid="this.setCustomValidity('This field takes a CSV like format')"
|
|
oninput="this.setCustomValidity('')" required>
|
|
</div>
|
|
|
|
<div class="formControl" style="align-items: stretch;">
|
|
<label for="CKEditorEditPost">Post</label>
|
|
<div id="CKEditorEditPost">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="error hidden" id="editPostError">
|
|
<button class="close" type="button">×</button>
|
|
<div></div>
|
|
</div>
|
|
|
|
<div class="success hidden" id="editPostSuccess">
|
|
<button class="close" type="button">×</button>
|
|
<div></div>
|
|
</div>
|
|
<input type="submit" value="Add new blog post" class="btn btnPrimary boxShadowIn boxShadowOut">
|
|
</form>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<script src="js/editor.js"></script>
|
|
</body>
|
|
</html> |