Added new starter template.

trongate · Sep 22, 2021 · 9a5a09a · 9a5a09a
1 parent b1ad72a
commit 9a5a09a
Show file tree

Hide file tree

Showing 6 changed files with 322 additions and 2 deletions.
diff --git a/engine/license.txt b/engine/license.txt
@@ -3,7 +3,7 @@
  *
  * An open source PHP framework for web developers who like to break the rules
  *
- * Version: 1.3.3028
+ * Version: 1.3.3029
  *
  * This product is released under the MIT License (MIT)
  *

diff --git a/license.txt b/license.txt
@@ -3,7 +3,7 @@
  *
  * An open source PHP framework for web developers who like to break the rules
  *
- * Version: 1.3.3028
+ * Version: 1.3.3029
  *
  * This product is released under the MIT License (MIT)
  *

diff --git a/public/css/app.css b/public/css/app.css
@@ -0,0 +1,163 @@
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+header {
+    background-color: black;
+    padding: 12px;
+}
+
+header, 
+header a, 
+footer, 
+footer a {
+    color: #eee;
+    text-decoration: none;
+}
+
+header a:hover,
+footer a:hover {
+    color: #fff;
+    text-decoration: underline;
+}
+
+.logo {
+    font-size: 1.2em;
+}
+
+.logo a:hover {
+    text-decoration: none;
+}
+
+#header-sm {
+    align-items: center;
+    justify-content: space-between;
+}
+
+#header-lg {
+    align-items: center;
+    justify-content: space-between;
+}
+
+#hamburger {
+    margin: 0.1em;
+    font-size: 1.4em;
+    cursor: pointer;
+}
+
+header .fa {
+    margin: 0 12px;
+    font-size: 1.3em;
+}
+
+#top-nav {
+    margin:  0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    list-style-type: none;
+    font-size: 1.1em;
+}
+
+#top-nav li {
+    margin: 0 1em;
+}
+
+#top-nav .fa {
+    display:  none;
+}
+
+main {
+    width: 100%;   
+    margin: 0 auto;
+}
+
+footer {
+    width:  100%;
+    background-color: black;
+    padding: 0.2em 0;
+}
+
+footer .container > div {
+    margin: 1em 0;
+}
+
+footer a {
+    text-decoration: underline;
+}
+
+.container {
+    background-color: inherit;
+}
+
+#slide-nav {
+  background-color: #555;
+  -webkit-box-shadow: 10px 0px 5px -4px rgba(0,0,0,0.75);
+  -moz-box-shadow: 10px 0px 5px -4px rgba(0,0,0,0.75);
+  box-shadow: 10px 0px 5px -4px rgba(0,0,0,0.75);
+}
+
+#slide-nav {
+  width: 0;
+  opacity: 0;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: fixed;
+  transition: 0.1s;
+  z-index: -1;
+}
+
+#slide-nav ul {
+  list-style-type: none;
+  padding: 12px;
+}
+
+#slide-nav li {
+  margin-bottom: 17px;
+}
+
+#slide-nav a {
+  color: #fff;
+  text-decoration: none;
+  font-size: 1.2em;
+}
+
+#slide-nav a:hover {
+  text-decoration: none;
+}
+
+#close-btn {
+  color: #fff;
+  font-size: 2.4rem;
+  margin-top: 7px;
+  margin-left: 12px;
+}
+
+@media (min-width: 1px) {
+
+    #header-sm {
+        display: flex;
+    }
+
+    #header-lg {
+        display: none;
+    }
+
+}
+
+@media (min-width: 860px) {
+
+    #header-sm {
+        display: none;
+    }
+
+    #header-lg {
+        display: flex;
+    }
+
+}
diff --git a/public/js/app.js b/public/js/app.js
@@ -0,0 +1,95 @@
+var body = document.querySelector("body");
+var slideNavOpen = false;
+var slideNav = document.getElementById('slide-nav');
+var main = document.getElementsByTagName('main')[0];
+
+function _(elRef) {
+    var firstChar = elRef.substring(0, 1);
+
+    if (firstChar == '.') {
+        elRef = elRef.replace(/\./g, '');
+        return document.getElementsByClassName(elRef);
+    } else {
+        return document.getElementById(elRef);
+    }
+}
+
+function openSlideNav() {
+    slideNav.style.opacity = 1;
+    slideNav.style.width = '250px';
+    slideNav.style.zIndex = 2;
+    setTimeout(() => {
+        slideNavOpen = true;
+    }, 500);
+
+}
+
+function closeSlideNav() {
+    slideNav.style.opacity = 0;
+    slideNav.style.width = '0';
+    slideNav.style.zIndex = -1;
+    slideNavOpen = false;
+}
+
+function openModal(modalId) {
+    var modalContainer = document.createElement("div");
+    modalContainer.setAttribute("id", "modal-container");
+    modalContainer.setAttribute("style", "z-index: 3;");
+    body.prepend(modalContainer);
+
+    var overlay = document.createElement("div");
+    overlay.setAttribute("id", "overlay");
+    overlay.setAttribute("style", "z-index: 2");
+
+    body.prepend(overlay);
+
+    var targetModal = _(modalId);
+    targetModalContent = targetModal.innerHTML;
+    targetModal.remove();
+
+    //create a new model
+    var newModal = document.createElement("div");
+    newModal.setAttribute("class", "modal");
+    newModal.setAttribute("id", modalId);
+
+    newModal.style.zIndex = 4;
+    newModal.innerHTML = targetModalContent;
+    modalContainer.appendChild(newModal);
+
+    setTimeout(() => {
+        newModal.style.opacity = 1;
+        newModal.style.marginTop = '12vh';
+    }, 0);    
+}
+
+function closeModal() {
+    var modalContainer = _("modal-container");
+    var openModal = modalContainer.firstChild;
+
+    openModal.style.zIndex = -4;
+    openModal.style.opacity = 0;
+    openModal.style.marginTop = '12vh';
+    openModal.style.display = 'none';
+    body.appendChild(openModal);
+
+    modalContainer.remove();
+    var overlay = _("overlay");
+    overlay.remove();
+}
+
+var slideNavLinks = document.querySelector("#slide-nav ul");
+var autoPopulateSlideNav = slideNavLinks.getAttribute("auto-populate");
+if (autoPopulateSlideNav == "true") {
+    var navLinks = document.querySelector("#top-nav");
+    slideNavLinks.innerHTML = navLinks.innerHTML;
+}
+
+body.addEventListener('click', (ev) => {
+    if ((slideNavOpen == true) && (ev.target.id !== 'open-btn')) {
+        if (slideNav.contains(ev.target)) {
+            return true;
+        } else {
+            closeSlideNav();
+        }
+    }
+});
diff --git a/templates/controllers/Templates.php b/templates/controllers/Templates.php
@@ -1,6 +1,10 @@
 <?php
 class Templates extends Trongate {
 
+    function public($data) {
+        load('public', $data);
+    }
+
     function error_404($data) {
         load('error_404', $data);
     }

diff --git a/templates/views/public.php b/templates/views/public.php
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="<?= BASE_URL ?>css/trongate.css">
+	<link rel="stylesheet" href="<?= BASE_URL ?>css/app.css">
+    <!-- don't change anything above here -->
+    <!-- add your own stylesheet below here -->
+	<title>Public</title>
+</head>
+<body>
+	<div class="wrapper">
+	<header>
+		<div id="header-sm">
+			<div id="hamburger" onclick="openSlideNav()">
+				&#9776;
+			</div>
+			<div class="logo">
+				<?= anchor(BASE_URL, WEBSITE_NAME) ?>
+			</div>
+			<div><?php 
+            echo anchor('account', '<i class="fa fa-user"></i>'); 
+            echo anchor('logout', '<i class="fa fa-sign-out"></i>'); 
+            ?></div>
+		</div>
+		<div id="header-lg">
+			<div class="logo">
+				<?= anchor(BASE_URL, WEBSITE_NAME) ?>
+			</div>
+			<div>
+				<ul id="top-nav">
+				    <li><a href="<?= BASE_URL ?>"><i class="fa fa-home"></i> Home</a></li>
+				    <li><a href="<?= BASE_URL ?>"><i class="fa fa-lightbulb-o"></i> About Us</a></li>
+				    <li><a href="<?= BASE_URL ?>"><i class="fa fa-street-view"></i> Our Values</a></li>
+				    <li><a href="<?= BASE_URL ?>"><i class="fa fa-gears"></i> How We Work</a></li>
+				    <li><a href="<?= BASE_URL ?>"><i class="fa fa-send"></i> Get In Touch</a></li>
+				</ul>
+			</div>
+		</div>
+	</header>
+	<main><?= Template::display($data) ?></main>
+</div>
+	<footer>
+		<div class="container">
+            <!-- it's okay to remove the links and content here - everything is cool (DC) -->
+			<div>&copy; Copyright <?= date('Y').' '.OUR_NAME ?></div>
+			<div><?= anchor('https://trongate.io', 'Powered by Trongate') ?></div>
+		</div>
+	</footer>
+    <div id="slide-nav">
+        <div id="close-btn" onclick="closeSlideNav()">&times;</div>
+        <ul auto-populate="true"></ul>
+    </div>
+<script src="<?= BASE_URL  ?>js/app.js"></script>
+</body>
+</html>