81 lines
2.8 KiB
HTML
81 lines
2.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Card Creator</title>
|
||
|
|
<link rel="stylesheet" href="cards.css">
|
||
|
|
<link rel="stylesheet" href="modal.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<aside class="modal fade" tabindex="-1" role="dialog" id="user-modal">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<form class="modal-content card-form" id="user-form">
|
||
|
|
<header class="modal-header">
|
||
|
|
<h3>Add/Edit User</h3>
|
||
|
|
</header>
|
||
|
|
<section class="modal-body">
|
||
|
|
<input name="guest-full" type="text" />
|
||
|
|
<input name="guest-short" type="text" />
|
||
|
|
<div class="invalid-feedback">Short name must be unique</div>
|
||
|
|
<input name="old-short" type="hidden" />
|
||
|
|
</section>
|
||
|
|
<footer class="modal-footer">
|
||
|
|
<button type="submit">Submit</button>
|
||
|
|
</footer>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
<nav>
|
||
|
|
<h1>Guest List</h1>
|
||
|
|
<ul id="guest-list" class="card-list">
|
||
|
|
<li id="alice">Alice <button class="btn-edit-guest" data-user="alice">Edit</button></li>
|
||
|
|
<li id="bob">Bob <button class="btn-edit-guest" data-user="bob">Edit</button></li>
|
||
|
|
<li id="charlie">Charlie <button class="btn-edit-guest" data-user="charlie">Edit</button></li>
|
||
|
|
</ul>
|
||
|
|
<button type="button" id="btn-add-guest">Add Guest</button>
|
||
|
|
</nav>
|
||
|
|
<main class="left-right pt-4">
|
||
|
|
<section id="form-area">
|
||
|
|
<h2>Invitation Details</h2>
|
||
|
|
<form class="card-form" id="preview-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="host">Host</label>
|
||
|
|
<input name="host" type="text" placeholder="Message sender">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="title">Title</label>
|
||
|
|
<input name="title" type="text" placeholder="Message title">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="date">Party Date</label>
|
||
|
|
<input name="date" type="date">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="message">Message</label>
|
||
|
|
<textarea name="message" placeholder="Message content" rows="8"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-buttons">
|
||
|
|
<button type="reset" id="reset-btn">Clear Form</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
<section id="preview-area">
|
||
|
|
<div class="card-display">
|
||
|
|
<div class="card-page page-one">
|
||
|
|
<div class="title"><span id="preview-title">TITLE</span></div>
|
||
|
|
<div class="subtitle"><span id="preview-date">DATE</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="card-page page-two">
|
||
|
|
<div class="to">Dear <span id="preview-guest">GUEST</span>,</div>
|
||
|
|
<div class="message"><span id="preview-message">YOUR MESSAGE HERE</span></div>
|
||
|
|
<div class="from">Sincerely, <span id="preview-host">HOST</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
<script src="createcard.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|