user choosing options to display working on new frontend
This commit is contained in:
Neythen
Binary file not shown.
579
static/app.js
Normal file
579
static/app.js
Normal file
@@ -0,0 +1,579 @@
|
||||
var availableFeatures = document.querySelectorAll("#available-features li");
|
||||
var displayFormat = document.querySelector("#display-format");
|
||||
var featureToDisplay = document.querySelector("#feature-to-display");
|
||||
var displayToFeature = document.querySelector("#display-to-feature");
|
||||
var displayToFormat = document.querySelectorAll("#display-format li");
|
||||
var availableToDisplay = document.querySelector("#available-features");
|
||||
var displayincreaseBtn = document.getElementById("display-increase-btn");
|
||||
var displayDecreaseBtn = document.getElementById("display-decrease-btn");
|
||||
|
||||
// features lists
|
||||
var stocksFeatures = document.querySelectorAll("#stocks-features li");
|
||||
var cryptoFeatures = document.querySelectorAll("#crypto-features li");
|
||||
var forexFeatures = document.querySelectorAll("#forex-features li");
|
||||
var currentWeatherFeatures = document.querySelectorAll(
|
||||
"#current-weather-features li"
|
||||
);
|
||||
var dailyForecastFeatures = document.querySelectorAll(
|
||||
"#daily-forecast-features li"
|
||||
);
|
||||
var newsFeatures = document.querySelectorAll("#news-features li");
|
||||
var upcomingGamesFeatures = document.querySelectorAll(
|
||||
"#upcoming-games-features li"
|
||||
);
|
||||
var pastGamesFeatures = document.querySelectorAll("#past-games-features li");
|
||||
var liveGamesFeatures = document.querySelectorAll("#live-games-features li");
|
||||
var teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
|
||||
var imagesFeatures = document.querySelectorAll("#images-features li");
|
||||
var gifsFeatures = document.querySelectorAll("#gifs-features li");
|
||||
var messagesFeatures = document.querySelectorAll("#messages-features li");
|
||||
|
||||
var allFeaturesList = [
|
||||
stocksFeatures,
|
||||
cryptoFeatures,
|
||||
forexFeatures,
|
||||
currentWeatherFeatures,
|
||||
dailyForecastFeatures,
|
||||
newsFeatures,
|
||||
upcomingGamesFeatures,
|
||||
pastGamesFeatures,
|
||||
liveGamesFeatures,
|
||||
teamStatsFeatures,
|
||||
imagesFeatures,
|
||||
gifsFeatures,
|
||||
messagesFeatures,
|
||||
];
|
||||
|
||||
// features remove buttons
|
||||
var stocksRemoveBtn = document.getElementById("stocks-remove-btn");
|
||||
var cryptoRemoveBtn = document.getElementById("crypto-remove-btn");
|
||||
var forexRemoveBtn = document.getElementById("forex-remove-btn");
|
||||
var currentWeatherRemoveBtn = document.getElementById(
|
||||
"current-weather-remove-btn"
|
||||
);
|
||||
var dailyForecastRemoveBtn = document.getElementById(
|
||||
"daily-forecast-remove-btn"
|
||||
);
|
||||
var newsRemoveBtn = document.getElementById("news-remove-btn");
|
||||
var upcomingGamesRemoveBtn = document.getElementById(
|
||||
"upcoming-games-remove-btn"
|
||||
);
|
||||
var pastGamesRemoveBtn = document.getElementById("past-games-remove-btn");
|
||||
var liveGamesRemoveBtn = document.getElementById("live-games-remove-btn");
|
||||
var teamStatsRemoveBtn = document.getElementById("team-stats-remove-btn");
|
||||
var imagesRemoveBtn = document.getElementById("images-remove-btn");
|
||||
var gifsRemoveBtn = document.getElementById("gifs-remove-btn");
|
||||
var messagesRemoveBtn = document.getElementById("messages-remove-btn");
|
||||
|
||||
var allFeaturesRemoveBtns = [
|
||||
stocksRemoveBtn,
|
||||
cryptoRemoveBtn,
|
||||
forexRemoveBtn,
|
||||
currentWeatherRemoveBtn,
|
||||
dailyForecastRemoveBtn,
|
||||
newsRemoveBtn,
|
||||
upcomingGamesRemoveBtn,
|
||||
pastGamesRemoveBtn,
|
||||
liveGamesRemoveBtn,
|
||||
teamStatsRemoveBtn,
|
||||
imagesRemoveBtn,
|
||||
gifsRemoveBtn,
|
||||
messagesRemoveBtn,
|
||||
];
|
||||
// features increase buttons
|
||||
var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
|
||||
var cryptoincreaseBtn = document.getElementById("crypto-increase-btn");
|
||||
var forexincreaseBtn = document.getElementById("forex-increase-btn");
|
||||
var currentWeatherincreaseBtn = document.getElementById(
|
||||
"current-weather-increase-btn"
|
||||
);
|
||||
var dailyForecastincreaseBtn = document.getElementById(
|
||||
"daily-forecast-increase-btn"
|
||||
);
|
||||
var newsincreaseBtn = document.getElementById("news-increase-btn");
|
||||
var upcomingGamesincreaseBtn = document.getElementById(
|
||||
"upcoming-games-increase-btn"
|
||||
);
|
||||
var pastGamesincreaseBtn = document.getElementById("past-games-increase-btn");
|
||||
var liveGamesincreaseBtn = document.getElementById("live-games-increase-btn");
|
||||
var teamStatsincreaseBtn = document.getElementById("team-stats-increase-btn");
|
||||
var imagesincreaseBtn = document.getElementById("images-increase-btn");
|
||||
var gifsincreaseBtn = document.getElementById("gifs-increase-btn");
|
||||
var messagesincreaseBtn = document.getElementById("messages-increase-btn");
|
||||
|
||||
var allFeaturesIncreaseBtns = [
|
||||
stocksincreaseBtn,
|
||||
cryptoincreaseBtn,
|
||||
forexincreaseBtn,
|
||||
currentWeatherincreaseBtn,
|
||||
dailyForecastincreaseBtn,
|
||||
newsincreaseBtn,
|
||||
upcomingGamesincreaseBtn,
|
||||
pastGamesincreaseBtn,
|
||||
liveGamesincreaseBtn,
|
||||
teamStatsincreaseBtn,
|
||||
imagesincreaseBtn,
|
||||
gifsincreaseBtn,
|
||||
messagesincreaseBtn,
|
||||
];
|
||||
|
||||
// features decrease buttons
|
||||
var stocksDecreaseBtn = document.getElementById("stocks-decrease-btn");
|
||||
var cryptoDecreaseBtn = document.getElementById("crypto-decrease-btn");
|
||||
var forexDecreaseBtn = document.getElementById("forex-decrease-btn");
|
||||
var currentWeatherDecreaseBtn = document.getElementById(
|
||||
"current-weather-decrease-btn"
|
||||
);
|
||||
var dailyForecastDecreaseBtn = document.getElementById(
|
||||
"daily-forecast-decrease-btn"
|
||||
);
|
||||
var newsDecreaseBtn = document.getElementById("news-decrease-btn");
|
||||
var upcomingGamesDecreaseBtn = document.getElementById(
|
||||
"upcoming-games-decrease-btn"
|
||||
);
|
||||
var pastGamesDecreaseBtn = document.getElementById("past-games-decrease-btn");
|
||||
var liveGamesDecreaseBtn = document.getElementById("live-games-decrease-btn");
|
||||
var teamStatsDecreaseBtn = document.getElementById("team-stats-decrease-btn");
|
||||
var imagesDecreaseBtn = document.getElementById("images-decrease-btn");
|
||||
var gifsDecreaseBtn = document.getElementById("gifs-decrease-btn");
|
||||
var messagesDecreaseBtn = document.getElementById("messages-decrease-btn");
|
||||
|
||||
var allFeaturesDecreaseBtns = [
|
||||
stocksDecreaseBtn,
|
||||
cryptoDecreaseBtn,
|
||||
forexDecreaseBtn,
|
||||
currentWeatherDecreaseBtn,
|
||||
dailyForecastDecreaseBtn,
|
||||
newsDecreaseBtn,
|
||||
upcomingGamesDecreaseBtn,
|
||||
pastGamesDecreaseBtn,
|
||||
liveGamesDecreaseBtn,
|
||||
teamStatsDecreaseBtn,
|
||||
imagesDecreaseBtn,
|
||||
gifsDecreaseBtn,
|
||||
messagesDecreaseBtn,
|
||||
];
|
||||
|
||||
const changeVarValue = () => {
|
||||
stocksFeatures = document.querySelectorAll("#stocks-features li");
|
||||
cryptoFeatures = document.querySelectorAll("#crypto-features li");
|
||||
forexFeatures = document.querySelectorAll("#forex-features li");
|
||||
currentWeatherFeatures = document.querySelectorAll(
|
||||
"#current-weather-features li"
|
||||
);
|
||||
dailyForecastFeatures = document.querySelectorAll(
|
||||
"#daily-forecast-features li"
|
||||
);
|
||||
newsFeatures = document.querySelectorAll("#news-features li");
|
||||
upcomingGamesFeatures = document.querySelectorAll(
|
||||
"#upcoming-games-features li"
|
||||
);
|
||||
pastGamesFeatures = document.querySelectorAll("#past-games-features li");
|
||||
liveGamesFeatures = document.querySelectorAll("#live-games-features li");
|
||||
teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
|
||||
imagesFeatures = document.querySelectorAll("#images-features li");
|
||||
gifsFeatures = document.querySelectorAll("#gifs-features li");
|
||||
messagesFeatures = document.querySelectorAll("#messages-features li");
|
||||
|
||||
allFeaturesList = [
|
||||
stocksFeatures,
|
||||
cryptoFeatures,
|
||||
forexFeatures,
|
||||
currentWeatherFeatures,
|
||||
dailyForecastFeatures,
|
||||
newsFeatures,
|
||||
upcomingGamesFeatures,
|
||||
pastGamesFeatures,
|
||||
liveGamesFeatures,
|
||||
teamStatsFeatures,
|
||||
imagesFeatures,
|
||||
gifsFeatures,
|
||||
messagesFeatures,
|
||||
];
|
||||
};
|
||||
|
||||
const addEventOnList = () => {
|
||||
// for available feature
|
||||
for (let i = 0; i < availableFeatures.length; i++) {
|
||||
const availableFeature = availableFeatures[i];
|
||||
availableFeature.addEventListener("click", () => {
|
||||
for (let i = 0; i < availableFeatures.length; i++) {
|
||||
availableFeatures[i].setAttribute("class", "");
|
||||
}
|
||||
if (availableFeature.getAttribute("class") == "active") {
|
||||
availableFeature.setAttribute("class", "");
|
||||
} else {
|
||||
availableFeature.setAttribute("class", "active");
|
||||
}
|
||||
});
|
||||
}
|
||||
// for display format
|
||||
for (let i = 0; i < displayToFormat.length; i++) {
|
||||
const display_format = displayToFormat[i];
|
||||
display_format.addEventListener("click", () => {
|
||||
for (let i = 0; i < displayToFormat.length; i++) {
|
||||
displayToFormat[i].setAttribute("class", "");
|
||||
}
|
||||
if (display_format.getAttribute("class") == "active") {
|
||||
display_format.setAttribute("class", "");
|
||||
} else {
|
||||
display_format.setAttribute("class", "active");
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const addEventonBtns = () => {
|
||||
featureToDisplay.addEventListener("click", () => {
|
||||
for (let i = 0; i < availableFeatures.length; i++) {
|
||||
const availableFeature = availableFeatures[i];
|
||||
if (availableFeature.getAttribute("class") == "active") {
|
||||
availableFeature.remove();
|
||||
availableFeature.setAttribute("class", "");
|
||||
displayFormat.appendChild(availableFeature);
|
||||
availableFeatures = document.querySelectorAll("#available-features li");
|
||||
displayToFormat = document.querySelectorAll("#display-format li");
|
||||
addEventOnList();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
displayToFeature.addEventListener("click", () => {
|
||||
for (let i = 0; i < displayToFormat.length; i++) {
|
||||
const availableFormat = displayToFormat[i];
|
||||
if (availableFormat.getAttribute("class") == "active") {
|
||||
availableFormat.remove();
|
||||
availableFormat.setAttribute("class", "");
|
||||
availableToDisplay.appendChild(availableFormat);
|
||||
availableFeatures = document.querySelectorAll("#available-features li");
|
||||
displayToFormat = document.querySelectorAll("#display-format li");
|
||||
addEventOnList();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
addEventOnList();
|
||||
addEventonBtns();
|
||||
|
||||
const addEventOnFeaturesList = () => {
|
||||
allFeaturesList.map((value) => {
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
const availableFeature = value[i];
|
||||
availableFeature.addEventListener("click", () => {
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
value[i].setAttribute("class", "");
|
||||
}
|
||||
if (availableFeature.getAttribute("class") == "active") {
|
||||
availableFeature.setAttribute("class", "");
|
||||
} else {
|
||||
availableFeature.setAttribute("class", "active");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
addEventOnFeaturesList();
|
||||
|
||||
// display increase function
|
||||
displayincreaseBtn.addEventListener("click", () => {
|
||||
for (let i = 0; i < displayToFormat.length; i++) {
|
||||
var displayItem = displayToFormat[i];
|
||||
|
||||
if (displayItem.getAttribute("class") == "active") {
|
||||
var prevElement = displayItem.previousElementSibling;
|
||||
var currentText = displayItem.innerText;
|
||||
|
||||
displayItem.innerText = prevElement.innerText;
|
||||
prevElement.innerText = currentText;
|
||||
prevElement.setAttribute("class", "active");
|
||||
displayItem.setAttribute("class", "");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// display decrease function
|
||||
displayDecreaseBtn.addEventListener("click", () => {
|
||||
for (let i = 0; i < displayToFormat.length; i++) {
|
||||
var displayItem = displayToFormat[i];
|
||||
|
||||
if (displayItem.getAttribute("class") == "active") {
|
||||
var nextElement = displayItem.nextElementSibling;
|
||||
var currentText = displayItem.innerText;
|
||||
|
||||
displayItem.innerText = nextElement.innerText;
|
||||
nextElement.innerText = currentText;
|
||||
nextElement.setAttribute("class", "active");
|
||||
displayItem.setAttribute("class", "");
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// feature remove function
|
||||
allFeaturesRemoveBtns.map((value, index) => {
|
||||
value.addEventListener("click", () => {
|
||||
for (let i = 0; i < allFeaturesList[index].length; i++) {
|
||||
var item = allFeaturesList[index][i];
|
||||
if (item.getAttribute("class") == "active") {
|
||||
item.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// feature increase function
|
||||
allFeaturesIncreaseBtns.map((value, index) => {
|
||||
value.addEventListener("click", () => {
|
||||
for (let i = 0; i < allFeaturesList[index].length; i++) {
|
||||
var item = allFeaturesList[index][i];
|
||||
|
||||
if (item.getAttribute("class") == "active") {
|
||||
var prevElement = item.previousElementSibling;
|
||||
var currentText = item.innerText;
|
||||
item.innerText = prevElement.innerText;
|
||||
prevElement.innerText = currentText;
|
||||
prevElement.setAttribute("class", "active");
|
||||
item.setAttribute("class", "");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// feature decrease function
|
||||
allFeaturesDecreaseBtns.map((value, index) => {
|
||||
value.addEventListener("click", () => {
|
||||
for (let i = 0; i < allFeaturesList[index].length; i++) {
|
||||
var item = allFeaturesList[index][i];
|
||||
|
||||
if (item.getAttribute("class") == "active") {
|
||||
var nextElement = item.nextElementSibling;
|
||||
var currentText = item.innerText;
|
||||
|
||||
item.innerText = nextElement.innerText;
|
||||
nextElement.innerText = currentText;
|
||||
nextElement.setAttribute("class", "active");
|
||||
item.setAttribute("class", "");
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// all features
|
||||
var stocks = document.getElementById("stocks-features");
|
||||
var crypto1 = document.getElementById("crypto-features");
|
||||
var forex = document.getElementById("forex-features");
|
||||
var currentWeather = document.getElementById("current-weather-features");
|
||||
var dailyForecast = document.getElementById("daily-forecast-features");
|
||||
var news = document.getElementById("news-features");
|
||||
var upcomingGames = document.getElementById("upcoming-games-features");
|
||||
var pastGames = document.getElementById("past-games-features");
|
||||
var liveGames = document.getElementById("live-games-features");
|
||||
var teamStats = document.getElementById("team-stats-features");
|
||||
var images = document.getElementById("images-features");
|
||||
var gifs = document.getElementById("gifs-features");
|
||||
var messages = document.getElementById("messages-features");
|
||||
|
||||
var allFeatures = [
|
||||
stocks,
|
||||
crypto1,
|
||||
forex,
|
||||
currentWeather,
|
||||
dailyForecast,
|
||||
news,
|
||||
upcomingGames,
|
||||
pastGames,
|
||||
liveGames,
|
||||
teamStats,
|
||||
images,
|
||||
gifs,
|
||||
messages,
|
||||
];
|
||||
|
||||
// features select box
|
||||
var newsSelect = document.getElementById("inputTransition63");
|
||||
var upcomingGamesSelect = document.getElementById("inputTransition73");
|
||||
var pastGamesSelect = document.getElementById("inputTransition83");
|
||||
var liveGamesSelect = document.getElementById("inputTransition93");
|
||||
var teamStatsSelect = document.getElementById("inputTransition103");
|
||||
var allFeaturesSelectBox = [
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
newsSelect,
|
||||
upcomingGamesSelect,
|
||||
pastGamesSelect,
|
||||
liveGamesSelect,
|
||||
teamStatsSelect,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
];
|
||||
|
||||
// features select add buttons
|
||||
var newsAddBtn = document.getElementById("inputTransitionBtn63");
|
||||
var upcomingGamesAddBtn = document.getElementById("inputTransitionBtn73");
|
||||
var pastGamesAddBtn = document.getElementById("inputTransitionBtn83");
|
||||
var liveGamesAddBtn = document.getElementById("inputTransitionBtn93");
|
||||
var teamStatsAddBtn = document.getElementById("inputTransitionBtn103");
|
||||
var allFeaturesSelectAddBtn = [
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
newsAddBtn,
|
||||
upcomingGamesAddBtn,
|
||||
pastGamesAddBtn,
|
||||
liveGamesAddBtn,
|
||||
teamStatsAddBtn,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
];
|
||||
|
||||
allFeaturesSelectAddBtn.map((value, index) => {
|
||||
if (value != null) {
|
||||
value.addEventListener("click", () => {
|
||||
var tag = document.createElement("li");
|
||||
tag.innerHTML = allFeaturesSelectBox[index].value;
|
||||
allFeatures[index].appendChild(tag);
|
||||
changeVarValue();
|
||||
addEventOnFeaturesList();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// features input file
|
||||
var imagesFile = document.getElementById("inputText11");
|
||||
var gifsFile = document.getElementById("inputText1112");
|
||||
|
||||
var allFeaturesFile = [
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
imagesFile,
|
||||
gifsFile,
|
||||
null,
|
||||
];
|
||||
// features file add button
|
||||
var imagesFileAddBtn = document.getElementById("inputTextBtn11");
|
||||
var gifsFileAddBtn = document.getElementById("inputTextBtn1112");
|
||||
|
||||
var allFeaturesFileAddBtn = [
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
imagesFileAddBtn,
|
||||
gifsFileAddBtn,
|
||||
null,
|
||||
];
|
||||
|
||||
allFeaturesFileAddBtn.map((value, index) => {
|
||||
if (value !== null) {
|
||||
value.addEventListener("click", () => {
|
||||
var tag = document.createElement("li");
|
||||
tag.innerHTML = allFeaturesFile[index].files[0].name;
|
||||
allFeatures[index].appendChild(tag);
|
||||
changeVarValue();
|
||||
addEventOnFeaturesList();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// features input text
|
||||
var stocksText = document.getElementById("inputText3");
|
||||
var cryptoText = document.getElementById("inputText4");
|
||||
var forexText = document.getElementById("inputText5");
|
||||
var currentWeatherText = document.getElementById("inputText6");
|
||||
var dailyForecastText = document.getElementById("inputText7");
|
||||
var messagesText = document.getElementById("inputText13");
|
||||
|
||||
var allFeaturesText = [
|
||||
stocksText,
|
||||
cryptoText,
|
||||
forexText,
|
||||
currentWeatherText,
|
||||
dailyForecastText,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
messagesText,
|
||||
];
|
||||
|
||||
// features text add button
|
||||
var stocksTextAddBtn = document.getElementById("inputTextBtn3");
|
||||
var cryptoTextAddBtn = document.getElementById("inputTextBtn4");
|
||||
var forexTextAddBtn = document.getElementById("inputTextBtn5");
|
||||
var currentWeatherTextAddBtn = document.getElementById("inputTextBtn6");
|
||||
var dailyForecastTextAddBtn = document.getElementById("inputTextBtn7");
|
||||
var messagesTextAddBtn = document.getElementById("inputTextBtn13");
|
||||
|
||||
var allFeaturesTextAddBtn = [
|
||||
stocksTextAddBtn,
|
||||
cryptoTextAddBtn,
|
||||
forexTextAddBtn,
|
||||
currentWeatherTextAddBtn,
|
||||
dailyForecastTextAddBtn,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
messagesTextAddBtn,
|
||||
];
|
||||
|
||||
allFeaturesTextAddBtn.map((value, index) => {
|
||||
if (value !== null) {
|
||||
value.addEventListener("click", () => {
|
||||
var tag = document.createElement("li");
|
||||
tag.innerHTML = allFeaturesText[index].value;
|
||||
allFeatures[index].appendChild(tag);
|
||||
changeVarValue();
|
||||
addEventOnFeaturesList();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
var startButton = document.getElementById("start-btn");
|
||||
|
||||
// start the display
|
||||
|
||||
startButton.addEventListener("click", () => {
|
||||
var HTML = document.getElementById('display-format').innerHTML;
|
||||
console.log('pressed');
|
||||
console.log(HTML);
|
||||
|
||||
|
||||
fetch("/start", {
|
||||
method:"PUT",
|
||||
|
||||
|
||||
body:JSON.stringify(HTML)
|
||||
});
|
||||
});
|
||||
BIN
static/images/logo_white.png
Normal file
BIN
static/images/logo_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
168
static/style.css
168
static/style.css
@@ -1,11 +1,165 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html body {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
background: black;
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Encode;
|
||||
src: EncodeSans.ttf;
|
||||
}
|
||||
/* Top logo bar */
|
||||
header {
|
||||
display: block;
|
||||
margin-top: 30px;
|
||||
border-bottom: 2px solid white;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 200px;
|
||||
height: 70px;
|
||||
}
|
||||
.update-btn,
|
||||
.update-btn:hover {
|
||||
background-color: gray;
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* General Ticker */
|
||||
.buttons-list {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
list-style-type: none;
|
||||
}
|
||||
.btn-stop-display,
|
||||
.btn-stop-display:hover {
|
||||
background-color: purple;
|
||||
color: white;
|
||||
}
|
||||
.set-btn,
|
||||
.set-btn:hover {
|
||||
background-color: gray;
|
||||
color: white;
|
||||
}
|
||||
.row-2 {
|
||||
border-bottom: 2px solid white;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Features to display */
|
||||
.features-div {
|
||||
background-color: white;
|
||||
padding-block: 10px;
|
||||
height: 200px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.features-div-two {
|
||||
background-color: white;
|
||||
padding-block: 10px;
|
||||
height: 370px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.display-features-list {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.fa-chevron-right,
|
||||
.fa-chevron-left,
|
||||
.fa-chevron-up,
|
||||
.fa-chevron-down,
|
||||
.fa-minus {
|
||||
background-color: gray;
|
||||
padding: 10px;
|
||||
}
|
||||
.icons-list {
|
||||
margin-block: 70px;
|
||||
}
|
||||
.icons-list a {
|
||||
color: white;
|
||||
}
|
||||
.icons-list i {
|
||||
cursor: pointer;
|
||||
}
|
||||
.display-features-list li:hover {
|
||||
background-color: blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.save-btn-div {
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.save-btn,
|
||||
.save-btn:hover {
|
||||
background-color: gray;
|
||||
color: white;
|
||||
padding-inline: 40px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
li.active {
|
||||
background-color: skyblue;
|
||||
}
|
||||
.row-1, .row-3{
|
||||
margin-block: 50px;
|
||||
}
|
||||
/* Responsiveness */
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.buttons-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 25px;
|
||||
position: relative;
|
||||
right: 20px;
|
||||
}
|
||||
.row-1, .row-3{
|
||||
margin-block: 25px;
|
||||
}
|
||||
.screen-saver{
|
||||
margin-block: 25px;
|
||||
}
|
||||
.display-none-div{
|
||||
display: none;
|
||||
}
|
||||
.icons-list{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.icons-list a{
|
||||
margin-left: -120px;
|
||||
}
|
||||
|
||||
.remove{
|
||||
margin-right: -100px;
|
||||
margin-left: -100px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
|
||||
.icons-list a{
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
font-family: Encode;
|
||||
}
|
||||
Reference in New Issue
Block a user