Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/halfmoon-starter-example.markdown

Created July 21, 2023 22:59
Show Gist options
  • Save neisdev/9abee273c4161507d7ea68acc99570e5 to your computer and use it in GitHub Desktop.
Save neisdev/9abee273c4161507d7ea68acc99570e5 to your computer and use it in GitHub Desktop.
Download ZIP
Halfmoon || Starter Example
Raw
index.html
<body class="dark-mode with-custom-webkit-scrollbars with-custom-css-scrollbars" data-dm-shortcut-enabled="true" data-sidebar-shortcut-enabled="true">
<!-- Page wrapper start -->
<div id="page-wrapper" class="page-wrapper with-navbar with-sidebar with-navbar-fixed-bottom" data-sidebar-type="default">
<!-- Sticky alerts -->
<div class="sticky-alerts"></div>
<!-- Navbar start -->
<nav class="navbar">
<div class="navbar-content">
<button id="toggle-sidebar-btn" class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<a href="#" class="navbar-brand ml-10 ml-sm-20">
<img src="https://www.gethalfmoon.com/static/site/img/fake-logo.svg" alt="fake-logo">
<span class="d-none d-sm-flex">Brand</span>
</a>
<div class="navbar-content ml-auto">
<button class="btn btn-action mr-5" type="button" onclick="halfmoon.toggleDarkMode()">
<i class="fa fa-moon-o" aria-hidden="true"></i>
<span class="sr-only">Toggle dark mode</span>
</button>
<a href="#" class="btn btn-primary" role="button">Get started</a>
</div>
</nav>
<!-- Navbar end -->
<!-- Sidebar overlay -->
<div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()"></div>
<!-- Sidebar start -->
<div class="sidebar">
<div class="sidebar-menu">
<div class="sidebar-content">
<input type="text" class="form-control" placeholder="Search">
<div class="mt-10 font-size-12">
Press <kbd>/</kbd> to focus
</div>
</div>
<h5 class="sidebar-title">Getting started</h5>
<div class="sidebar-divider"></div>
<a href="#" class="sidebar-link sidebar-link-with-icon active">
<span class="sidebar-icon">
<i class="fa fa-code" aria-hidden="true"></i>
</span>
Installation
</a>
<a href="#" class="sidebar-link sidebar-link-with-icon">
<span class="sidebar-icon">
<i class="fa fa-terminal" aria-hidden="true"></i>
</span>
CLI commands
</a>
<br />
<h5 class="sidebar-title">Components</h5>
<div class="sidebar-divider"></div>
<a href="#" class="sidebar-link sidebar-link-with-icon">
<span class="sidebar-icon">
<i class="fa fa-folder-open-o" aria-hidden="true"></i>
</span>
File explorer
</a>
<a href="#" class="sidebar-link sidebar-link-with-icon">
<span class="sidebar-icon">
<i class="fa fa-table" aria-hidden="true"></i>
</span>
Spreadsheet
</a>
<a href="#" class="sidebar-link sidebar-link-with-icon">
<span class="sidebar-icon">
<i class="fa fa-map-o" aria-hidden="true"></i>
</span>
Map
</a>
<a href="#" class="sidebar-link sidebar-link-with-icon">
<span class="sidebar-icon">
<i class="fa fa-commenting-o" aria-hidden="true"></i>
</span>
Messenger
</a>
</div>
</div>
<!-- Sidebar end -->
<!-- Content wrapper start -->
<div class="content-wrapper">
<div class="container-fluid">
<div class="row row-eq-spacing-lg">
<div class="col-lg-9">
<div class="content">
<h1 class="content-title">
Page title
</h1>
<div class="fake-content"></div>
<div class="fake-content"></div>
</div>
<div class="card">
<h2 class="card-title">
Card title
</h2>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content w-100"></div>
</div>
<div class="content">
<div class="fake-content"></div>
<div class="fake-content w-150"></div>
</div>
</div>
<div class="col-lg-3 d-none d-lg-block">
<div class="content">
<h2 class="content-title font-size-20">
On this page
</h2>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Content wrapper end -->
<!-- Navbar fixed bottom start -->
<nav class="navbar navbar-fixed-bottom">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-question-circle-o mr-5" aria-hidden="true"></i>
Help
</a>
</li>
</ul>
<span class="navbar-text">
&copy; Copyright 2022, Brand
</span>
</nav>
<!-- Navbar fixed bottom end -->
</div>
<!-- Page wrapper end -->
<!-- Halfmoon JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/halfmoon.min.js"></script>
<script type="text/javascript">
// Toasts a default alert
function toastAlert() {
var alertContent = "This is a default alert with <a href='#' class='alert-link'>a link</a> being toasted.";
// Built-in function
halfmoon.initStickyAlert({
content: alertContent,
title: "Toast!"
})
}
// Toggles the parent's dark mode (if this page is loaded in an iFrame)
function parentToggleDarkmode() {
window.parent.toggleDarkModeFromChild();
}
// Override the dark mode toggle function to call the parent's one
// Again, this is for the case where the page is loaded in an iFrame
if (window !== window.parent) {
halfmoon.toggleDarkMode = parentToggleDarkmode;
}
</script>
</body>
Raw
scripts
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/halfmoon.min.js"></script>
Raw
styles
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon-variables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&amp;display=swap" rel="stylesheet" />
<link href="https://www.gethalfmoon.com/static/site/css/documentation-styles-4.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment