kopia lustrzana https://github.com/badra022/digital-filter-designer
implemented system responses + allpass additions
rodzic
17d08f9d26
commit
6d861490ae
File diff suppressed because one or more lines are too long
250
index.html
250
index.html
|
@ -1,27 +1,56 @@
|
||||||
<!DOCTYPE html>
|
<link rel="stylesheet" href="https://cdn.lineicons.com/2.0/LineIcons.css">
|
||||||
<style>
|
|
||||||
#zplane_polezero2{border:2px solid black;}
|
|
||||||
</style>
|
|
||||||
<body>
|
|
||||||
<canvas id="zplane_polezero2" width=300 height=300></canvas>
|
|
||||||
<div id="zeros"></div>
|
|
||||||
<div id="poles"></div>
|
|
||||||
<button onclick="addNewPole()">New Pole</button>
|
|
||||||
<button onclick="addNewZero()">New Zero</button>
|
|
||||||
<button onclick="clearZeros()">clear zeros</button>
|
|
||||||
<button onclick="clearPoles()">clear poles</button>
|
|
||||||
<button onclick="clearAllPoints()">clear All</button><br>
|
|
||||||
<input type="checkbox" id="conjugate" onclick="setZplane(poles, zeros)">
|
|
||||||
<label> add Conjugates</label>
|
|
||||||
<div align="right">
|
|
||||||
<canvas id="mag_response" width=600 height=300></canvas>
|
|
||||||
<canvas id="phase_response" width=600 height=300></canvas>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="flotr2.min.js"></script>
|
||||||
|
<script src="math.js" type="text/javascript"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Hind+Vadodara:wght@300;500&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="header-logo">
|
||||||
|
<span class="site-title">All Pass Library</span>
|
||||||
|
</div>
|
||||||
|
<div class="header-search">
|
||||||
|
<button class="button-menu"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385 385">
|
||||||
|
<path d="M12 120.3h361a12 12 0 000-24H12a12 12 0 000 24zM373 180.5H12a12 12 0 000 24h361a12 12 0 000-24zM373 264.7H132.2a12 12 0 000 24H373a12 12 0 000-24z" />
|
||||||
|
</svg></button>
|
||||||
|
<input type="search" placeholder="Search Documentation..." />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<div class="sidebar">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#"><i class="lni lni-text-format"></i><span>a = 2 + 2j</span></a></li>
|
||||||
|
<li><a href="#"><i class="lni lni-text-format"></i><span>a = 2 - 2j</span></a></li>
|
||||||
|
<li><a href="#"><i class="lni lni-text-format"></i><span>a = 1 + 2j</span></a></li>
|
||||||
|
<li><a href="#"><i class="lni lni-text-format"></i><span>a = 2 + 1j</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="page-content">
|
||||||
|
<canvas id="zplane_polezero2" width=300 height=300></canvas>
|
||||||
|
<div id="zeros"></div>
|
||||||
|
<div id="poles"></div>
|
||||||
|
<button onclick="addNewPole()" class="btn btn-primary">New Pole</button>
|
||||||
|
<button onclick="addNewZero()" class="btn btn-primary">New Zero</button>
|
||||||
|
<button onclick="clearZeros()" class="btn btn-primary">clear zeros</button>
|
||||||
|
<button onclick="clearPoles()" class="btn btn-primary">clear poles</button>
|
||||||
|
<button onclick="clearAllPoints()" class="btn btn-primary">clear All</button><br>
|
||||||
|
<input type="checkbox" id="conjugate" onclick="setZplane(poles, zeros)">
|
||||||
|
<label> add Conjugates</label>
|
||||||
|
<input type="checkbox" id="allPassEffect" onclick="setZplane(poles, zeros)">
|
||||||
|
<label> with all Pass filters</label>
|
||||||
|
<div id="design_responses">
|
||||||
|
<div id="mag_response" style="width:500px;height:200px;"></div>
|
||||||
|
<div id="phase_response" style="width:500px;height:200px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="layout.js" type="text/javascript"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
// variables used to get mouse position on the canvas
|
// variables used to get mouse position on the canvas
|
||||||
|
@ -42,8 +71,10 @@ var startY;
|
||||||
|
|
||||||
var zeros = new Array;
|
var zeros = new Array;
|
||||||
var poles = new Array;
|
var poles = new Array;
|
||||||
|
var allPass = new Array;
|
||||||
var zerosNum = 0;
|
var zerosNum = 0;
|
||||||
var polesNum = 0;
|
var polesNum = 0;
|
||||||
|
var allPassNum = 0;
|
||||||
|
|
||||||
function addNewPole() {
|
function addNewPole() {
|
||||||
// console.log("I'm here!");
|
// console.log("I'm here!");
|
||||||
|
@ -66,6 +97,16 @@ function addNewZero() {
|
||||||
setZplane(poles, zeros);
|
setZplane(poles, zeros);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addNewAllPass(a) {
|
||||||
|
allPass.push(math.complex(a));
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeAllPassFilter(a) {
|
||||||
|
allPass = allPass.filter(function(value, index, arr) {
|
||||||
|
return !math.equal(value, math.complex(a));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function clearAllPoints() {
|
function clearAllPoints() {
|
||||||
poles = [];
|
poles = [];
|
||||||
zeros = [];
|
zeros = [];
|
||||||
|
@ -89,14 +130,10 @@ var Z = new Array(100);
|
||||||
var freqAxis = new Array(100);
|
var freqAxis = new Array(100);
|
||||||
|
|
||||||
for(let i = 0; i < 100; i++){
|
for(let i = 0; i < 100; i++){
|
||||||
Z[i] = Math.complex(Math.cos(Math.PI * (i/100)), Math.sin(Math.PI * (i/100)));
|
Z[i] = math.complex(math.cos(math.PI * (i/100)), math.sin(math.PI * (i/100)));
|
||||||
freqAxis[i] = Math.PI * (i/100);
|
freqAxis[i] = Math.PI * (i/100);
|
||||||
}
|
}
|
||||||
|
|
||||||
var magResponse = new Array;
|
|
||||||
var phaseResponse = new Array;
|
|
||||||
|
|
||||||
|
|
||||||
// this var will hold the index of the selected point in zplane
|
// this var will hold the index of the selected point in zplane
|
||||||
var selectedPoint = -1;
|
var selectedPoint = -1;
|
||||||
|
|
||||||
|
@ -122,15 +159,15 @@ function handleMouseDown(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
startX = parseInt(e.clientX - offsetX);
|
startX = parseInt(e.clientX - offsetX);
|
||||||
startY = parseInt(e.clientY - offsetY);
|
startY = parseInt(e.clientY - offsetY);
|
||||||
// console.log("you selected point [" + startX + ", " + startY + "]");
|
console.log("you selected point [" + startX + ", " + startY + "]");
|
||||||
// console.log("which is point [" + (startX-150)/100 + ", " + -(startY-150)/100 + "]");
|
console.log("which is point [" + (startX+70)/100 + ", " + -(startY-150)/100 + "]");
|
||||||
|
|
||||||
// console.log("poles number is " + poles.length);
|
// console.log("poles number is " + poles.length);
|
||||||
// console.log("zeros number is " + zeros.length);
|
// console.log("zeros number is " + zeros.length);
|
||||||
totalLength = polesNum + zerosNum;
|
totalLength = polesNum + zerosNum;
|
||||||
// Put your mousedown stuff here
|
// Put your mousedown stuff here
|
||||||
for (var i = 0; i < totalLength; i++) {
|
for (var i = 0; i < totalLength; i++) {
|
||||||
if (pointHittest((startX-150)/100, -(startY-150)/100, i)) {
|
if (pointHittest((startX+70)/100, -(startY-150)/100, i)) {
|
||||||
selectedPoint = i;
|
selectedPoint = i;
|
||||||
if(i >= polesNum){
|
if(i >= polesNum){
|
||||||
// console.log("selected zero" + (i - polesNum));
|
// console.log("selected zero" + (i - polesNum));
|
||||||
|
@ -162,7 +199,7 @@ function handleMouseMove(e) {
|
||||||
startX = mouseX;
|
startX = mouseX;
|
||||||
startY = mouseY;
|
startY = mouseY;
|
||||||
// console.log("moved to point [" + startX + ", " + startY + "]");
|
// console.log("moved to point [" + startX + ", " + startY + "]");
|
||||||
// console.log("which is point [" + (startX-150)/100 + ", " + -(startY-150)/100 + "]");
|
// console.log("which is point [" + (startX+70)/100 + ", " + -(startY-150)/100 + "]");
|
||||||
// console.log("moved by [" + dx + ", " + dy + "]");
|
// console.log("moved by [" + dx + ", " + dy + "]");
|
||||||
|
|
||||||
if(selectedPoint >= poles.length){
|
if(selectedPoint >= poles.length){
|
||||||
|
@ -193,15 +230,15 @@ function handleMouseClick(e) {
|
||||||
// e.preventDefault();
|
// e.preventDefault();
|
||||||
startX = parseInt(e.clientX - offsetX);
|
startX = parseInt(e.clientX - offsetX);
|
||||||
startY = parseInt(e.clientY - offsetY);
|
startY = parseInt(e.clientY - offsetY);
|
||||||
console.log("you selected point [" + startX + ", " + startY + "]");
|
// console.log("you selected point [" + startX + ", " + startY + "]");
|
||||||
// console.log("which is point [" + (startX-150)/100 + ", " + -(startY-150)/100 + "]");
|
// console.log("which is point [" + (startX+70)/100 + ", " + -(startY-150)/100 + "]");
|
||||||
|
|
||||||
// console.log("poles number is " + poles.length);
|
// console.log("poles number is " + poles.length);
|
||||||
// console.log("zeros number is " + zeros.length);
|
// console.log("zeros number is " + zeros.length);
|
||||||
totalLength = polesNum + zerosNum;
|
totalLength = polesNum + zerosNum;
|
||||||
// Put your mousedown stuff here
|
// Put your mousedown stuff here
|
||||||
for (var i = 0; i < totalLength; i++) {
|
for (var i = 0; i < totalLength; i++) {
|
||||||
if (pointHittest((startX-150)/100, -(startY-150)/100, i)) {
|
if (pointHittest((startX+70)/100, -(startY-150)/100, i)) {
|
||||||
if(i >= polesNum){
|
if(i >= polesNum){
|
||||||
zeros.splice(i - polesNum, 1);
|
zeros.splice(i - polesNum, 1);
|
||||||
zerosNum = zerosNum -1;
|
zerosNum = zerosNum -1;
|
||||||
|
@ -310,15 +347,41 @@ function setZplane(poles, zeros) {
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(allPassEffect.checked){
|
||||||
|
// allpass poles
|
||||||
|
for (idx = 0; idx < allPass.length; idx++) {
|
||||||
|
let x = radius + Math.round(radius * allPass[idx].re);
|
||||||
|
let y = radius - Math.round(radius * allPass[idx].im);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x - pSize + pad, y - pSize + pad);
|
||||||
|
ctx.lineTo(x + pSize + pad, y + pSize + pad);
|
||||||
|
ctx.moveTo(x - pSize + pad, y + pSize + pad);
|
||||||
|
ctx.lineTo(x + pSize + pad, y - pSize + pad);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// allpass zeros
|
||||||
|
for (idx = 0; idx < allPass.length; idx++) {
|
||||||
|
let tempVar = math.divide(1, math.conj(allPass[idx]));
|
||||||
|
let x = radius + Math.round(radius * tempVar.re);
|
||||||
|
let y = radius - Math.round(radius * tempVar.im);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x + pad, y + pad, zSize, 0, 2*Math.PI);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
drawResponses();
|
drawResponses();
|
||||||
}
|
}
|
||||||
|
|
||||||
function showZplane(poles, zeros) {
|
function showZplaneForAllPass(a) {
|
||||||
|
let zero = math.divide(1, math.conj(math.complex(a)));
|
||||||
|
let pole = math.complex(a);
|
||||||
var radius = 100; // radius of unit circle
|
var radius = 100; // radius of unit circle
|
||||||
var pSize = 4; // size of pole and zero graphic
|
var pSize = 4; // size of pole and zero graphic
|
||||||
var zSize = 4;
|
var zSize = 4;
|
||||||
|
|
||||||
var c=document.getElementById("all_pass_filter");
|
var c=document.getElementById("allpass_zplane_polezero2");
|
||||||
var ctx=c.getContext("2d");
|
var ctx=c.getContext("2d");
|
||||||
|
|
||||||
ctx.clearRect(0, 0, c.width, c.height);
|
ctx.clearRect(0, 0, c.width, c.height);
|
||||||
|
@ -346,42 +409,99 @@ function showZplane(poles, zeros) {
|
||||||
ctx.fillText("Re", radius+radius+pad+2, radius+pad-2);
|
ctx.fillText("Re", radius+radius+pad+2, radius+pad-2);
|
||||||
ctx.stroke(); // Draw it
|
ctx.stroke(); // Draw it
|
||||||
|
|
||||||
// poles
|
// pole
|
||||||
ctx.strokeStyle="blue";
|
ctx.strokeStyle="blue";
|
||||||
var idx;
|
let x = radius + Math.round(radius * pole.re);
|
||||||
for (idx = 0; idx < poles.length; idx++) {
|
let y = radius - Math.round(radius * pole.im);
|
||||||
var x = radius + Math.round(radius * poles[idx][0]);
|
ctx.beginPath();
|
||||||
var y = radius - Math.round(radius * poles[idx][1]);
|
ctx.moveTo(x - pSize + pad, y - pSize + pad);
|
||||||
ctx.beginPath();
|
ctx.lineTo(x + pSize + pad, y + pSize + pad);
|
||||||
ctx.moveTo(x - pSize + pad, y - pSize + pad);
|
ctx.moveTo(x - pSize + pad, y + pSize + pad);
|
||||||
ctx.lineTo(x + pSize + pad, y + pSize + pad);
|
ctx.lineTo(x + pSize + pad, y - pSize + pad);
|
||||||
ctx.moveTo(x - pSize + pad, y + pSize + pad);
|
ctx.stroke();
|
||||||
ctx.lineTo(x + pSize + pad, y - pSize + pad);
|
|
||||||
ctx.stroke();
|
// zero
|
||||||
|
x = radius + Math.round(radius * zero.re);
|
||||||
|
y = radius - Math.round(radius * zero.im);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x + pad, y + pad, zSize, 0, 2*Math.PI);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
drawResponseOfAllPass(math.complex(a));
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawResponseOfAllPass() {
|
||||||
|
let zero = math.divide(1, math.conj(a));
|
||||||
|
let pole = a;
|
||||||
|
let magResponse = [];
|
||||||
|
let phaseResponse = [];
|
||||||
|
for(let i = 0; i < 100; i++){
|
||||||
|
let magPoint = math.complex(1,0);
|
||||||
|
let phasePoint = math.complex(1,0);
|
||||||
|
let temp = math.subtract(Z[i], math.complex(zero.re, zero.im));
|
||||||
|
magPoint *= temp.abs();
|
||||||
|
phasePoint *= temp.arg();
|
||||||
|
temp = math.subtract(Z[i], math.complex(pole.re, pole.im));
|
||||||
|
magPoint /= temp.abs();
|
||||||
|
phasePoint /= temp.arg();
|
||||||
|
|
||||||
|
magResponse.push(magPoint);
|
||||||
|
phaseResponse.push(phasePoint);
|
||||||
|
}
|
||||||
|
|
||||||
|
// normalize
|
||||||
|
var maxMag = Math.max(...magResponse);
|
||||||
|
var maxPhase = Math.max(...phaseResponse);
|
||||||
|
for(let i = 0; i < magResponse; i++) {
|
||||||
|
magResponse[i] /= maxMag;
|
||||||
|
phaseResponse[i] /= maxPhase;
|
||||||
}
|
}
|
||||||
|
|
||||||
// zeros
|
let magData = [];
|
||||||
for (idx = 0; idx < zeros.length; idx++) {
|
let phaseData = [];
|
||||||
var x = radius + Math.round(radius * zeros[idx][0]);
|
|
||||||
var y = radius - Math.round(radius * zeros[idx][1]);
|
for(let i = 0; i < 100; i++){
|
||||||
ctx.beginPath();
|
magData.push([freqAxis[i], magResponse[i]]);
|
||||||
ctx.arc(x + pad, y + pad, zSize, 0, 2*Math.PI);
|
// console.log(magResponse[i]);
|
||||||
ctx.stroke();
|
phaseData.push([freqAxis[i], phaseResponse[i]]);
|
||||||
|
// console.log(phaseResponse[i]);
|
||||||
}
|
}
|
||||||
drawResponses();
|
|
||||||
|
// plot mag_response
|
||||||
|
var container = document.getElementById('allpass_mag_response');
|
||||||
|
graph = Flotr.draw(container, [ magData ], { yaxis: { max : 10, min : 0 } });
|
||||||
|
|
||||||
|
// plot phase_response
|
||||||
|
var container = document.getElementById('allpass_phase_response');
|
||||||
|
graph = Flotr.draw(container, [ phaseData ], { yaxis: { max : 120, min : -120 } });
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawResponses() {
|
function drawResponses() {
|
||||||
|
let magResponse = [];
|
||||||
|
let phaseResponse = [];
|
||||||
for(let i = 0; i < 100; i++){
|
for(let i = 0; i < 100; i++){
|
||||||
let magPoint = Math.complex(0,0);
|
let magPoint = math.complex(1,0);
|
||||||
let phasePoint = Math.complex(0,0);
|
let phasePoint = math.complex(1,0);
|
||||||
for(let j = 0; j < zeros.length; j++){
|
for(let j = 0; j < zeros.length; j++){
|
||||||
magPoint *= Math.abs(Math.subtract(Z[i], Math.complex(zeros[j][0], zeros[j][1])))
|
let temp = math.subtract(Z[i], math.complex(zeros[j][0], zeros[j][1]));
|
||||||
phasePoint *= Math.atan(Math.subtract(Z[i], Math.complex(zeros[j][0], zeros[j][1])))
|
magPoint *= temp.abs();
|
||||||
|
phasePoint *= temp.arg();
|
||||||
}
|
}
|
||||||
for(let j = 0; j < poles.length; j++){
|
for(let j = 0; j < poles.length; j++){
|
||||||
magPoint /= Math.abs(Math.subtract(Z[i], Math.complex(poles[j][0], poles[j][1])))
|
let temp = math.subtract(Z[i], math.complex(poles[j][0], poles[j][1]));
|
||||||
phasePoint /= Math.atan(Math.subtract(Z[i], Math.complex(poles[j][0], poles[j][1])))
|
magPoint /= temp.abs();
|
||||||
|
phasePoint /= temp.arg();
|
||||||
|
}
|
||||||
|
if(allPassEffect.checked){
|
||||||
|
for(let j = 0; j < allPass.length; j++)
|
||||||
|
{
|
||||||
|
let temp = math.subtract(Z[i], math.divide(1, math.conj(allPass[j])));
|
||||||
|
magPoint *= temp.abs();
|
||||||
|
phasePoint *= temp.arg();
|
||||||
|
temp = math.subtract(Z[i], allPass[j]);
|
||||||
|
magPoint /= temp.abs();
|
||||||
|
phasePoint /= temp.arg();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
magResponse.push(magPoint);
|
magResponse.push(magPoint);
|
||||||
phaseResponse.push(phasePoint);
|
phaseResponse.push(phasePoint);
|
||||||
|
@ -400,16 +520,18 @@ function drawResponses() {
|
||||||
|
|
||||||
for(let i = 0; i < 100; i++){
|
for(let i = 0; i < 100; i++){
|
||||||
magData.push([freqAxis[i], magResponse[i]]);
|
magData.push([freqAxis[i], magResponse[i]]);
|
||||||
|
// console.log(magResponse[i]);
|
||||||
phaseData.push([freqAxis[i], phaseResponse[i]]);
|
phaseData.push([freqAxis[i], phaseResponse[i]]);
|
||||||
|
// console.log(phaseResponse[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// plot mag_response
|
// plot mag_response
|
||||||
var container = document.getElementById('mag_response');
|
var container = document.getElementById('mag_response');
|
||||||
graph = Flotr.draw(container, [ magData ], { yaxis: { max : 0, min : -120 } });
|
graph = Flotr.draw(container, [ magData ], { yaxis: { max : 10, min : 0 } });
|
||||||
|
|
||||||
// plot phase_response
|
// plot phase_response
|
||||||
var container = document.getElementById('phase_response');
|
var container = document.getElementById('phase_response');
|
||||||
graph = Flotr.draw(container, [ phaseData ], { yaxis: { max : 60, min : -60 } });
|
graph = Flotr.draw(container, [ phaseData ], { yaxis: { max : 120, min : -120 } });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
let menuButton = document.querySelector(".button-menu");
|
||||||
|
let container = document.querySelector(".container");
|
||||||
|
let pageContent = document.querySelector(".page-content");
|
||||||
|
let responsiveBreakpoint = 991;
|
||||||
|
|
||||||
|
if (window.innerWidth <= responsiveBreakpoint) {
|
||||||
|
container.classList.add("nav-closed");
|
||||||
|
}
|
||||||
|
|
||||||
|
menuButton.addEventListener("click", function () {
|
||||||
|
container.classList.toggle("nav-closed");
|
||||||
|
});
|
||||||
|
|
||||||
|
pageContent.addEventListener("click", function () {
|
||||||
|
if (window.innerWidth <= responsiveBreakpoint) {
|
||||||
|
container.classList.add("nav-closed");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
if (window.innerWidth > responsiveBreakpoint) {
|
||||||
|
container.classList.remove("nav-closed");
|
||||||
|
}
|
||||||
|
});
|
Plik diff jest za duży
Load Diff
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,164 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: "Hind Vadodara", -apple-system, BlinkMacSystemFont, Segoe UI,
|
||||||
|
Helvetica Neue, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.sidebar {
|
||||||
|
height: 100%;
|
||||||
|
width: 220px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: 0 0 2rem 0 rgb(0 0 0 / 5%);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: width 0.5s ease;
|
||||||
|
}
|
||||||
|
.container.nav-closed .sidebar,
|
||||||
|
.container.nav-closed .header-logo {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.sidebar ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.sidebar ul li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.sidebar ul li a {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.sidebar ul li a.active,
|
||||||
|
.sidebar ul li a:hover {
|
||||||
|
background: #e8ecef;
|
||||||
|
}
|
||||||
|
.sidebar ul li span {
|
||||||
|
margin-left: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
.sidebar ul li i {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #111;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
height: 50px;
|
||||||
|
background: #303f9f;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
.sidebar ul li a.active i {
|
||||||
|
color: #303f9e;
|
||||||
|
}
|
||||||
|
.site-logo {
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
min-height: 32px;
|
||||||
|
min-width: 32px;
|
||||||
|
margin: 0 18px 0 15px;
|
||||||
|
}
|
||||||
|
.site-logo path {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
.site-title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.page-content {
|
||||||
|
padding: 10px 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.page-content h1 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.header-search {
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
padding: 0 20px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.header-search .button-menu {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
margin-right: 15px;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.header-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 220px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: width 0.5s ease;
|
||||||
|
}
|
||||||
|
.header-search input[type="search"] {
|
||||||
|
height: 100%;
|
||||||
|
width: 300px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 100;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.header-search input[type="search"]:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.header-search input[type="search"]::placeholder {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
.header-search .button-menu:focus {
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.header-search .button-menu svg path {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 991px) {
|
||||||
|
.page-content {
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
.header-logo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#zplane_polezero2{border:2px solid black;}
|
||||||
|
|
||||||
|
#design_responses {
|
||||||
|
|
||||||
|
}
|
Ładowanie…
Reference in New Issue