diff --git a/bgdc.jpg b/bgdc.jpg new file mode 100644 index 0000000..fd99a53 Binary files /dev/null and b/bgdc.jpg differ diff --git a/bulb.png b/bulb.png new file mode 100644 index 0000000..6cc501b Binary files /dev/null and b/bulb.png differ diff --git a/greenLed.png b/greenLed.png new file mode 100644 index 0000000..2f7370c Binary files /dev/null and b/greenLed.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6d4652d --- /dev/null +++ b/index.html @@ -0,0 +1,214 @@ + + + + + + + VLABS + + + + +
+ VLABS +
+
+ John K Jacobs +
+
+ Sign out +
+
+
+ +
+ ASK Modulation and Demodulation +
+ + + + + + +
+ +
+ +
+ +
+
+ +
+
+ + + + + + +
+

Graphs

+ + +
+ + + + + + + + + + +
+ +
+ + + + + + + + +
+
+ + +
+ +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
▲
+ +
+
+
+
+ +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
▲
+ +
+
+
+
+ + + + + + + + + + +
+ + +
+
+ " 1. First Turn on 8 Bit Variable data generator using power switch which helps to generate the data signal from given data
+ 2. Change the orientation of data switch as per your data, for 0 toggle it up to vice versa.
+ + 3.Check the data again from S0 to S7 bit and the amplitude and frequency of message signal."
+
+
+ 1.Click on RUN button to generate the ASK signal
+ + 2.Observe the graph and download it from right to top corner of graph in png,jpeg,and pdf format.
+ + 3.To decode the ASK signal click the decode button shown below."
+
+
+ +
+ + + + + +
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..64822ef --- /dev/null +++ b/index.js @@ -0,0 +1,595 @@ +/////Power Switch//// +var flag=0; +var on=0; +var runDone=0; +function onOff(){ + if(flag==0) + { + document.getElementById("leds").src = "IMAGES YAAR/redLed.png"; + flag=1; + on=1; + } + else{ + document.getElementById("leds").src = "IMAGES YAAR/greenLed.png"; + initial(); + flag=0; + on=0; + } +} + + +// UserInput +let bitStream = [0,0,0,0,0,0,0,0]; +// let myImage = document.querySelector('img'); + + +// Play Audio Function +function playSound () { + document.getElementById("myAudio").play(); +} + + + +function swapOneZero0(){ + if (flag === 1 ) { + playSound(); + + + let myImage = document.getElementById('s0'); // img ko point kiya + let mySrc = myImage.getAttribute('src'); // src ko store kiya using img + let myImage_0 = document.getElementById('ss0'); + + if(mySrc === 'IMAGES YAAR/toggle_off.png') { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_on.png'); + myImage_0.setAttribute('src','IMAGES YAAR/one.jpeg'); + bitStream[0] = 1; + } else { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_off.png'); + myImage_0.setAttribute('src','IMAGES YAAR/zero.jpeg'); + + + + bitStream[0] = 0; + +} +} + +else { + alert("Please turn on the Generator!"); +} +} + + +function swapOneZero1(){ + + if (flag == 1 ) { + playSound(); + + + let myImage = document.getElementById('s1'); + let mySrc = myImage.getAttribute('src'); + let myImage_0 = document.getElementById('ss1'); + + if(mySrc === 'IMAGES YAAR/toggle_off.png') { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_on.png'); + myImage_0.setAttribute('src','IMAGES YAAR/one.jpeg'); + bitStream[1] = 1; + } else { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_off.png'); + myImage_0.setAttribute('src','IMAGES YAAR/zero.jpeg'); + bitStream[1] = 0; + } + } + + else{ + alert("Please turn on the Generator!"); + } +} + + + +function swapOneZero2(){ + if (flag == 1) { + playSound(); + + let myImage = document.getElementById('s2'); + let mySrc = myImage.getAttribute('src'); + let myImage_0 = document.getElementById('ss2'); + if(mySrc === 'IMAGES YAAR/toggle_off.png') { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_on.png'); + myImage_0.setAttribute('src','IMAGES YAAR/one.jpeg'); + bitStream[2] = 1; + } else { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_off.png'); + myImage_0.setAttribute('src','IMAGES YAAR/zero.jpeg'); + bitStream[2] = 0; + } + } + + else{ + alert("Please turn on the Generator!"); + } +} + + +function swapOneZero3(){ + if (flag == 1) { + playSound(); + + let myImage = document.getElementById('s3'); + let mySrc = myImage.getAttribute('src'); + let myImage_0 = document.getElementById('ss3'); + if(mySrc === 'IMAGES YAAR/toggle_off.png') { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_on.png'); + myImage_0.setAttribute('src','IMAGES YAAR/one.jpeg'); + bitStream[3] = 1; + } else { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_off.png'); + myImage_0.setAttribute('src','IMAGES YAAR/zero.jpeg'); + bitStream[3] = 0; + } + } + else{ + alert("Please turn on the Generator!"); + } +} + + + +function swapOneZero4(){ + + if (flag == 1) { + playSound(); + + let myImage = document.getElementById('s4'); + let mySrc = myImage.getAttribute('src'); + let myImage_0 = document.getElementById('ss4'); + if(mySrc === 'IMAGES YAAR/toggle_off.png') { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_on.png'); + myImage_0.setAttribute('src','IMAGES YAAR/one.jpeg'); + bitStream[4] = 1; + } else { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_off.png'); + myImage_0.setAttribute('src','IMAGES YAAR/zero.jpeg'); + bitStream[4] = 0; + } +} +else{ + alert("Please turn on the Generator!"); +} + +} + + + + +function swapOneZero5(){ + + if (flag == 1 ) { + playSound(); + + let myImage = document.getElementById('s5'); + let mySrc = myImage.getAttribute('src'); + let myImage_0 = document.getElementById('ss5'); + if(mySrc === 'IMAGES YAAR/toggle_off.png') { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_on.png'); + myImage_0.setAttribute('src','IMAGES YAAR/one.jpeg'); + bitStream[5] = 1; + } else { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_off.png'); + myImage_0.setAttribute('src','IMAGES YAAR/zero.jpeg'); + bitStream[5] = 0; + } + } + + else { + alert("Please turn on the Generator!"); + } +} + + + +function swapOneZero6(){ + if ( flag == 1) { + playSound(); + + + let myImage = document.getElementById('s6'); + let mySrc = myImage.getAttribute('src'); + let myImage_0 = document.getElementById('ss6'); + + if(mySrc === 'IMAGES YAAR/toggle_off.png') { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_on.png'); + myImage_0.setAttribute('src','IMAGES YAAR/one.jpeg'); + bitStream[6] = 1; + } else { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_off.png'); + myImage_0.setAttribute('src','IMAGES YAAR/zero.jpeg'); + bitStream[6] = 0; + } + } + else { + alert("Please turn on the Generator!"); + } +} + + + +function swapOneZero7(){ + if (flag == 1) { + playSound(); + + let myImage = document.getElementById('s7'); + let mySrc = myImage.getAttribute('src'); + let myImage_0 = document.getElementById('ss7'); + if(mySrc === 'IMAGES YAAR/toggle_off.png') { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_on.png'); + myImage_0.setAttribute('src','IMAGES YAAR/one.jpeg'); + bitStream[7] = 1; + } else { + playSound(); + myImage.setAttribute('src','IMAGES YAAR/toggle_off.png'); + myImage_0.setAttribute('src','IMAGES YAAR/zero.jpeg'); + bitStream[7] = 0; + } + } + else{ + alert("Please turn on the Generator!"); + } +} +// ---------------------------------------------Data Input Code------------------------------------------------------------------ +function inputStream(){ +const canvas = document.querySelector('canvas'); +const c = canvas.getContext('2d'); +c.clearRect(0, 0, canvas.width, canvas.height); //Clears the canvas for new graph + +// canvas.width = innerWidth; +// canvas.height = innerHeight; +var h = canvas.height; +var w = canvas.width; +c.beginPath(); +title: "Input signal"; +// var dps = [1, 1, 0 ,0, 0, 1, 0, 1]; + +c.moveTo(0,h/2); + +for( let i=0; i<8; i++) +{ + if(bitStream[i] == 0) + { + c.lineTo((i*canvas.width)/8,(canvas.height/2)+(canvas.height/4)); + c.lineTo(((i+1)*canvas.width)/8,(canvas.height/2)+(canvas.height/4)); + } + else + { + c.lineTo((i*canvas.width)/8,(canvas.height/2)-(canvas.height/4)); + c.lineTo(((i+1)*canvas.width)/8,(canvas.height/2)-(canvas.height/4)); + } +} +c.strokeStyle = "green"; +c.stroke(); +} +// ----------------------------------------------------------Sine Wave ---------------------------------------------------------- +function sineWave(){ +const carrier = document.getElementById('canvasCarrier'); +const d = carrier.getContext('2d'); + +// carrier.width = innerWidth; +// carrier.height = innerHeight; + +d.beginPath(); + +d.moveTo(0,carrier.height/2); +// Amp check +if(document.getElementById('radio-choice-0').checked==true){ + var amp=0; +} +else if(document.getElementById('radio-choice-1').checked==true){ + var amp=1; +} +else if(document.getElementById('radio-choice-2').checked==true){ + var amp=2; +} +else if(document.getElementById('radio-choice-3').checked==true){ + var amp=3; +} +else if(document.getElementById('radio-choice-4').checked==true){ + var amp=4; +} +else if(document.getElementById('radio-choice-5').checked==true){ + var amp=5; +} +else if(document.getElementById('radio-choice-6').checked==true){ + var amp=6; +} +else if(document.getElementById('radio-choice-7').checked==true){ + var amp=7; +} +else if(document.getElementById('radio-choice-8').checked==true){ + var amp=8; +} +else if(document.getElementById('radio-choice-9').checked==true){ + var amp=9; +} +else if(document.getElementById('radio-choice-10').checked==true){ + var amp=10; +} +else{ + var amp = 70; +} + +// frequency check + +if(document.getElementById('freq-choice-0').checked==true){ + var freq=0; +} +else if(document.getElementById('freq-choice-1').checked==true){ + var freq=1; +} +else if(document.getElementById('freq-choice-2').checked==true){ + var freq=2; +} +else if(document.getElementById('freq-choice-3').checked==true){ + var freq=3; +} +else if(document.getElementById('freq-choice-4').checked==true){ + var freq=4; +} +else if(document.getElementById('freq-choice-5').checked==true){ + var freq=5; +} +else if(document.getElementById('freq-choice-6').checked==true){ + var freq=6; +} +else if(document.getElementById('freq-choice-7').checked==true){ + var freq=7; +} +else if(document.getElementById('freq-choice-8').checked==true){ + var freq=8; +} +else if(document.getElementById('freq-choice-9').checked==true){ + var freq=9; +} +else if(document.getElementById('freq-choice-10').checked==true){ + var freq=10; +} +else{ + var freq = 70; +} +for (let i = 0; i < carrier.width; i++) { + d.lineTo(i, carrier.height/2 + Math.sin(i * freq*10) * amp*10); +} +d.lineTo(carrier.width, carrier.height/2); +d.stroke(); +} +// -------------------------------------------------------ASK OUTPUT--------------------------------------------------------------- +function askOutput(){ + const output = document.getElementById('canvasASK'); + const e = output.getContext('2d'); + e.clearRect(0, 0, output.width, output.height); + e.beginPath(); + e.moveTo(0,output.height/2); + // Amp check +if(document.getElementById('radio-choice-0').checked==true){ + var amp=0; +} +else if(document.getElementById('radio-choice-1').checked==true){ + var amp=1; +} +else if(document.getElementById('radio-choice-2').checked==true){ + var amp=2; +} +else if(document.getElementById('radio-choice-3').checked==true){ + var amp=3; +} +else if(document.getElementById('radio-choice-4').checked==true){ + var amp=4; +} +else if(document.getElementById('radio-choice-5').checked==true){ + var amp=5; +} +else if(document.getElementById('radio-choice-6').checked==true){ + var amp=6; +} +else if(document.getElementById('radio-choice-7').checked==true){ + var amp=7; +} +else if(document.getElementById('radio-choice-8').checked==true){ + var amp=8; +} +else if(document.getElementById('radio-choice-9').checked==true){ + var amp=9; +} +else if(document.getElementById('radio-choice-10').checked==true){ + var amp=10; +} +else{ + var amp = 70; +} + +// frequency check + +if(document.getElementById('freq-choice-0').checked==true){ + var freq=0; +} +else if(document.getElementById('freq-choice-1').checked==true){ + var freq=1; +} +else if(document.getElementById('freq-choice-2').checked==true){ + var freq=2; +} +else if(document.getElementById('freq-choice-3').checked==true){ + var freq=3; +} +else if(document.getElementById('freq-choice-4').checked==true){ + var freq=4; +} +else if(document.getElementById('freq-choice-5').checked==true){ + var freq=5; +} +else if(document.getElementById('freq-choice-6').checked==true){ + var freq=6; +} +else if(document.getElementById('freq-choice-7').checked==true){ + var freq=7; +} +else if(document.getElementById('freq-choice-8').checked==true){ + var freq=8; +} +else if(document.getElementById('freq-choice-9').checked==true){ + var freq=9; +} +else if(document.getElementById('freq-choice-10').checked==true){ + var freq=10; +} +else{ + var freq = 70; +} + for( let j=0; j<8; j++){ + if(bitStream[j]==0) + { + for (let i = j*output.width/8; i < ((j+1)*output.width)/8; i++) + { + e.lineTo(i, output.height/2 + Math.sin(i * 0) * 100); + } + // e.lineTo(output.width, output.height/2); + } + else + { + for (let i =j*output.width/8; i < ((j+1)*output.width)/8; i++) + { + e.lineTo(i, output.height/2 + Math.sin(i * freq*10) * amp*10); + } + // e.lineTo(output.width, output.height/2); + } + } + e.stroke(); + } +function ffskOutput(){ + const fskSignal = document.getElementById('canvasFSK'); + const f = fskSignal.getContext('2d'); + f.clearRect(0, 0, fskSignal.width, fskSignal.height); + f.beginPath(); + f.moveTo(0,fskSignal.height/2); + // Amp check +if(document.getElementById('radio-choice-0').checked==true){ + var amp=0; +} +else if(document.getElementById('radio-choice-1').checked==true){ + var amp=1; +} +else if(document.getElementById('radio-choice-2').checked==true){ + var amp=2; +} +else if(document.getElementById('radio-choice-3').checked==true){ + var amp=3; +} +else if(document.getElementById('radio-choice-4').checked==true){ + var amp=4; +} +else if(document.getElementById('radio-choice-5').checked==true){ + var amp=5; +} +else if(document.getElementById('radio-choice-6').checked==true){ + var amp=6; +} +else if(document.getElementById('radio-choice-7').checked==true){ + var amp=7; +} +else if(document.getElementById('radio-choice-8').checked==true){ + var amp=8; +} +else if(document.getElementById('radio-choice-9').checked==true){ + var amp=9; +} +else if(document.getElementById('radio-choice-10').checked==true){ + var amp=10; +} +else{ + var amp = 70; +} + +// frequency check + +if(document.getElementById('freq-choice-0').checked==true){ + var freq=0; +} +else if(document.getElementById('freq-choice-1').checked==true){ + var freq=1; +} +else if(document.getElementById('freq-choice-2').checked==true){ + var freq=2; +} +else if(document.getElementById('freq-choice-3').checked==true){ + var freq=3; +} +else if(document.getElementById('freq-choice-4').checked==true){ + var freq=4; +} +else if(document.getElementById('freq-choice-5').checked==true){ + var freq=5; +} +else if(document.getElementById('freq-choice-6').checked==true){ + var freq=6; +} +else if(document.getElementById('freq-choice-7').checked==true){ + var freq=7; +} +else if(document.getElementById('freq-choice-8').checked==true){ + var freq=8; +} +else if(document.getElementById('freq-choice-9').checked==true){ + var freq=9; +} +else if(document.getElementById('freq-choice-10').checked==true){ + var freq=10; +} +else{ + var freq = 70; +} + for( let j=0; j<8; j++){ + if(bitStream[j]==0) + { + for (let i = j*fskSignal.width/8; i < ((j+1)*fskSignal.width)/8; i++) + { + f.lineTo(i, fskSignal.height/2 + Math.sin(i * freq*10) * amp*10); + } + // e.lineTo(output.width, output.height/2); + } + else + { + for (let i =j*fskSignal.width/8; i < ((j+1)*fskSignal.width)/8; i++) + { + f.lineTo(i, fskSignal.height/2 + Math.sin(i * freq*10) * amp*10); + } + // e.lineTo(output.width, output.height/2); + } + } + f.stroke(); +} + +//OnClick Button +function printArray(){ +console.log(bitStream); +sineWave(); +inputStream(); +askOutput(); +ffskOutput(); +} + + diff --git a/logo.jpeg b/logo.jpeg new file mode 100644 index 0000000..5489cf2 Binary files /dev/null and b/logo.jpeg differ diff --git a/one.jpeg b/one.jpeg new file mode 100644 index 0000000..d6f8598 Binary files /dev/null and b/one.jpeg differ diff --git a/power button.png b/power button.png new file mode 100644 index 0000000..9978935 Binary files /dev/null and b/power button.png differ diff --git a/redLed.png b/redLed.png new file mode 100644 index 0000000..745331a Binary files /dev/null and b/redLed.png differ diff --git a/run.png b/run.png new file mode 100644 index 0000000..0bf1f37 Binary files /dev/null and b/run.png differ diff --git a/setup bg.png b/setup bg.png new file mode 100644 index 0000000..657fb10 Binary files /dev/null and b/setup bg.png differ diff --git a/style.css b/style.css index 2213ec3..f56cfbe 100644 --- a/style.css +++ b/style.css @@ -1,171 +1,744 @@ -body{ - width: 1490px; - height: 100vh; - overflow: scroll; -} -h1{ - font-size: 20px; - text-align: center; -} - - -p{ - font-size: 25px ; -} - .switchRed{ - width: 30px; - height: 26px; - background-color: red; - position: absolute; - margin-top: 72px; - margin-left: 80px; - box-shadow: 0 10px 15px 0 rgba(44, 44, 44, 0.4); - border: double; - } - - .led{ - width: 19px; - height: 19px; - margin-left:180px; - margin-top: 40px; - position: absolute; - - } - .switchRed p{ - margin-top: 10px; - font-size: 18px; - } - .led img{ - width: 40px; - height: 40px; - border: 1px solid rgb(87, 85, 85); - border-radius: 50%; - box-shadow: 0 12px 17px 0 rgba(19, 19, 19, 0.4); - } - - - - - -/*UserInput*/ - -.module-border-wrap { - height: 200px; - margin: auto; - max-width: 50%; - border: 20px ; - border-radius: 20px; - padding: 10px; - margin-bottom:20px ; - background: linear-gradient(90deg, rgba(14,89,215,1) 18%, rgba(0,159,255,1) 51%, rgba(50,88,233,1) 81%); -} -.userInput{ - height: 200px; - background: whitesmoke; - color: white; - padding:0.5px ; - border-radius: 5px; - -} -.image{ - margin-top: 50px; - height: 89.5px; - align-content: center; -} - -/*Run*/ -@import url('https://fonts.googleapis.com/css2?family=Allan:wght@400;700&family=Sora:wght@200&display=swap'); -.runButton{ - width: 55px; - height: 30px; - position: relative; - margin-left: 10px; - top: 10px; - background-color: #A7D129; - border:4px double #3E2C41; - transition: all 0.4s; - transition-timing-function:cubic-bezier(0.5, 3, 0, 1); - - font-family:Allan; - color: black; - font-style: bold; -} -.runButton:hover { - transform:scale(1.2,1.2); -} - -/*canvas*/ - -.graphs{ - height: 550px; - background-color:whitesmoke ; - position: relative; - top: 40px; - margin-left: 10px; - margin-right: 10px; -} -#canvasStep{ - width: 700px; - height: 240px; - position: relative; - top: 30px; - margin-left: 20px; - bottom: 13.5px; - - -} -#canvasCarrier{ - width: 700px; - height: 240px; - position:relative ; - top: 30px; - left: 20px; -} -#canvasASK{ - width: 700px; - height: 240px; - position: relative; - top: 35.5px; - margin-bottom: 30px; - margin-left: 20px; - - -} -#canvasFSK{ - width: 700px; - height: 240px; - border: 1px solid; - - - position: relative; - top: 35.5px; - left: 20px; - margin-bottom: 30px; -} - - -/*Instructions*/ -.wrapper{ - width: 100%; - height: 800px; - border-radius: 20px 20px 0px 0px; - background: linear-gradient(90deg, rgba(14,89,215,1) 18%, rgba(0,159,255,1) 51%, rgba(50,88,233,1) 81%); -} -.topContainer{ - - - text-align: center; - font-size: 40px; - margin-bottom: 20px; - padding-top: 10px; -} -.midContainer{ - width: 100%; - background-color: whitesmoke; - height: 100px; - border-radius: 5px; - /*float: left;*/ - font-size: 20px; - /*overflow: scroll;*/ -} - +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500;700&display=swap'); +body{ + width: 1200px; + height: 100vh; + overflow: scroll; +} +/* .logo{ */ + /* LOGO*/ +/* position: absolute; */ +/* width: 10px; */ +/* height: 10px; */ +/* left: 13px; */ +/* top: 10px; */ +/* } */ + + +.Vlabs{ + position: absolute; + width: 82px; + height: 28px; + left: 75px; + top: 33px; + + font-family: 'Poppins'; + font-style: bold; + font-weight: 700; + font-size: 24px; + line-height: 28px; + + color: #000000; + + +} + +.User{ + /* Udbhav v Kamath */ + + position: absolute; + width: 222px; + height: 34px; + left: 1187px; + top: 33px; + + font-family: 'Poppins'; + font-style: Bold; + font-weight: 400; + font-size: 20px; + line-height: 30px; + + color: #000000; +} +.Signupbutton{ + /* Property 1=normal */ + + +box-sizing: border-box; + +/* Auto layout */ +font-family: 'Poppins'; + font-style: Bold; + text-align: center; +padding: 4px 14px; +gap: 10px; + +position: absolute; +width: 100px; +height: 32px; +left: 1394px; +top: 33px; + +background: #FFFFFF; +border: 1px solid #000000; +box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25); +border-radius: 6px; +} + + + +.line1{ + position: absolute; + width: 1880px; + height: 0px; + left: -7px; + top: 84px; + + border: 1px solid #000000; + transform: rotate(0.06deg); + } + + + .HEADING1{ + + + /* ASK Modulation and Demodulation */ + + +position: absolute; +height: 26px; +left: 500px; +top: 140px; + +font-family: 'Poppins'; +font-style: bold; +font-weight: 400; +font-size: 30px; +/* identical to box height */ + + +color: #000000; + +} + + + .switchRed{ + width: 40px; + height: 40px; + background-color: red; + position: absolute; + margin-top: 360px; + margin-left: 390px; + box-shadow: 0 10px 15px 0 rgba(255, 255, 255, 0.4); + border: double; + } + + .led{ + height: 20px; + margin:auto; + text-align: center; + } + .switchRed p{ + margin-top: 10px; + font-size: 18px; + } + .led img{ + position: relative; + height: 40px; + top: 350px; + left: -122px; + } + + + + +/*UserInput*/ + +/*BACKGROUND IMAGE*/ +.setup1{ + position: absolute; + margin-top: 280px; + margin-left:250px; + height: 890px; + width: 90px; +} + +.setup1 img{ + height: 350px; + +} + + + + + + +.userInput{ + height: 200px; + + color: white; + padding:0.5px ; + border-radius: 5px; + /* position:relative; */ + +} +.image{ + position: relative; + height: 40px; + top: 340px; + left: 580px; +} + + + +.togglepins{ + height: 20px; + margin:auto; + text-align: center; + top: 700px; +} + + +.togglepins img{ + position: relative; + padding:0.9px ; + height: 68px; + top: 280px; + left:162px; +} +/*Run*/ +@import url('https://fonts.googleapis.com/css2?family=Allan:wght@400;700&family=Sora:wght@200&display=swap'); +.runButton{ + width: 55px; + height: 50px; + position: relative; + margin-left: 15px; + top: 450px; + background-color: rgb(143, 140, 140); + border:4px double #010101; + transition: all 0.4s; + transition-timing-function:cubic-bezier(0.5, 3, 0, 1); + + font-family:Allan; + color: black; + font-style: bold; +} +.runButton:hover { + transform:scale(1.2,1.2); +} + + +/*Instructions*/ +/*.wrapper{ + display:Absolute; + flex-direction: row; + width: 100%; + /* height: 800px; */ + /*border-radius: 20px 20px 70px 0px; +} +.topContainer{ + background: linear-gradient(90deg, rgba(14,89,215,1) 18%, rgba(0,159,255,1) 51%, rgba(50,88,233,1) 81%); + + + text-align: center; + font-size: 40px; + margin-bottom: 20px; + padding-top: 90px; + +}*/ +.Instructions{ + /* Rectangle 96 */ + + +position: absolute; +width: 1453px; +height: 90px; +left: 20px; +top: 996px; + +background: linear-gradient(180deg, #2266BB 0%, rgba(50, 131, 234, 0.92) 48.96%, #2266BB 100%); +border-radius: 14.0304px; +} +.midContainer1{ + + text-align: left; + font-size: 30px; + margin-bottom: 10px; + padding-top: 900px; + + width: 100%; + background-color:white; + height: 100px; + border-radius: 20px; + /*float: left;*/ + font-size: 20px; + /*overflow: scroll;*/ +} +.midContainer2{ + + text-align: left; + font-size: 30px; + margin-bottom: 10px; + padding-top: 700px; + + width: 100%; + background-color:white; + height: 100px; + border-radius: 20px; + /*float: left;*/ + font-size: 20px; + /*overflow: scroll;*/ +} + +.Graphs1{ + text-align: center; + color: #FFFAFA; +} +.Graphs1{ + /* Rectangle 97 */ + + +position: absolute; +width: 1440px; +height: 81px; +left: 0px; +top: 1200px; + +background: linear-gradient(180deg, #2266BB 0%, rgba(50, 131, 234, 0.92) 48.96%, #2266BB 100%); +border-radius: 14.0304px; +} + +/*canvas*/ + +.graphs{ + height: 550px; + background-color:white ; + position: relative; + top: 300px; + margin-left: 10px; + margin-right: 10px; +} + +#canvasCarrier{ + + position: absolute; +width: 647.64px; +height: 299.9px; +left: 44px; +top: 1096px; + +box-shadow: inset -4px -4.78px 4.77922px #3283EA; + +} +#canvasASK{ + + + position: absolute; + width: 647.64px; + height: 299.9px; + left: 735.36px; + top: 1096px; + + box-shadow: inset -4px -4.78px 4.77922px #3283EA; +} +#canvasFSK{ + + position: absolute; +width: 647.64px; +height: 299.9px; +left: 44px; +top: 1436.1px; + +box-shadow: inset -4px -4.78px 4.77922px #3283EA; + +} +#canvasDemodulated{ + + position: absolute; +width: 647.64px; +height: 299.9px; +left: 735.36px; +top: 1436.1px; + +box-shadow: inset -4px -4.78px 4.77922px #3283EA; + + + +} + +* { +box-sizing: border-box; +} + + +@media all and (max-width: 600px) { +html { +font-size: 14px; +} +} + +body { +height: 100%; +min-height: 100%; +} + +/* .container{ + position: relative; + bottom: 100px; + left: 2px; +} */ +.containera{ + position: relative; + bottom: 52px; + left: 2px; +} +form { +max-width: 30rem; +margin: 4rem auto; +text-align: center; +} + +fieldset { +position: relative; +border: none; +width: 10rem; +height: 10rem; +margin: 0 auto; +top: -52px; +left: 510px; +} + +fieldset label { +position: absolute; +display: block; +margin: 0 auto; +padding-top: 1rem; +width: 1rem; +left: 4.3rem; +transform-origin: 50% 100px; +} +fieldset label:hover { +cursor: pointer; +} +fieldset input { +position: absolute; +width: 7rem; +left: 7rem; +display: block; +margin: 1rem auto 0 auto; +padding: 0; +transform-origin: 50% 7.5rem; +opacity: 0; +} + +fieldset input:hover { +cursor: pointer; +} +fieldset #radio-choice-0, fieldset label[for=radio-choice-0] { +transform: rotateZ(0deg); +} +fieldset #radio-choice-1, fieldset label[for=radio-choice-1] { +transform: rotateZ(30deg); +} +fieldset #radio-choice-2, fieldset label[for=radio-choice-2] { +transform: rotateZ(60deg); +} +fieldset #radio-choice-3, fieldset label[for=radio-choice-3] { +transform: rotateZ(90deg); +} +fieldset #radio-choice-4, fieldset label[for=radio-choice-4] { +transform: rotateZ(120deg); +} +fieldset #radio-choice-5, fieldset label[for=radio-choice-5] { +transform: rotateZ(150deg); +} +fieldset #radio-choice-6, fieldset label[for=radio-choice-6] { +transform: rotateZ(180deg); +} +fieldset #radio-choice-7, fieldset label[for=radio-choice-7] { +transform: rotateZ(210deg); +} +fieldset #radio-choice-8, fieldset label[for=radio-choice-8] { +transform: rotateZ(240deg); +} +fieldset #radio-choice-9, fieldset label[for=radio-choice-9] { +transform: rotateZ(270deg); +} +fieldset #radio-choice-10, fieldset label[for=radio-choice-10] { +transform: rotateZ(300deg); +} +fieldset input[type=radio]:checked + label { +color: #2f5; +text-shadow: 0px 0px 4px #2f5; +} + +input[type=radio]:checked#radio-choice-1 ~ .dial { +transform: rotateZ(30deg); +} +input[type=radio]:checked#radio-choice-1 ~ .dial::before { +transform: rotateZ(30deg); +} +input[type=radio]:checked#radio-choice-1 ~ .dial::after { +transform: rotateZ(30deg); +} +input[type=radio]:checked#radio-choice-2 ~ .dial { +transform: rotateZ(60deg); +} +input[type=radio]:checked#radio-choice-2 ~ .dial::before { +transform: rotateZ(60deg); +} +input[type=radio]:checked#radio-choice-2 ~ .dial::after { +transform: rotateZ(60deg); +} +input[type=radio]:checked#radio-choice-3 ~ .dial { +transform: rotateZ(90deg); +} +input[type=radio]:checked#radio-choice-3 ~ .dial::before { +transform: rotateZ(90); +} +input[type=radio]:checked#radio-choice-3 ~ .dial::after { +transform: rotateZ(90); +} +input[type=radio]:checked#radio-choice-4 ~ .dial { +transform: rotateZ(120deg); +} +input[type=radio]:checked#radio-choice-4 ~ .dial::before { +transform: rotateZ(120); +} +input[type=radio]:checked#radio-choice-4 ~ .dial::after { +transform: rotateZ(120); +} +input[type=radio]:checked#radio-choice-5 ~ .dial { +transform: rotateZ(150deg); +} +input[type=radio]:checked#radio-choice-5 ~ .dial::before { +transform: rotateZ(150); +} +input[type=radio]:checked#radio-choice-5 ~ .dial::after { +transform: rotateZ(150); +} +input[type=radio]:checked#radio-choice-6 ~ .dial { +transform: rotateZ(180deg); +} +input[type=radio]:checked#radio-choice-6 ~ .dial::before { +transform: rotateZ(180deg); +} +input[type=radio]:checked#radio-choice-6 ~ .dial::after { +transform: rotateZ(180deg); +} +input[type=radio]:checked#radio-choice-7 ~ .dial { +transform: rotateZ(210deg); +} +input[type=radio]:checked#radio-choice-7 ~ .dial::before { +transform: rotateZ(210deg); +} +input[type=radio]:checked#radio-choice-7 ~ .dial::after { +transform: rotateZ(210deg); +} +input[type=radio]:checked#radio-choice-8 ~ .dial { +transform: rotateZ(240deg); +} +input[type=radio]:checked#radio-choice-8 ~ .dial::before { +transform: rotateZ(240deg); +} +input[type=radio]:checked#radio-choice-8 ~ .dial::after { +transform: rotateZ(240deg); +} +input[type=radio]:checked#radio-choice-9 ~ .dial { +transform: rotateZ(270deg); +} +input[type=radio]:checked#radio-choice-9 ~ .dial::before { +transform: rotateZ(270deg); +} +input[type=radio]:checked#radio-choice-9 ~ .dial::after { +transform: rotateZ(270deg); +} +input[type=radio]:checked#radio-choice-10 ~ .dial { +transform: rotateZ(300deg); +} +input[type=radio]:checked#radio-choice-10 ~ .dial::before { +transform: rotateZ(300deg); +} +input[type=radio]:checked#radio-choice-10 ~ .dial::after { +transform: rotateZ(300deg); +} + +/* Frequency */ +fieldset #freq-choice-0, fieldset label[for=freq-choice-0] { +transform: rotateZ(0deg); +} +fieldset #freq-choice-1, fieldset label[for=freq-choice-1] { +transform: rotateZ(30deg); +} +fieldset #freq-choice-2, fieldset label[for=freq-choice-2] { +transform: rotateZ(60deg); +} +fieldset #freq-choice-3, fieldset label[for=freq-choice-3] { +transform: rotateZ(90deg); +} +fieldset #freq-choice-4, fieldset label[for=freq-choice-4] { +transform: rotateZ(120deg); +} +fieldset #freq-choice-5, fieldset label[for=freq-choice-5] { +transform: rotateZ(150deg); +} +fieldset #freq-choice-6, fieldset label[for=freq-choice-6] { +transform: rotateZ(180deg); +} +fieldset #freq-choice-7, fieldset label[for=freq-choice-7] { +transform: rotateZ(210deg); +} +fieldset #freq-choice-8, fieldset label[for=freq-choice-8] { +transform: rotateZ(240deg); +} +fieldset #freq-choice-9, fieldset label[for=freq-choice-9] { +transform: rotateZ(270deg); +} +fieldset #freq-choice-10, fieldset label[for=freq-choice-10] { +transform: rotateZ(300deg); +} +input[type=radio]:checked#freq-choice-1 ~ .dial { +transform: rotateZ(30deg); +} +input[type=radio]:checked#freq-choice-1 ~ .dial::before { +transform: rotateZ(30deg); +} +input[type=radio]:checked#freq-choice-1 ~ .dial::after { +transform: rotateZ(30deg); +} +input[type=radio]:checked#freq-choice-2 ~ .dial { +transform: rotateZ(60deg); +} +input[type=radio]:checked#freq-choice-2 ~ .dial::before { +transform: rotateZ(60deg); +} +input[type=radio]:checked#freq-choice-2 ~ .dial::after { +transform: rotateZ(60deg); +} +input[type=radio]:checked#freq-choice-3 ~ .dial { +transform: rotateZ(90deg); +} +input[type=radio]:checked#freq-choice-3 ~ .dial::before { +transform: rotateZ(90); +} +input[type=radio]:checked#freq-choice-3 ~ .dial::after { +transform: rotateZ(90); +} +input[type=radio]:checked#freq-choice-4 ~ .dial { +transform: rotateZ(120deg); +} +input[type=radio]:checked#freq-choice-4 ~ .dial::before { +transform: rotateZ(120); +} +input[type=radio]:checked#freq-choice-4 ~ .dial::after { +transform: rotateZ(120); +} +input[type=radio]:checked#freq-choice-5 ~ .dial { +transform: rotateZ(150deg); +} +input[type=radio]:checked#freq-choice-5 ~ .dial::before { +transform: rotateZ(150); +} +input[type=radio]:checked#freq-choice-5 ~ .dial::after { +transform: rotateZ(150); +} +input[type=radio]:checked#freq-choice-6 ~ .dial { +transform: rotateZ(180deg); +} +input[type=radio]:checked#freq-choice-6 ~ .dial::before { +transform: rotateZ(180deg); +} +input[type=radio]:checked#freq-choice-6 ~ .dial::after { +transform: rotateZ(180deg); +} +input[type=radio]:checked#freq-choice-7 ~ .dial { +transform: rotateZ(210deg); +} +input[type=radio]:checked#freq-choice-7 ~ .dial::before { +transform: rotateZ(210deg); +} +input[type=radio]:checked#freq-choice-7 ~ .dial::after { +transform: rotateZ(210deg); +} +input[type=radio]:checked#freq-choice-8 ~ .dial { +transform: rotateZ(240deg); +} +input[type=radio]:checked#freq-choice-8 ~ .dial::before { +transform: rotateZ(240deg); +} +input[type=radio]:checked#freq-choice-8 ~ .dial::after { +transform: rotateZ(240deg); +} +input[type=radio]:checked#freq-choice-9 ~ .dial { +transform: rotateZ(270deg); +} +input[type=radio]:checked#freq-choice-9 ~ .dial::before { +transform: rotateZ(270deg); +} +input[type=radio]:checked#freq-choice-9 ~ .dial::after { +transform: rotateZ(270deg); +} +input[type=radio]:checked#freq-choice-10 ~ .dial { +transform: rotateZ(300deg); +} +input[type=radio]:checked#freq-choice-10 ~ .dial::before { +transform: rotateZ(300deg); +} +input[type=radio]:checked#freq-choice-10 ~ .dial::after { +transform: rotateZ(300deg); +} + +.dial{ +position: relative; +top: -8px; +left: -1px; +line-height: 0; +font-size: 65%; +color: #082; +text-shadow: 0px 0px 7px #2f5; +display: block; +width: 7rem; +height: 7rem; +padding: 1rem; +background: radial-gradient(#272727 30%, #333 50%, #222 65%, #111 90%, black 98%); +margin: 3rem auto; +border-radius: 50%; +box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6); +transition: transform 0.3s ease-in-out; +} +.dial::before { +position: absolute; +content: ""; +display: block; +width: 7rem; +height: 7rem; +border-radius: 50%; +background: radial-gradient(circle at 50% 80%, rgba(15, 15, 15, 0.4) 40%, rgba(15, 15, 15, 0.1) 70%); +box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45); +transition: transform 0.3s ease-in-out; +} +.dial::after { +position: absolute; +content: ""; +display: block; +width: 7rem; +height: 7rem; +border-radius: 50%; +top: 0; +left: 0; +background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); +transition: transform 0.3s ease-in-out; +} + +.clearfix:after { +visibility: hidden; +display: block; +font-size: 0; +content: " "; +clear: both; +height: 0; +} + +.clearfix { +display: inline-block; +} + +/* start commented backslash hack \*/ +* html .clearfix { +height: 1%; +} + +.clearfix { +display: block; +} + +/* close commented backslash hack */ diff --git a/switchOn.mp3 b/switchOn.mp3 new file mode 100644 index 0000000..e912f31 Binary files /dev/null and b/switchOn.mp3 differ diff --git a/toggle_off.png b/toggle_off.png new file mode 100644 index 0000000..6a60d31 Binary files /dev/null and b/toggle_off.png differ diff --git a/toggle_on.png b/toggle_on.png new file mode 100644 index 0000000..3d15a22 Binary files /dev/null and b/toggle_on.png differ diff --git a/zero.jpeg b/zero.jpeg index 5fa6172..4419a31 100644 Binary files a/zero.jpeg and b/zero.jpeg differ