add footer
This commit is contained in:
Joey Kimsey
@ -344,59 +344,171 @@
|
||||
<div class="m-2 m-lg-4">
|
||||
<div class="col-12 col-lg-10 mx-auto p-4 rounded shadow-sm context-main-bg">
|
||||
<h1 class="h3">Dashboard</h1>
|
||||
<h1 class="h3">Workspace</h1>
|
||||
<p class="text-muted" id="home-note">
|
||||
Search, notifications, messages, and profile are here. Site API wiring is the next
|
||||
step.
|
||||
</p>
|
||||
<p class="text-muted" id="home-note"></p>
|
||||
<p class="mb-0">
|
||||
Connected to <a id="home-site" href="#" target="_blank" rel="noreferrer"></a>
|
||||
as <strong id="home-username"></strong>.
|
||||
</p>
|
||||
<p id="home-plugins" class="small text-muted mb-4"></p>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6" id="contact-panel" hidden>
|
||||
<h2 class="h5">Contact</h2>
|
||||
<form id="contact-form">
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="contact-name">Name</label>
|
||||
<input id="contact-name" class="form-control" name="name" type="text" required />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="contact-email">Email</label>
|
||||
<input id="contact-email" class="form-control" name="email" type="email" />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="contact-entry">Message</label>
|
||||
<textarea id="contact-entry" class="form-control" name="entry" rows="3" required></textarea>
|
||||
</div>
|
||||
<p id="contact-status" class="small" hidden></p>
|
||||
<button class="btn btn-primary" type="submit">Send</button>
|
||||
</form>
|
||||
<p id="home-plugins" class="small text-muted mb-0"></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="view-contact" class="view" hidden>
|
||||
<div class="m-2 m-lg-4">
|
||||
<div class="context-main-bg container py-2 my-2 py-lg-4 my-lg-4">
|
||||
<h1 class="h2 text-center mb-4">Contact Us</h1>
|
||||
<p id="contact-unavailable" class="text-muted text-center" hidden></p>
|
||||
<div id="contact-body">
|
||||
<div class="col-12 col-lg-6 offset-lg-3">
|
||||
<p class="text-center text-lg-start">
|
||||
Here at <strong id="contact-sitename">this site</strong>, we highly value your
|
||||
feedback. We constantly strive to provide our users with the highest level of
|
||||
quality in everything we do.
|
||||
</p>
|
||||
<p class="text-center text-lg-start">
|
||||
If you would like to provide any suggestions or comments on our service, we ask
|
||||
that you please fill out the quick form below and let us know what's on your mind.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6" id="bugreport-panel" hidden>
|
||||
<h2 class="h5">Bug report</h2>
|
||||
<form id="bugreport-form">
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="bug-url">Page URL</label>
|
||||
<input id="bug-url" class="form-control" name="url" type="url" required />
|
||||
<form id="contact-form">
|
||||
<div class="mb-3 row">
|
||||
<label for="contact-name" class="col-lg-3 col-form-label text-lg-end">Name:</label>
|
||||
<div class="col-lg-6">
|
||||
<input
|
||||
id="contact-name"
|
||||
class="form-control"
|
||||
name="name"
|
||||
type="text"
|
||||
required
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="bug-ourl">Expected URL <span class="text-muted">(optional)</span></label>
|
||||
<input id="bug-ourl" class="form-control" name="ourl" type="url" />
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="contact-email" class="col-lg-3 col-form-label text-lg-end">
|
||||
E-mail: (optional)
|
||||
</label>
|
||||
<div class="col-lg-6">
|
||||
<input
|
||||
id="contact-email"
|
||||
class="form-control"
|
||||
name="email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="bug-repeat" />
|
||||
<label class="form-check-label" for="bug-repeat">This happens every time</label>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="contact-entry" class="col-lg-3 col-form-label text-lg-end">Feedback:</label>
|
||||
<div class="col-lg-6">
|
||||
<textarea
|
||||
id="contact-entry"
|
||||
class="form-control"
|
||||
name="entry"
|
||||
rows="6"
|
||||
maxlength="2000"
|
||||
required
|
||||
></textarea>
|
||||
<small class="form-text text-muted">Max: 2000 characters</small>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="bug-entry">What happened</label>
|
||||
<textarea id="bug-entry" class="form-control" name="entry" rows="3" required></textarea>
|
||||
</div>
|
||||
<p id="contact-status" class="small text-center" hidden></p>
|
||||
<div class="text-center">
|
||||
<button class="btn btn-primary btn-lg" type="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="view-bugreport" class="view" hidden>
|
||||
<div class="m-2 m-lg-4">
|
||||
<div class="col-12 col-sm-10 col-lg-8 mx-auto p-4 rounded shadow-sm context-main-bg">
|
||||
<h1 class="h2 text-center mb-4">Report a Bug</h1>
|
||||
<hr />
|
||||
<p id="bug-unavailable" class="text-muted text-center" hidden></p>
|
||||
<div id="bug-body">
|
||||
<p class="text-center text-sm-start">
|
||||
Thank you for visiting our bug reporting page. We value our users' input highly and
|
||||
in an effort to better serve your needs, please fill out the form below to help us
|
||||
address this issue.
|
||||
</p>
|
||||
<p class="text-center text-sm-start">
|
||||
We read each and every bug report submitted, and by submitting this form you allow
|
||||
us to send you a follow-up email.
|
||||
</p>
|
||||
<form id="bugreport-form">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="bug-url">Page you were trying to reach:</label>
|
||||
<input
|
||||
id="bug-url"
|
||||
class="form-control"
|
||||
name="url"
|
||||
type="url"
|
||||
aria-describedby="bug-url-help"
|
||||
required
|
||||
/>
|
||||
<small id="bug-url-help" class="form-text text-muted">
|
||||
This is the URL of the page you actually received the error.
|
||||
</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="bug-ourl">Page you were on:</label>
|
||||
<input
|
||||
id="bug-ourl"
|
||||
class="form-control"
|
||||
name="ourl"
|
||||
type="url"
|
||||
aria-describedby="bug-ourl-help"
|
||||
/>
|
||||
<small id="bug-ourl-help" class="form-text text-muted">
|
||||
This is the URL of the page you were on before you received the error.
|
||||
</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<p class="form-label">*Has this happened more than once?</p>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="repeat"
|
||||
id="bug-repeat-no"
|
||||
value="false"
|
||||
checked
|
||||
/>
|
||||
<label class="form-check-label" for="bug-repeat-no">No</label>
|
||||
</div>
|
||||
<p id="bug-status" class="small" hidden></p>
|
||||
<button class="btn btn-primary" type="submit">Send report</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="repeat"
|
||||
id="bug-repeat-yes"
|
||||
value="true"
|
||||
/>
|
||||
<label class="form-check-label" for="bug-repeat-yes">Yes</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="bug-entry">Describe the error you received:</label>
|
||||
<textarea
|
||||
id="bug-entry"
|
||||
class="form-control"
|
||||
name="entry"
|
||||
rows="6"
|
||||
maxlength="2000"
|
||||
aria-describedby="bug-entry-help"
|
||||
required
|
||||
></textarea>
|
||||
<small id="bug-entry-help" class="form-text text-muted">(max: 2000 characters)</small>
|
||||
</div>
|
||||
<p id="bug-status" class="small text-center" hidden></p>
|
||||
<div class="text-center">
|
||||
<button class="btn btn-primary btn-lg" type="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -620,6 +732,116 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="container mt-auto">
|
||||
<footer class="pt-4">
|
||||
<div class="text-center border-top context-main-border">
|
||||
<button
|
||||
class="d-md-none my-3 btn btn-lg context-main context-main-border"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#footerMenu"
|
||||
aria-controls="footerMenu"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle footer navigation"
|
||||
>
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="collapse d-md-block my-4" id="footerMenu">
|
||||
<div class="row">
|
||||
<div id="footer-contact-col" class="col-12 col-sm-6 col-md-3 col-lg-2 mb-3 text-center">
|
||||
<h2 class="h5">Contact Us</h2>
|
||||
<ul class="nav flex-column">
|
||||
<li id="footer-link-contact" class="nav-item mb-2">
|
||||
<a href="#/contact" class="nav-link p-0 text-muted">Contact</a>
|
||||
</li>
|
||||
<li id="footer-link-bug" class="nav-item mb-2">
|
||||
<a href="#/bugreport" class="nav-link p-0 text-muted">Report a Bug</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-3 col-lg-2 mb-3 text-center">
|
||||
<h2 class="h5">More Info</h2>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2">
|
||||
<a
|
||||
id="footer-privacy"
|
||||
href="#"
|
||||
class="nav-link p-0 text-muted"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
data-footer-path="home/privacy"
|
||||
>Privacy Policy</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a
|
||||
id="footer-terms"
|
||||
href="#"
|
||||
class="nav-link p-0 text-muted"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
data-footer-path="home/terms"
|
||||
>Terms of Service</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-3 col-lg-2 mb-3 text-center">
|
||||
<h2 class="h5">Dark Mode</h2>
|
||||
<div class="material-switch px-4 mt-2">
|
||||
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" class="form-check-input" />
|
||||
<label for="dark-mode-toggle" class="label-default"><span class="visually-hidden">Dark mode</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column flex-md-row justify-content-md-between py-3 border-top context-main-border">
|
||||
<div class="d-flex justify-content-center justify-content-md-start text-center text-md-start">
|
||||
<span>
|
||||
© <span id="footer-year"></span>
|
||||
<span id="footer-sitename">Capsule</span>, Powered by
|
||||
<a
|
||||
href="https://thetempusproject.com"
|
||||
class="text-decoration-none"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>The Tempus Project</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center justify-content-md-end mt-3 mt-md-0">
|
||||
<ul class="list-unstyled d-flex mb-0">
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="#" target="_blank" rel="noreferrer" data-footer-path="fb" aria-label="Facebook">
|
||||
<span class="fa-brands fa-fw fa-facebook" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="#" target="_blank" rel="noreferrer" data-footer-path="twitter" aria-label="X (Twitter)">
|
||||
<span class="fa-brands fa-fw fa-twitter" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="#" target="_blank" rel="noreferrer" data-footer-path="in" aria-label="LinkedIn">
|
||||
<span class="fa-brands fa-fw fa-linkedin" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="#" target="_blank" rel="noreferrer" data-footer-path="youtube" aria-label="YouTube">
|
||||
<span class="fa-brands fa-fw fa-youtube" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="#" target="_blank" rel="noreferrer" data-footer-path="git" aria-label="GitHub">
|
||||
<span class="fa-brands fa-fw fa-github" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
|
||||
crossorigin="anonymous"
|
||||
|
||||
Reference in New Issue
Block a user