conextra
Version:
Conextra for Web Development. Helps create a SPWA (Single-page Progressive Web Application).
125 lines (109 loc) • 5.92 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Conextra app</title>
<link async rel="manifest" href="manifest.webmanifest">
<meta name="description" content="Conextra Web App" />
<meta name="author" content="Manuel Lõhmus" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#777777">
<link async rel="icon" href="favicon.ico">
<script async src="node_modules/tiny-https-server"></script>
<link async rel="stylesheet" href="node_modules/bootstrap@5/dist/css/bootstrap.min.css" />
<!--<link async rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">-->
<script async src="node_modules/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
<script async src="node_modules/data-context@2"></script>
<script async src="node_modules/data-context-binding@2"></script>
<script async src="node_modules/ws-user"></script>
<script async src="node_modules/url-fragment-extender@2"></script>
<script>
addEventListener('DOMContentLoaded', function () {
var headerElement = document.querySelector('header');
var footerElement = document.querySelector('footer');
calcHeight();
addEventListener('resize', calcHeight);
(new MutationObserver(calcHeight)).observe(headerElement, { attributes: true, childList: true, subtree: true });
(new MutationObserver(calcHeight)).observe(footerElement, { attributes: true, childList: true, subtree: true });
function calcHeight() {
// JavaScript to dynamically set the CSS variable based on element's height
headerElement.style.minHeight = 0;
document.documentElement.style.setProperty('--header-height', `${headerElement.offsetHeight}px`);
footerElement.style.minHeight = 0;
document.documentElement.style.setProperty('--footer-height', `${footerElement.offsetHeight}px`);
}
});
</script>
<style>
:root {
--header-height: 2em;
--footer-height: 1em;
}
header {
min-height: var(--header-height)
}
footer {
min-height: var(--footer-height);
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: var(--header-height);
padding-bottom: var(--footer-height);
}
#alert-message-container {
top: var(--header-height);
}
</style>
</head>
<body>
<header class="sticky-top bg-dark bg-gradient clearfix p-2">
<!-- The navigation link container that displays public or user-directed links -->
<div id="navigation-links-container" class="float-start btn-group">
<a class="btn text-white" href="#">Home</a>
<a class="btn text-white" href="#!/pages/quick-start.html">Quick-Start</a>
<a class="btn text-white" href="#:templates/to-do-list.html">To Do List</a>
</div>
<div class="float-end">
<a path="user.isLogged" bind="hidden" onclick="UFE.openModal('templates/sign-in-modal.html')">
<span class="btn text-warning" path="#.isWsOnline" bind="!class(visually-hidden)">Login</span>
</a>
<a path="user.isLogged" bind="!hidden" hidden onclick="UFE.openModal('templates/user-modal.html')">
<span class="btn text-warning" path="#.isWsOnline" bind="!class(visually-hidden)">Logout</span>
</a>
</div>
</header>
<!-- The main container that displays templates and web pages -->
<div id="main-container">
<div class="p-5">
<h1 class="h-1">Build fast, responsive sites with Conextra web framework</h1>
<p class="fw-normal">
<a href="https://www.npmjs.com/package/conextra" rel="noopener" target="_blank"><code>Conextra</code></a> is a JavaScript library that provides a simple and efficient way to create web applications.
It is designed to be lightweight and easy to use,
making it a great choice for developers who want to build fast and responsive web applications.
</p>
<p class="fw-normal">
It helps you create SPWA (Single-page Progressive Web Application) and efficiently perform real-time updates over WebSocket.
You have to try this! A different solution than MVC (model–view–controller).
</p>
<p class="fw-normal">
Lower requirements for the server and client side,
which means that you can run the application on a low-end server and use it on a low-end device.
The data communication bandwidth is very low between the client and the server.
Can work even with slow and unstable network connections.
Conserving the energy consumption of the device, which is important for mobile devices and IoT devices.
It can also be used in IoT devices.
</p>
</div>
</div>
<footer class="fixed-bottom bg-dark bg-gradient row">
<a class="mx-3 col-auto link-secondary" href="pages/terms.html" target="_blank">terms</a>
<div class="text-center col text-white">Powered by Conextra</div>
<a class="mx-3 col-auto link-secondary" href="pages/privacy_policy.html" target="_blank">privacy policy</a>
</footer>
<div id="alert-message-container" class="position-fixed start-50 translate-middle-x w-75 mx-3 z-3"></div>
</body>
</html>