init
This commit is contained in:
JeoJake
commit
c64d17b731
102
Lab-2/index.html
Normal file
102
Lab-2/index.html
Normal file
@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Boolean Algebra</title>
|
||||
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<header>
|
||||
<div class="content">
|
||||
<h3><a href="">CDM</a></h3>
|
||||
<div class="theme">
|
||||
<h3><a href="../Lab-1/index.html">Set Algebra</a></h3>
|
||||
<h3><a href="">Boolean Algebra</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="wrap-side">
|
||||
<h1>Values</h1>
|
||||
<div id="values">
|
||||
<div class="input-wrap">
|
||||
<h1 class="text">Value A = </h1>
|
||||
<div class="input"><input type="value" id="value0" placeholder="e.g. 0 or 1" /></div>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<h1 class="text">Value B = </h1>
|
||||
<div class="input"><input type="value" id="value1" placeholder="e.g. 0 or 1" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<input class="addValue" type="button" value="Add Value" onclick="AddValue()" />
|
||||
</div>
|
||||
|
||||
<div class="wrap-side">
|
||||
<h1>Formulua</h1>
|
||||
<h2><input type="problem" id="formula" placeholder="e.g. !A*(B+C)" /></h2>
|
||||
<div class="buttons">
|
||||
<input class="button" type="button" id="calculate" value="Evaluate" onclick="Evaluate()" />
|
||||
<input class="button" type="button" id="calculate" value="Step by step" onclick="StepByStep()" />
|
||||
</div>
|
||||
<div class="wrap-result">
|
||||
<div class="input-wrap">
|
||||
<h1 class="text">Result </h1>
|
||||
<div class="input"><input type="result" id="result" readonly/></div>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="description">Define variables then write the formula you need to solve</h6>
|
||||
<h6 class="operations">
|
||||
<div class="operation">
|
||||
<div class="operation-bg"> !</div>
|
||||
<h6>Negation</h6>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="operation-bg"> *</div>
|
||||
<h6>Conjunction</h6>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="operation-bg"> +</div>
|
||||
<h6>Disjunction</h6>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="operation-bg"> ></div>
|
||||
<h6>Implication</h6>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="operation-bg"> =</div>
|
||||
<h6>Equivalence</h6>
|
||||
</div>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper hide" id="stepsNode">
|
||||
<div class="step-by-step" id="stepsWrapper">
|
||||
<h1>Step by step</h1>
|
||||
<div class="input-wrap" id="input-wrap">
|
||||
<h1 class="text">1.</h1>
|
||||
<div class="input"><input type="result" id="step1" readonly/></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- -----------------------------------JS---------------------------- -->
|
||||
<script src="lab-2.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
570
Lab-2/lab-2.js
Normal file
570
Lab-2/lab-2.js
Normal file
@ -0,0 +1,570 @@
|
||||
let maxNumOfValues = 26;
|
||||
let currNumOfValues = 2;
|
||||
|
||||
function AddValue() {
|
||||
|
||||
if (currNumOfValues < 26) {
|
||||
|
||||
let charNum = 65 + currNumOfValues;
|
||||
currNumOfValues++;
|
||||
|
||||
let delBtn = document.querySelectorAll('#delBtn');
|
||||
if (delBtn[delBtn.length - 1]) {
|
||||
delBtn[delBtn.length - 1].style="display: none;";
|
||||
}
|
||||
|
||||
node = document.getElementById('values');
|
||||
node.insertAdjacentHTML('beforeend', ` <div class="input-wrap">
|
||||
<h1 class="text">Value &#${charNum} = </h1>
|
||||
<div class="input"><input type="value" id="value${currNumOfValues - 1}" placeholder="e.g. 0 or 1"/></div>
|
||||
</div>`);
|
||||
|
||||
} else {
|
||||
alert('You have reached a limint of available values');
|
||||
}
|
||||
}
|
||||
|
||||
function DeleteValue(valNum) {
|
||||
|
||||
let valueField = document.querySelector(`#valueField${valNum}`);
|
||||
valueField.remove();
|
||||
currNumOfValues--;
|
||||
|
||||
let delBtn = document.querySelectorAll('#delBtn');
|
||||
if (delBtn[delBtn.length - 1]) {
|
||||
delBtn[delBtn.length - 1].style="display: inline-block;";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let VALUES = new Set();
|
||||
let userValues = new Array();
|
||||
|
||||
function FetchValues() {
|
||||
|
||||
userValues = new Array();
|
||||
|
||||
for (let i = 0; i < currNumOfValues; i++) {
|
||||
|
||||
let inputField = document.getElementById(`value${i}`);
|
||||
let currCharStr = String.fromCharCode(65 + i);
|
||||
|
||||
if (inputField.value === '1' || inputField.value === 'true' || inputField.value === 'True'|| inputField.value === 'TRUE' || inputField.value === 't' || inputField.value === 'T') {
|
||||
VALUES.add(currCharStr);
|
||||
userValues.push([currCharStr, true]);
|
||||
} else if (inputField.value === '0' || inputField.value === 'false' || inputField.value === 'False' || inputField.value === 'FALSE' || inputField.value === 'f' || inputField.value === 'F') {
|
||||
VALUES.add(currCharStr);
|
||||
userValues.push([currCharStr, false]);
|
||||
}
|
||||
}
|
||||
|
||||
for (const iterator in VALUES) {
|
||||
console.log(iterator, VALUES[iterator]);
|
||||
}
|
||||
}
|
||||
|
||||
let stepByStep = false;
|
||||
|
||||
function Evaluate() {
|
||||
|
||||
FetchValues();
|
||||
|
||||
let formulaField = document.getElementById('formula');
|
||||
|
||||
let formulaChraArray = formulaField.value.split('');
|
||||
let formulaRPNArray = ConvertCharArrayToRPNArray(formulaChraArray);
|
||||
let formulaValuesRPNArray = ConvertLettersToValues(formulaRPNArray);
|
||||
|
||||
let result = SolveRPNFormula(formulaValuesRPNArray);
|
||||
let readableResult = convertToReadableResult(result[0]);
|
||||
|
||||
let resultField = document.getElementById('result');
|
||||
resultField.value = readableResult;
|
||||
|
||||
|
||||
let stepsNode = document.querySelector('#stepsNode');
|
||||
let stepsWrapper = document.querySelector('#stepsWrapper');
|
||||
|
||||
stepsNode.classList.add('hide');
|
||||
stepsWrapper.querySelectorAll('#input-wrap').forEach((element) => {
|
||||
element.remove();
|
||||
});
|
||||
|
||||
if (stepByStep) {
|
||||
|
||||
stepsNode.classList.remove('hide');
|
||||
|
||||
let stepsActionsArray = StepByStepRPNFormula(formulaRPNArray);
|
||||
let stepsResultsArray = result[1];
|
||||
|
||||
|
||||
for (let i = 0; i < stepsActionsArray.length; i++) {
|
||||
const action = stepsActionsArray[i];
|
||||
const result = stepsResultsArray[i];
|
||||
|
||||
stepsWrapper.insertAdjacentHTML('beforeend', ` <div class="input-wrap" id="input-wrap">
|
||||
<h1 class="text">${i+1}. </h1>
|
||||
<div class="input"><input type="result" id="step1" value="${action} = ${result}" readonly/></div>
|
||||
</div>`);
|
||||
}
|
||||
|
||||
stepByStep = false;
|
||||
}
|
||||
}
|
||||
|
||||
function StepByStep() {
|
||||
|
||||
stepByStep = true;
|
||||
Evaluate();
|
||||
}
|
||||
|
||||
|
||||
function Negation(value) {
|
||||
|
||||
if (value != undefined) { return !value; }
|
||||
}
|
||||
|
||||
function Conjunction(firstValue, secondValue) {
|
||||
|
||||
if (firstValue === true && secondValue === true) {
|
||||
return true;
|
||||
} else if (firstValue === false && secondValue === true || firstValue === true && secondValue === false || firstValue === false && secondValue === false) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function Disjunction(firstValue, secondValue) {
|
||||
|
||||
if (firstValue === true || secondValue === true) {
|
||||
return true;
|
||||
} else if (firstValue === false && secondValue === false) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function Equivalence(firstValue, secondValue) {
|
||||
|
||||
if (firstValue === secondValue) {
|
||||
return true;
|
||||
} else if (firstValue !== secondValue) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function ConvertCharArrayToRPNArray(chars) {
|
||||
|
||||
let _values_stack = new Array();
|
||||
let _actions_stack = new Array();
|
||||
|
||||
for (let i = 0; i < chars.length; i++) {
|
||||
const element = chars[i];
|
||||
|
||||
if (VALUES.has(element)) {
|
||||
|
||||
_values_stack.push(element);
|
||||
} else if (OPERATORS.has(element)) {
|
||||
|
||||
while (GetActionPriority(_actions_stack[_actions_stack.length - 1]) >= GetActionPriority(element)) {
|
||||
|
||||
let last = _actions_stack.pop();
|
||||
|
||||
if (last != '(') {
|
||||
_values_stack.push(last);
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (_actions_stack[0] == undefined || GetActionPriority(_actions_stack[_actions_stack.length - 1]) < GetActionPriority(element)) {
|
||||
|
||||
_actions_stack.push(element);
|
||||
}
|
||||
} else if (BRACKETS.has(element)) {
|
||||
|
||||
if (element == '(') {
|
||||
|
||||
_actions_stack.push(element);
|
||||
}
|
||||
|
||||
if (element == ')') {
|
||||
|
||||
let _last = _actions_stack.pop();
|
||||
|
||||
while (_last != '(') {
|
||||
|
||||
_values_stack.push(_last);
|
||||
_last = _actions_stack.pop();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
Error('The programm cant solve given formula. Do you typed everything right? Maybe you forgot to define some value?');
|
||||
}
|
||||
}
|
||||
|
||||
while (_actions_stack[0] != undefined) {
|
||||
|
||||
_values_stack.push(_actions_stack.pop());
|
||||
}
|
||||
|
||||
return _values_stack;
|
||||
}
|
||||
|
||||
function ConvertLettersToValues(RPNArray) {
|
||||
|
||||
let valuesRNPArray = new Array();
|
||||
|
||||
RPNArray.forEach(element => {
|
||||
|
||||
if (VALUES.has(element)) {
|
||||
valuesRNPArray.push(GetValueFromIndex(element));
|
||||
} else if (element !== '(' || element !== ')') {
|
||||
valuesRNPArray.push(element);
|
||||
}
|
||||
});
|
||||
|
||||
return valuesRNPArray;
|
||||
}
|
||||
|
||||
function SolveRPNFormula(valuesRPNArray) {
|
||||
|
||||
let stepByStepResults = new Array();
|
||||
|
||||
let _stack = new Array();
|
||||
|
||||
for (let i = 0; i < valuesRPNArray.length; i++) {
|
||||
const element = valuesRPNArray[i];
|
||||
|
||||
if (OPERATORS.has(element)) {
|
||||
|
||||
if (element == '!') {
|
||||
|
||||
let _currValue = _stack.pop();
|
||||
|
||||
let _result = Negation(_currValue);
|
||||
|
||||
_stack.push(_result);
|
||||
stepByStepResults.push(convertToReadableResult(_result));
|
||||
|
||||
} else if (element == '*') {
|
||||
|
||||
let _secondValue = _stack.pop();
|
||||
let _firstValue = _stack.pop();
|
||||
|
||||
let _result = Conjunction(_firstValue, _secondValue);
|
||||
|
||||
_stack.push(_result);
|
||||
stepByStepResults.push(convertToReadableResult(_result));
|
||||
|
||||
} else if (element == '+') {
|
||||
|
||||
let _secondValue = _stack.pop();
|
||||
let _firstValue = _stack.pop();
|
||||
|
||||
let _result = Disjunction(_firstValue, _secondValue);
|
||||
|
||||
_stack.push(_result);
|
||||
stepByStepResults.push(convertToReadableResult(_result));
|
||||
|
||||
} else if (element == '>') {
|
||||
|
||||
let _secondValue = _stack.pop();
|
||||
let _firstValue = _stack.pop();
|
||||
|
||||
let _result = Disjunction(Negation(_firstValue), _secondValue);
|
||||
|
||||
_stack.push(_result);
|
||||
stepByStepResults.push(convertToReadableResult(_result));
|
||||
|
||||
} else if (element == '=') {
|
||||
|
||||
let _secondValue = _stack.pop();
|
||||
let _firstValue = _stack.pop();
|
||||
|
||||
let _result = Equivalence(_firstValue, _secondValue);
|
||||
|
||||
_stack.push(_result);
|
||||
stepByStepResults.push(convertToReadableResult(_result));
|
||||
|
||||
}
|
||||
} else {
|
||||
|
||||
_stack.push(element);
|
||||
}
|
||||
}
|
||||
|
||||
return [_stack[0], stepByStepResults];
|
||||
}
|
||||
|
||||
function StepByStepRPNFormula(RPNArray) {
|
||||
|
||||
let stepsArray = new Array();
|
||||
|
||||
let _stack = new Array();
|
||||
|
||||
for (let i = 0; i < RPNArray.length; i++) {
|
||||
const element = RPNArray[i];
|
||||
|
||||
if (OPERATORS.has(element)) {
|
||||
|
||||
if (element == '!') {
|
||||
|
||||
let _currValue = _stack.pop();
|
||||
|
||||
let _result;
|
||||
|
||||
if (_currValue.length <= 2) {
|
||||
_result = '!'.concat(_currValue);
|
||||
} else {
|
||||
_result = '!'.concat('(').concat(_currValue).concat(')');
|
||||
}
|
||||
|
||||
_stack.push(_result);
|
||||
stepsArray.push([_result]);
|
||||
|
||||
} else if (element == '*') {
|
||||
|
||||
let _secondValue = _stack.pop();
|
||||
let _firstValue = _stack.pop();
|
||||
|
||||
let _result;
|
||||
|
||||
let _firstHasExclemMark = Boolean(_firstValue.split('').filter(x => x === '!').length);
|
||||
let _secondHasExclemMark = Boolean(_secondValue.split('').filter(x => x === '!').length);
|
||||
|
||||
if (_firstValue.length <= 2 && _secondValue.length <= 2) {
|
||||
_result = _firstValue.concat('*').concat(_secondValue);
|
||||
} else if (_firstValue.length <= 2 && _secondValue.length > 2) {
|
||||
|
||||
if (_secondHasExclemMark) {
|
||||
|
||||
_result = _firstValue.concat('*').concat(_secondValue);
|
||||
} else {
|
||||
_result =
|
||||
_firstValue.concat('*').concat('(').concat(_secondValue).concat(')');
|
||||
}
|
||||
} else if (_firstValue.length > 2 && _secondValue.length <= 2) {
|
||||
|
||||
if (_firstHasExclemMark) {
|
||||
|
||||
_result = _firstValue.concat('*').concat(_secondValue);
|
||||
} else {
|
||||
|
||||
_result = '('.concat(_firstValue).concat(')').concat('*').concat(_secondValue);
|
||||
}
|
||||
} else if (_firstValue.length > 2 && _secondValue.length > 2) {
|
||||
|
||||
if (_firstHasExclemMark && _secondHasExclemMark) {
|
||||
|
||||
_result = _firstValue.concat('*').concat(_secondValue);
|
||||
} if (_firstHasExclemMark && !_secondHasExclemMark) {
|
||||
|
||||
_result = _firstValue.concat('*').concat('(').concat(_secondValue).concat(')');
|
||||
} else if (!_firstHasExclemMark && _secondHasExclemMark) {
|
||||
|
||||
_result = '('.concat(_firstValue).concat(')').concat('*').concat(_secondValue);;
|
||||
} else {
|
||||
|
||||
_result = '('.concat(_firstValue).concat(')').concat('*').concat('(').concat(_secondValue).concat(')');
|
||||
}
|
||||
}
|
||||
|
||||
_stack.push(_result);
|
||||
stepsArray.push([_result]);
|
||||
|
||||
} else if (element == '+') {
|
||||
|
||||
let _secondValue = _stack.pop();
|
||||
let _firstValue = _stack.pop();
|
||||
|
||||
let _result = _firstValue.concat('+').concat(_secondValue);
|
||||
|
||||
_stack.push(_result);
|
||||
stepsArray.push([_result]);
|
||||
|
||||
} else if (element == '>') {
|
||||
|
||||
let _secondValue = _stack.pop();
|
||||
let _firstValue = _stack.pop();
|
||||
|
||||
let _result = _firstValue.concat('>').concat(_secondValue);
|
||||
|
||||
_stack.push(_result);
|
||||
stepsArray.push([_result]);
|
||||
|
||||
} else if (element == '=') {
|
||||
|
||||
let _secondValue = _stack.pop();
|
||||
let _firstValue = _stack.pop();
|
||||
|
||||
let _result = _firstValue.concat('=').concat(_secondValue);
|
||||
|
||||
_stack.push(_result);
|
||||
stepsArray.push([_result]);
|
||||
}
|
||||
} else {
|
||||
|
||||
_stack.push(element);
|
||||
}
|
||||
}
|
||||
|
||||
return stepsArray;
|
||||
// return _stack[0];
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function InputFormulaFotTruthTable() {
|
||||
|
||||
|
||||
let _formulaString = prompt('>>> ');
|
||||
|
||||
|
||||
if (_formulaString.search('[!,*,+,>,=]') == -1) {
|
||||
Error('The programm cant solve given formula. Do you typed everything right?');
|
||||
}
|
||||
|
||||
|
||||
if (_formulaString.match(/[a-z]/g) != null) {
|
||||
|
||||
_formulaString.match(/[a-z]/g).forEach (element => {
|
||||
TTVALUESNAMES.add(element);
|
||||
})
|
||||
} else {
|
||||
Error('The programm cant solve given formula. Do you typed everything right?');
|
||||
}
|
||||
|
||||
TTVALUESNAMES.forEach(element => {
|
||||
TTVALUESCONTENTS.push([element]);
|
||||
})
|
||||
|
||||
|
||||
let _numColumns = TTVALUESNAMES.size;
|
||||
|
||||
let _numRows = Math.pow(2, _numColumns);
|
||||
|
||||
|
||||
|
||||
let _rowsContent = new Array();
|
||||
|
||||
for (let r = 0; r < _numRows; r++) {
|
||||
|
||||
_rowsContent.push(new Array());
|
||||
|
||||
for (let c = 0; c < _numColumns; c++) {
|
||||
|
||||
_rowsContent[r].push(false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
for (let c = 0; c < _numColumns; c++) {
|
||||
|
||||
let _period = Math.pow(2, _numColumns) / Math.pow(2, c+1);
|
||||
|
||||
let _zeros = true;
|
||||
|
||||
for (let r = 0; r < _numRows; r++) {
|
||||
|
||||
if (_zeros) {
|
||||
_rowsContent[r][c] = false;
|
||||
TTVALUESCONTENTS[c].push(false);
|
||||
}
|
||||
|
||||
if (!_zeros) {
|
||||
_rowsContent[r][c] = true;
|
||||
TTVALUESCONTENTS[c].push(true);
|
||||
}
|
||||
|
||||
if ((r + 1) % _period == 0) {
|
||||
_zeros = !_zeros;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// console.log(_rowsContent);
|
||||
// console.log(TTVALUESCONTENTS);
|
||||
|
||||
|
||||
|
||||
let _formulaCharArray = ConvertFormulaToCharArray(_formulaString);
|
||||
|
||||
let _result = new Array();
|
||||
|
||||
for (let i = 0; i < _numRows; i++) {
|
||||
|
||||
let _formula_RPN_Array = ConvertCharArrayToRPNArray(_formulaCharArray, i + 1);
|
||||
_result.push(SolveRPNFormula(_formula_RPN_Array));
|
||||
}
|
||||
// console.log(_result);
|
||||
_result.forEach(element => {
|
||||
|
||||
if (element == undefined) {
|
||||
Error('The programm cant solve given formula. Do you typed everything right?');
|
||||
}
|
||||
});
|
||||
|
||||
ttformula = _formulaString;
|
||||
numRows = _numRows;
|
||||
rowsContent = _rowsContent;
|
||||
truthTable = _result;
|
||||
|
||||
|
||||
console.log('');
|
||||
for (let r = 0; r < _numRows; r++) {
|
||||
|
||||
console.log(` ${_rowsContent[r].join(', ')} : ${_result[r]}`);
|
||||
}
|
||||
console.log('');
|
||||
|
||||
ClearTruthTableData();
|
||||
|
||||
ReturnToMenu();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const OPERATORS = new Set(['!', '*', '+', '>', '=']);
|
||||
const BRACKETS = new Set(['(', ')']);
|
||||
|
||||
function GetActionPriority(action) {
|
||||
|
||||
if (action == '!') {
|
||||
return 5;
|
||||
} else if (action == '*') {
|
||||
return 4;
|
||||
} else if (action == '+' || action == '>' || action == '=') {
|
||||
return 3;
|
||||
} else if (action == '(') {
|
||||
return 2;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function GetValueFromIndex(valueIndex) {
|
||||
|
||||
for (let i = 0; i < userValues.length; i++) {
|
||||
const element = userValues[i];
|
||||
|
||||
if (element[0] == valueIndex) {
|
||||
return element[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function convertToReadableResult(unconverted) {
|
||||
|
||||
return unconverted === true ? '1' : '0';
|
||||
}
|
||||
|
||||
function Error(errMsg) {
|
||||
console.log(` [ERROR] ${errMsg}`);
|
||||
}
|
||||
318
style.css
Normal file
318
style.css
Normal file
@ -0,0 +1,318 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:focus,
|
||||
:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
nav,
|
||||
footer,
|
||||
header,
|
||||
aside {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 100%;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
font-family: Roboto, sans-serif;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------Top Menu--------------------------------- */
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 92%;
|
||||
margin: auto auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.theme {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.theme a {
|
||||
margin-left: 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------- */
|
||||
|
||||
body {
|
||||
background: #E71F65;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background: linear-gradient(#2394F0, #E71F65);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
margin: 30px auto;
|
||||
width: 92%;
|
||||
max-width: 1000px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.3));
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.wrap-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 40px 40px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.set {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#sets, #values {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: auto 0;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=set],
|
||||
input[type=value] {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: none;
|
||||
border: 3px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
font-family: Roboto;
|
||||
color: #fff;
|
||||
margin: 5px auto;
|
||||
padding: 0px 0px 0px 10px;
|
||||
}
|
||||
|
||||
input[type=problem] {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: none;
|
||||
border: 3px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
padding: 0px 0px 0px 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
input[type=button] {
|
||||
height: 40px;
|
||||
padding: 0 25px 0 25px;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
color: white;
|
||||
border-radius: 22px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
input[type=result] {
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
font-family: Roboto;
|
||||
cursor: default;
|
||||
padding: 0px 0px 0px 10px;
|
||||
}
|
||||
|
||||
.wrap-result {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
font-size: 18px;
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
.addSet,
|
||||
.addValue {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 15px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.description {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.operations {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.operation-bg {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.step-by-step {
|
||||
width: 100%;
|
||||
margin: 40px 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-device-width: 650px) and (min-device-width: 0px) {
|
||||
.wrapper {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
.wrap-side {
|
||||
width: 85%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user