[ADD] a simple page to handle job titles

Author: mehdiirh

core/static/core/base.css

@@ -0,0 +1,23 @@
+.circle-red {
+    border: 6px solid red;
+    border-radius: 50%;
+    height: 10px;
+    width: 10px;
+}
+
+.circle-green {
+    border: 6px solid #1e911a;
+    border-radius: 50%;
+    height: 10px;
+    width: 10px;
+}
+
+.fa-slow-spin {
+  -webkit-animation: fa-spin 3s infinite linear;
+  animation: fa-spin 3s infinite linear;
+}
+
+.fa-slower-spin {
+  -webkit-animation: fa-spin 6s infinite linear;
+  animation: fa-spin 6s infinite linear;
+}

core/static/core/base.js

@@ -0,0 +1,7 @@
+function intComma(value) {
+    return value.toString().split(/(?=(?:...)*$)/)
+}
+
+function intSpaceCardNumber(value) {
+    return value.toString().split(/(?=(?:....)*$)/).toString().replaceAll(",", " ")
+}

core/static/core/countdown/countdown.css

@@ -0,0 +1,60 @@
+.loader {
+  border: 0 solid #f3f3f3;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  -webkit-animation: spin 2s linear infinite; /* Safari */
+  animation: spin 2s linear infinite;
+}
+
+.timer-background {
+  background-color: #ffffff;
+}
+
+.timer-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 65px;
+  direction: ltr;
+}
+
+.timer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 14px;
+  color: #3498db;
+}
+
+.timer.info {
+    color: #3498db;
+}
+.timer.warning {
+  color: #bea021;
+}
+.timer.error {
+    color: #ff4757;
+}
+
+.loader.info {
+    border-top: 2px solid #3498db;
+}
+.loader.warning {
+  border-top: 2px solid #bea021;
+}
+.loader.error {
+    border-top: 2px solid #ff4757;
+}
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(30deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

core/static/core/countdown/countdown.js

@@ -0,0 +1,76 @@
+function hasTime(endDatetime) {
+    let endDate = new Date(endDatetime)
+    let now = new Date()
+    let remained = endDate - now
+    return remained > 0
+}
+
+function formatTimer(endDatetime, startDatetime=null) {
+    let endDate = new Date(endDatetime)
+    let now = new Date()
+    let remained = endDate - now
+    remained = parseInt(remained / 1000)
+
+    let minutes = parseInt(remained / 60)
+    let seconds = remained - minutes * 60
+
+    minutes = Math.abs(minutes).toString()
+    seconds = Math.abs(seconds).toString()
+
+    if (minutes.length === 1)
+        minutes = "0" + minutes
+
+    if (seconds.length === 1)
+        seconds = "0" + seconds
+
+    let time = `${minutes}:${seconds}`
+
+    if (remained < 0)
+        time = "-" + time
+
+    let passedTimePercent = 0;
+    if (startDatetime) {
+        let startDate = new Date(startDatetime)
+        let passedTime = now - startDate
+        let totalTime = endDate - startDate
+
+        passedTimePercent = (passedTime / totalTime) * 100
+    }
+
+    return [time, passedTimePercent];
+
+}
+
+
+function countDown(timer, loader, endDatetime, startDatetime =null) {
+    const timerObject = document.querySelector(timer)
+    const loaderObject = document.querySelector(loader)
+
+    let interval = setInterval(
+        () => {
+            let [remainedTime, passedTimePercent] = formatTimer(endDatetime, startDatetime)
+
+            if (passedTimePercent >= 50 && passedTimePercent < 80) {
+                timerObject.classList.replace("info", "warning")
+                loaderObject.classList.replace("info", "warning")
+            }
+            else if (passedTimePercent >= 80) {
+                timerObject.classList.replace("info", "error")
+                timerObject.classList.replace("warning", "error")
+                loaderObject.classList.replace("info", "error")
+                loaderObject.classList.replace("warning", "error")
+            }
+
+            if (hasTime(endDatetime)) {
+                timerObject.textContent = remainedTime
+            } else {
+                timerObject.textContent = "00:00"
+                clearInterval(interval)
+                window.location.reload();
+            }
+
+        },
+        1000
+    )
+
+}

core/static/core/fonts.css

@@ -0,0 +1,33 @@
+@font-face {
+    font-family: Poppins-Medium;
+    src: url('./fonts/poppins/Poppins-Medium.ttf');
+    font-display: swap;
+}
+
+@font-face {
+    font-family: Poppins-Bold;
+    src: url('./fonts/poppins/Poppins-Bold.ttf');
+    font-display: swap;
+}
+
+@font-face {
+    font-family: Poppins-SemiBold;
+    src: url('./fonts/poppins/Poppins-SemiBold.ttf');
+    font-display: swap;
+}
+
+@font-face {
+    font-family: IRANSans-Regular;
+    src: url("./fonts/IranSans/IRANSansWeb_Medium.ttf");
+    font-display: swap;
+}
+
+@font-face {
+    font-family: IRANSans-Bold;
+    src: url("./fonts/IranSans/IRANSansWeb_Bold.ttf");
+    font-display: swap;
+}
+
+.font-sans {
+    font-family: IRANSans-Bold, Poppins-Bold, Arial, serif;
+}