splitting to advanced and basic pages, adding more branding

rorsat-ltd · Oct 11, 2024 · e79d7ea · e79d7ea
1 parent 93c1503
commit e79d7ea
Show file tree

Hide file tree

Showing 9 changed files with 8,877 additions and 159 deletions.
diff --git a/content/advanced/_index.md b/content/advanced/_index.md
@@ -0,0 +1,4 @@
++++
+title = "Advanced"
+template = "adv.html"
++++
diff --git a/static/css/govuk-frontend-5.7.0.min.css b/static/css/govuk-frontend-5.7.0.min.css
diff --git a/static/css/style.css b/static/css/style.css
@@ -0,0 +1,11 @@
+.urbanist-black {
+    font-family: "Urbanist", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 900;
+    font-style: normal;
+  }
+
+
+.govuk-header--full-width-border {
+    border-bottom-color: #2a3d69;
+  }
diff --git a/static/js/govuk-frontend-5.7.0.min.js b/static/js/govuk-frontend-5.7.0.min.js
diff --git a/static/js/telstar-calc.js b/static/js/telstar-calc.js
@@ -1,4 +1,60 @@
-function hi_or_lo() {
+function hi_or_lo_bas() {
+    let f = Number(document.getElementById("frequency").value); // frequency input
+    const lnb_hi = 10600; // top of LNB range (default)
+    const lnb_lo = 9750;  // bottom of LNB range (default)
+    let hi_calc = f - lnb_hi;
+    let lo_calc = f - lnb_lo;
+    const freq_band_hi = 2000; // top of band (default)
+    const freq_band_lo = 950;  // bottom of band (default)
+    let result = "";
+    let freq_result = 9999 // default value
+
+    // Boolean values
+    let use_hi = false;
+    let use_lo = false;
+
+    // Getting radio button values
+    let polarity = document.querySelector('input[name="polarity"]:checked');
+
+
+    if (hi_calc >= freq_band_lo && hi_calc <= freq_band_hi) {
+        use_hi = true;
+        freq_result = hi_calc
+    }
+    if (lo_calc >= freq_band_lo && lo_calc <= freq_band_hi) {
+        use_lo = true;
+        freq_result = lo_calc
+    }
+
+    if (!use_hi && use_lo) {
+        result = "Lo";
+    } else if (use_hi && !use_lo) {
+        result = "Hi";
+    } else if (!use_hi && !use_lo) {
+        result = "Out of Range";
+    } else if (use_hi && use_lo) {
+        result = "Overlap, both in range";
+    } else {
+        console.warn("Error in calculation; unknown state of use_hi and use_lo");
+        result = "error";
+    }
+
+    // Displaying the result with polarity
+    if (polarity && (result === "Hi" || result === "Lo")) {
+        result = polarity.value + result;
+    }
+
+    document.getElementById("result-box").value = result;
+    document.getElementById("freq-res").value = freq_result;
+
+
+}
+
+
+
+
+
+function hi_or_lo_adv() {
     let f = Number(document.getElementById("frequency").value); // frequency input
     let lnb_hi = 10600; // top of LNB range (default)
     let lnb_lo = 9750;  // bottom of LNB range (default)

diff --git a/templates/adv.html b/templates/adv.html
@@ -0,0 +1,264 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<section aria-label="Service information" class="govuk-service-navigation"
+  data-module="govuk-service-navigation">
+  <div class="govuk-width-container">
+    <div class="govuk-service-navigation__container">
+      <span class="govuk-service-navigation__service-name">
+        <a href="#" class="govuk-service-navigation__link">
+          Telstar 
+        </a>
+      </span>
+      <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+        <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+          Menu
+        </button>
+        <ul class="govuk-service-navigation__list" id="navigation">
+          <li class="govuk-service-navigation__item">
+            <a class="govuk-service-navigation__link" href="/">
+              Basic
+            </a>
+          </li>
+          <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
+            <a class="govuk-service-navigation__link" href="/advanced" aria-current="true">
+              <strong class="govuk-service-navigation__active-fallback">Advanced</strong>
+            </a>
+          </li>
+          <!-- <li class="govuk-service-navigation__item">
+            <a class="govuk-service-navigation__link" href="#">
+              Navigation item 3
+            </a>
+          </li> -->
+        </ul>
+      </nav>
+    </div>
+  </div>
+</section>
+
+<div class="govuk-width-container app-width-container">
+  <div class="govuk-phase-banner">
+    <p class="govuk-phase-banner__content">
+      <strong class="govuk-tag govuk-phase-banner__content__tag">
+        Alpha
+      </strong>
+      <span class="govuk-phase-banner__text">
+        This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.
+      </span>
+    </p>
+  </div>
+
+<div class="govuk-width-container">
+    <main class="govuk-main-wrapper">
+        <h1 class="govuk-heading-xl">Satellite Frequency Calculator (Advanced)</h1>
+
+        <!-- input boxes - Sat Name -->
+
+
+        <div class="govuk-form-group">
+            <label class="govuk-label" for="sat-name">
+                Satellite Name
+            </label>
+            <div class="govuk-input__wrapper">
+                <select class="govuk-select" id="sat-name" name="sat-name">
+                    <option value="hb-13g" selected>Hotbird 13G</option>
+                    <option value="et-9b" >Eutelsat 9B</option>
+                    <option value="aa-3b" >Astra 3B</option>
+                </select>
+            </div>
+        </div>
+
+        <!-- input boxes - Channel Name -->
+
+
+        <div class="govuk-form-group">
+            <label class="govuk-label" for="channel-name">
+                Channel Name
+            </label>
+            <div class="govuk-input__wrapper">
+                <input type="text" id="channel-name" class="govuk-input govuk-input--width-10" spellcheck="false">
+            </div>
+        </div>
+
+
+        <!-- input boxes - Frequency -->
+
+
+        <div class="govuk-form-group">
+            <label class="govuk-label" for="frequency">
+                Frequency
+            </label>
+            <div class="govuk-input__wrapper">
+                <input type="text" id="frequency" class="govuk-input govuk-input--width-10 govuk-input--extra-letter-spacing" spellcheck="false"
+                    inputmode="numeric">
+                <div class="govuk-input__suffix" aria-hidden="true">MHz</div>
+            </div>
+        </div>
+
+        <!-- input boxes - Symbol Rate -->
+
+
+        <div class="govuk-form-group">
+            <label class="govuk-label" for="symbol-rate">
+                Symbol Rate
+            </label>
+            <div class="govuk-input__wrapper">
+                <input type="text" id="symbol-rate" class="govuk-input govuk-input--width-10 govuk-input--extra-letter-spacing" spellcheck="false"
+                    inputmode="numeric">
+                <div class="govuk-input__suffix" aria-hidden="true">Bd</div>
+            </div>
+        </div>
+
+        <!-- input boxes - Channel No -->
+
+
+        <div class="govuk-form-group">
+            <label class="govuk-label" for="channel-no">
+                Channel Number
+            </label>
+            <div class="govuk-input__wrapper">
+                <input type="text" id="channel-no" class="govuk-input govuk-input--width-10 govuk-input--extra-letter-spacing" spellcheck="false"
+                    inputmode="numeric">
+            </div>
+        </div>
+
+                <!-- input boxes - IRD No -->
+
+
+                <div class="govuk-form-group">
+                    <label class="govuk-label" for="ird-no">
+                        IRD Number
+                    </label>
+                    <div class="govuk-input__wrapper">
+                        <input type="text" id="ird-no" class="govuk-input govuk-input--width-10 govuk-input--extra-letter-spacing" spellcheck="false"
+                            inputmode="numeric">
+                    </div>
+                </div>
+
+
+
+        <!-- Radio buttons - Polarity -->
+
+        <div class="govuk-form-group">
+            <fieldset class="govuk-fieldset" id="polairty">
+                <legend class="govuk-fieldset__legend govuk-fieldset__legend--m" id="polarity">
+                    <h2 class="govuk-fieldset__heading">
+                        Polarity
+                    </h2>
+                </legend>
+                <div class="govuk-radios" data-module="govuk-radios">
+                    <div class="govuk-radios__item">
+                        <input class="govuk-radios__input" type="radio" id="h" name="polarity" value="H" checked>
+                        <label class="govuk-label govuk-radios__label" for="h">H</label>
+                    </div>
+
+                    <div class="govuk-radios__item">
+                        <input class="govuk-radios__input" type="radio" id="v" name="polarity" value="V">
+                        <label class="govuk-label govuk-radios__label" for="v">V</label>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+
+
+        <!-- Radio buttons - Standard -->
+
+        <div class="govuk-form-group">
+            <fieldset class="govuk-fieldset" id="standard" name="standard">
+                <legend class="govuk-fieldset__legend govuk-fieldset__legend--m" id="standard" name="standard">
+                    <h2 class="govuk-fieldset__heading">
+                        Standard
+                    </h2>
+                </legend>
+                <div class="govuk-radios" data-module="govuk-radios">
+                    <div class="govuk-radios__item">
+                        <input class="govuk-radios__input" type="radio" id="s" name="standard" value="DVB-S">
+                        <label class="govuk-label govuk-radios__label" for="s">DVB-S</label>
+                    </div>
+                    <div class="govuk-radios__item">
+                        <input class="govuk-radios__input" type="radio" id="s2" name="standard" value="DVB-S2" checked>
+                        <label class="govuk-label govuk-radios__label" for="s2">DVB-S2</label>
+                    </div>
+                    <div class="govuk-radios__item">
+                        <input class="govuk-radios__input" type="radio" id="S2X" name="standard" value="DVB-S2X">
+                        <label class="govuk-label govuk-radios__label" for="S2X">DVB-S2X</label>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+
+
+        <!-- Buttons  -->
+        <div class="govuk-button-group">
+            <button type="submit" class="govuk-button" data-module="govuk-button" onclick="hi_or_lo_adv()">
+                Go! Do maths for me!
+            </button>
+
+
+            <button id="clear" type="submit" class="govuk-button govuk-button--secondary" data-module="govuk-button"
+                onclick="clr()">
+                Clear
+            </button>
+
+        </div>
+
+        <!-- Result: Result -->
+
+        <div class="govuk-form-group">
+            <label class="govuk-label" for="result-box">
+                Result
+            </label>
+            <div class="govuk-input__wrapper">
+                <input type="text" id="result-box" class="govuk-input govuk-input--width-10 govuk-input--extra-letter-spacing" spellcheck="false"
+                    readonly="true" disabled="true">
+            </div>
+        </div>
+        <!-- Result: Frequency -->
+
+        <div class="govuk-form-group">
+            <label class="govuk-label" for="freq-res">
+                Frequency
+            </label>
+            <div class="govuk-input__wrapper">
+                <input type="text" id="freq-res" class="govuk-input govuk-input--width-10 govuk-input--extra-letter-spacing" spellcheck="false"
+                    inputmode="numeric" readonly="true" disabled="true">
+                <div class="govuk-input__suffix" aria-hidden="true">MHz</div>
+            </div>
+        </div>
+        <!-- Advanced Settings: -->
+
+
+        <div id="adv-sett">
+            <h2 class="govuk-heading-l">Advanced Settings</h2>
+
+            <div class="govuk-warning-text">
+                <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+                <strong class="govuk-warning-text__text">
+                    <span class="govuk-visually-hidden">Warning</span>
+                    Be careful!
+                </strong>
+            </div>
+
+            <p>
+                <label class="govuk-label" for="freq-band">
+                    Select a frequency band
+                </label>
+                <select class="govuk-select" id="freq-band" name="freq-band">
+                    <option value="l-band" selected>L Band (950MHz - 2000MHz)</option>
+                </select>
+            </p>
+            <p>
+                <label class="govuk-label" for="lnb-sel">
+                    Select an LNB Range
+                </label>
+                <select class="govuk-select" id="lnb-sel" name="lnb-sel">
+                    <option value="cbs-lon" selected>CBS LON MCR</option>
+                </select>
+            </p>
+        </div>
+
+    </main>
+</div>
+
+{% endblock content %}
diff --git a/templates/base.html b/templates/base.html
@@ -10,17 +10,23 @@
     integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-  <!-- head - custom css -->
-  <link rel="stylesheet" href="css/style.css">
+    
+
 
 <!-- google fonts preconnect -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
+  <link href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
 
     <link rel="stylesheet" href="/css/govuk-frontend-5.7.0.min.css">
     <link rel="stylesheet" href="/css/accessible-autocomplete.min.css" />
+
+
+          <!-- head - custom css - must be last css-->
+  <link rel="stylesheet" href="css/style.css">
+
+
 </head>
 
 <body class="govuk-template__body js-enabled govuk-frontend-supported">