App Scripts

Code.gs

  
  var url = "";
var Route = {};
Route.path = function(route,callback){
  Route[route] = callback;

}
function doGet(e) {
  Route.path("Home",loadHome);
  Route.path("Disbursement",loadDisbursement);
  Route.path("View-Loan",loadViewLoan);
  Route.path("Collection",loadCollection);
  Route.path("Contact",loadContact);
  
   
 // Route.path("home",loadForm);

 if (Route[e.parameters.v]){
   return Route[e.parameters.v]();
 }else{
   return render("index");
 }

   /**return HtmlService.createTemplateFromFile('index').evaluate()
        .setTitle('Dashboard')
      .addMetaTag('viewport','width=device-width , initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)**/
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}


function render(file){
  return HtmlService.createTemplateFromFile(file).evaluate().setTitle(file)
  .addMetaTag('viewport','width=device-width , initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function loadHome(){
  return render("Home");
}

function loadDisbursement(){
   return render("Disbursement");
}

function loadViewLoan(){
   return render("View-Loan");
}

function loadCollection(){
   return render("Collection");
}

function loadContact(){
   return render("Contact");
}

inex.js

  <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
       <?!= include("CSS");?>

  </head>
  <body>
   <!-----start header------>
   
    <header>
        <a href="#" class="logo">GRIHA SAJJWA</a>
        <div class="bx bx-menu" id="menu-icon"></div>
 
        <ul class="navbar">
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Home">Home</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Disbursement">Disbursement Form</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=View-Loan">Loan Details Form</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Collection">Collection Section</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Contact">Contact Us</a></li>
        </ul>
        <a href="#" class="h-btn">Log In</a>
    </header>
   <hr style=" margin-top: 57px; ">

     <!-----------link to js------>
    <?!= include("JS");?>
  </body>
</html>

CSS Pages

  <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <style>
    <style>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Josefin Sans', sans-serif;
    list-style: none;
    text-decoration: none;
    scroll-behavior: smooth;
    scroll-padding-top: 3.5rem;
}
:root{
    --bg-color: #F5F5F5;
    --secound-bg-color: #191919;
    --text-color: #1f2329;
    --secound-color: #c6c9d8bf;
    --main-color: #11e306;
    --big-font: 5.3rem;
    --h2-font: 4.2rem;
    --p-font: 1.1rem;
    --nav-color : #13b6ec;
}
 
body{
   // background: var(--bg-color);
    color: var(--text-color);
}
header{ 
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    padding: 1px 50px 5px 40px;
    transition-duration: .3s;
}
.logo{
    color: var(--text-color);
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 1px;
}
.navbar{
    display: flex;
}
.navbar li{
    position: relative;
}
.navbar a{
    color: var(--text-color);
    font-weight: bold;
    font-size: 1rem;
    padding: 10px 20px;
}
.navbar a::after{
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background: var(--main-color);
    left: 0;
    bottom: -4px;
    transition: ease .40s;
}
.navbar a:hover:after{
    width: 100%;
}  
 
 }
      
     </style>

Home Pages

  <!-----start header------>
   
    <header>
        <a href="#" class="logo">GRIHA SAJJWA</a>
        <div class="bx bx-menu" id="menu-icon"></div>
 
        <ul class="navbar">
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Home">Home</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Disbursement">Disbursement Form</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=View-Loan">Loan Details Form</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Collection">Collection Section</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Contact">Contact Us</a></li>
        </ul>
        <a href="#" class="h-btn">Log In</a>
    </header>
   <hr style=" margin-top: 57px; ">

Dashboard Pages

  <!-----start header------>
   
    <header>
        <a href="#" class="logo">GRIHA SAJJWA</a>
        <div class="bx bx-menu" id="menu-icon"></div>
 
        <ul class="navbar">
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Home">Home</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Disbursement">Disbursement Form</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=View-Loan">Loan Details Form</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Collection">Collection Section</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Contact">Contact Us</a></li>
        </ul>
        <a href="#" class="h-btn">Log In</a>
    </header>
   <hr style=" margin-top: 57px; ">

Loan View Pages

  <!-----start header------>
   
    <header>
        <a href="#" class="logo">GRIHA SAJJWA</a>
        <div class="bx bx-menu" id="menu-icon"></div>
 
        <ul class="navbar">
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Home">Home</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Disbursement">Disbursement Form</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=View-Loan">Loan Details Form</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Collection">Collection Section</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Contact">Contact Us</a></li>
        </ul>
        <a href="#" class="h-btn">Log In</a>
    </header>
   <hr style=" margin-top: 57px; ">

Collection Pages

  <!-----start header------>
   
    <header>
        <a href="#" class="logo">GRIHA SAJJWA</a>
        <div class="bx bx-menu" id="menu-icon"></div>
 
        <ul class="navbar">
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Home">Home</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Disbursement">Disbursement Form</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=View-Loan">Loan Details Form</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Collection">Collection Section</a></li>
            <li><a href="<?= ScriptApp.getService().getUrl(); ?>?v=Contact">Contact Us</a></li>
        </ul>
        <a href="#" class="h-btn">Log In</a>
    </header>
   <hr style=" margin-top: 57px; ">

Nsutradhar - Excel Tutorials

App Scripts

No comments:

Post a Comment

(adsbygoogle = window.adsbygoogle || []).push({}); App Scripts

No comments:

Post a Comment

App Scripts