660 lines
35 KiB
HTML
660 lines
35 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>News</title>
|
||
<link rel="shortcut icon" href="logo.png" type="image/png">
|
||
<link rel="stylesheet" href="css/main.css">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Playfair+Display:wght@700;800;900&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body data-theme="dark">
|
||
<audio id="notification_sound">
|
||
<source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
|
||
<source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
|
||
</audio>
|
||
<sm-popup id="confirmation">
|
||
<p id="confirm_message"></p>
|
||
<div class="flex align-center">
|
||
<sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
|
||
<sm-button variant="no-outline" class="submit-btn">OK</button>
|
||
</div>
|
||
</sm-popup>
|
||
<sm-popup id="prompt">
|
||
<h4 id="prompt_message">Some input required</h4>
|
||
<sm-input id="prompt_field"></sm-input>
|
||
<div class="flex align-center">
|
||
<sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
|
||
<sm-button variant="no-outline" class="submit-btn">OK</button>
|
||
</div>
|
||
</sm-popup>
|
||
<sm-notifications id="show_message"></sm-notifications>
|
||
<section id="homepage">
|
||
<header id="homepage_header" class="flex align-center">
|
||
<h3>RanchiMall Times</h3>
|
||
<div id="right_drawer_container" class="justify-right">
|
||
<svg viewBox="0 0 64 64" id="user_icon" class="icon" onclick="showRightDrawer()">
|
||
<title>Settings</title>
|
||
<path d="M31.6,0.5c8.3,0,14.2,5.6,14.2,15S41.1,32.9,32,32.9s-13.8-8-13.8-17.3s5.9-15,14.2-15"/>
|
||
<path d="M25.4,33.4c-2.5,4.7-10.5,7.1-16.4,9.7c-2.4,1-4.4,14-1.6,14c7.7,4.4,16.4,6.6,25.2,6.4
|
||
c8.5,0.3,16.9-2,24.2-6.4c2.8,0,0.8-12.9-1.6-14c-5.9-2.6-13.9-5-16.4-9.7"/>
|
||
</svg>
|
||
<div id="right_drawer" class="flex direction-column hide">
|
||
<header class="flex space-between align-center">
|
||
<h4>Me</h4>
|
||
<svg viewBox="0 0 64 64" class="icon close" onclick="hideRightDrawer()">
|
||
<title>close</title>
|
||
<line x1="64" y1="0" x2="0" y2="64"/>
|
||
<line x1="64" y1="64" x2="0" y2="0"/>
|
||
</svg>
|
||
</header>
|
||
<h4 id="user_id"></h4>
|
||
<section>
|
||
<h4>Dark mode</h4>
|
||
<p>Toggle dark mode on/off.</p>
|
||
<sm-switch id="theme_switcher"></sm-switch>
|
||
</section>
|
||
<section>
|
||
<h4>Haptic feedback</h4>
|
||
<p>Turn haptic feedbak (vibrations) on/off.</p>
|
||
<sm-switch id="haptic_feedback_switcher"></sm-switch>
|
||
</section>
|
||
<section>
|
||
<sm-button>Sign Out</sm-button>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<section id="trending">
|
||
<section id="greetings_section">
|
||
<div id="greeting_illustration"></div>
|
||
<h3 id="greetings">Hey There,<br>Good Morning!</h3>
|
||
<sm-input type="search" placeholder="Search for news">
|
||
<svg slot="icon" class="icon" viewBox="0 0 64 64">
|
||
<title>Search</title>
|
||
<path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/>
|
||
<line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/>
|
||
</svg>
|
||
</sm-input>
|
||
</section>
|
||
<header class="header">
|
||
<h4>TRENDING</h4>
|
||
</header>
|
||
<section id="trending_articles_container" class="grid">
|
||
<div class="article-card">
|
||
<!--<img class="article-image" src="corona.jpg" alt="">-->
|
||
<h5 class="article-details">17 Nov 2020 • 4min read</h5>
|
||
<h3 class="article-heading">A Wake Up Call for India - Analysing the falling GDP</h3>
|
||
<p class="article-preview">India is considered as one of the fastest developing country in the world. In middle of the pandemic Covid-19, well developed country's economy has got affected. And India's condition is no different. Gross Domestic Product, it is final value of the goods and services produced within the geographic boundaries of a country during a specified period of time normally a year. GDP has shrinked by 23.9% for the April to June quarter. In gross value added terms, the economy has shrinked upto 22.8.%. India has never encountered economic shrinkage in at least four decades. This is the first ever occurrence of retarding growth since 1996 when the country started publishing quarterly GDP data. The government's chief economic advisor allocated the declination to "exogenous factors" owing to the Covid-19 pandemic and the emergence of lockdown. Thereafter, stunted economic growth of countries around the globe. The rigid lockdown in India resulted in a huge loss among various sectors and detained economic activities.</p>
|
||
<h5>Continue reading</h5>
|
||
</div>
|
||
<div class="article-card">
|
||
<!--<img class="article-image" src="corona.jpg" alt="">-->
|
||
<h5 class="article-details">17 Nov 2020 • 4min read</h5>
|
||
<h3 class="article-heading">How African pop culture is wowing the globe</h3>
|
||
<p class="article-preview">Talking about African pop culture, it is all about taste, charisma, and variety. People around the globe look upto Africa for its rich cultural endowments.</p>
|
||
<h5>Continue reading</h5>
|
||
</div>
|
||
<div class="article-card">
|
||
<!--<img class="article-image" src="corona.jpg" alt="">-->
|
||
<h5 class="article-details">17 Nov 2020 • 4min read</h5>
|
||
<h3 class="article-heading">How America’s war on the telecoms may boost Chinese technology</h3>
|
||
<p class="article-preview">Arresting the top executive of Huawei has roiled the business world. This incident has stopped truce between United States and China trade war.</p>
|
||
<h5>Continue reading</h5>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
<section id="latest_articles">
|
||
<header class="header">
|
||
<h4>LATEST ARTICLES</h4>
|
||
</header>
|
||
<div id="latest_articles_container" class="grid">
|
||
<div class="article-card">
|
||
<h5 class="article-details">17 Nov 2020 • 4min read</h5>
|
||
<h3 class="article-heading">Covid-19 cases crosses 50000 per day.</h3>
|
||
<p class="article-preview">Lorem ipsum dolor sit amet consectetur adipisicing elit.quos totam. Fuga praesentium provident iusto delectus, iste architecto.</p>
|
||
</div>
|
||
<div class="article-card">
|
||
<h5 class="article-details">17 Nov 2020 • 4min read</h5>
|
||
<h3 class="article-heading">Covid-19 cases crosses 50000 per day.</h3>
|
||
<p class="article-preview">Lorem ipsum dolor sit amet consectetur adipisicing elit.quos totam. Fuga praesentium provident iusto delectus, iste architecto.</p>
|
||
</div>
|
||
<div class="article-card">
|
||
<h5 class="article-details">17 Nov 2020 • 4min read</h5>
|
||
<h3 class="article-heading">Covid-19 cases crosses 50000 per day.</h3>
|
||
<p class="article-preview">Lorem ipsum dolor sit amet consectetur adipisicing elit.quos totam. Fuga praesentium provident iusto delectus, iste architecto.</p>
|
||
</div>
|
||
<div class="article-card">
|
||
<h5 class="article-details">17 Nov 2020 • 4min read</h5>
|
||
<h3 class="article-heading">Covid-19 cases crosses 50000 per day.</h3>
|
||
<p class="article-preview">Lorem ipsum dolor sit amet consectetur adipisicing elit.quos totam. Fuga praesentium provident iusto delectus, iste architecto.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
<section id="article_page" class="article">
|
||
<h5 class="article-details">17 Nov 2020 • 4min read</h5>
|
||
<h3 class="article-heading">A Wake Up Call for India - Analysing the falling GDP</h3>
|
||
<h4 class="para-heading">Why Is Indian GDP the most affected?</h4>
|
||
<p class="article-para">
|
||
India is considered as one of the fastest developing country in the world. In middle of the pandemic Covid-19, well developed country's economy has got affected. And India's condition is no different. Gross Domestic Product, it is final value of the goods and services produced within the geographic boundaries of a country during a specified period of time normally a year.
|
||
</p>
|
||
<h4 class="para-heading">Measures being taken by the government</h4>
|
||
<p class="article-para">
|
||
GDP has shrinked by 23.9% for the April to June quarter. In gross value added terms, the economy has shrinked upto 22.8.%. India has never encountered economic shrinkage in at least four decades. This is the first ever occurrence of retarding growth since 1996 when the country started publishing quarterly GDP data.
|
||
</p>
|
||
<p class="article-para">
|
||
The government's chief economic advisor allocated the declination to "exogenous factors" owing to the Covid-19 pandemic and the emergence of lockdown. Thereafter, stunted economic growth of countries around the globe. The rigid lockdown in India resulted in a huge loss among various sectors and detained economic activities.
|
||
</p>
|
||
</section>
|
||
<!--<section id="settings_page" class="hide-completely">
|
||
<h3>Settings</h3>
|
||
<section>
|
||
<h4>Dark mode</h4>
|
||
<p>Toggle dark mode on/off.</p>
|
||
<sm-switch id="theme_switcher"></sm-switch>
|
||
</section>
|
||
<section>
|
||
<h4>Haptic feedback</h4>
|
||
<p>Turn haptic feedbak (vibrations) on/off.</p>
|
||
<sm-switch id="haptic_feedback_switcher"></sm-switch>
|
||
</section>
|
||
</section>-->
|
||
<script src="components.js"></script>
|
||
<script>
|
||
//Checks for internet connection status
|
||
if (!navigator.onLine)
|
||
notify('There seems to be a problem connecting to the internet.', 'error', '', true)
|
||
window.addEventListener('offline', () => {
|
||
notify('There seems to be a problem connecting to the internet.', 'error', true, true)
|
||
})
|
||
window.addEventListener('online', () => {
|
||
notifications.clearAll()
|
||
notify('We are back online.', '', '', true)
|
||
})
|
||
|
||
const themeSwitcher = document.getElementById('theme_switcher'),
|
||
hapticFeedbackSwitcher = document.getElementById('haptic_feedback_switcher')
|
||
|
||
if (localStorage.theme === "dark") {
|
||
nightlight()
|
||
themeSwitcher.checked = true;
|
||
} else {
|
||
daylight()
|
||
themeSwitcher.checked = false;
|
||
}
|
||
|
||
function daylight() {
|
||
document.body.setAttribute("data-theme", "light");
|
||
}
|
||
|
||
function nightlight() {
|
||
document.body.setAttribute("data-theme", "dark");
|
||
}
|
||
themeSwitcher.addEventListener('change', function (e) {
|
||
if (this.checked) {
|
||
nightlight();
|
||
localStorage.setItem("theme", "dark");
|
||
}
|
||
else {
|
||
daylight();
|
||
localStorage.setItem("theme", "light");
|
||
}
|
||
})
|
||
|
||
let isHapticOn
|
||
if(localStorage.getItem('haptic') === null)
|
||
localStorage.setItem("haptic", "on");
|
||
|
||
if (localStorage.haptic === "on") {
|
||
isHapticOn = true
|
||
hapticFeedbackSwitcher.checked = true;
|
||
} else {
|
||
isHapticOn = false
|
||
hapticFeedbackSwitcher.checked = false;
|
||
}
|
||
hapticFeedbackSwitcher.addEventListener('change', function (e) {
|
||
if (this.checked) {
|
||
isHapticOn = true
|
||
localStorage.setItem("haptic", "on");
|
||
}
|
||
else {
|
||
isHapticOn = false
|
||
localStorage.setItem("haptic", "off");
|
||
}
|
||
})
|
||
|
||
// function required for popups or modals to appear
|
||
class Stack {
|
||
constructor() {
|
||
this.items = [];
|
||
}
|
||
push(element) {
|
||
this.items.push(element);
|
||
}
|
||
pop() {
|
||
if (this.items.length == 0)
|
||
return "Underflow";
|
||
return this.items.pop();
|
||
}
|
||
peek() {
|
||
return this.items[this.items.length - 1];
|
||
}
|
||
}
|
||
let popupStack = new Stack(),
|
||
zIndex = 10;
|
||
|
||
async function showPopup(popup, pinned) {
|
||
let thisPopup = document.getElementById(popup);
|
||
zIndex++
|
||
thisPopup.setAttribute('style', `z-index: ${zIndex}`)
|
||
popupStack = thisPopup.show(pinned, popupStack)
|
||
return thisPopup;
|
||
}
|
||
|
||
// hides the popup or modal
|
||
function hidePopup() {
|
||
if (popupStack.peek() === undefined)
|
||
return;
|
||
popupStack.peek().popup.hide()
|
||
}
|
||
|
||
document.addEventListener('popupopened', async e => {
|
||
let thisPopup = e.detail.popup,
|
||
firstInput = thisPopup.querySelector('sm-input')
|
||
if (firstInput)
|
||
firstInput.focusIn()
|
||
})
|
||
|
||
document.addEventListener('popupclosed', e => {
|
||
popupStack = e.detail.popupStack
|
||
let thisPopup = e.detail.popup
|
||
})
|
||
|
||
const mobileCheck = () => {
|
||
let check = false;
|
||
(function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
|
||
return check;
|
||
};
|
||
|
||
function setAttributes(el, attrs) {
|
||
for (var key in attrs) {
|
||
el.setAttribute(key, attrs[key]);
|
||
}
|
||
}
|
||
|
||
function randomHsl(saturation = 80, lightness = 80) {
|
||
let hue = Math.random() * 360
|
||
let color = {
|
||
primary: `hsla( ${hue}, ${saturation}%, ${lightness}%, 1)`,
|
||
light: `hsla( ${hue}, ${saturation}%, 90%, 0.6)`
|
||
}
|
||
return color;
|
||
}
|
||
|
||
function clearElements(array = []) {
|
||
array.forEach(item => {
|
||
document.getElementById(item).innerHTML = ``
|
||
})
|
||
}
|
||
|
||
let notifications = document.getElementById('show_message');
|
||
//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
|
||
function notify(message, mode, pinned, sound) {
|
||
|
||
if (mode === 'error')
|
||
console.error(message)
|
||
else
|
||
console.log(message)
|
||
notifications.push(message, mode, pinned)
|
||
if (navigator.onLine && sound) {
|
||
notificationSound.currentTime = 0;
|
||
notificationSound.play();
|
||
}
|
||
}
|
||
|
||
// displays a popup for asking permission. Use this instead of JS confirm
|
||
let confirmation = (message, cancelText = 'Cancel', confirmText = 'OK') => {
|
||
return new Promise(resolve => {
|
||
let popup = document.getElementById('confirmation');
|
||
showPopup('confirmation')
|
||
popup.querySelector('#confirm_message').textContent = message;
|
||
let submitButton = popup.querySelector('.submit-btn')
|
||
submitButton.textContent = confirmText
|
||
submitButton.onclick = () => {
|
||
popup.hide()
|
||
resolve(true);
|
||
}
|
||
let cancelButton = popup.querySelector('.cancel-btn')
|
||
cancelButton.textContent = cancelText
|
||
cancelButton.onclick = () => {
|
||
popup.hide()
|
||
resolve(false);
|
||
}
|
||
})
|
||
}
|
||
|
||
// displays a popup for asking user input. Use this instead of JS prompt
|
||
let askPrompt = function (message, defaultVal) {
|
||
return new Promise(resolve => {
|
||
let popup = document.getElementById('prompt'),
|
||
input = popup.querySelector('sm-input');
|
||
if (defaultVal)
|
||
input.value = defaultVal;
|
||
showPopup('prompt')
|
||
input.focus()
|
||
input.addEventListener('keyup', e => {
|
||
if (e.key === 'Enter') {
|
||
resolve(input.value);
|
||
popup.hide()
|
||
}
|
||
})
|
||
popup.querySelector('#prompt_message').textContent = message;
|
||
popup.querySelector('.submit-btn').onclick = () => {
|
||
popup.hide()
|
||
resolve(input.value);
|
||
}
|
||
popup.querySelector('.cancel-btn').onclick = () => {
|
||
popup.hide()
|
||
resolve(null);
|
||
}
|
||
})
|
||
}
|
||
|
||
const currentYear = new Date().getFullYear()
|
||
function formatedTime(time, relative) {
|
||
try {
|
||
if (String(time).indexOf('_'))
|
||
time = String(time).split('_')[0]
|
||
let timeFrag = new Date(parseInt(time)).toString().split(' '),
|
||
day = timeFrag[0],
|
||
month = timeFrag[1],
|
||
date = timeFrag[2],
|
||
year = timeFrag[3],
|
||
minutes = new Date(parseInt(time)).getMinutes(),
|
||
hours = new Date(parseInt(time)).getHours(),
|
||
currentTime = new Date().toString().split(' ')
|
||
minutes = minutes < 10 ? `0${minutes}` : minutes
|
||
let finalHours = ``;
|
||
if (hours > 12)
|
||
finalHours = `${hours - 12}:${minutes}`
|
||
else if (hours === 0)
|
||
finalHours = `12:${minutes}`
|
||
else
|
||
finalHours = `${hours}:${minutes}`
|
||
|
||
finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
|
||
if (relative) {
|
||
if (year == currentYear) {
|
||
if (currentTime[1] === month && date === currentTime[2])
|
||
return `Today at ${finalHours}`;
|
||
else
|
||
return ` ${date} ${month}`;
|
||
|
||
}
|
||
}
|
||
else
|
||
return `${finalHours} ${month} ${date} ${year}`;
|
||
} catch (e) {
|
||
console.error(e);
|
||
return time;
|
||
}
|
||
}
|
||
|
||
function copyToClipboard(parent) {
|
||
let toast = document.getElementById('textCopied'),
|
||
textToCopy = parent.querySelector('.copy').textContent;
|
||
navigator.clipboard.writeText(textToCopy)
|
||
notify('Copied', 'success')
|
||
}
|
||
|
||
function areInputsValid(parent) {
|
||
let allInputs = parent.querySelectorAll("sm-input:not([disabled])"),
|
||
inputsFilled = [...allInputs].every(input => {
|
||
if (input.hasAttribute('floId')) {
|
||
if (floCrypto.validateAddr(input.value.trim())) return true
|
||
}
|
||
else if (input.hasAttribute('privateKey')) {
|
||
if (floCrypto.getPubKeyHex(input.value.trim())) return true
|
||
}
|
||
else
|
||
return input.isValid
|
||
})
|
||
let allRadios = parent.querySelectorAll("input[type='radio']")
|
||
if (allRadios.length)
|
||
return inputsFilled && parent.querySelector('[checked]')
|
||
else
|
||
return inputsFilled
|
||
}
|
||
|
||
function formValidation(formElement) {
|
||
let parent = formElement.closest('sm-popup') || formElement.closest('form'),
|
||
submitBtn = parent.querySelector("button[type='submit']");
|
||
if (!submitBtn) return;
|
||
if (areInputsValid(parent))
|
||
submitBtn.disabled = false;
|
||
else
|
||
submitBtn.disabled = true;
|
||
}
|
||
|
||
window.addEventListener('load', () => {
|
||
document.addEventListener('input', e => {
|
||
if (e.target.closest('sm-input')) {
|
||
let input = e.target.closest('sm-input')
|
||
formValidation(input)
|
||
if (input.value === '')
|
||
input.setValidity('')
|
||
let validityState = input.validity
|
||
if (input.hasAttribute('type') && input.getAttribute('type') === 'number') {
|
||
if (validityState.rangeUnderflow) {
|
||
input.setValidity('Minium ₹1 should be entered.')
|
||
}
|
||
else if (validityState.typeMismatch) {
|
||
input.setValidity('Only digits are allowed.')
|
||
}
|
||
else {
|
||
input.setValidity('')
|
||
}
|
||
}
|
||
else if (input.hasAttribute('floId')) {
|
||
if (floCrypto.validateAddr(input.value.trim()) || input.value.trim() === '')
|
||
input.setValidity('')
|
||
else
|
||
input.setValidity('Invalid FLO address.')
|
||
}
|
||
else if (input.hasAttribute('privateKey')) {
|
||
if (floCrypto.getPubKeyHex(input.value.trim()) || input.value.trim() === '')
|
||
input.setValidity('')
|
||
else
|
||
input.setValidity('Invalid FLO private key.')
|
||
}
|
||
else {
|
||
if (validityState.patternMismatch)
|
||
input.setValidity('Invalid UPI address.')
|
||
if (validityState.tooShort || validityState.tooLong)
|
||
input.setValidity('UPI transaction Id should be 12digits long.')
|
||
else
|
||
input.setValidity('')
|
||
}
|
||
}
|
||
})
|
||
document.addEventListener('keyup', (e) => {
|
||
if (e.target.closest('sm-input')) {
|
||
if (e.key === 'Enter') {
|
||
let parent = e.target.closest('sm-popup') || e.target.closest('form')
|
||
parent.querySelector("button[type='submit']")
|
||
.click();
|
||
}
|
||
}
|
||
})
|
||
|
||
document.addEventListener('mousedown', (e) => {
|
||
if (e.target.closest('.article-card, sm-button, .interact')) {
|
||
createRipple(e, e.target.closest('.article-card, sm-button, .interact'))
|
||
}
|
||
})
|
||
|
||
function createRipple(event, target) {
|
||
const circle = document.createElement("span");
|
||
const diameter = Math.max(target.clientWidth, target.clientHeight);
|
||
const radius = diameter / 2;
|
||
circle.style.width = circle.style.height = `${diameter}px`;
|
||
circle.style.left = `${event.clientX - (target.getBoundingClientRect().left + radius)}px`;
|
||
circle.style.top = `${event.clientY - (target.getBoundingClientRect().top + radius)}px`;
|
||
circle.classList.add("ripple");
|
||
const rippleAnimation = circle.animate([
|
||
|
||
{
|
||
transform: 'scale(3)',
|
||
opacity: 0
|
||
}
|
||
],
|
||
{
|
||
duration: 1000,
|
||
fill: "forwards",
|
||
easing: 'ease-out'
|
||
})
|
||
target.append(circle);
|
||
rippleAnimation.onfinish = () => {
|
||
circle.remove()
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<script>
|
||
const hours = new Date().getHours(),
|
||
greetingIllustration = document.getElementById('greeting_illustration'),
|
||
greetings = document.getElementById('greetings')
|
||
if (hours > 4 && hours < 12){
|
||
greetingIllustration.innerHTML = `
|
||
<svg viewBox="0 0 93 93" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g filter="url(#filter0_d)">
|
||
<path d="M46.3 80.6C67.4525 80.6 84.6 63.4525 84.6 42.3C84.6 21.1475 67.4525 4 46.3 4C25.1475 4 8 21.1475 8 42.3C8 63.4525 25.1475 80.6 46.3 80.6Z" fill="url(#paint0_linear)"/>
|
||
</g>
|
||
<defs>
|
||
<filter id="filter0_d" x="0" y="0" width="92.6" height="92.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||
<feOffset dy="4"/>
|
||
<feGaussianBlur stdDeviation="4"/>
|
||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.603922 0 0 0 0 0.121569 0 0 0 0.32 0"/>
|
||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||
</filter>
|
||
<linearGradient id="paint0_linear" x1="46.3" y1="3.988" x2="46.3" y2="80.612" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#FFD95B"/>
|
||
<stop offset="1" stop-color="#FF9419"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
`
|
||
greetings.innerHTML = `hey there,<br>good morning!`
|
||
}
|
||
else if(hours >= 12 && hours < 19){
|
||
greetingIllustration.innerHTML = `
|
||
<svg viewBox="0 0 112 93" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g filter="url(#filter0_d)">
|
||
<path d="M65.5 80.6C86.6525 80.6 103.8 63.4525 103.8 42.3C103.8 21.1475 86.6525 4 65.5 4C44.3475 4 27.2 21.1475 27.2 42.3C27.2 63.4525 44.3475 80.6 65.5 80.6Z" fill="url(#paint0_linear)"/>
|
||
</g>
|
||
<g filter="url(#filter1_d)">
|
||
<path d="M61.2 63C61.2 54.2 54.1 47.1 45.3 47.1C44.7 47.1 44.1 47.1 43.4 47.2C39.7 41.7 33.5 38.1 26.4 38.1C15.1 38.1 6 47.2 6 58.5C6 69.8 15.1 78.9 26.4 78.9H45.7C54.3 78.6 61.2 71.6 61.2 63Z" fill="url(#paint1_linear)"/>
|
||
</g>
|
||
<defs>
|
||
<filter id="filter0_d" x="19.2" y="0" width="92.6" height="92.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||
<feOffset dy="4"/>
|
||
<feGaussianBlur stdDeviation="4"/>
|
||
<feColorMatrix type="matrix" values="0 0 0 0 0.933333 0 0 0 0 0.141177 0 0 0 0 0.137255 0 0 0 0.32 0"/>
|
||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||
</filter>
|
||
<filter id="filter1_d" x="0" y="36.1" width="67.2" height="52.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||
<feOffset dy="4"/>
|
||
<feGaussianBlur stdDeviation="3"/>
|
||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||
</filter>
|
||
<linearGradient id="paint0_linear" x1="65.52" y1="3.988" x2="65.52" y2="80.612" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#F7931E"/>
|
||
<stop offset="1" stop-color="#ED1C24"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint1_linear" x1="17.1779" y1="76.823" x2="46.1452" y2="46.9915" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#E6E6E6"/>
|
||
<stop offset="1" stop-color="white"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
`
|
||
|
||
greetings.innerHTML = hours < 16 ? `Hey there,<br>Good afternoon!` : `Hey there,<br>Good evening!`
|
||
}
|
||
else{
|
||
greetingIllustration.innerHTML = `
|
||
<svg width="99" height="99" viewBox="0 0 99 99" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g filter="url(#filter0_d)">
|
||
<path d="M73.7 62.2C55.8 62.2 41.3 47.7 41.3 29.8C41.3 22.5 43.7 15.8 47.7 10.4C27.9 11.5 12.2 28 12.2 48C12.2 68.8 29.1 85.7 49.9 85.7C66.6 85.7 80.7 74.9 85.7 59.9C82 61.4 77.9 62.2 73.7 62.2Z" fill="url(#paint0_linear)"/>
|
||
</g>
|
||
<path d="M3.79999 7.6C5.89867 7.6 7.59999 5.89868 7.59999 3.8C7.59999 1.70132 5.89867 0 3.79999 0C1.70131 0 0 1.70132 0 3.8C0 5.89868 1.70131 7.6 3.79999 7.6Z" fill="url(#paint1_linear)"/>
|
||
<path d="M96.8 95.7C97.8493 95.7 98.7 94.8493 98.7 93.8C98.7 92.7507 97.8493 91.9 96.8 91.9C95.7506 91.9 94.9 92.7507 94.9 93.8C94.9 94.8493 95.7506 95.7 96.8 95.7Z" fill="url(#paint2_linear)"/>
|
||
<path d="M86.7 23.4C87.5837 23.4 88.3 22.6837 88.3 21.8C88.3 20.9163 87.5837 20.2 86.7 20.2C85.8163 20.2 85.1 20.9163 85.1 21.8C85.1 22.6837 85.8163 23.4 86.7 23.4Z" fill="url(#paint3_linear)"/>
|
||
<path d="M12.4 81.1C13.3941 81.1 14.2 80.2941 14.2 79.3C14.2 78.3059 13.3941 77.5 12.4 77.5C11.4059 77.5 10.6 78.3059 10.6 79.3C10.6 80.2941 11.4059 81.1 12.4 81.1Z" fill="#4253B7"/>
|
||
<path d="M19.4 99C20.8359 99 22 97.8359 22 96.4C22 94.9641 20.8359 93.8 19.4 93.8C17.9641 93.8 16.8 94.9641 16.8 96.4C16.8 97.8359 17.9641 99 19.4 99Z" fill="#4253B7"/>
|
||
<path d="M90.7 2.1C91.2523 2.1 91.7 1.65228 91.7 1.1C91.7 0.547714 91.2523 0.0999985 90.7 0.0999985C90.1477 0.0999985 89.7 0.547714 89.7 1.1C89.7 1.65228 90.1477 2.1 90.7 2.1Z" fill="#4253B7"/>
|
||
<defs>
|
||
<filter id="filter0_d" x="3.2" y="5.4" width="91.5" height="93.3" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||
<feOffset dy="4"/>
|
||
<feGaussianBlur stdDeviation="4.5"/>
|
||
<feColorMatrix type="matrix" values="0 0 0 0 0.121569 0 0 0 0 0.0431373 0 0 0 0 0.219608 0 0 0 0.24 0"/>
|
||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||
</filter>
|
||
<linearGradient id="paint0_linear" x1="18.049" y1="79.8901" x2="70.0209" y2="27.889" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#0E0319"/>
|
||
<stop offset="1" stop-color="#6D30C6"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint1_linear" x1="0.558399" y1="7.1335" x2="6.8166" y2="0.871708" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#0E0319"/>
|
||
<stop offset="1" stop-color="#6D30C6"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint2_linear" x1="95.1481" y1="95.4429" x2="98.3268" y2="92.2623" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#0E0319"/>
|
||
<stop offset="1" stop-color="#6D30C6"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint3_linear" x1="85.3272" y1="23.2212" x2="87.9825" y2="20.5644" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#0E0319"/>
|
||
<stop offset="1" stop-color="#6D30C6"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
`
|
||
greetings.innerHTML = `Good night!`
|
||
}
|
||
const rightDrawer = document.getElementById('right_drawer')
|
||
function showRightDrawer(){
|
||
rightDrawer.classList.add('no-transformations')
|
||
rightDrawer.classList.remove('hide')
|
||
if(window.innerWidth < 800){
|
||
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
|
||
}
|
||
}
|
||
function hideRightDrawer(){
|
||
rightDrawer.classList.remove('no-transformations')
|
||
if(window.innerWidth > 800){
|
||
rightDrawer.classList.add('hide')
|
||
}
|
||
const scrollY = document.body.style.top;
|
||
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
||
setTimeout(() => {
|
||
document.body.setAttribute('style', `overflow: auto; top: initial`)
|
||
}, 300);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |