diff --git a/experiment/simulation/css/copy.txt b/experiment/simulation/css/copy.txt
new file mode 100644
index 0000000..f852c9b
--- /dev/null
+++ b/experiment/simulation/css/copy.txt
@@ -0,0 +1,267 @@
+let data = [
+ {
+ step: 1,
+ title: "Draw the axis and name VP & HP",
+ questions: [
+ {
+ question: "The type of projection discussed here is related to",
+ options: ["Planes", "Points", "Lines", "Solid"],
+ answer: 2,
+ buttonClass: "btnAxis",
+ circle: null,
+ circleText: null,
+ func: null,
+ },
+ {
+ question:
+ "A line thickness of ____ indicates geometry out-lines in a grid sheet.",
+ options: ["0.5 mm", "1 mm", "1.5 mm", "2 mm"],
+ answer: 3,
+ buttonClass: "btnVPHP",
+ circle: null,
+ circleText: null,
+ func: null,
+ },
+ ],
+ },
+ {
+ step: 2,
+ title: "Draw the line",
+ questions: [
+ {
+ question: "Which of the following is a line.",
+ options: [
+ "A one dimensinal object",
+ "A two-dimensional object",
+ "A three-dimensional object",
+ "none of the options",
+ ],
+ answer: 3,
+ buttonClass: "btnLine",
+ circle: null,
+ circleText: null,
+ func: null,
+ },
+ ],
+ },
+ {
+ step: 3,
+ title: "Extend a",
+ questions: [
+ {
+ question:
+ "If a line is parallel to both the horizontal plane and vertical plane then that line is ____________",
+ options: [
+ "parallel to profile plane",
+ "lies on profile plane",
+ "perpendicular to profile plane",
+ "inclined to profile plane",
+ ],
+ answer: 2,
+ buttonClass: "btnaDash",
+ circle: { x: 280, y: 200 },
+ circleText: "a'",
+ func: a,
+ },
+ ],
+ },
+ {
+ step: 4,
+ title: "Draw the lines with true length and angles given",
+ questions: [
+ {
+ question:
+ "If the line AB is inclined to the Vertical Plane and parallel to the Horizontal Plane, then which of the following statements is always CORRECT?",
+ options: [
+ "True Length of AB = Plan Length of AB",
+ "True Length of AB ≠ Plan Length of AB",
+ "True Length of AB > Elevation Length of AB",
+ "True Length of AB = Elevation Length of AB",
+ ],
+ answer: 2,
+ buttonClass: "btna",
+ circle: { x: 280, y: 295 },
+ circleText: "a",
+ func: b,
+ },
+ {
+ question:
+ "If the line AB is inclined to H.P., then its plan will______.",
+ options: [
+ "be perpendicular to XY line",
+ "be parallel to XY line",
+ "show the true length",
+ "None of the option",
+ ],
+ answer: 1,
+ buttonClass: "btnbOneDash",
+ circle: { x: 418, y: 70 },
+ circleText: "b1'",
+ func: b11,
+ },
+ ],
+ },
+ {
+ step: 5,
+ title: "Join b1' to locus of a'",
+ questions: [
+ {
+ question:
+ "If a line PQ lies on a horizontal plane and the vertical plane then which of the following view gives a point?",
+ options: ["Side view", "Top view", "Front view", "Isometric view"],
+ answer: 0,
+ buttonClass: "btnThetaOne",
+ circle: { x: 428, y: 280 },
+ circleText: "⨀",
+ func: b1,
+ },
+ ],
+ },
+ {
+ step: 6,
+ title: "Taking ab1 as radius draw arc to locus of b",
+ questions: [
+ {
+ question:
+ "If a line is parallel to V.P., then its top view will be ________ to XY line.",
+ options: [
+ "perpendicular",
+ "parallel",
+ "inclined",
+ "None of the options",
+ ],
+ answer: 1,
+ buttonClass: "btnB",
+ circle: { x: 375, y: 398 },
+ circleText: "b",
+ func: bb,
+ },
+ ],
+ },
+ {
+ step: 7,
+ title: "Join a and b to get top view",
+ questions: [
+ {
+ question:
+ "If a line CD is parallel to H.P., then its front will be ________ to XY line.",
+ options: [
+ "perpendicular",
+ "parallel",
+ "inclined",
+ "None of the options",
+ ],
+ answer: 1,
+ buttonClass: "btnBOne",
+ circle: { x: 415, y: 398 },
+ circleText: "b1",
+ func: b2,
+ },
+ ],
+ },
+ {
+ step: 8,
+ title: "Similary join b2 to locus of a",
+ questions: [
+ {
+ question:
+ "If the front view of the line AB is parallel to the XY line, then its true length is shown in",
+ options: [
+ "Front View",
+ "Top View",
+ "Side View",
+ "Both Front View and Top View",
+ ],
+ answer: 3,
+ buttonClass: "btnThetaTwo",
+ circle: { x: 470, y: 180 },
+ circleText: "⨀",
+ func: b22,
+ },
+ ],
+ },
+ {
+ step: 9,
+ title: "Taking a'b2'as radius draw arc to locus of b'",
+ questions: [
+ {
+ question:
+ "If the true inclinations and the apparent of a line with respect to HP are equal, the line is",
+ options: [
+ "Parallel to the horizontal plane(HP)",
+ "Parallel to the vertical plane(VP)",
+ "Parallel to profile plane(PP)",
+ "Inclined to both reference planes",
+ ],
+ answer: 0,
+ buttonClass: "btnBDash",
+ circle: { x: 375, y: 70 },
+ circleText: "b'",
+ func: bbb,
+ },
+ ],
+ },
+ {
+ step: 10,
+ title: "Trace",
+ questions: [
+ {
+ question:
+ "If the true inclinations and the apparent of a line with respect to HP are equal, the line is",
+ options: [
+ "Parallel to the horizontal plane(HP)",
+ "Parallel to the vertical plane(VP)",
+ "Parallel to profile plane(PP)",
+ "Inclined to both reference planes",
+ ],
+ answer: 0,
+ buttonClass: "btnTrace",
+ circle: null,
+ circleText: null,
+ func: hhhh,
+ },
+ ],
+ },
+ {
+ step: 11,
+ title: "Extend a",
+ questions: [
+ {
+ question:
+ "If the true inclinations and the apparent of a line with respect to HP are equal, the line is",
+ options: [
+ "Parallel to the horizontal plane(HP)",
+ "Parallel to the vertical plane(VP)",
+ "Parallel to profile plane(PP)",
+ "Inclined to both reference planes",
+ ],
+ answer: 0,
+ buttonClass: "btnH",
+ circle: null,
+ circleText: null,
+ func: ha,
+ },
+ ],
+ },
+ {
+ step: 12,
+ title: "Draw a perpendicular line to join the plane",
+ questions: [
+ {
+ question:
+ "If the true inclinations and the apparent of a line with respect to HP are equal, the line is",
+ options: [
+ "Parallel to the horizontal plane(HP)",
+ "Parallel to the vertical plane(VP)",
+ "Parallel to profile plane(PP)",
+ "Inclined to both reference planes",
+ ],
+ answer: 0,
+ buttonClass: "btnV",
+ circle: null,
+ circleText: null,
+ func: v,
+ },
+ ],
+ },
+];
\ No newline at end of file
diff --git a/experiment/simulation/css/general.css b/experiment/simulation/css/general.css
new file mode 100644
index 0000000..a39ef6e
--- /dev/null
+++ b/experiment/simulation/css/general.css
@@ -0,0 +1,243 @@
+:root {
+ --clr-title-background: #089b93;
+ --clr-title-background2: rgb(8, 195, 185);
+ --clr-title-background3: #417472;
+ --clr-text-clr: #ffffff;
+ --clr-container-clr: #9fdeff;
+ --clr-body-clr: #ebe7e7;
+ --clr-side-background2: rgb(28, 138, 138);
+ --clr-side-background4: rgb(46, 48, 48);
+ --clr-side-background3: rgb(75, 77, 77);
+ --clr-red: #db1d1d;
+}
+*,
+*::before,
+*::after {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-weight: 500;
+}
+
+html {
+ /* 10px */
+ font-size: 62.5%;
+ /* font-family: "comic sans MS", sans-serif; */
+ font-family: "Nunito", sans-serif;
+ scroll-behavior: smooth;
+}
+
+body {
+ font-weight: 600;
+ line-height: 1.6;
+ font-size: 1.6rem;
+ position: relative;
+ width: 60%;
+ margin: auto;
+}
+
+h2,
+h3 {
+ color: #333;
+}
+/* label,
+select,
+input {
+ display: inline-block;
+} */
+
+::-webkit-scrollbar {
+ width: 0.5rem;
+ left: -5rem;
+}
+
+::-moz-scrollbar {
+ width: 0.5rem;
+ left: -5rem;
+}
+
+.ui-widget input,
+.ui-selectmenu-button,
+.ui-widget textarea,
+.ui-widget button,
+.ui-select option {
+ font-family: "Nunito", sans-serif;
+ font-size: 1.6rem;
+}
+
+/* select menu */
+.ui-selectmenu-button {
+ background-color: #fff;
+}
+
+/*majorly modified here*/
+.ui-spinner {
+ width: 10rem;
+ text-align: center;
+ display: inline-block;
+ overflow: hidden;
+ padding: 0;
+ vertical-align: middle;
+ border: 0 none;
+}
+.ui-spinner-input {
+ width: inherit;
+ font-size: 1.6rem;
+ border: none;
+ background: none;
+ color: inherit;
+ padding: 0 0 0.1rem 0.5rem;
+ margin: 0;
+ vertical-align: middle;
+ outline: none;
+}
+.ui-spinner-button {
+ width: 1.8rem;
+ height: 50%;
+ font-size: 0.5em;
+ padding: 0;
+ margin: 0;
+ text-align: center;
+ position: absolute;
+ cursor: default;
+ display: block;
+ overflow: hidden;
+ right: 0;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+/* vertical centre icon */
+.ui-spinner .ui-icon {
+ position: absolute;
+ margin-top: -8px;
+ top: 50%;
+ left: 50%;
+}
+.ui-spinner .ui-icon:active {
+ outline: none;
+}
+.ui-spinner-up {
+ top: 0;
+ cursor: pointer;
+}
+
+.ui-spinner-down {
+ bottom: 0;
+ cursor: pointer;
+}
+
+.ui-slider {
+ position: relative;
+ text-align: left;
+ background: #d7d7d7;
+ z-index: 1;
+ margin-top: 8px;
+}
+.ui-slider {
+ -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
+ -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
+}
+.ui-slider .ui-slider-handle {
+ background: url(../images/slider_handles.png) 0px -23px no-repeat;
+ position: absolute;
+ z-index: 2;
+ width: 23px;
+ height: 23px;
+ cursor: pointer;
+ border: none;
+ outline: none;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.ui-slider .ui-state-hover,
+.ui-slider .ui-state-active {
+ background-position: 0 0;
+}
+.ui-slider .ui-slider-range {
+ /* background: #a3cae0; */
+ background: #02498036;
+ position: absolute;
+ z-index: 1;
+ font-size: 0.7em;
+ display: block;
+ border: 0;
+ background-position: 0 0;
+}
+/* .ui-slider .ui-slider-range {
+ -moz-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
+ -webkit-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
+ box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
+} */
+
+.ui-slider-horizontal {
+ height: 5px;
+ width: inherit;
+}
+.ui-slider-horizontal .ui-slider-handle {
+ top: -10px;
+ margin-left: -13px;
+}
+.ui-slider-horizontal .ui-slider-range {
+ top: 0;
+ height: 100%;
+}
+.ui-slider-horizontal .ui-slider-range-min {
+ left: 0;
+}
+.ui-slider-horizontal .ui-slider-range-max {
+ right: 0;
+}
+
+.ui-slider-vertical {
+ width: 5px;
+ height: 100px;
+}
+.ui-slider-vertical .ui-slider-handle {
+ left: -8px;
+ margin-left: 0;
+ margin-bottom: -13px;
+}
+.ui-slider-vertical .ui-slider-range {
+ left: 0;
+ width: 100%;
+}
+.ui-slider-vertical .ui-slider-range-min {
+ bottom: 0;
+}
+.ui-slider-vertical .ui-slider-range-max {
+ top: 0;
+}
+
+.select-menu {
+ font-family: "Nunito", sans-serif;
+ font-size: 1.6rem;
+}
+.highlight {
+ background: linear-gradient(
+ to bottom,
+ #f7c3a9da,
+ #c17a53da,
+ #c17a53da,
+ #c17a53da,
+ #c17a53da,
+ #311b10da
+ );
+ height: 100%;
+ width: 0;
+}
+
+.display-hide {
+ display: none;
+}
+
+.display-flex {
+ display: flex;
+}
+
+.svg-style {
+ fill: none;
+ stroke: #bdeaf3;
+}
diff --git a/experiment/simulation/css/graph.css b/experiment/simulation/css/graph.css
deleted file mode 100644
index e69de29..0000000
diff --git a/experiment/simulation/css/jquery-ui.css b/experiment/simulation/css/jquery-ui.css
new file mode 100644
index 0000000..5e65e5f
--- /dev/null
+++ b/experiment/simulation/css/jquery-ui.css
@@ -0,0 +1,1657 @@
+/*! jQuery UI - v1.13.2 - 2022-07-14
+* http://jqueryui.com
+* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&fwDefault=normal&cornerRadius=3px&bgColorHeader=e9e9e9&bgTextureHeader=flat&borderColorHeader=dddddd&fcHeader=333333&iconColorHeader=444444&bgColorContent=ffffff&bgTextureContent=flat&borderColorContent=dddddd&fcContent=333333&iconColorContent=444444&bgColorDefault=f6f6f6&bgTextureDefault=flat&borderColorDefault=c5c5c5&fcDefault=454545&iconColorDefault=777777&bgColorHover=ededed&bgTextureHover=flat&borderColorHover=cccccc&fcHover=2b2b2b&iconColorHover=555555&bgColorActive=007fff&bgTextureActive=flat&borderColorActive=003eff&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fffa90&bgTextureHighlight=flat&borderColorHighlight=dad55e&fcHighlight=777620&iconColorHighlight=777620&bgColorError=fddfdf&bgTextureError=flat&borderColorError=f1a899&fcError=5f3f3f&iconColorError=cc0000&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=666666&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=5px&offsetTopShadow=0px&offsetLeftShadow=0px&cornerRadiusShadow=8px
+* Copyright jQuery Foundation and other contributors; Licensed MIT */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+ display: none;
+}
+.ui-helper-hidden-accessible {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+.ui-helper-reset {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ line-height: 1.3;
+ text-decoration: none;
+ font-size: 100%;
+ list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+ content: "";
+ display: table;
+ border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+ clear: both;
+}
+.ui-helper-zfix {
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ position: absolute;
+ opacity: 0;
+ -ms-filter: "alpha(opacity=0)"; /* support: IE8 */
+}
+
+.ui-front {
+ z-index: 100;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+ cursor: default !important;
+ pointer-events: none;
+}
+
+/* Icons
+----------------------------------*/
+.ui-icon {
+ display: inline-block;
+ vertical-align: middle;
+ margin-top: -0.25em;
+ position: relative;
+ text-indent: -99999px;
+ overflow: hidden;
+ background-repeat: no-repeat;
+}
+
+.ui-widget-icon-block {
+ left: 50%;
+ margin-left: -8px;
+ display: block;
+}
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+.ui-accordion .ui-accordion-header {
+ display: block;
+ cursor: pointer;
+ position: relative;
+ margin: 2px 0 0 0;
+ padding: 0.5em 0.5em 0.5em 0.7em;
+ font-size: 100%;
+}
+.ui-accordion .ui-accordion-content {
+ padding: 1em 2.2em;
+ border-top: 0;
+ overflow: auto;
+}
+.ui-autocomplete {
+ position: absolute;
+ top: 0;
+ left: 0;
+ cursor: default;
+}
+.ui-menu {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: block;
+ outline: 0;
+}
+.ui-menu .ui-menu {
+ position: absolute;
+}
+.ui-menu .ui-menu-item {
+ margin: 0;
+ cursor: pointer;
+ /* support: IE10, see #8844 */
+ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
+}
+.ui-menu .ui-menu-item-wrapper {
+ position: relative;
+ padding: 3px 1em 3px 0.4em;
+}
+.ui-menu .ui-menu-divider {
+ margin: 5px 0;
+ height: 0;
+ font-size: 0;
+ line-height: 0;
+ border-width: 1px 0 0 0;
+}
+.ui-menu .ui-state-focus,
+.ui-menu .ui-state-active {
+ margin: -1px;
+}
+
+/* icon support */
+.ui-menu-icons {
+ position: relative;
+}
+.ui-menu-icons .ui-menu-item-wrapper {
+ padding-left: 2em;
+}
+
+/* left-aligned */
+.ui-menu .ui-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0.2em;
+ margin: auto 0;
+}
+
+/* right-aligned */
+.ui-menu .ui-menu-icon {
+ left: auto;
+ right: 0;
+}
+.ui-button {
+ padding: 0.4em 1em;
+ display: inline-block;
+ position: relative;
+ line-height: normal;
+ margin-right: 0.1em;
+ cursor: pointer;
+ vertical-align: middle;
+ text-align: center;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ /* Support: IE <= 11 */
+ overflow: visible;
+}
+
+.ui-button,
+.ui-button:link,
+.ui-button:visited,
+.ui-button:hover,
+.ui-button:active {
+ text-decoration: none;
+}
+
+/* to make room for the icon, a width needs to be set here */
+.ui-button-icon-only {
+ width: 2em;
+ box-sizing: border-box;
+ text-indent: -9999px;
+ white-space: nowrap;
+}
+
+/* no icon support for input elements */
+input.ui-button.ui-button-icon-only {
+ text-indent: 0;
+}
+
+/* button icon element(s) */
+.ui-button-icon-only .ui-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -8px;
+ margin-left: -8px;
+}
+
+.ui-button.ui-icon-notext .ui-icon {
+ padding: 0;
+ width: 2.1em;
+ height: 2.1em;
+ text-indent: -9999px;
+ white-space: nowrap;
+}
+
+input.ui-button.ui-icon-notext .ui-icon {
+ width: auto;
+ height: auto;
+ text-indent: 0;
+ white-space: normal;
+ padding: 0.4em 1em;
+}
+
+/* workarounds */
+/* Support: Firefox 5 - 40 */
+input.ui-button::-moz-focus-inner,
+button.ui-button::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+.ui-controlgroup {
+ vertical-align: middle;
+ display: inline-block;
+}
+.ui-controlgroup > .ui-controlgroup-item {
+ float: left;
+ margin-left: 0;
+ margin-right: 0;
+}
+.ui-controlgroup > .ui-controlgroup-item:focus,
+.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
+ z-index: 9999;
+}
+.ui-controlgroup-vertical > .ui-controlgroup-item {
+ display: block;
+ float: none;
+ width: 100%;
+ margin-top: 0;
+ margin-bottom: 0;
+ text-align: left;
+}
+.ui-controlgroup-vertical .ui-controlgroup-item {
+ box-sizing: border-box;
+}
+.ui-controlgroup .ui-controlgroup-label {
+ padding: 0.4em 1em;
+}
+.ui-controlgroup .ui-controlgroup-label span {
+ font-size: 80%;
+}
+.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
+ border-left: none;
+}
+.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
+ border-top: none;
+}
+.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
+ border-right: none;
+}
+.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
+ border-bottom: none;
+}
+
+/* Spinner specific style fixes */
+.ui-controlgroup-vertical .ui-spinner-input {
+ /* Support: IE8 only, Android < 4.4 only */
+ width: 75%;
+ width: calc(100% - 2.4em);
+}
+.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
+ border-top-style: solid;
+}
+
+.ui-checkboxradio-label .ui-icon-background {
+ box-shadow: inset 1px 1px 1px #ccc;
+ border-radius: 0.12em;
+ border: none;
+}
+.ui-checkboxradio-radio-label .ui-icon-background {
+ width: 16px;
+ height: 16px;
+ border-radius: 1em;
+ overflow: visible;
+ border: none;
+}
+.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
+.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
+ background-image: none;
+ width: 8px;
+ height: 8px;
+ border-width: 4px;
+ border-style: solid;
+}
+.ui-checkboxradio-disabled {
+ pointer-events: none;
+}
+.ui-datepicker {
+ width: 17em;
+ padding: 0.2em 0.2em 0;
+ display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+ position: relative;
+ padding: 0.2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+ position: absolute;
+ top: 2px;
+ width: 1.8em;
+ height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+ top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+ left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+ right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+ left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+ right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+ display: block;
+ position: absolute;
+ left: 50%;
+ margin-left: -8px;
+ top: 50%;
+ margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+ margin: 0 2.3em;
+ line-height: 1.8em;
+ text-align: center;
+}
+.ui-datepicker .ui-datepicker-title select {
+ font-size: 1em;
+ margin: 1px 0;
+}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year {
+ width: 45%;
+}
+.ui-datepicker table {
+ width: 100%;
+ font-size: 0.9em;
+ border-collapse: collapse;
+ margin: 0 0 0.4em;
+}
+.ui-datepicker th {
+ padding: 0.7em 0.3em;
+ text-align: center;
+ font-weight: bold;
+ border: 0;
+}
+.ui-datepicker td {
+ border: 0;
+ padding: 1px;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+ display: block;
+ padding: 0.2em;
+ text-align: right;
+ text-decoration: none;
+}
+.ui-datepicker .ui-datepicker-buttonpane {
+ background-image: none;
+ margin: 0.7em 0 0 0;
+ padding: 0 0.2em;
+ border-left: 0;
+ border-right: 0;
+ border-bottom: 0;
+}
+.ui-datepicker .ui-datepicker-buttonpane button {
+ float: right;
+ margin: 0.5em 0.2em 0.4em;
+ cursor: pointer;
+ padding: 0.2em 0.6em 0.3em 0.6em;
+ width: auto;
+ overflow: visible;
+}
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+ float: left;
+}
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi {
+ width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+ float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+ width: 95%;
+ margin: 0 auto 0.4em;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+ width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+ width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+ width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+ border-left-width: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+ clear: left;
+}
+.ui-datepicker-row-break {
+ clear: both;
+ width: 100%;
+ font-size: 0;
+}
+
+/* RTL support */
+.ui-datepicker-rtl {
+ direction: rtl;
+}
+.ui-datepicker-rtl .ui-datepicker-prev {
+ right: 2px;
+ left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next {
+ left: 2px;
+ right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-prev:hover {
+ right: 1px;
+ left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next:hover {
+ left: 1px;
+ right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane {
+ clear: right;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button {
+ float: left;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
+.ui-datepicker-rtl .ui-datepicker-group {
+ float: right;
+}
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
+ border-right-width: 0;
+ border-left-width: 1px;
+}
+
+/* Icons */
+.ui-datepicker .ui-icon {
+ display: block;
+ text-indent: -99999px;
+ overflow: hidden;
+ background-repeat: no-repeat;
+ left: 0.5em;
+ top: 0.3em;
+}
+.ui-dialog {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 0.2em;
+ outline: 0;
+}
+.ui-dialog .ui-dialog-titlebar {
+ padding: 0.4em 1em;
+ position: relative;
+}
+.ui-dialog .ui-dialog-title {
+ float: left;
+ margin: 0.1em 0;
+ white-space: nowrap;
+ width: 90%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.ui-dialog .ui-dialog-titlebar-close {
+ position: absolute;
+ right: 0.3em;
+ top: 50%;
+ width: 20px;
+ margin: -10px 0 0 0;
+ padding: 1px;
+ height: 20px;
+}
+.ui-dialog .ui-dialog-content {
+ position: relative;
+ border: 0;
+ padding: 0.5em 1em;
+ background: none;
+ overflow: auto;
+}
+.ui-dialog .ui-dialog-buttonpane {
+ text-align: left;
+ border-width: 1px 0 0 0;
+ background-image: none;
+ margin-top: 0.5em;
+ padding: 0.3em 1em 0.5em 0.4em;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+ float: right;
+}
+.ui-dialog .ui-dialog-buttonpane button {
+ margin: 0.5em 0.4em 0.5em 0;
+ cursor: pointer;
+}
+.ui-dialog .ui-resizable-n {
+ height: 2px;
+ top: 0;
+}
+.ui-dialog .ui-resizable-e {
+ width: 2px;
+ right: 0;
+}
+.ui-dialog .ui-resizable-s {
+ height: 2px;
+ bottom: 0;
+}
+.ui-dialog .ui-resizable-w {
+ width: 2px;
+ left: 0;
+}
+.ui-dialog .ui-resizable-se,
+.ui-dialog .ui-resizable-sw,
+.ui-dialog .ui-resizable-ne,
+.ui-dialog .ui-resizable-nw {
+ width: 7px;
+ height: 7px;
+}
+.ui-dialog .ui-resizable-se {
+ right: 0;
+ bottom: 0;
+}
+.ui-dialog .ui-resizable-sw {
+ left: 0;
+ bottom: 0;
+}
+.ui-dialog .ui-resizable-ne {
+ right: 0;
+ top: 0;
+}
+.ui-dialog .ui-resizable-nw {
+ left: 0;
+ top: 0;
+}
+.ui-draggable .ui-dialog-titlebar {
+ cursor: move;
+}
+.ui-draggable-handle {
+ -ms-touch-action: none;
+ touch-action: none;
+}
+.ui-resizable {
+ position: relative;
+}
+.ui-resizable-handle {
+ position: absolute;
+ font-size: 0.1px;
+ display: block;
+ -ms-touch-action: none;
+ touch-action: none;
+}
+.ui-resizable-disabled .ui-resizable-handle,
+.ui-resizable-autohide .ui-resizable-handle {
+ display: none;
+}
+.ui-resizable-n {
+ cursor: n-resize;
+ height: 7px;
+ width: 100%;
+ top: -5px;
+ left: 0;
+}
+.ui-resizable-s {
+ cursor: s-resize;
+ height: 7px;
+ width: 100%;
+ bottom: -5px;
+ left: 0;
+}
+.ui-resizable-e {
+ cursor: e-resize;
+ width: 7px;
+ right: -5px;
+ top: 0;
+ height: 100%;
+}
+.ui-resizable-w {
+ cursor: w-resize;
+ width: 7px;
+ left: -5px;
+ top: 0;
+ height: 100%;
+}
+.ui-resizable-se {
+ cursor: se-resize;
+ width: 12px;
+ height: 12px;
+ right: 1px;
+ bottom: 1px;
+}
+.ui-resizable-sw {
+ cursor: sw-resize;
+ width: 9px;
+ height: 9px;
+ left: -5px;
+ bottom: -5px;
+}
+.ui-resizable-nw {
+ cursor: nw-resize;
+ width: 9px;
+ height: 9px;
+ left: -5px;
+ top: -5px;
+}
+.ui-resizable-ne {
+ cursor: ne-resize;
+ width: 9px;
+ height: 9px;
+ right: -5px;
+ top: -5px;
+}
+.ui-progressbar {
+ height: 2em;
+ text-align: left;
+ overflow: hidden;
+}
+.ui-progressbar .ui-progressbar-value {
+ margin: -1px;
+ height: 100%;
+}
+.ui-progressbar .ui-progressbar-overlay {
+ background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
+ height: 100%;
+ -ms-filter: "alpha(opacity=25)"; /* support: IE8 */
+ opacity: 0.25;
+}
+.ui-progressbar-indeterminate .ui-progressbar-value {
+ background-image: none;
+}
+.ui-selectable {
+ -ms-touch-action: none;
+ touch-action: none;
+}
+.ui-selectable-helper {
+ position: absolute;
+ z-index: 100;
+ border: 1px dotted black;
+}
+.ui-selectmenu-menu {
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: none;
+}
+.ui-selectmenu-menu .ui-menu {
+ overflow: auto;
+ overflow-x: hidden;
+ padding-bottom: 1px;
+}
+.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
+ font-size: 1em;
+ font-weight: bold;
+ line-height: 1.5;
+ padding: 2px 0.4em;
+ margin: 0.5em 0 0 0;
+ height: auto;
+ border: 0;
+}
+.ui-selectmenu-open {
+ display: block;
+}
+.ui-selectmenu-text {
+ display: block;
+ margin-right: 20px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.ui-selectmenu-button.ui-button {
+ text-align: left;
+ white-space: nowrap;
+ width: 14em;
+}
+.ui-selectmenu-icon.ui-icon {
+ float: right;
+ margin-top: 0;
+}
+.ui-slider {
+ position: relative;
+ text-align: left;
+}
+.ui-slider .ui-slider-handle {
+ position: absolute;
+ z-index: 2;
+ width: 1.2em;
+ height: 1.2em;
+ cursor: pointer;
+ -ms-touch-action: none;
+ touch-action: none;
+}
+.ui-slider .ui-slider-range {
+ position: absolute;
+ z-index: 1;
+ font-size: 0.7em;
+ display: block;
+ border: 0;
+ background-position: 0 0;
+}
+
+/* support: IE8 - See #6727 */
+.ui-slider.ui-state-disabled .ui-slider-handle,
+.ui-slider.ui-state-disabled .ui-slider-range {
+ filter: inherit;
+}
+
+.ui-slider-horizontal {
+ height: 0.8em;
+}
+.ui-slider-horizontal .ui-slider-handle {
+ top: -0.3em;
+ margin-left: -0.6em;
+}
+.ui-slider-horizontal .ui-slider-range {
+ top: 0;
+ height: 100%;
+}
+.ui-slider-horizontal .ui-slider-range-min {
+ left: 0;
+}
+.ui-slider-horizontal .ui-slider-range-max {
+ right: 0;
+}
+
+.ui-slider-vertical {
+ width: 0.8em;
+ height: 100px;
+}
+.ui-slider-vertical .ui-slider-handle {
+ left: -0.3em;
+ margin-left: 0;
+ margin-bottom: -0.6em;
+}
+.ui-slider-vertical .ui-slider-range {
+ left: 0;
+ width: 100%;
+}
+.ui-slider-vertical .ui-slider-range-min {
+ bottom: 0;
+}
+.ui-slider-vertical .ui-slider-range-max {
+ top: 0;
+}
+.ui-sortable-handle {
+ -ms-touch-action: none;
+ touch-action: none;
+}
+.ui-spinner {
+ position: relative;
+ display: inline-block;
+ overflow: hidden;
+ padding: 0;
+ vertical-align: middle;
+}
+.ui-spinner-input {
+ border: none;
+ background: none;
+ color: inherit;
+ padding: 0.222em 0;
+ margin: 0.2em 0;
+ vertical-align: middle;
+ margin-left: 0.4em;
+ margin-right: 2em;
+}
+.ui-spinner-button {
+ width: 1.6em;
+ height: 50%;
+ font-size: 0.5em;
+ padding: 0;
+ margin: 0;
+ text-align: center;
+ position: absolute;
+ cursor: default;
+ display: block;
+ overflow: hidden;
+ right: 0;
+}
+/* more specificity required here to override default borders */
+.ui-spinner a.ui-spinner-button {
+ border-top-style: none;
+ border-bottom-style: none;
+ border-right-style: none;
+}
+.ui-spinner-up {
+ top: 0;
+}
+.ui-spinner-down {
+ bottom: 0;
+}
+.ui-tabs {
+ position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+ padding: 0.2em;
+}
+.ui-tabs .ui-tabs-nav {
+ margin: 0;
+ padding: 0.2em 0.2em 0;
+}
+.ui-tabs .ui-tabs-nav li {
+ list-style: none;
+ float: left;
+ position: relative;
+ top: 0;
+ margin: 1px 0.2em 0 0;
+ border-bottom-width: 0;
+ padding: 0;
+ white-space: nowrap;
+}
+.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
+ float: left;
+ padding: 0.5em 1em;
+ text-decoration: none;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active {
+ margin-bottom: -1px;
+ padding-bottom: 1px;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
+.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
+.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
+ cursor: text;
+}
+.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
+ cursor: pointer;
+}
+.ui-tabs .ui-tabs-panel {
+ display: block;
+ border-width: 0;
+ padding: 1em 1.4em;
+ background: none;
+}
+.ui-tooltip {
+ padding: 8px;
+ position: absolute;
+ z-index: 9999;
+ max-width: 300px;
+}
+body .ui-tooltip {
+ border-width: 2px;
+}
+/* Component containers
+----------------------------------*/
+.ui-widget {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 1em;
+}
+.ui-widget .ui-widget {
+ font-size: 1em;
+}
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 1em;
+}
+.ui-widget.ui-widget-content {
+ border: 1px solid #c5c5c5;
+}
+.ui-widget-content {
+ border: 1px solid #dddddd;
+ background: #ffffff;
+ color: #333333;
+}
+.ui-widget-content a {
+ color: #333333;
+}
+.ui-widget-header {
+ border: 1px solid #dddddd;
+ background: #e9e9e9;
+ color: #333333;
+ font-weight: bold;
+}
+.ui-widget-header a {
+ color: #333333;
+}
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default,
+.ui-button,
+
+/* We use html here because we need a greater specificity to make sure disabled
+works properly when clicked or hovered */
+html .ui-button.ui-state-disabled:hover,
+html .ui-button.ui-state-disabled:active {
+ border: 1px solid #c5c5c5;
+ background: #f6f6f6;
+ font-weight: normal;
+ color: #454545;
+}
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited,
+a.ui-button,
+a:link.ui-button,
+a:visited.ui-button,
+.ui-button {
+ color: #454545;
+ text-decoration: none;
+}
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus,
+.ui-button:hover,
+.ui-button:focus {
+ border: 1px solid #cccccc;
+ background: #ededed;
+ font-weight: normal;
+ color: #2b2b2b;
+}
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited,
+.ui-state-focus a,
+.ui-state-focus a:hover,
+.ui-state-focus a:link,
+.ui-state-focus a:visited,
+a.ui-button:hover,
+a.ui-button:focus {
+ color: #2b2b2b;
+ text-decoration: none;
+}
+
+.ui-visual-focus {
+ box-shadow: 0 0 3px 1px rgb(94, 158, 214);
+}
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active,
+a.ui-button:active,
+.ui-button:active,
+.ui-button.ui-state-active:hover {
+ border: 1px solid #003eff;
+ background: #007fff;
+ font-weight: normal;
+ color: #ffffff;
+}
+.ui-icon-background,
+.ui-state-active .ui-icon-background {
+ border: #003eff;
+ background-color: #ffffff;
+}
+.ui-state-active a,
+.ui-state-active a:link,
+.ui-state-active a:visited {
+ color: #ffffff;
+ text-decoration: none;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+ border: 1px solid #dad55e;
+ background: #fffa90;
+ color: #777620;
+}
+.ui-state-checked {
+ border: 1px solid #dad55e;
+ background: #fffa90;
+}
+.ui-state-highlight a,
+.ui-widget-content .ui-state-highlight a,
+.ui-widget-header .ui-state-highlight a {
+ color: #777620;
+}
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+ border: 1px solid #f1a899;
+ background: #fddfdf;
+ color: #5f3f3f;
+}
+.ui-state-error a,
+.ui-widget-content .ui-state-error a,
+.ui-widget-header .ui-state-error a {
+ color: #5f3f3f;
+}
+.ui-state-error-text,
+.ui-widget-content .ui-state-error-text,
+.ui-widget-header .ui-state-error-text {
+ color: #5f3f3f;
+}
+.ui-priority-primary,
+.ui-widget-content .ui-priority-primary,
+.ui-widget-header .ui-priority-primary {
+ font-weight: bold;
+}
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary,
+.ui-widget-header .ui-priority-secondary {
+ opacity: 0.7;
+ -ms-filter: "alpha(opacity=70)"; /* support: IE8 */
+ font-weight: normal;
+}
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled,
+.ui-widget-header .ui-state-disabled {
+ opacity: 0.35;
+ -ms-filter: "alpha(opacity=35)"; /* support: IE8 */
+ background-image: none;
+}
+.ui-state-disabled .ui-icon {
+ -ms-filter: "alpha(opacity=35)"; /* support: IE8 - See #6059 */
+}
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+ width: 16px;
+ height: 16px;
+}
+.ui-icon,
+.ui-widget-content .ui-icon {
+ background-image: url("images/ui-icons_444444_256x240.png");
+}
+.ui-widget-header .ui-icon {
+ background-image: url("images/ui-icons_444444_256x240.png");
+}
+.ui-state-hover .ui-icon,
+.ui-state-focus .ui-icon,
+.ui-button:hover .ui-icon,
+.ui-button:focus .ui-icon {
+ background-image: url("images/ui-icons_555555_256x240.png");
+}
+.ui-state-active .ui-icon,
+.ui-button:active .ui-icon {
+ background-image: url("images/ui-icons_ffffff_256x240.png");
+}
+.ui-state-highlight .ui-icon,
+.ui-button .ui-state-highlight.ui-icon {
+ background-image: url("images/ui-icons_777620_256x240.png");
+}
+.ui-state-error .ui-icon,
+.ui-state-error-text .ui-icon {
+ background-image: url("images/ui-icons_cc0000_256x240.png");
+}
+.ui-button .ui-icon {
+ background-image: url("images/ui-icons_777777_256x240.png");
+}
+
+/* positioning */
+/* Three classes needed to override `.ui-button:hover .ui-icon` */
+.ui-icon-blank.ui-icon-blank.ui-icon-blank {
+ background-image: none;
+}
+.ui-icon-caret-1-n {
+ background-position: 0 0;
+}
+.ui-icon-caret-1-ne {
+ background-position: -16px 0;
+}
+.ui-icon-caret-1-e {
+ background-position: -32px 0;
+}
+.ui-icon-caret-1-se {
+ background-position: -48px 0;
+}
+.ui-icon-caret-1-s {
+ background-position: -65px 0;
+}
+.ui-icon-caret-1-sw {
+ background-position: -80px 0;
+}
+.ui-icon-caret-1-w {
+ background-position: -96px 0;
+}
+.ui-icon-caret-1-nw {
+ background-position: -112px 0;
+}
+.ui-icon-caret-2-n-s {
+ background-position: -128px 0;
+}
+.ui-icon-caret-2-e-w {
+ background-position: -144px 0;
+}
+.ui-icon-triangle-1-n {
+ background-position: 0 -16px;
+}
+.ui-icon-triangle-1-ne {
+ background-position: -16px -16px;
+}
+.ui-icon-triangle-1-e {
+ background-position: -32px -16px;
+}
+.ui-icon-triangle-1-se {
+ background-position: -48px -16px;
+}
+.ui-icon-triangle-1-s {
+ background-position: -65px -16px;
+}
+.ui-icon-triangle-1-sw {
+ background-position: -80px -16px;
+}
+.ui-icon-triangle-1-w {
+ background-position: -96px -16px;
+}
+.ui-icon-triangle-1-nw {
+ background-position: -112px -16px;
+}
+.ui-icon-triangle-2-n-s {
+ background-position: -128px -16px;
+}
+.ui-icon-triangle-2-e-w {
+ background-position: -144px -16px;
+}
+.ui-icon-arrow-1-n {
+ background-position: 0 -32px;
+}
+.ui-icon-arrow-1-ne {
+ background-position: -16px -32px;
+}
+.ui-icon-arrow-1-e {
+ background-position: -32px -32px;
+}
+.ui-icon-arrow-1-se {
+ background-position: -48px -32px;
+}
+.ui-icon-arrow-1-s {
+ background-position: -65px -32px;
+}
+.ui-icon-arrow-1-sw {
+ background-position: -80px -32px;
+}
+.ui-icon-arrow-1-w {
+ background-position: -96px -32px;
+}
+.ui-icon-arrow-1-nw {
+ background-position: -112px -32px;
+}
+.ui-icon-arrow-2-n-s {
+ background-position: -128px -32px;
+}
+.ui-icon-arrow-2-ne-sw {
+ background-position: -144px -32px;
+}
+.ui-icon-arrow-2-e-w {
+ background-position: -160px -32px;
+}
+.ui-icon-arrow-2-se-nw {
+ background-position: -176px -32px;
+}
+.ui-icon-arrowstop-1-n {
+ background-position: -192px -32px;
+}
+.ui-icon-arrowstop-1-e {
+ background-position: -208px -32px;
+}
+.ui-icon-arrowstop-1-s {
+ background-position: -224px -32px;
+}
+.ui-icon-arrowstop-1-w {
+ background-position: -240px -32px;
+}
+.ui-icon-arrowthick-1-n {
+ background-position: 1px -48px;
+}
+.ui-icon-arrowthick-1-ne {
+ background-position: -16px -48px;
+}
+.ui-icon-arrowthick-1-e {
+ background-position: -32px -48px;
+}
+.ui-icon-arrowthick-1-se {
+ background-position: -48px -48px;
+}
+.ui-icon-arrowthick-1-s {
+ background-position: -64px -48px;
+}
+.ui-icon-arrowthick-1-sw {
+ background-position: -80px -48px;
+}
+.ui-icon-arrowthick-1-w {
+ background-position: -96px -48px;
+}
+.ui-icon-arrowthick-1-nw {
+ background-position: -112px -48px;
+}
+.ui-icon-arrowthick-2-n-s {
+ background-position: -128px -48px;
+}
+.ui-icon-arrowthick-2-ne-sw {
+ background-position: -144px -48px;
+}
+.ui-icon-arrowthick-2-e-w {
+ background-position: -160px -48px;
+}
+.ui-icon-arrowthick-2-se-nw {
+ background-position: -176px -48px;
+}
+.ui-icon-arrowthickstop-1-n {
+ background-position: -192px -48px;
+}
+.ui-icon-arrowthickstop-1-e {
+ background-position: -208px -48px;
+}
+.ui-icon-arrowthickstop-1-s {
+ background-position: -224px -48px;
+}
+.ui-icon-arrowthickstop-1-w {
+ background-position: -240px -48px;
+}
+.ui-icon-arrowreturnthick-1-w {
+ background-position: 0 -64px;
+}
+.ui-icon-arrowreturnthick-1-n {
+ background-position: -16px -64px;
+}
+.ui-icon-arrowreturnthick-1-e {
+ background-position: -32px -64px;
+}
+.ui-icon-arrowreturnthick-1-s {
+ background-position: -48px -64px;
+}
+.ui-icon-arrowreturn-1-w {
+ background-position: -64px -64px;
+}
+.ui-icon-arrowreturn-1-n {
+ background-position: -80px -64px;
+}
+.ui-icon-arrowreturn-1-e {
+ background-position: -96px -64px;
+}
+.ui-icon-arrowreturn-1-s {
+ background-position: -112px -64px;
+}
+.ui-icon-arrowrefresh-1-w {
+ background-position: -128px -64px;
+}
+.ui-icon-arrowrefresh-1-n {
+ background-position: -144px -64px;
+}
+.ui-icon-arrowrefresh-1-e {
+ background-position: -160px -64px;
+}
+.ui-icon-arrowrefresh-1-s {
+ background-position: -176px -64px;
+}
+.ui-icon-arrow-4 {
+ background-position: 0 -80px;
+}
+.ui-icon-arrow-4-diag {
+ background-position: -16px -80px;
+}
+.ui-icon-extlink {
+ background-position: -32px -80px;
+}
+.ui-icon-newwin {
+ background-position: -48px -80px;
+}
+.ui-icon-refresh {
+ background-position: -64px -80px;
+}
+.ui-icon-shuffle {
+ background-position: -80px -80px;
+}
+.ui-icon-transfer-e-w {
+ background-position: -96px -80px;
+}
+.ui-icon-transferthick-e-w {
+ background-position: -112px -80px;
+}
+.ui-icon-folder-collapsed {
+ background-position: 0 -96px;
+}
+.ui-icon-folder-open {
+ background-position: -16px -96px;
+}
+.ui-icon-document {
+ background-position: -32px -96px;
+}
+.ui-icon-document-b {
+ background-position: -48px -96px;
+}
+.ui-icon-note {
+ background-position: -64px -96px;
+}
+.ui-icon-mail-closed {
+ background-position: -80px -96px;
+}
+.ui-icon-mail-open {
+ background-position: -96px -96px;
+}
+.ui-icon-suitcase {
+ background-position: -112px -96px;
+}
+.ui-icon-comment {
+ background-position: -128px -96px;
+}
+.ui-icon-person {
+ background-position: -144px -96px;
+}
+.ui-icon-print {
+ background-position: -160px -96px;
+}
+.ui-icon-trash {
+ background-position: -176px -96px;
+}
+.ui-icon-locked {
+ background-position: -192px -96px;
+}
+.ui-icon-unlocked {
+ background-position: -208px -96px;
+}
+.ui-icon-bookmark {
+ background-position: -224px -96px;
+}
+.ui-icon-tag {
+ background-position: -240px -96px;
+}
+.ui-icon-home {
+ background-position: 0 -112px;
+}
+.ui-icon-flag {
+ background-position: -16px -112px;
+}
+.ui-icon-calendar {
+ background-position: -32px -112px;
+}
+.ui-icon-cart {
+ background-position: -48px -112px;
+}
+.ui-icon-pencil {
+ background-position: -64px -112px;
+}
+.ui-icon-clock {
+ background-position: -80px -112px;
+}
+.ui-icon-disk {
+ background-position: -96px -112px;
+}
+.ui-icon-calculator {
+ background-position: -112px -112px;
+}
+.ui-icon-zoomin {
+ background-position: -128px -112px;
+}
+.ui-icon-zoomout {
+ background-position: -144px -112px;
+}
+.ui-icon-search {
+ background-position: -160px -112px;
+}
+.ui-icon-wrench {
+ background-position: -176px -112px;
+}
+.ui-icon-gear {
+ background-position: -192px -112px;
+}
+.ui-icon-heart {
+ background-position: -208px -112px;
+}
+.ui-icon-star {
+ background-position: -224px -112px;
+}
+.ui-icon-link {
+ background-position: -240px -112px;
+}
+.ui-icon-cancel {
+ background-position: 0 -128px;
+}
+.ui-icon-plus {
+ background-position: -16px -128px;
+}
+.ui-icon-plusthick {
+ background-position: -32px -128px;
+}
+.ui-icon-minus {
+ background-position: -48px -128px;
+}
+.ui-icon-minusthick {
+ background-position: -64px -128px;
+}
+.ui-icon-close {
+ background-position: -80px -128px;
+}
+.ui-icon-closethick {
+ background-position: -96px -128px;
+}
+.ui-icon-key {
+ background-position: -112px -128px;
+}
+.ui-icon-lightbulb {
+ background-position: -128px -128px;
+}
+.ui-icon-scissors {
+ background-position: -144px -128px;
+}
+.ui-icon-clipboard {
+ background-position: -160px -128px;
+}
+.ui-icon-copy {
+ background-position: -176px -128px;
+}
+.ui-icon-contact {
+ background-position: -192px -128px;
+}
+.ui-icon-image {
+ background-position: -208px -128px;
+}
+.ui-icon-video {
+ background-position: -224px -128px;
+}
+.ui-icon-script {
+ background-position: -240px -128px;
+}
+.ui-icon-alert {
+ background-position: 0 -144px;
+}
+.ui-icon-info {
+ background-position: -16px -144px;
+}
+.ui-icon-notice {
+ background-position: -32px -144px;
+}
+.ui-icon-help {
+ background-position: -48px -144px;
+}
+.ui-icon-check {
+ background-position: -64px -144px;
+}
+.ui-icon-bullet {
+ background-position: -80px -144px;
+}
+.ui-icon-radio-on {
+ background-position: -96px -144px;
+}
+.ui-icon-radio-off {
+ background-position: -112px -144px;
+}
+.ui-icon-pin-w {
+ background-position: -128px -144px;
+}
+.ui-icon-pin-s {
+ background-position: -144px -144px;
+}
+.ui-icon-play {
+ background-position: 0 -160px;
+}
+.ui-icon-pause {
+ background-position: -16px -160px;
+}
+.ui-icon-seek-next {
+ background-position: -32px -160px;
+}
+.ui-icon-seek-prev {
+ background-position: -48px -160px;
+}
+.ui-icon-seek-end {
+ background-position: -64px -160px;
+}
+.ui-icon-seek-start {
+ background-position: -80px -160px;
+}
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first {
+ background-position: -80px -160px;
+}
+.ui-icon-stop {
+ background-position: -96px -160px;
+}
+.ui-icon-eject {
+ background-position: -112px -160px;
+}
+.ui-icon-volume-off {
+ background-position: -128px -160px;
+}
+.ui-icon-volume-on {
+ background-position: -144px -160px;
+}
+.ui-icon-power {
+ background-position: 0 -176px;
+}
+.ui-icon-signal-diag {
+ background-position: -16px -176px;
+}
+.ui-icon-signal {
+ background-position: -32px -176px;
+}
+.ui-icon-battery-0 {
+ background-position: -48px -176px;
+}
+.ui-icon-battery-1 {
+ background-position: -64px -176px;
+}
+.ui-icon-battery-2 {
+ background-position: -80px -176px;
+}
+.ui-icon-battery-3 {
+ background-position: -96px -176px;
+}
+.ui-icon-circle-plus {
+ background-position: 0 -192px;
+}
+.ui-icon-circle-minus {
+ background-position: -16px -192px;
+}
+.ui-icon-circle-close {
+ background-position: -32px -192px;
+}
+.ui-icon-circle-triangle-e {
+ background-position: -48px -192px;
+}
+.ui-icon-circle-triangle-s {
+ background-position: -64px -192px;
+}
+.ui-icon-circle-triangle-w {
+ background-position: -80px -192px;
+}
+.ui-icon-circle-triangle-n {
+ background-position: -96px -192px;
+}
+.ui-icon-circle-arrow-e {
+ background-position: -112px -192px;
+}
+.ui-icon-circle-arrow-s {
+ background-position: -128px -192px;
+}
+.ui-icon-circle-arrow-w {
+ background-position: -144px -192px;
+}
+.ui-icon-circle-arrow-n {
+ background-position: -160px -192px;
+}
+.ui-icon-circle-zoomin {
+ background-position: -176px -192px;
+}
+.ui-icon-circle-zoomout {
+ background-position: -192px -192px;
+}
+.ui-icon-circle-check {
+ background-position: -208px -192px;
+}
+.ui-icon-circlesmall-plus {
+ background-position: 0 -208px;
+}
+.ui-icon-circlesmall-minus {
+ background-position: -16px -208px;
+}
+.ui-icon-circlesmall-close {
+ background-position: -32px -208px;
+}
+.ui-icon-squaresmall-plus {
+ background-position: -48px -208px;
+}
+.ui-icon-squaresmall-minus {
+ background-position: -64px -208px;
+}
+.ui-icon-squaresmall-close {
+ background-position: -80px -208px;
+}
+.ui-icon-grip-dotted-vertical {
+ background-position: 0 -224px;
+}
+.ui-icon-grip-dotted-horizontal {
+ background-position: -16px -224px;
+}
+.ui-icon-grip-solid-vertical {
+ background-position: -32px -224px;
+}
+.ui-icon-grip-solid-horizontal {
+ background-position: -48px -224px;
+}
+.ui-icon-gripsmall-diagonal-se {
+ background-position: -64px -224px;
+}
+.ui-icon-grip-diagonal-se {
+ background-position: -80px -224px;
+}
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-left,
+.ui-corner-tl {
+ border-top-left-radius: 3px;
+}
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-right,
+.ui-corner-tr {
+ border-top-right-radius: 3px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-left,
+.ui-corner-bl {
+ border-bottom-left-radius: 3px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-right,
+.ui-corner-br {
+ border-bottom-right-radius: 3px;
+}
+
+/* Overlays */
+.ui-widget-overlay {
+ background: #aaaaaa;
+ opacity: 0.3;
+ -ms-filter: Alpha(Opacity=30); /* support: IE8 */
+}
+.ui-widget-shadow {
+ -webkit-box-shadow: 0px 0px 5px #666666;
+ box-shadow: 0px 0px 5px #666666;
+}
diff --git a/experiment/simulation/css/main.css b/experiment/simulation/css/main.css
deleted file mode 100644
index 6663ec2..0000000
--- a/experiment/simulation/css/main.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.center-content {
- flex-direction: column;
- text-align: center;
-}
-
-.v-slider {
- width: 100%;
-}
-
-@media only screen and (max-width: 991px) {
- .v-mobile-reverse {
- display: flex;
- flex-direction: column-reverse;
- }
-}
-
-.custom-container {
- border: none;
- padding: 1em 3em;
-}
-
-.custom-container > * {
- padding: 0.5em;
-}
-
-.highlight {
- animation: hlt 5s ease !important;
-}
-
-@keyframes hlt {
- 10% {
- box-shadow: 0 0 5px 5px rgb(255, 208, 0);
- }
- 100% {
- box-shadow: 0 0 5px 5px transparent;
- }
-}
-
-@media screen and (max-width: 991px) {
- .v-floating-details {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100vw;
- max-width: 100%;
- padding: 0 15px 5px;
- font-size: 1rem;
- border: none;
- background: #2c99ce;
- color: #fff;
- border-radius: 20px 20px 0 0;
- font-weight: 600;
- z-index: 3;
- opacity: 0.7;
- margin-bottom: 0;
- text-align: center;
- }
- .v-floating-details > .v-detail-title {
- display: none;
- }
- body {
- padding-bottom: 40px;
- }
-}
diff --git a/experiment/simulation/css/query.css b/experiment/simulation/css/query.css
new file mode 100644
index 0000000..68c1a35
--- /dev/null
+++ b/experiment/simulation/css/query.css
@@ -0,0 +1,1246 @@
+/* rem and em don not depend on html font size in media queries, Instead 1rem = 1em = 16px
+rem: root font size
+em:current font size
+*/
+
+/* *************only screen******* */
+
+/* **************************** */
+/* Below 1344px (Smaller Desktops) */
+/* **************************** */
+@media (min-width: 1400px) {
+ #outputgraphhalf {
+ transform: scale(0.8);
+ width: 106%;
+ margin-left: -31px;
+ margin-top: -20px;
+ height: 76%;
+ }
+ .outputgraph1half {
+ transform: scale(0.9);
+ margin-left: -14px;
+ line-height: 1.63rem;
+ margin-top: 15px;
+
+ }
+}
+@media (min-width: 1200px) {
+
+.objective {
+ padding: 15.6rem;
+}
+.canvas__div {
+ grid-template-columns: 1fr;
+}
+/* #variables {
+ width: 100%;
+} */
+#IBgraph{
+ transform: scale(0.75);
+ margin-left: -111px;
+ margin-top: -154px;
+ height: auto;
+ width: 121%;
+}
+#fieldvalue{
+ position: absolute;
+ left: 63%;
+ top: 73%;
+ font-size: 10px;
+ /* font-size: 14px; */
+ /* z-index: 101; */
+}
+#cvalue{
+ position: absolute;
+ left: 18%;
+ top: 66%;
+ font-size: 12px;
+}
+#probe {
+ width: 2%;
+ height: 22%;
+ position: absolute;
+ top: 22%;
+ left: 50.5%!important;
+ /* left: 293px; */
+ overflow: hidden;
+ animation-duration: 3s;
+ transition: transform .3s;
+ display: none;
+}
+#wire {
+ width: 31%;
+ height: 44%;
+ position: absolute;
+ top: 33%;
+ left: 35% !important;
+
+ overflow: hidden;
+ animation-duration: 3s;
+ transition: transform .3s;
+ display: none;
+}
+.circuit {
+ width: 71%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* margin-left: 78px; */
+}
+#zeeeman-box{
+ transform: scale(0.77);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: -22%;
+ margin-top: -123px;
+
+}
+#circuit2 {
+
+ width: 73%;
+ position: relative;
+ left: 10.3%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ }
+ .practice {
+ padding: 2.7rem;
+ }
+ .icalculate1 {
+ margin-left: 0 !important;
+ line-height: 2.2rem !important;
+ margin-top: 9px !important;
+
+ }
+ #calculate1 {
+ display: none;
+ height: 92% !important;
+ width: 44vw;
+ max-width: 630px;
+ position: absolute;
+ background-color: white;
+ top: 37px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 20px;
+ border: 3px solid black;
+ z-index: 7;
+ }
+ .icalculate {
+ margin-left: 0 !important;
+ line-height: 2.2rem !important;
+ margin-top: 9px !important;
+
+ }
+ #calculate {
+ display: none;
+ height: 88% !important;
+ width: 44vw;
+ max-width: 630px;
+ position: absolute;
+ background-color: white;
+ top: 37px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 20px;
+ border: 3px solid black;
+ z-index: 7;
+
+ }
+ #inputgraph {
+ transform: scale(0.78);
+ width: 113%;
+ margin-left: -99px;
+ margin-top: -78px;
+ height: 87%;
+ }
+ .inputgraph1 {
+ transform: scale(0.92);
+ margin-left: -12px;
+ line-height: 1.63rem;
+ margin-top: -11px;
+
+
+ }
+ #outputgraphhalf {
+ transform: scale(0.8);
+ width: 106%;
+ margin-left: -31px;
+ margin-top: -20px;
+ height: 85%;
+ }
+ .outputgraph1half {
+ transform: scale(0.9);
+ margin-left: -14px;
+ line-height: 1.63rem;
+ margin-top: 15px;
+
+ }
+ #outputgraphfull {
+ transform: scale(0.8);
+ width: 106%;
+ margin-left: -31px;
+ margin-top: -20px;
+ height: 76%;
+ }
+ .outputgraph1full {
+ transform: scale(0.9);
+ margin-left: -14px;
+ line-height: 1.63rem;
+ margin-top: 15px;
+
+ }
+}
+
+/* **************************** */
+/* Below 1200px (Lanscape Tablets) */
+/* **************************** */
+
+@media (max-width: 75em) {
+ body {
+ width: 100%;
+ margin: unset;
+ }
+ .title-div h1 {
+ font-size: 2.5rem;
+ }
+ .task-title {
+ font-size: 2rem;
+ }
+ .tool-menu {
+ font-size: 2rem;
+ gap: 2rem;
+ }
+ .icons {
+ width: 3rem;
+ height: 3rem;
+ }
+ .ctrl-icons {
+ width: 3rem;
+ height: 3rem;
+ }
+
+ .tool-list span {
+ font-size: 1.2rem;
+ }
+ .canvas {
+ display: block;
+ /* width: 100%;
+ height: 100%; */
+ /* background-color: red; */
+ }
+ .div__control img {
+ width: 3rem;
+ height: 2.8rem;
+ }
+ /* #variables {
+ width: 100%;
+ } */
+
+ .objective {
+ padding: 11.5rem;
+ }
+ .canvas__div {
+ grid-template-columns: 1fr;
+ }
+ #IBgraph{
+ transform: scale(0.95);
+ margin-left: 8px;
+ margin-top: -74px;
+ height: auto;
+ width: 86%;
+}
+
+ .practice {
+ padding: 4.5rem;
+ }
+ .icalculate1 {
+ margin-left: 0 !important;
+ line-height: 2.2rem !important;
+ margin-top: 9px !important;
+
+ }
+ #calculate1 {
+ display: none;
+ height: 89%!important;
+ width: 87vw;
+ max-width: 630px;
+ position: absolute;
+ background-color: white;
+ top: 54px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 20px;
+ border: 3px solid black;
+ z-index: 7;
+ }
+ .icalculate {
+ margin-left: 0 !important;
+ line-height: 2.2rem !important;
+ margin-top: 9px !important;
+
+ }
+ #calculate {
+ display: none;
+ height: 84%!important;
+ width: 87vw;
+ max-width: 630px;
+ position: absolute;
+ background-color: white;
+ top: 54px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 20px;
+ border: 3px solid black;
+ z-index: 7;
+ }
+ #inputgraph {
+ transform: scale(0.8);
+ width: 113%;
+ margin-left: -7px;
+ margin-top: -61px;
+ height: 82%;
+ }
+ .inputgraph1 {
+ transform: scale(1);
+ margin-left: 19px;
+ line-height: 1.63rem;
+ margin-top: -11px;
+
+ }
+ #outputgraphhalf {
+ transform: scale(0.8);
+ width: 88%;
+ margin-left: 31px;
+ margin-top: -20px;
+ height: 76%;
+ }
+ .outputgraph1half {
+ transform: scale(0.89);
+ margin-left: 39px;
+ line-height: 1.63rem;
+ margin-top: -13px;
+
+ }
+ #outputgraphfull {
+ transform: scale(0.8);
+ width: 88%;
+ margin-left: 31px;
+ margin-top: -20px;
+ height: 76%;
+ }
+ .outputgraph1full {
+ transform: scale(0.89);
+ margin-left: 39px;
+ line-height: 1.63rem;
+ margin-top: -13px;
+
+ }
+}
+
+/* **************************** */
+/* Below 944px ( Tablets) */
+/* **************************** */
+
+@media (max-width: 59em) {
+ .tool-link:link,
+ .tool-link:visited {
+ gap: 0.5rem;
+ font-size: 1.4rem;
+ flex-direction: column;
+ }
+
+ .title-div h1 {
+ font-size: 2rem;
+ }
+ .sidebar {
+ position: fixed;
+ padding: 0;
+ bottom: 0;
+ left: 0;
+ flex-direction: row;
+ width: 100%;
+ backdrop-filter: blur(10rem);
+ z-index: 101;
+ justify-content: space-evenly;
+ border-radius: 0;
+ scroll-behavior: auto;
+ }
+ .tool-menu {
+ list-style: none;
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+ width: 100%;
+ font-size: 2.4rem;
+ justify-content: space-evenly;
+ padding: 1rem;
+ }
+
+ .canvas {
+ display: block;
+ /* width: 100%;
+ height: 100%; */
+ /* background-color: red; */
+ }
+ .main-section {
+ grid-template-columns: 1fr;
+ }
+ .canvas__div {
+ grid-template-columns: 1fr;
+ }
+ .canvas {
+ display: block;
+ /* width: 100%;
+ height: 100%; */
+ border: none;
+ }
+ .footer {
+ margin-bottom: 37px;
+ }
+ .objective {
+ padding: 13rem;
+ }
+ #IBgraph{
+ transform: scale(0.85);
+ margin-left: -39px;
+ margin-top: -124px;
+ height: auto;
+ width: 103%;
+
+
+ }
+ #fieldvalue{
+ position: absolute;
+ left: 65%;
+ top: 72%;
+ font-size: 16px;
+ /* z-index: 101; */
+ }
+ #cvalue{
+ position: absolute;
+ left: 23%;
+ top: 67%;
+ font-size: 15px;
+ }
+ #probe {
+ width: 2%;
+ height: 22%;
+ position: absolute;
+ top: 22%;
+ left: 53.2%!important;
+ /* left: 293px; */
+ overflow: hidden;
+ animation-duration: 3s;
+ transition: transform .3s;
+ display: none;
+ }
+ #wire {
+ width: 31%;
+ height: 44%;
+ position: absolute;
+ top: 33%;
+ left: 37.7%!important;
+
+ overflow: hidden;
+ animation-duration: 3s;
+ transition: transform .3s;
+ display: none;
+ }
+ .circuit {
+ width: 71%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* margin-left: 118px; */
+}
+#zeeeman-box{
+ transform: scale(0.74);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 11%;
+ margin-top: -78px;
+}
+#circuit2 {
+
+ width: 69%;
+ position: relative;
+ left: 15.4%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ }
+ .practice {
+ padding: 4.5rem;
+ }
+ #inputgraph {
+ transform: scale(0.8);
+ width: 113%;
+ margin-left: -7px;
+ margin-top: -56px;
+ height: 82%;
+ }
+ .inputgraph1 {
+ transform: scale(1);
+ margin-left: 19px;
+ line-height: 1.63rem;
+ margin-top: -11px;
+
+ }
+ #outputgraphhalf {
+ transform: scale(0.8);
+ width: 88%;
+ margin-left: 31px;
+ margin-top: -20px;
+ height: 76%;
+ }
+ .outputgraph1half {
+ transform: scale(0.89);
+ margin-left: 39px;
+ line-height: 1.63rem;
+ margin-top: -13px;
+
+ }
+ #outputgraphfull {
+ transform: scale(0.8);
+ width: 88%;
+ margin-left: 31px;
+ margin-top: -20px;
+ height: 76%;
+ }
+ .outputgraph1full {
+ transform: scale(0.89);
+ margin-left: 39px;
+ line-height: 1.63rem;
+ margin-top: -13px;
+
+ }
+}
+
+/* **************************** */
+/* Below 820px (Smaller Tablets) */
+/* **************************** */
+@media (max-width: 48em) {
+ .main-section {
+ grid-template-columns: 1fr;
+ }
+ .canvas__div {
+ grid-template-columns: 1fr;
+ }
+ .canvas {
+ display: block;
+ /* width: 100%;
+ height: 100%; */
+ border: none;
+ }
+ .tool-list span {
+ font-size: 1.6rem;
+ }
+ .tool-menu {
+ list-style: none;
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+ width: 100%;
+ font-size: 2.4rem;
+ justify-content: space-evenly;
+ padding: 1rem;
+ }
+ .footer {
+ margin-bottom: 47px;
+ }
+ .objective {
+ padding: 11rem;
+ }
+ #IBgraph{
+ transform: scale(0.65);
+ margin-left: -118px;
+ margin-top: -165px;
+ height: auto;
+ width: 125%;
+}
+ #fieldvalue{
+ position: absolute;
+ left: 65%;
+ top: 72%;
+ font-size: 14px;
+ /* z-index: 101; */
+ }
+ #cvalue{
+ position: absolute;
+ left: 24%;
+ top: 66%;
+ font-size: 15px;
+ }
+ #probe {
+ width: 2%;
+ height: 22%;
+ position: absolute;
+ top: 22%;
+ left: 53.4%!important;
+ /* left: 293px; */
+ overflow: hidden;
+ animation-duration: 3s;
+ transition: transform .3s;
+ display: none;
+ }
+ #wire {
+ width: 31%;
+ height: 44%;
+ position: absolute;
+ top: 33%;
+ left: 37.75%!important;
+
+ overflow: hidden;
+ animation-duration: 3s;
+ transition: transform .3s;
+ display: none;
+ }
+ .circuit {
+ width: 71%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* margin-left: 101px; */
+}
+#zeeeman-box{
+ transform: scale(0.74);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 3%;
+ margin-top: -78px;
+
+}
+#circuit2 {
+
+ width: 69%;
+ position: relative;
+ left: 15.4%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ }
+ .practice {
+ padding: 3.5rem;
+ }
+ #inputgraph {
+ transform: scale(0.8);
+ width: 113%;
+ margin-left: -37px;
+ margin-top: -74px;
+ height: 84%;
+ }
+ .inputgraph1 {
+ transform: scale(0.96);
+ margin-left: 17px;
+ line-height: 1.63rem;
+ margin-top: -13px;
+ width: 131%;
+ }
+ #outputgraphhalf {
+ transform: scale(0.8);
+ width: 102%;
+ margin-left: -34px;
+ margin-top: -20px;
+ height: 79%;
+ }
+ .outputgraph1half {
+ transform: scale(0.97);
+ margin-left: 39px;
+ line-height: 1.63rem;
+ margin-top: 3px;
+
+ }
+ #outputgraphfull {
+ transform: scale(0.8);
+ width: 102%;
+ margin-left: -34px;
+ margin-top: -20px;
+ height: 79%;
+ }
+ .outputgraph1full {
+ transform: scale(0.97);
+ margin-left: 39px;
+ line-height: 1.63rem;
+ margin-top: 3px;
+
+ }
+}
+
+/* **************************** */
+/* Below 704px (Smaller Tablets) */
+/* **************************** */
+@media (max-width: 44em) {
+ .canvas__div {
+ grid-template-columns: 1fr;
+ }
+ .img-div {
+ flex-direction: column;
+ }
+ .title-div {
+ gap: 0rem;
+ text-align: center;
+ }
+ .round {
+ width: 0.6rem;
+ height: 0.6rem;
+ }
+ .logo-div {
+ width: 6.5rem;
+ }
+ .main__task-div:nth-child(4) {
+ margin-bottom: 6rem;
+ }
+
+ .cross-img {
+ width: 60%;
+ }
+ .canvas {
+ display: block;
+ /* width: 100%;
+ height: 100%; */
+ border: none;
+ }
+ .footer {
+ margin-bottom: 45px;
+ }
+
+ .objective {
+ padding: 13rem;
+ }
+ /* #IBgraph{
+
+ transform: scale(0.8);
+
+ } */
+ #IBgraph{
+ transform: scale(0.65);
+ margin-left: -118px;
+ margin-top: -165px;
+ height: auto;
+ width: 133%;
+}
+ .observation{
+ transform: scale(1);
+ }
+ #fieldvalue{
+ position: absolute;
+ left: 66%;
+ top: 72%;
+ font-size: 13px;
+ /* z-index: 101; */
+ }
+ #cvalue{
+ position: absolute;
+ left: 17%;
+ top: 66%;
+ font-size: 13px;
+ }
+ #probe {
+ width: 2%;
+ height: 22%;
+ position: absolute;
+ top: 22%;
+ left: 53.1%!important;
+ /* left: 293px; */
+ overflow: hidden;
+ animation-duration: 3s;
+ transition: transform .3s;
+ display: none;
+ }
+ #wire {
+ width: 31%;
+ height: 44%;
+ position: absolute;
+ top: 33%;
+ left: 37.7%!important;
+
+ overflow: hidden;
+ animation-duration: 3s;
+ transition: transform .3s;
+ display: none;
+ }
+ .circuit {
+ width: 71%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* margin-left: 83px; */
+}
+#zeeeman-box{
+ transform: scale(0.74);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: -9%;
+ margin-top: -78px;
+
+}
+#circuit2 {
+
+ width: 78%;
+ position: relative;
+ left: 10.3%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ }
+ .practice {
+ padding: 3.8rem;
+ }
+
+ #inputgraph {
+ transform: scale(0.8);
+ width: 113%;
+ margin-left: -66px;
+ margin-top: -28px;
+ height: 78%;
+ }
+ .inputgraph1 {
+ transform: scale(0.82);
+ margin-left: -51px;
+ line-height: 1.63rem;
+ margin-top: -27px;
+ width: 131%;
+ }
+ #outputgraphhalf {
+ transform: scale(0.8);
+ width: 102%;
+ margin-left: -34px;
+ margin-top: -17px;
+ height: 69%;
+ }
+ .outputgraph1half {
+ transform: scale(0.77);
+ margin-left: -43px;
+ line-height: 1.63rem;
+ margin-top: -47px;
+
+ }
+ #outputgraphfull {
+ transform: scale(0.8);
+ width: 102%;
+ margin-left: -34px;
+ margin-top: -17px;
+ height: 62%;
+ }
+ .outputgraph1full {
+ transform: scale(0.77);
+ margin-left: -43px;
+ line-height: 1.63rem;
+ margin-top: -47px;
+
+ }
+}
+
+/* **************************** */
+/* Below 540px (Smaller Tablets) */
+/* **************************** */
+@media (max-width: 34em) {
+ /* .container {
+ gap: 1rem;
+ } */
+
+ .title-div h1 {
+ /* padding: 0.2rem; */
+
+ font-size: 1.6rem;
+ /* text-align: center; */
+ }
+
+ .logo-div {
+ width: 4.5rem;
+ }
+ .div__control {
+ gap: 2rem;
+ /* top: 1.8rem;
+ right: 1.5rem; */
+ }
+ .ctrl-icons {
+ width: 2.5rem;
+ height: 2.5rem;
+ }
+ .tool-menu {
+ gap: 1.5rem;
+ }
+ .tool-list span {
+ font-size: 1.2rem;
+ }
+ .task-title {
+ font-size: 1.7rem;
+ }
+ canvas {
+ width: 100%;
+ }
+ label,
+ select,
+ input,
+ p {
+ display: inline-block;
+ font-size: 1.5rem;
+ }
+ .main {
+ gap: 0.5rem;
+ }
+ .main-section {
+ gap: 0.5rem;
+ }
+ .sidebar {
+ border-radius: 0;
+ }
+ .canvas {
+ display: block;
+ /* width: 100%;
+ height: 100%; */
+ border: none;
+ }
+ .div__control img {
+ width: 2.7rem;
+ height: 2.5rem;
+ }
+ .tooltip {
+ font-size: 1rem;
+ }
+ .footer {
+ margin-bottom: 36px;
+ }
+
+ .objective {
+ padding: 13rem;
+ }
+ #IBgraph{
+ transform: scale(0.45);
+ margin-left: -223px;
+ margin-top: -200px;
+ height: auto;
+ width: 181%;
+}
+.tool-menu {
+ list-style: none;
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+ width: 100%;
+ font-size: 2.4rem;
+ justify-content: space-evenly;
+ padding: 1rem;
+}
+
+ .observation{
+ transform: scale(1);
+ }
+ #instruct{
+ font-size: 2rem;
+ }
+ #fieldvalue{
+ position: absolute;
+ left: 67%;
+ top: 73%;
+ font-size: 11px;
+ /* z-index: 101; */
+
+ }
+ #cvalue{
+ position: absolute;
+ left: 14%;
+ top: 66%;
+ font-size: 11px;
+ }
+ #probe {
+ width: 2%;
+ height: 22%;
+ position: absolute;
+ top: 22%;
+ left: 53.4%!important;
+ /* left: 293px; */
+ overflow: hidden;
+ animation-duration: 3s;
+ transition: transform .3s;
+ display: none;
+ }
+ #wire {
+ width: 31%;
+ height: 44%;
+ position: absolute;
+ top: 33%;
+ left: 37.7%!important;
+
+ overflow: hidden;
+ animation-duration: 3s;
+ transition: transform .3s;
+ display: none;
+ }
+ .circuit {
+ width: 71%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* margin-left: 62px; */
+}
+#zeeeman-box{
+ transform: scale(0.59);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: -50%;
+ margin-top: -78px;
+
+}
+#circuit2 {
+
+ width: 90%;
+ position: relative;
+ left: 3.7%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ }
+ .practice {
+ padding: 5.5rem;
+ }
+ #Halfwave {
+ width: 325px !important;
+ margin-left: -60px;
+ }
+ #Fullwave {
+ width: 351px;
+ margin-left: -70px;
+ /* height: 400px; */
+ /* margin-top: 30px;
+ margin-left: 100px; */
+ }
+ #halfwithdso {
+ width: 325px !important;
+ margin-left: -58px;
+ height: 442px!important;
+ }
+ #fullwithdso {
+ width: 325px !important;
+ margin-left: -62px;
+ height: 442px!important;
+ /* margin-left:100px; */
+ }
+
+
+ #inputgraph {
+ transform: scale(0.8);
+ width: 113%;
+ margin-left: -53px;
+ margin-top: 34px;
+ height: 55%;
+ }
+ .inputgraph1 {
+ transform: scale(0.62);
+ margin-left: -89px;
+ line-height: 1.63rem;
+ margin-top: -84px;
+ }
+ #outputgraphhalf {
+ transform: scale(0.8);
+ width: 102%;
+ margin-left: -34px;
+ margin-top: 34px;
+ height: 55%;
+
+ }
+ .outputgraph1half {
+ transform: scale(0.62);
+ margin-left: -89px;
+ line-height: 1.63rem;
+ margin-top: -84px;
+ }
+ #outputgraphfull {
+ transform: scale(0.8);
+ width: 102%;
+ margin-left: -34px;
+ margin-top: 34px;
+ height: 55%;
+
+ }
+ .outputgraph1full {
+ transform: scale(0.62);
+ margin-left: -89px;
+ line-height: 1.63rem;
+ margin-top: -84px;
+ }
+ .icalculate {
+ margin-left: 0 !important;
+ line-height: 2.2rem !important;
+ margin-top: 9px !important;
+
+ }
+ #calculate {
+ display: none;
+ height: 92% !important;
+ width: 87vw;
+ max-width: 630px;
+ position: absolute;
+ background-color: white;
+ top: 40px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 20px;
+ border: 3px solid black;
+ z-index: 7;
+ }
+}
+
+
+@media (max-width: 27em) {
+ .sidebar {
+ position: fixed;
+ padding: 0;
+ bottom: 0;
+ left: 0;
+ flex-direction: row;
+ width: 100%;
+ backdrop-filter: blur(10rem);
+ z-index: 101;
+ justify-content: space-evenly;
+ border-radius: 0;
+ scroll-behavior: auto;
+ }
+ .tool-menu {
+ list-style: none;
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+ width: 100%;
+ font-size: 2.4rem;
+ justify-content: space-evenly;
+ padding: 1rem;
+ }
+ .canvas__div {
+ grid-template-columns: 1fr;
+
+ }
+ .objective {
+ padding: 10rem;
+ }
+ .apparatus-screen {
+ grid-template-columns: 1fr;
+ }
+ .practice {
+ padding: 7.5rem;
+ }
+ .quiz-div {
+ padding: 0.5rem;
+ width: 100%;
+ }
+ .answers {
+ grid-template-columns: 1fr;
+ }
+ .practice-step-no {
+ width: 3rem;
+ height: 3rem;
+ }
+ .btn-next,
+ .btn-reset,
+ .btn-top {
+ width: 3rem;
+ height: 3rem;
+ }
+ .footer {
+ margin-bottom: 36px;
+ }
+ .icalculate {
+ margin-left: 0 !important;
+ line-height: 2.2rem !important;
+ margin-top: 9px !important;
+
+ }
+ #calculate {
+ display: none;
+ height: 90%!important;
+ width: 87vw;
+ max-width: 630px;
+ position: absolute;
+ background-color: white;
+ top: 54px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 20px;
+ border: 3px solid black;
+ z-index: 7;
+ }
+
+
+ .icalculate1 {
+ margin-left: 0!important;
+ line-height: 1.9rem!important;
+ margin-top: -16px!important;
+
+ }
+ #calculate1 {
+ display: none;
+ height: 89%!important;
+ width: 87vw;
+ max-width: 630px;
+ position: absolute;
+ background-color: white;
+ top: 54px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 20px;
+ border: 3px solid black;
+ z-index: 7;
+ }
+ #inputgraph {
+ transform: scale(0.8);
+ width: 119%;
+ margin-left: -53px;
+ margin-top: 34px;
+ height: 46%;
+ }
+ .inputgraph1 {
+ transform: scale(0.52);
+ margin-left: -99px;
+ line-height: 1.63rem;
+ margin-top: -108px;
+ }
+ #outputgraphhalf {
+ transform: scale(0.8);
+ width: 112%;
+ margin-left: -46px;
+ margin-top: 34px;
+ height: 46%;
+ }
+ .outputgraph1half{
+ transform: scale(0.52);
+ margin-left: -99px;
+ line-height: 1.63rem;
+ margin-top: -108px;
+ }
+ #outputgraphfull {
+ transform: scale(0.8);
+ width: 112%;
+ margin-left: -46px;
+ margin-top: 34px;
+ height: 47%;
+ }
+ .outputgraph1full{
+ transform: scale(0.52);
+ margin-left: -99px;
+ line-height: 1.63rem;
+ margin-top: -108px;
+ }
+
+}
+/*
+
+- Font sizes (px)
+10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
+
+- Spacing system (px)
+2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
+
+ */
diff --git a/experiment/simulation/css/style.css b/experiment/simulation/css/style.css
index 5613d7f..85fca29 100644
--- a/experiment/simulation/css/style.css
+++ b/experiment/simulation/css/style.css
@@ -1,277 +1,740 @@
-* {
- margin: 0;
- padding: 0;
- font-family: Arial, Helvetica, sans-serif;
- }
- .simulation {
- width: 800px;
- height: 600px;
- border: 1px solid black;
- }
- .simulation .topic {
- background-color: #000;
- color: #fff;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 50px;
- }
- .subtopics {
- width: 100%-20px;
- margin-left: 20px;
- line-height: 35px;
- }
- .subtopics ol li {
- margin-left: 40px;
- }
- .subtopics p {
- margin-left: 20px;
- }
- .grid-container {
- display: grid;
- grid-template-columns: auto auto;
- padding: 20px;
- }
- .grid-item {
- display: flex;
- flex-direction: column;
- text-align: center;
- place-items: center;
- }.img1 {
- height: 100px;
- width: 150px;
- margin: 20px auto;
- }
- .img2 {
- height: 100px;
- width: 150px;
- margin: 20px auto;
- }
- .img3 {
- height: 100px;
- width: 150px;
- margin: 20px auto;
- }
- .img4 {
- height: 100px;
- width: 150px;
- margin: 20px auto;
- }
- #buttonup {
- border: 0;
- cursor: pointer;
- float: right;
- margin-right: 20px;
- background-color: white;
- position: relative;
- }
- #buttondown {
- border: 0;
- cursor: pointer;
- float: left;
- margin-left: 20px;
- background-color: white;
- transform: scaleX(-1);
- display: none;
- }
- .nextimg {
- position:absolute;
- width: 45px;
- height: 45px;
- top:-60px;
- left:-35px;
- }
- #content {
+.main-container {
+ background-color: var(--clr-body-clr);
+ overflow-x: hidden;
+}
+.title-div-container {
+ width: 100%;
+ height: 100%;
+ background-color: var(--clr-container-clr);
+ z-index: 105;
+ position: relative;
+ padding: 0.5rem 0.5rem;
+}
- width: 800px;
- height: 500px;
- }
- .blocker {
- display: none;
- position: absolute;
- height: 550px;
- width: 800px;
- z-index: 6;
- background-color: rgba(0, 0, 0, 0.5);
- }
-
-.simoptions{
- position:relative;
- background-color: rgba(135, 207, 235, 0.621);
- width: 25%;
- height: 550px;
- float: left;
- filter: blur(0px);
- top: auto;
-
- }
- .procedure {
- margin-top: 10px;
- margin-left: 10px;
- }
-
-#content2 {
+.title-div {
+ display: flex;
+ gap: 5rem;
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ border-radius: 1rem;
+ z-index: 105;
+ position: relative;
+ text-align: center;
+}
+.logo-div {
+ /* align-self: flex-start; */
+ display: inline-block;
+ margin-left: 2rem;
+}
+
+h1 {
+ flex: 0 0 1;
+ display: inline-block;
+ align-self: center;
+ margin: auto;
+ /* vertical-align: middle; */
+}
+
+/* bolts */
+.round {
+ display: inline-block;
+ position: absolute;
+ width: 1.5rem;
+ height: 1.5rem;
+ border-radius: 50%;
+ background: linear-gradient(
+ to bottom,
+ rgba(248, 242, 242, 0.855),
+ rgba(247, 237, 237, 0.855),
+ rgba(192, 190, 190, 0.855)
+ );
+ box-shadow: 0 0 0 0.3rem rgba(255, 255, 255, 0.55);
+}
+.box {
+ cursor: pointer;
+}
+.left-top {
+ left: 1rem;
+ top: 1rem;
+}
+.left-bottom {
+ left: 1rem;
+ bottom: 1rem;
+}
+.right-top {
+ right: 1rem;
+ top: 1rem;
+}
+.right-bottom {
+ right: 1rem;
+ bottom: 1rem;
+}
+.title-div h1 {
+ justify-self: center;
+ font-size: 2.8rem;
+ color: var(--clr-text-clr);
+ text-transform: uppercase;
+}
+.container {
+ padding: 0 0 0.5rem 0.5rem;
+ display: flex;
+ flex-direction: row;
+ background-color: var(--clr-container-clr);
+
+ gap: 0.5rem;
+}
+
+/* ********************** */
+/* *******SIDEBAR******* */
+/* ********************** */
+
+.sidebar {
+ /* background-color: gray; */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ background-color: #fffcfc;
+ box-shadow: 0 1rem 1rem 0 rgba(177, 176, 176, 0.855);
+ padding: 1.2rem 1.6rem;
+ border-radius: 0.9rem;
+ left: 0;
+}
+
+.logo-div {
+ padding: 0.8rem 0;
+ width: 8rem;
+}
+
+.logo {
+ width: 100%;
+}
+
+.tool-menu {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ gap: 3rem;
+ font-size: 2rem;
+}
+
+.tool-link:link,
+.tool-link:visited {
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ color: #333;
+}
+.tool-link[title="Variables"] {
+ color: var(--clr-title-background);
+}
+
+.tool-list {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ cursor: pointer;
+}
+.tool-list span {
+ display: inline-block;
+ font-size: 1.6rem;
+ font-weight: 500;
+}
+
+.icons {
+ width: 4rem;
+ height: 4rem;
+ color: var(--clr-title-background);
+ /* box-shadow: 0 0 0.5rem 0 rgba(255, 255, 255, 0.5); */
+}
+
+/* ****************** */
+/* *****MAIN******* */
+/* ****************** */
+.main {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.task-title {
+ font-size: 1.8rem;
+ padding: 0.2rem 1.6rem;
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
+
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ letter-spacing: 0.15rem;
+}
+
+.task-variable {
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background3),
+ var(--clr-side-background2)
+ );
+}
+
+.main-section {
+ display: grid;
+ /* grid-template-columns: repeat(2, 1fr); */
+ grid-template-columns: 50fr 50fr;
+ gap: 0.5rem;
+ overflow-y: auto;
+ scroll-behavior: smooth;
+ padding: 0 0.5rem 0 0;
+}
+
+.main__task-div {
+ width: 100%;
+ background-color: #ffffffc9;
+ border-radius: 0.9rem;
+ /* padding: 1.5rem; */
+ max-height: 100%;
+ font-size: 1.6rem;
+ border: 0.5rem solid var(--clr-text-clr);
+ overflow-y: hidden;
+ overflow-x: hidden;
+}
+
+.main__task-div:nth-child(1) {
+ position: relative;
+ grid-column: 1/-1;
+ /* grid-row: 1/4; */
+ overflow-y: hidden;
+}
+
+.main__task-div:nth-child(2) {
+ grid-column: 1/-1;
+ /* grid-row: 1/4; */
+ overflow-y: hidden;
+}
+
+.title-control-div {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-top-left-radius: 1rem;
+ border-top-right-radius: 1rem;
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background3),
+ var(--clr-side-background2)
+ );
+}
+
+.footer {
+ font-size: 1.2rem;
+ /* padding: 0 1rem; */
+ grid-column: 1/-1;
+ text-align: center;
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background3),
+ var(--clr-side-background2)
+ );
+ color: var(--clr-text-clr);
+ margin-bottom: 0;
+}
+
+.div__control {
+ /* position: absolute;
+ top: 1.6rem;
+ right: 2.2rem; */
+ margin-top: 0.35rem;
+ margin-right: 1rem;
+}
+
+.div__control img {
+ width: 3rem;
+ height: 3rem;
+ cursor: pointer;
+}
+
+.ctrl-icons {
+ cursor: pointer;
+ width: 3rem;
+ height: 3rem;
+ border-radius: 0.5rem;
+ background-color: var(--clr-title-background);
+ color: var(--clr-text-clr);
+}
+
+/* ************simulation*********** */
+
+/* canvas */
+.canvas__div {
+ width: 100%;
+ border: 1px solid var(--clr-title-background);
+ background-color: #fff;
+ display: grid;
+ height: auto;
+ grid-template-columns: 1fr;
+ overflow-x: hidden;
+}
+.mainsimulation {
+ display: flex;
+ justify-content: center; /* Centers the images horizontally */
+ align-items: center; /* Centers the images vertically */
+ /* height: 100vh; */
+ width: 100%; /* Ensures the container takes the full width */
+ flex-direction: column; /* Makes sure images stack on top of each other */
+ position: relative;
- width: 800px;
- height: 500px;
- }
-
- #exp {
- height: 35px;
- width: 180px;
- box-shadow: 0px 8px 16px 0px rgba(65, 62, 62, 0.219);
- cursor: pointer;
+}
+
+.img1 {
+ height: 100px;
+ width: 150px;
+ margin: 20px auto;
+}
+.img2 {
+ height: 100px;
+ width: 150px;
+ margin: 20px auto;
+}
+.img3 {
+ height: 100px;
+ width: 150px;
+ margin: 20px auto;
+}
+.img4 {
+ height: 100px;
+ width: 150px;
+ margin: 20px auto;
+}
+.reset {
+ height: 39px;
}
+
+.simoptions {
+ position: relative;
+ background-color: rgba(135, 207, 235, 0.621);
+ width: 25%;
+ height: 550px;
+ float: left;
+ filter: blur(0px);
+ top: auto;
+}
#Halfwave {
- width: 400px;
- height: 400px;
- margin-top: 50px;
- margin-left:100px;
-
- }
- #Fullwave {
- width: 400px;
- height: 400px;
- margin-top: 30px;
- margin-left:100px;
- }
-
- #halfwithdso {
- width: 600px;
- height: 500px;
- margin-top: 30px;
- /* margin-left:100px; */
-
- }
- #halfdso {
- width: 870px;
- height: 650px;
- margin-left: -100px;
- margin-top: -150px;
- position: relative;
+ width: 453px;
+ /* height: 400px; */
+ /* margin-top: -26px;
+ margin-left: 100px; */
+}
+#Fullwave {
+ width: 400px;
+ /* height: 400px; */
+ /* margin-top: 30px;
+ margin-left: 100px; */
+}
+#halfwithdso {
+ width: 453px;
+ height: 397px;
+ /* margin-left:100px; */
+}
+#halfdso {
+ width: 870px;
+ height: 650px;
+ margin-left: -100px;
+ margin-top: -150px;
+ position: relative;
}
#halfdso1 {
width: 800px;
height: 650px;
margin-left: -80px;
- margin-top:-130px;
+ margin-top: -130px;
position: relative;
}
-#inputw{
+
+#inputw {
/* display: inline-block; */
- width:300px ;
+ width: 300px;
height: 120px;
margin-left: 10px;
margin-top: -452px;
- position:absolute;
+ position: absolute;
}
-#outputh{
+
+#outputh {
/* display: inline-block; */
- width:300px ;
+ width: 300px;
height: 120px;
margin-left: 10px;
margin-top: -452px;
- position:absolute;
+ position: absolute;
}
-#outputf{
+#outputf {
/* display: inline-block; */
- width:300px ;
+ width: 300px;
height: 120px;
margin-left: 10px;
margin-top: -452px;
- position:absolute;
+ position: absolute;
}
-
- #fullwithdso {
- width: 600px;
- height: 450px;
- margin-top: 30px;
- /* margin-left:100px; */
- }
-
-
-.SLIDERS {
- margin: 10px;
- }
- .slider {
- -webkit-appearance: none;
- width: 100%;
- height: 5px;
- border-radius: 5px;
- background: black;
- outline: none;
- opacity: 0.5;
- -webkit-transition: .2s;
- transition: opacity .2s;
- }
-
- .slider:hover {
- opacity: 1;
- }
-
- .slider::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 15px;
- height: 15px;
- border: 2px solid red;
- border-radius: 50%;
- background: #ffffff;
- cursor: pointer;
- }
-
- .slider::-webkit-slider-thumb:hover {
- width: 20px;
- height: 20px;
- }
- .result {
- margin: 10px;
- text-align: left;
- }
- .Result {
- display: flex;
- justify-content: center;
- margin: 10px;
- /* width: 120px;
+
+#fullwithdso {
+ width: 453px;
+ height: 468px;
+ margin-top: -25px;
+ /* margin-left:100px; */
+ /* margin-left:100px; */
+}
+/* .SLIDERS {
+ display: flex;
+ flex-direction: column;
+} */
+.slider {
+ -webkit-appearance: none;
+ width: 100%;
+ height: 5px;
+ border-radius: 5px;
+ background: black;
+ outline: none;
+ opacity: 0.5;
+ -webkit-transition: 0.2s;
+ transition: opacity 0.2s;
+}
+
+.slider:hover {
+ opacity: 1;
+}
+.slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 15px;
+ height: 15px;
+ border: 2px solid red;
+ border-radius: 50%;
+ background: #ffffff;
+ cursor: pointer;
+}
+
+.slider::-webkit-slider-thumb:hover {
+ width: 20px;
+ height: 20px;
+}
+.Result {
+ display: flex;
+ justify-content: center;
+ margin: 10px;
+ /* width: 120px;
+ height: 30px; */
+ border-radius: 20px;
+ cursor: pointer;
+ padding-left: 8px;
+ padding-top: 4px;
+ padding-right: 8px;
+ padding-bottom: 4px;
+}
+
+#transformers {
+ height: 35px;
+ width: 180px;
+ box-shadow: 0px 8px 16px 0px rgba(65, 62, 62, 0.219);
+ cursor: pointer;
+}
+
+.addbutton {
+ display: flex;
+ justify-content: center;
+ margin: 10px;
+}
+
+#addbutton {
+ position: absolute;
+ /* width: 120px;
+ height: 30px; */
+ border-radius: 30px;
+ cursor: pointer;
+ margin-left: -189px;
+ padding-left: 8px;
+ /* padding-top: 4px; */
+ padding-right: 8px;
+ /* padding-bottom: 4px; */
+ margin-top: -99px;
+}
+
+#addbutton1 {
+ position: absolute;
+ /* width: 120px;
height: 30px; */
- border-radius: 20px;
- cursor: pointer;
+ border-radius: 30px;
+ cursor: pointer;
+ margin-left: 173px;
+ padding-left: 8px;
+ /* padding-top: 4px; */
+ padding-right: 8px;
+ /* padding-bottom: 4px; */
+ margin-top: -99px;
+}
+#addbutton2 {
+ position: absolute;
+ /* width: 120px;
+ height: 30px; */
+ border-radius: 30px;
+ cursor: pointer;
+ margin-left: -15px;
+ padding-left: 8px;
+ /* padding-top: 4px; */
+ padding-right: 8px;
+ /* padding-bottom: 4px; */
+ margin-top: -23px;
+}
+.addbutton {
+ font-size: 1.3rem;
+ margin-top: 0.5rem;
+ padding: 8px;
+ border-radius: 0.5rem;
+
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ border: none;
+ cursor: pointer;
+ margin-top: 21px;
+}
+
+.close {
+ font-size: 1.3rem;
+ margin-top: 0.5rem;
+ padding: 8px;
+ border-radius: 0.5rem;
+
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ border: none;
+ cursor: pointer;
+ margin-top: 21px;
+}
+
+#instructions {
+ display: none;
+ height: 90%;
+ width: 99.4%;
+ position: relative;
+ background-color: white;
+ /* top: 0px; */
+ justify-self: center;
+ /* left: 45px; */
+ /* border: black solid; */
+
+ border-width: 3px;
+ z-index: 7;
+}
+.icontent {
+ margin-left: 35px;
+ line-height: 4.3rem;
+}
+#instructions button {
+ width: 60px;
+ height: 31px;
+ border-radius: 20px;
+ cursor: pointer;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ margin-right: 5px;
+ margin-bottom: 5px;
+}
+
+#calculate {
+ display: none;
+ height: 400px;
+ width: 700px;
+ position: absolute;
+ background-color: white;
+ top: 110px;
+ left: 45px;
+ border: black solid;
+ border-width: 3px;
+ z-index: 7;
+}
+
+
+
+
+.outputgraph1half {
+ margin-left: 35px;
+ line-height: 1.63rem;
+}
+.outputgraph1full {
+ margin-left: 35px;
+ line-height: 1.63rem;
+}
+#calculate1 {
+ display: none;
+ height: auto;
+ width: 87vw;
+ max-width: 630px;
+ position: absolute;
+ background-color: white;
+ top: 54px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 20px;
+ border: 3px solid black;
+ z-index: 7;
+}
+
+.icalculate1 {
+ margin-left: 0; /* Adjust margin to make it more flexible */
+ line-height: 2.4rem; /* Adjust the line height for smaller screens */
+ margin-left: 0;
+ line-height: 2.2rem;
+ margin-top: -16px;
+
+}
+#calculate {
+ display: none;
+ height: auto;
+ width: 87vw;
+ max-width: 630px;
+ position: absolute;
+ background-color: white;
+ top: 54px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 20px;
+ border: 3px solid black;
+ z-index: 7;
+}
+
+.icalculate {
+ margin-left: 0; /* Adjust margin to make it more flexible */
+ line-height: 2.4rem; /* Adjust the line height for smaller screens */
+ margin-left: 0;
+ line-height: 2.2rem;
+ margin-top: -16px;
+
+}
+#atm {
+ display: block;
+ margin: 20px auto 0; /* Center the button */
+ padding: 10px 20px;
+ font-size: 1rem;
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+
+ border-radius: 30px; /* Rounded corners */
+ cursor: pointer;
+ text-align: center;
+ box-shadow: none; /* Remove any shadow effects */
+}
+.close {
+ display: block;
+ margin: 20px auto 0; /* Center the button */
+ padding: 10px 20px;
+ font-size: 1rem;
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+
+ border-radius: 30px; /* Rounded corners */
+ cursor: pointer;
+ text-align: center;
+ box-shadow: none; /* Remove any shadow effects */
+}
+#outputgraphhalf {
+ display: none;
+ height: 450px;
+ width: 750px;
+ position: absolute;
+ background-color: white;
+ top: 110px;
+ left: 25px;
+ border: black solid;
+ border-width: 3px;
+ z-index: 7;
+}
+#outputgraphfull {
+ display: none;
+ height: 450px;
+ width: 750px;
+ position: absolute;
+ background-color: white;
+ top: 110px;
+ left: 25px;
+ border: black solid;
+ border-width: 3px;
+ z-index: 7;
+}
+.icalculate {
+ margin-left: 35px;
+ line-height: 1.63rem;
+}
+
+#inputgraph {
+ display: block;
+ width: 90vw; /* Flexible width based on viewport */
+ max-width: 750px; /* Set a maximum width */
+ /* height: auto; */
+ height: 77%;
+ background-color: white;
+ position: absolute;
+ top: 110px;
+ left: 5vw; /* Center based on viewport width */
+ border: 3px solid black;
+ border-radius: 8px;
+ padding: 15px;
+ z-index: 7;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for clean look */
+}
+.inputgraph1 {
+ margin-left: 35px;
+ line-height: 1.63rem;
+}
+/* position: relative;
+padding: 20px;
+border: 1px solid #ccc;
+box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+background-color: #fff;
+width: 100%;
+max-width: 600px;
+margin: 0 auto; */
+/* #calculate button {
+
+ border-radius: 20px;
+ cursor: pointer;
+ position: inherit;
+ margin-left: 20px;
padding-left: 8px;
padding-top: 4px;
padding-right: 8px;
padding-bottom: 4px;
- }
-
-
- .transformerdiv{
- margin: 10px;
- }
- #transformers{
- height: 35px;
- width: 180px;
- box-shadow: 0px 8px 16px 0px rgba(65, 62, 62, 0.219);
- cursor: pointer;
- }
-
- /* Simulation Box */
-
- .mainsimulation {
- width: 75%;
- height: 500px;
- float: right;
- text-align: center;
- }
- .addbutton {
- display: flex;
- justify-content: center;
- margin: 10px;
- }
-
- #addbutton {
- position: absolute;
- /* width: 120px;
- height: 30px; */
+ bottom: 0;
+ right: 0;
+ margin-right: 5px;
+ margin-bottom: 5px;
+} */
+/* #calbutton {
+ position: inherit;
+
border-radius: 30px;
cursor: pointer;
margin-left: 20px;
@@ -279,263 +742,80 @@
padding-top: 4px;
padding-right: 8px;
padding-bottom: 4px;
- }
- #addbutton1 {
- position: absolute;
- /* width: 120px;
- height: 30px; */
- border-radius: 30px;
- cursor: pointer;
- margin-left: 20px;
- padding-left: 8px;
- padding-top: 4px;
- padding-right: 8px;
- padding-bottom: 4px;
- }
- #addbutton2 {
- position: absolute;
- /* width: 120px;
- height: 30px; */
- border-radius: 30px;
- cursor: pointer;
- margin-left: 20px;
- padding-left: 8px;
- padding-top: 4px;
- padding-right: 8px;
- padding-bottom: 4px;
- }
- #instructions {
- display: none;
- height: 400px;
- width: 700px;
- position: absolute;
- background-color: white;
- top: 110px;
- left: 45px;
- border: black solid;
- border-width: 3px;
- z-index: 7;
- }
-
- .icontent {
- margin-left: 35px;
- line-height: 1.63rem;
- }
-
- #instructions button {
- width: 60px;
- height: 31px;
- border-radius: 20px;
- cursor: pointer;
- position: absolute;
- bottom: 0;
- right: 0;
- margin-right: 5px;
- margin-bottom: 5px;
- }
- #calculate {
- display: none;
- height: 400px;
- width: 700px;
- position: absolute;
- background-color: white;
- top: 110px;
- left: 45px;
- border: black solid;
- border-width: 3px;
- z-index: 7;
- }
-
- .icalculate1 {
- margin-left: 35px;
- line-height: 1.63rem;
- }
- .inputgraph1 {
- margin-left: 35px;
- line-height: 1.63rem;
- }
- .outputgraph1half {
- margin-left: 35px;
- line-height: 1.63rem;
- }
- .outputgraph1full {
- margin-left: 35px;
- line-height: 1.63rem;
- }
- #calculate1 {
- display: none;
- height: 400px;
- width: 700px;
- position:absolute ;
- background-color: white;
- top: 110px;
- left: 45px;
- border: black solid;
- border-width: 3px;
- z-index: 7;
- }
- #outputgraphhalf {
- display: none;
- height: 450px;
- width: 750px;
- position:absolute ;
- background-color: white;
- top: 110px;
- left: 25px;
- border: black solid;
- border-width: 3px;
- z-index: 7;
- }
- #outputgraphfull {
- display: none;
- height: 450px;
- width: 750px;
- position:absolute ;
- background-color: white;
- top: 110px;
- left: 25px;
- border: black solid;
- border-width: 3px;
- z-index: 7;
- }
- #inputgraph {
- display: none;
- height: 450px;
- width: 750px;
- position:absolute ;
- background-color: white;
- top: 110px;
- left: 25px;
- border: black solid;
- border-width: 3px;
- z-index: 7;
- }
-
- .icalculate {
- margin-left: 35px;
- line-height: 1.63rem;
- }
-
- #calculate button {
- /* width: 60px;
- height: 31px; */
- border-radius: 20px;
- cursor: pointer;
- position: inherit;
- margin-left: 20px;
- padding-left: 8px;
- padding-top: 4px;
- padding-right: 8px;
- padding-bottom: 4px;
- bottom: 0;
- right: 0;
- margin-right: 5px;
- margin-bottom: 5px;
- }
- #calbutton {
- position: inherit;
- /* width: 120px;
- height: 30px; */
- border-radius: 30px;
- cursor: pointer;
- margin-left: 20px;
- padding-left: 8px;
- padding-top: 4px;
- padding-right: 8px;
- padding-bottom: 4px;
-
- }
- #atm{
- margin-top: -20px;
- position: inherit;
- /* width: 120px;
- height: 30px; */
- border-radius: 30px;
- cursor: pointer;
-
- margin-left: 600px;
- padding-left: 8px;
- padding-top: 4px;
- padding-right: 8px;
- padding-bottom: 4px;
- }
- #closean
- {
- margin-top: -8px;
- position: inherit;
- /* width: 120px;
- height: 30px; close button for input waveform*/
- border-radius: 30px;
- cursor: pointer;
-
- margin-left: 200px;
- padding-left: 8px;
- padding-top: 4px;
- padding-right: 8px;
- padding-bottom: 4px;
- }
- #atm1{
- margin-top: -170px;
- position: inherit;
- /* width: 120px;
- height: 30px; close button for input waveform*/
- border-radius: 30px;
- cursor: pointer;
-
- margin-left: 680px;
- padding-left: 8px;
- padding-top: 4px;
- padding-right: 8px;
- padding-bottom: 4px;
- }
- #atm2{
- margin-top: -150px;
- position: inherit;
- /* width: 120px;
- height: 30px; close button for half wave output waveform*/
- border-radius: 30px;
- cursor: pointer;
-
- margin-left: 650px;
- padding-left: 8px;
- padding-top: 4px;
- padding-right: 8px;
- padding-bottom: 4px;
- }
-#atm3{
- margin-top: -150px;
- position: inherit;
- /* width: 120px;
- height: 30px; close button for full wave output waveform*/
- border-radius: 30px;
- cursor: pointer;
-
- margin-left: 680px;
- padding-left: 8px;
- padding-top: 4px;
- padding-right: 8px;
- padding-bottom: 4px;
- }
- .help {
+ } */
+ #close1 {
position: absolute;
- bottom: 0;
- left: 0;
- margin-left: 5px;
- }
-
- .help button {
- background-color: rgb(189, 231, 249);
- border: 0;
+ top: 10px; /* Adjust as per your layout */
+ right: 10px; /* Adjust as per your layout */
+ background-color: transparent;
+ border: none;
+ font-size: 24px;
+ cursor: pointer;
+ color: #333;
+ outline: none;
+}
+
+#atm1 {
+ position: relative;
+ top: -194px;
+ right: -298px;
+ padding: 7px 31px;
+ border-radius: 30px;
+ background-color: #f0f0f0;
+ border: 2px solid #000;
+ cursor: pointer;
+}
+.atm1 {
+ font-size: 1.3rem;
+ margin-top: 0.5rem;
+ padding: 8px;
+ border-radius: 0.5rem;
+
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ border: none;
+ cursor: pointer;
+ margin-top: 21px;
+}
+ #atm2{
+ position: relative;
+ top: -187px;
+ right: -305px;
+ padding: 2px 9px;
+ border-radius: 30px;
+ background-color: #f0f0f0;
+ border: 2px solid #000;
cursor: pointer;
- border-radius: 50%;
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
}
- .help img {
- width: 25px;
- height: 25px;
+#atm3{
+ position: relative;
+ top: -195px;
+ right: -305px;
+ padding: 2px 9px;
+ border-radius: 30px;
+ background-color: #f0f0f0;
+ border: 2px solid #000;
+ cursor: pointer;
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
}
- #connectbutton{
+ #connectbutton{
position: absolute;
/* width: 120px;
height: 30px; */
@@ -547,12 +827,1020 @@
padding-right: 8px;
padding-bottom: 4px;
}
+.help,
+.practice {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ /* padding: 5rem; */
+ position: relative;
+}
+.apparatus {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ padding: 5rem;
+ position: relative;
+}
+.objective {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ padding: 13rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.objective__title,
+.apparatus__title {
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ background-clip: text;
+ color: transparent;
+ font-size: 2rem;
+ font-weight: 700;
+}
+
+.objective__sub {
+ font-size: 1.8rem;
+ /* font-weight: 700; */
+}
+.objective__main {
+ border: 2px solid var(--clr-title-background);
+ font-size: 1.8rem;
+ padding: 3rem;
+ border-radius: 2rem;
+ box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.05);
+ font-weight: 549;
+}
+
+.objective__list {
+ padding-left: 2rem;
+}
+.apparatus-screen {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ align-items: baseline;
+ justify-items: center;
+}
+.apparatus-tool {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 50%;
+}
+.tool-img {
+ width: 100%;
+}
+
+.practice {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ padding: 2rem;
+}
+
+.practice-steps {
+ font-style: 1.8rem;
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ gap: 1rem;
+ align-items: center;
+}
+.practice-step-no {
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ padding: 1rem;
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ aspect-ratio: 1;
+ border-radius: 100%;
+ text-align: center;
+ font-style: 1.8rem;
+ font-weight: 700;
+}
+
+.practice-steps-additional {
+ grid-column: 1/-1;
+ justify-self: center;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ gap: 2rem;
+}
+.btn {
+ padding: 1rem;
+ font-weight: 700;
+ border: none;
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ border-radius: 1rem;
+ cursor: pointer;
+ transition: all 0.2s;
+ justify-self: center;
+}
+.btn:hover {
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ background-clip: text;
+ color: transparent;
+ border: 0.3rem solid var(--clr-title-background);
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
+}
+
+canvas {
+ width: 80%;
+ height: 100%;
+ margin: 0 auto;
+}
+
+#connectbutton {
+ font-size: 1.3rem;
+ margin-top: 0.5rem;
+ padding: 8px;
+ border-radius: 0.5rem;
+
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ border: none;
+ cursor: pointer;
+ /* margin-top: 21px; */
+}
+.circuit-dia:hover span,
+.cross-img:hover span {
+ display: block;
+}
+.canvas {
+ position: relative;
+ display: block;
+ /* width: 100%;
+ height: 100%; */
+}
+/* .radio-container {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+} */
+
+.radio-option {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+.radio-option input {
+ margin-right: 10px; /* Space between radio button and label */
+}
+
+.ok-button-container {
+ text-align: center;
+ margin-top: 20px;
+}
+
+/* .ok-button {
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+} */
+
+
+/* **********VARIABLES**************** */
+/* Center container for sliders and connect button */
+.center-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 30px; /* Adds space between sliders and buttons */
+}
+
+/* Sliders styling */
+.SLIDERS {
+ margin-top: 10px;
+ width: 300px; /* Adjust the width of the sliders */
+ text-align: center;
+}
+
+/* Button grid layout */
+/* Button grid layout - Triangular shape */
+.button-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
+ grid-template-rows: repeat(2, auto); /* 2 rows */
+ gap: 20px; /* Space between buttons */
+ justify-items: center;
+ align-items: center;
+ width: 100%;
+ margin-top: 30px;
+}
+
+/* Placing buttons in a triangular shape */
+.button-grid button:nth-child(1) {
+ grid-column: 2; /* Middle column, first row */
+}
+
+.button-grid button:nth-child(2) {
+ grid-column: 1; /* Left column, second row */
+}
+
+.button-grid button:nth-child(3) {
+ grid-column: 3; /* Right column, second row */
+}
+
+/* General button styling */
+button {
+ padding: -1px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ min-width: 25px;
+}
+
+button:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+
+
+.buttons-column {
+ display: flex;
+ flex-direction: column;
+ row-gap: 1.5rem; /* Space between buttons */
+ align-items: center; /* Center the buttons */
+}
+#variables {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ width: 100%;
+}
+.settings-sections {
+ display: flex;
+ flex-direction: column;
+ /* border: 0.1rem solid #777; */
+ /* padding: 0 1rem; */
+ /* gap: 1rem; */
+}
-
- #vrmsAns,#vrmsAns1,#v2Ans,#v2Ans1,#vdcAns,#vdcAns1,#rfAns,#rfAns1{
- color:rgb(102, 102, 209);
+.variables-sections {
+ padding: 1rem 1rem 2rem 1rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ row-gap: 1rem;
+}
+
+.quadrant-img {
+ align-self: center;
+}
+
+.var-div {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ align-items: center;
+ justify-content: center;
+ justify-items: center;
+ row-gap: 1rem;
+ width: 80%;
+}
+
+.input-container {
+ grid-column: 1/-1;
+ display: grid;
+ grid-template-columns: 80fr 20fr;
+ gap: 2rem;
+}
+
+.var-spinner {
+ justify-self: center;
+}
+
+.var-slider {
+ grid-column: 1/-1;
+ width: 50%;
+ justify-self: end;
+}
+
+#comments {
+ color: #1b1b1b;
+ align-self: stretch;
+}
+
+.control-sections {
+ height: 100%;
+}
+
+.hide {
+ display: none;
+}
+
+
+input[type="radio"] {
+ cursor: pointer;
+
+}
+
+.practice-step-button {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+}
+.radioGroup {
+ display: flex;
+ align-items: center;
+}
+#shapeDropdown {
+ border: 2px solid var(--clr-title-background);
+ border-radius: 8%;
+ padding: 3%;
+}
+#shapeDropdown option {
+ background-color: var(
+ --clr-title-background
+ ); /* Background color for options */
+ color: #fff; /* Text color for options */
+}
+.shapeDrop {
+ margin-left: 2%;
+}
+@keyframes highlight {
+ 0% {
+ transform: scale(1);
+ box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5);
}
-
+ 100% {
+ transform: scale(1.02);
+ box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.8);
+ }
+}
+@-webkit-keyframes highlight {
+ 0% {
+ transform: scale(1);
+ box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5);
+ }
+ 100% {
+ transform: scale(1.02);
+ box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.8);
+ }
+}
+@keyframes probeslideup {
+ from {
+ top: 200px;
+ }
+
+ to {
+ top: 100px;
+ }
+}
+
+@keyframes wireslideup {
+ from {
+ top: 300px;
+ }
+
+ to {
+ top: 200px;
+ }
+}
+@keyframes insertdistube {
+ from {
+ top: 100px;
+ }
+
+ to {
+ top: 215px;
+ }
+}
+.hands {
+ transform-origin: top left;
+}
+@keyframes rotatehand {
+ to {
+ transform: rotate(20deg);
+ }
+}
+@keyframes moverings {
+ from {
+ left: 46px;
+ top: 7px;
+ }
+ to {
+ left: 52px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings {
+ from {
+ left: 52px;
+ top: 7px;
+ }
+ to {
+ left: 68px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings2 {
+ from {
+ left: 68px;
+ top: 7px;
+ }
+ to {
+ left: 80px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings3 {
+ from {
+ left: 80px;
+ top: 7px;
+ }
+ to {
+ left: 88px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings4 {
+ from {
+ left: 88px;
+ top: 7px;
+ }
+ to {
+ left: 102px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings5 {
+ from {
+ left: 102px;
+ top: 7px;
+ }
+ to {
+ left: 111px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings6 {
+ from {
+ left: 111px;
+ top: 7px;
+ }
+ to {
+ left: 120px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings7 {
+ from {
+ left: 120px;
+ top: 7px;
+ }
+ to {
+ left: 132px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings8 {
+ from {
+ left: 132px;
+ top: 7px;
+ }
+ to {
+ left: 142px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings9 {
+ from {
+ left: 142px;
+ top: 7px;
+ }
+ to {
+ left: 150px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings10 {
+ from {
+ left: 150px;
+ top: 7px;
+ }
+ to {
+ left: 161px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings11 {
+ from {
+ left: 161px;
+ top: 7px;
+ }
+ to {
+ left: 169px;
+ top: 7px;
+ }
+}
+@keyframes movesplitrings12 {
+ from {
+ left: 169px;
+ top: 7px;
+ }
+ to {
+ left: 175px;
+ top: 7px;
+ }
+}
+
+.observations {
+ display: none;
+ margin: 20px;
+ padding: 10px;
+ justify-self: center;
+ align-items: center;
+ height: 87%;
+
+ width: 85%;
+
+ position: absolute;
+ background-color: rgb(174, 215, 232);
+ border: black solid;
+ border-width: 3px;
+ z-index: 7;
+}
+.observations td,
+th {
+ border: 2px solid #000000;
+ text-align: center;
+ padding: 6px;
+}
+.tablesdiv {
+ height: 361px;
+ justify-content: center;
+ display: flex;
+ overflow-y: auto;
+}
+.tableObservations {
+ display: flex;
+ height: 40px;
+ width: 100%-10px;
+ align-items: center;
+ justify-content: space-between;
+ padding-right: 5px;
+ padding-left: 5px;
+}
+
+.tableObservations button {
+ width: 60px;
+ height: 31px;
+ border-radius: 20px;
+ cursor: pointer;
+}
+.observation2 {
+ display: none;
+ margin: 20px;
+ padding: 10px;
+ justify-self: center;
+ align-items: center;
+ height: 78%;
+
+ width: 85%;
+
+ position: absolute;
+ background-color: rgb(174, 215, 232);
+ border: black solid;
+ border-width: 3px;
+ z-index: 7;
+}
+.observation2 tbody,
+th {
+ border: 2px solid #000000;
+ text-align: center;
+ padding: 15px;
+}
+.observation2 td {
+ border-left: 2px solid #000000;
+ text-align: center;
+ padding: 10px;
+}
+.observationTable2 {
+ border-collapse: collapse;
+ width: 553px;
+ margin-top: 15px;
+ margin-left: 25px;
+ margin-bottom: 5px;
+ height: min-content;
+ background-color: white;
+}
+
+
+
+
+.insert-reset-observation {
+ display: flex;
+ justify-content: center;
+
+ margin: 10px;
+}
+
+.insert-reset-observation button {
+ width: 120px;
+ height: 30px;
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ /* border-radius: 1rem; */
+ border-radius: 20px;
+ cursor: pointer;
+}
+
+#outer_container {
+ position: relative;
+ width: 100%;
+ max-width: 1200px; /* Adjust this max-width as needed */
+ margin: auto; /* Centers the container */
+ background-color: yellow; /* The background color */
+}
+
+#image_container {
+ position: absolute; /* Allows the images to maintain their absolute positioning */
+ width: 100%; /* Make it responsive */
+}
+
+.circuitb {
+ /* transform: scale(0.9); */
+ width: 100%;
+}
+#circuit1 {
+ /* transform: scale(0.9); */
+ width: 87%;
+ position: relative;
+ left: 9.7%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* margin-left: 20px; */
+}
+/* #circuit2 {
+
+width: 91%;
+position: relative;
+left: 3.7%;
+display: flex;
+align-items: center;
+justify-content: center;
+
+
+} */
+
+.values button {
+ width: 30px;
+ height: 20px;
+ border-radius: 10%;
+ border: 1px solid black;
+}
+.values {
+ /* margin: 10px; */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+#exp {
+ height: 35px;
+ width: 180px;
+ box-shadow: 0px 8px 16px 0px rgba(65, 62, 62, 0.219);
+ cursor: pointer;
+}
+#exp1 {
+ /* height: 35px; */
+ /* width: 180px; */
+ /* box-shadow: 0px 8px 16px 0px rgba(65, 62, 62, 0.219); */
+ /* cursor: pointer; */
+}
+#exp2 {
+ /* height: 35px; */
+ /* width: 180px; */
+ /* box-shadow: 0px 8px 16px 0px rgba(65, 62, 62, 0.219); */
+ /* cursor: pointer; */
+}
+#exp1a {
+ height: 35px;
+ width: 180px;
+ box-shadow: 0px 8px 16px 0px rgba(65, 62, 62, 0.219);
+ cursor: pointer;
+}
+
+.observation {
+ display: none;
+ margin: 20px;
+ padding: 10px;
+ justify-self: center;
+ align-items: center;
+ height: 70%;
+
+ /* width:85%; */
+
+ position: absolute;
+ background-color: rgb(174, 215, 232);
+ border: black solid;
+ border-width: 3px;
+ z-index: 7;
+}
+
+.observationTable {
+ display: grid;
+ justify-content: center;
+ align-items: center;
+ border-collapse: collapse;
+}
+.observationTable tbody {
+ background-color: white;
+}
+.observation td,
+th {
+ border: 2px solid #000000;
+ text-align: center;
+ padding: 8px;
+}
+.tablediv {
+ max-height: 90%;
+ overflow-x: auto;
+ overflow-y: scroll;
+}
+
+.tableObservation {
+ display: flex;
+ height: 40px;
+ width: 100%-10px;
+ align-items: center;
+ justify-content: space-between;
+ padding-right: 5px;
+ padding-left: 5px;
+}
+
+.tableObservation button {
+ width: 60px;
+ height: 31px;
+ border-radius: 20px;
+ cursor: pointer;
+}
+#grid1 {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr); /* Creates two equal columns */
+ grid-gap: 10px; /* Adds space between buttons */
+ max-width: 300px; /* Set a max width for the grid */
+ margin: auto; /* Center the grid horizontally */
+}
+
+.reset-btn {
+ grid-column: span 2;
+ display: flex;
+ justify-content: center;
+}
+
+.grid2 {
+ padding: 2rem 0rem 2rem 0.5rem;
+ display: flex;
+ flex-direction: column;
+ row-gap: 1rem;
+ align-items: center;
+}
+
+.var-div {
+ display: grid;
+ grid-template-columns: 20fr 20fr;
+ row-gap: 1rem;
+ column-gap: 1rem;
+}
+
+#IBgraph {
+ display: none;
+ height: 400px;
+ width: 700px;
+ position: absolute;
+ background-color: white;
+ top: 110px;
+ left: 45px;
+ border: black solid;
+ border-width: 3px;
+ z-index: 7;
+}
+#myChart {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+#view {
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ border-radius: 5px;
+}
+#view1 {
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ border-radius: 5px;
+}
+#view2 {
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ border-radius: 5px;
+}
+#view3 {
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ border-radius: 5px;
+}
+#close1 {
+ position: absolute;
+ top: -1%;
+ right: -2%;
+ width: 3rem;
+ height: auto;
+ aspect-ratio: 1;
+ display: inline-block;
+ border-radius: 100%;
+ font-size: 2.4rem;
+ font-weight: bold;
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+}
+
+/*------------------------------------------------------------------------------------------------------------*/
+
+
+.procedure {
+ /* grid-column: 1/-1; */
+ /* display: flex; */
+ flex-direction: column;
+ gap: 1rem;
+ border: 2px solid var(--clr-title-background);
+ font-size: 1.8rem;
+ padding: 2rem;
+ border-radius: 2rem;
+ box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.05);
+ width: 80%;
+ align-self: center;
+}
+
+.procedure-title {
+ font-size: 1.8rem;
+ margin-bottom: 20px;
+ /* text-align: center; */
+}
+
+
+.radio-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 20px;
+}
+
+.radio-container input[type="radio"] {
+ margin-right: 20px; /* Adds more space between the radio button and the text */
+}
+
+
+.ok-button {
+ padding: 10px 20px;
+ font-size: 1rem;
+ border: none;
+ border-radius: 5px;
+ background-color: #4caf50;
+ color: white;
+ cursor: pointer;
+}
+
+.ok-button:hover {
+ background-color: #45a049;
+}
+
+.ok-button {
+ width: 120px;
+ height: 30px;
+ background-image: linear-gradient(
+ to bottom,
+ var(--clr-side-background2),
+ var(--clr-side-background3)
+ );
+ color: var(--clr-text-clr);
+ /* border-radius: 1rem; */
+ border-radius: 20px;
+ cursor: pointer;
+}
+
+.center-content {
+ flex-direction: column;
+ text-align: center;
+}
+
+.SLIDERS input[type="range"] {
+ width: 100%; /* or a fixed value like 300px */
+ max-width: 400px; /* Set the maximum width you want the slider to have */
+ margin: 10px 0;
+}
+
+.SLIDERS p {
+ margin-bottom: 5px;
+}
+
+@media only screen and (max-width: 991px) {
+ .v-mobile-reverse {
+ display: flex;
+ flex-direction: column-reverse;
+ }
+}
+
+.custom-container {
+ border: none;
+ padding: 1em 3em;
+}
+
+.custom-container > * {
+ padding: 0.5em;
+}
+
+.highlight {
+ animation: hlt 5s ease !important;
+}
+
+@keyframes hlt {
+ 10% {
+ box-shadow: 0 0 5px 5px rgb(255, 208, 0);
+ }
+ 100% {
+ box-shadow: 0 0 5px 5px transparent;
+ }
+}
+
+@media screen and (max-width: 991px) {
+ .v-floating-details {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100vw;
+ max-width: 100%;
+ padding: 0 15px 5px;
+ font-size: 1rem;
+ border: none;
+ background: #2c99ce;
+ color: #fff;
+ border-radius: 20px 20px 0 0;
+ font-weight: 600;
+ z-index: 3;
+ opacity: 0.7;
+ margin-bottom: 0;
+ text-align: center;
+ }
+ .v-floating-details > .v-detail-title {
+ display: none;
+ }
+ body {
+ padding-bottom: 40px;
+ }
+}
+
-
\ No newline at end of file
diff --git a/experiment/simulation/images/DSO.png b/experiment/simulation/images/DSO.png
index 4e670ed..f0ab2c2 100644
Binary files a/experiment/simulation/images/DSO.png and b/experiment/simulation/images/DSO.png differ
diff --git a/experiment/simulation/images/Diode.png b/experiment/simulation/images/Diode.png
index 1ab87d4..018feea 100644
Binary files a/experiment/simulation/images/Diode.png and b/experiment/simulation/images/Diode.png differ
diff --git a/experiment/simulation/images/Fullwave.png b/experiment/simulation/images/Fullwave.png
new file mode 100644
index 0000000..937e78f
Binary files /dev/null and b/experiment/simulation/images/Fullwave.png differ
diff --git a/experiment/simulation/images/Halfwave.png b/experiment/simulation/images/Halfwave.png
new file mode 100644
index 0000000..606b560
Binary files /dev/null and b/experiment/simulation/images/Halfwave.png differ
diff --git a/experiment/simulation/images/Resistor.png b/experiment/simulation/images/Resistor.png
index 24e2e2f..09b247e 100644
Binary files a/experiment/simulation/images/Resistor.png and b/experiment/simulation/images/Resistor.png differ
diff --git a/experiment/simulation/images/apparatus(1).png b/experiment/simulation/images/apparatus(1).png
new file mode 100644
index 0000000..28fcafe
Binary files /dev/null and b/experiment/simulation/images/apparatus(1).png differ
diff --git a/experiment/simulation/images/apparatus.png b/experiment/simulation/images/apparatus.png
new file mode 100644
index 0000000..28fcafe
Binary files /dev/null and b/experiment/simulation/images/apparatus.png differ
diff --git a/experiment/simulation/images/arrow(1).png b/experiment/simulation/images/arrow(1).png
new file mode 100644
index 0000000..6218695
Binary files /dev/null and b/experiment/simulation/images/arrow(1).png differ
diff --git a/experiment/simulation/images/arrow.png b/experiment/simulation/images/arrow.png
index 6829d05..6218695 100644
Binary files a/experiment/simulation/images/arrow.png and b/experiment/simulation/images/arrow.png differ
diff --git a/experiment/simulation/images/bluecwdull.svg b/experiment/simulation/images/bluecwdull.svg
new file mode 100644
index 0000000..f048de1
--- /dev/null
+++ b/experiment/simulation/images/bluecwdull.svg
@@ -0,0 +1,154 @@
+
+
+
+
diff --git a/experiment/simulation/images/ccdcamera1.png b/experiment/simulation/images/ccdcamera1.png
new file mode 100644
index 0000000..90e5350
Binary files /dev/null and b/experiment/simulation/images/ccdcamera1.png differ
diff --git a/experiment/simulation/images/circle1.png b/experiment/simulation/images/circle1.png
new file mode 100644
index 0000000..4528675
Binary files /dev/null and b/experiment/simulation/images/circle1.png differ
diff --git a/experiment/simulation/images/circuit1.1.png b/experiment/simulation/images/circuit1.1.png
new file mode 100644
index 0000000..dbe1a1c
Binary files /dev/null and b/experiment/simulation/images/circuit1.1.png differ
diff --git a/experiment/simulation/images/circuit1.png b/experiment/simulation/images/circuit1.png
new file mode 100644
index 0000000..6a2b595
Binary files /dev/null and b/experiment/simulation/images/circuit1.png differ
diff --git a/experiment/simulation/images/circuit2.1.png b/experiment/simulation/images/circuit2.1.png
new file mode 100644
index 0000000..92d5620
Binary files /dev/null and b/experiment/simulation/images/circuit2.1.png differ
diff --git a/experiment/simulation/images/circuit2.png b/experiment/simulation/images/circuit2.png
new file mode 100644
index 0000000..1465a09
Binary files /dev/null and b/experiment/simulation/images/circuit2.png differ
diff --git a/experiment/simulation/images/circuit3.png b/experiment/simulation/images/circuit3.png
new file mode 100644
index 0000000..8295f83
Binary files /dev/null and b/experiment/simulation/images/circuit3.png differ
diff --git a/experiment/simulation/images/circuit4.png b/experiment/simulation/images/circuit4.png
new file mode 100644
index 0000000..52363d7
Binary files /dev/null and b/experiment/simulation/images/circuit4.png differ
diff --git a/experiment/simulation/images/connection.png b/experiment/simulation/images/connection.png
new file mode 100644
index 0000000..73b27ea
Binary files /dev/null and b/experiment/simulation/images/connection.png differ
diff --git a/experiment/simulation/images/constpwrsply.png b/experiment/simulation/images/constpwrsply.png
new file mode 100644
index 0000000..9e86da4
Binary files /dev/null and b/experiment/simulation/images/constpwrsply.png differ
diff --git a/experiment/simulation/images/electromagnet.png b/experiment/simulation/images/electromagnet.png
new file mode 100644
index 0000000..4452197
Binary files /dev/null and b/experiment/simulation/images/electromagnet.png differ
diff --git a/experiment/simulation/images/fullwithdso2.png b/experiment/simulation/images/fullwithdso2.png
index 1404339..4da7da5 100644
Binary files a/experiment/simulation/images/fullwithdso2.png and b/experiment/simulation/images/fullwithdso2.png differ
diff --git a/experiment/simulation/images/halfwithdso2.png b/experiment/simulation/images/halfwithdso2.png
index 938e806..c872136 100644
Binary files a/experiment/simulation/images/halfwithdso2.png and b/experiment/simulation/images/halfwithdso2.png differ
diff --git a/experiment/simulation/images/hallprobe.png b/experiment/simulation/images/hallprobe.png
new file mode 100644
index 0000000..24e23a4
Binary files /dev/null and b/experiment/simulation/images/hallprobe.png differ
diff --git a/experiment/simulation/images/help.png b/experiment/simulation/images/help.png
index 026a6e8..041f5e4 100644
Binary files a/experiment/simulation/images/help.png and b/experiment/simulation/images/help.png differ
diff --git a/experiment/simulation/images/help.svg b/experiment/simulation/images/help.svg
new file mode 100644
index 0000000..7bf2d49
--- /dev/null
+++ b/experiment/simulation/images/help.svg
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/experiment/simulation/images/help1.png b/experiment/simulation/images/help1.png
new file mode 100644
index 0000000..b51f2e2
Binary files /dev/null and b/experiment/simulation/images/help1.png differ
diff --git a/experiment/simulation/images/honey.png b/experiment/simulation/images/honey.png
new file mode 100644
index 0000000..5891583
Binary files /dev/null and b/experiment/simulation/images/honey.png differ
diff --git a/experiment/simulation/images/icon_sprite.png b/experiment/simulation/images/icon_sprite.png
new file mode 100644
index 0000000..c1032cb
Binary files /dev/null and b/experiment/simulation/images/icon_sprite.png differ
diff --git a/experiment/simulation/images/logo.png b/experiment/simulation/images/logo.png
new file mode 100644
index 0000000..863d229
Binary files /dev/null and b/experiment/simulation/images/logo.png differ
diff --git a/experiment/simulation/images/logo_nitk.png b/experiment/simulation/images/logo_nitk.png
new file mode 100644
index 0000000..ca65c75
Binary files /dev/null and b/experiment/simulation/images/logo_nitk.png differ
diff --git a/experiment/simulation/images/mcylinder.png b/experiment/simulation/images/mcylinder.png
new file mode 100644
index 0000000..3c71fdb
Binary files /dev/null and b/experiment/simulation/images/mcylinder.png differ
diff --git a/experiment/simulation/images/measuringcylinder.png b/experiment/simulation/images/measuringcylinder.png
new file mode 100644
index 0000000..f6ded18
Binary files /dev/null and b/experiment/simulation/images/measuringcylinder.png differ
diff --git a/experiment/simulation/images/mercurytube.png b/experiment/simulation/images/mercurytube.png
new file mode 100644
index 0000000..077088d
Binary files /dev/null and b/experiment/simulation/images/mercurytube.png differ
diff --git a/experiment/simulation/images/mercurytube1.png b/experiment/simulation/images/mercurytube1.png
new file mode 100644
index 0000000..d0d47d8
Binary files /dev/null and b/experiment/simulation/images/mercurytube1.png differ
diff --git a/experiment/simulation/images/monitorwire.png b/experiment/simulation/images/monitorwire.png
new file mode 100644
index 0000000..5d991ba
Binary files /dev/null and b/experiment/simulation/images/monitorwire.png differ
diff --git a/experiment/simulation/images/monostable_multivibrator.png b/experiment/simulation/images/monostable_multivibrator.png
new file mode 100644
index 0000000..ea94fd5
Binary files /dev/null and b/experiment/simulation/images/monostable_multivibrator.png differ
diff --git a/experiment/simulation/images/monostable_multivibratorwithtrigger.png b/experiment/simulation/images/monostable_multivibratorwithtrigger.png
new file mode 100644
index 0000000..7dedbff
Binary files /dev/null and b/experiment/simulation/images/monostable_multivibratorwithtrigger.png differ
diff --git a/experiment/simulation/images/ncylinder.png b/experiment/simulation/images/ncylinder.png
new file mode 100644
index 0000000..532be3f
Binary files /dev/null and b/experiment/simulation/images/ncylinder.png differ
diff --git a/experiment/simulation/images/new.pbix b/experiment/simulation/images/new.pbix
new file mode 100644
index 0000000..1e7bdda
Binary files /dev/null and b/experiment/simulation/images/new.pbix differ
diff --git a/experiment/simulation/images/nitk.PNG b/experiment/simulation/images/nitk.PNG
new file mode 100644
index 0000000..0e4f814
Binary files /dev/null and b/experiment/simulation/images/nitk.PNG differ
diff --git a/experiment/simulation/images/objective.png b/experiment/simulation/images/objective.png
new file mode 100644
index 0000000..7524d9b
Binary files /dev/null and b/experiment/simulation/images/objective.png differ
diff --git a/experiment/simulation/images/opamp.png b/experiment/simulation/images/opamp.png
new file mode 100644
index 0000000..d9808bc
Binary files /dev/null and b/experiment/simulation/images/opamp.png differ
diff --git a/experiment/simulation/images/oscilloscope.png b/experiment/simulation/images/oscilloscope.png
new file mode 100644
index 0000000..0c56e7f
Binary files /dev/null and b/experiment/simulation/images/oscilloscope.png differ
diff --git a/experiment/simulation/images/polariser.png b/experiment/simulation/images/polariser.png
new file mode 100644
index 0000000..754376f
Binary files /dev/null and b/experiment/simulation/images/polariser.png differ
diff --git a/experiment/simulation/images/power.png b/experiment/simulation/images/power.png
new file mode 100644
index 0000000..2462921
Binary files /dev/null and b/experiment/simulation/images/power.png differ
diff --git a/experiment/simulation/images/probe.png b/experiment/simulation/images/probe.png
new file mode 100644
index 0000000..1887a0e
Binary files /dev/null and b/experiment/simulation/images/probe.png differ
diff --git a/experiment/simulation/images/probe1.png b/experiment/simulation/images/probe1.png
new file mode 100644
index 0000000..c911858
Binary files /dev/null and b/experiment/simulation/images/probe1.png differ
diff --git a/experiment/simulation/images/reading1.png b/experiment/simulation/images/reading1.png
new file mode 100644
index 0000000..78a3dab
Binary files /dev/null and b/experiment/simulation/images/reading1.png differ
diff --git a/experiment/simulation/images/reading10.png b/experiment/simulation/images/reading10.png
new file mode 100644
index 0000000..b7b33d3
Binary files /dev/null and b/experiment/simulation/images/reading10.png differ
diff --git a/experiment/simulation/images/reading11.png b/experiment/simulation/images/reading11.png
new file mode 100644
index 0000000..d1ba236
Binary files /dev/null and b/experiment/simulation/images/reading11.png differ
diff --git a/experiment/simulation/images/ruler.png b/experiment/simulation/images/ruler.png
new file mode 100644
index 0000000..053c0da
Binary files /dev/null and b/experiment/simulation/images/ruler.png differ
diff --git a/experiment/simulation/images/screen.png b/experiment/simulation/images/screen.png
new file mode 100644
index 0000000..2c90ab3
Binary files /dev/null and b/experiment/simulation/images/screen.png differ
diff --git a/experiment/simulation/images/slider_handles.png b/experiment/simulation/images/slider_handles.png
new file mode 100644
index 0000000..b95a46e
Binary files /dev/null and b/experiment/simulation/images/slider_handles.png differ
diff --git a/experiment/simulation/images/solenoid.png b/experiment/simulation/images/solenoid.png
new file mode 100644
index 0000000..13a0bed
Binary files /dev/null and b/experiment/simulation/images/solenoid.png differ
diff --git a/experiment/simulation/images/solution.png b/experiment/simulation/images/solution.png
new file mode 100644
index 0000000..5a78fc0
Binary files /dev/null and b/experiment/simulation/images/solution.png differ
diff --git a/experiment/simulation/images/solve_.png b/experiment/simulation/images/solve_.png
new file mode 100644
index 0000000..e07b7ec
Binary files /dev/null and b/experiment/simulation/images/solve_.png differ
diff --git a/experiment/simulation/images/stand.png b/experiment/simulation/images/stand.png
new file mode 100644
index 0000000..af70773
Binary files /dev/null and b/experiment/simulation/images/stand.png differ
diff --git a/experiment/simulation/images/stopclock.png b/experiment/simulation/images/stopclock.png
new file mode 100644
index 0000000..947c94b
Binary files /dev/null and b/experiment/simulation/images/stopclock.png differ
diff --git a/experiment/simulation/images/stopwatch.png b/experiment/simulation/images/stopwatch.png
new file mode 100644
index 0000000..6dd4756
Binary files /dev/null and b/experiment/simulation/images/stopwatch.png differ
diff --git a/experiment/simulation/images/telescope1.png b/experiment/simulation/images/telescope1.png
new file mode 100644
index 0000000..5b53de9
Binary files /dev/null and b/experiment/simulation/images/telescope1.png differ
diff --git a/experiment/simulation/images/ui-icons_222222_256x240.png b/experiment/simulation/images/ui-icons_222222_256x240.png
new file mode 100644
index 0000000..b273ff1
Binary files /dev/null and b/experiment/simulation/images/ui-icons_222222_256x240.png differ
diff --git a/experiment/simulation/images/ui-icons_454545_256x240.png b/experiment/simulation/images/ui-icons_454545_256x240.png
new file mode 100644
index 0000000..57045a2
Binary files /dev/null and b/experiment/simulation/images/ui-icons_454545_256x240.png differ
diff --git a/experiment/simulation/images/water1.png b/experiment/simulation/images/water1.png
new file mode 100644
index 0000000..dd654cf
Binary files /dev/null and b/experiment/simulation/images/water1.png differ
diff --git a/experiment/simulation/images/wire.png b/experiment/simulation/images/wire.png
new file mode 100644
index 0000000..2ab6d3c
Binary files /dev/null and b/experiment/simulation/images/wire.png differ
diff --git a/experiment/simulation/images/zeemanset.png b/experiment/simulation/images/zeemanset.png
new file mode 100644
index 0000000..70992fa
Binary files /dev/null and b/experiment/simulation/images/zeemanset.png differ
diff --git a/experiment/simulation/images/zeemanstand.png b/experiment/simulation/images/zeemanstand.png
new file mode 100644
index 0000000..6402960
Binary files /dev/null and b/experiment/simulation/images/zeemanstand.png differ
diff --git a/experiment/simulation/images/zemanpwrsply.png b/experiment/simulation/images/zemanpwrsply.png
new file mode 100644
index 0000000..5e04df3
Binary files /dev/null and b/experiment/simulation/images/zemanpwrsply.png differ
diff --git a/experiment/simulation/index.html b/experiment/simulation/index.html
index 6751068..c9a6f70 100644
--- a/experiment/simulation/index.html
+++ b/experiment/simulation/index.html
@@ -1,209 +1,219 @@
-
-
-
+
-
-
-
+ Solve
+
+
+
Virtual Lab
-
-
-
-
-
-
-
Half wave/Full wave Rectifier
+
+
+
+
+
+
+
+
+
Half wave/Full wave Rectifier
+
-
-
-
Objective:
-
- To differentiate between input and output waveforms in Half wave/full wave rectifier
- To calculate the Ripple Factor
-
-
-
Apparatus Used:
+
+
+
+
+
+
+
Objective
+
+
+
+
+
+ To differentiate between input and output waveforms in Half wave/full wave rectifier
+ To calculate the Ripple Factor
+
+
+
+
+
+
+
Diodes, Step down Transformer, Resistor, DSO
-
-
-
-
DSO
-
-
-
Diode
-
-
-
Resistor
+
+
+
+
+
-
-
Transformer
+
+
+
-
-
-
-
-
-
-
-
- Choose the Rectifier :
-
- Select the Rectifier
- Half wave Rectifier
- Full wave Rectifier
-
-
-
- Connect to DSO
-
-
-
-
- Select Transformer:
-
- Select transformer
- Step down Transformer
- Step up transformer
-
-
-
-
-
-
-
-
-
-
- Get Input Waveform
-
-
-
-
- Get Output Waveform
-
-
- Show Result
-
-
- Reset
-
-
-
-
-
-
-
-
-
-
-
Instructions
-
- Select half or full wave rectifier and type of transformer from the menu.
-
- Set the primary turns,secondary turns and resistance value and press the "Connect DSO" button to connect the channels of dso to the rectifier circuit.
-
- Click the "Get input waveform" button and analyse the input waveform with and without the diode.
-
- Click the "Get output waveform" button and analyse the rectified output waveform.
-
- Click on "Show Result" button to check the calculations.
-
- Calculate the value of Vm ,V rms , V dc and ripple factor, γ=sqrt((Vrms/Vdc)^2-1).
-
- Click on the "Reset" button to restart the experiment.
-
+
+
+
Instructions
+
+ Select half or full wave rectifier and type of transformer from the menu.
+
+ Set the primary turns,secondary turns and resistance value and press the "Connect DSO" button to connect the channels of dso to the rectifier circuit.
+
+ Click the "Get input waveform" button and analyse the input waveform with and without the diode.
+
+ Click the "Get output waveform" button and analyse the rectified output waveform.
+
+ Click on "Show Result" button to check the calculations.
+
+ Calculate the value of Vm ,V rms , V dc and ripple factor, γ=sqrt((Vrms/Vdc)^2-1).
+
+ Click on the "Reset" button to restart the experiment.
+
+
+
+
+
+
+
+
CALCULATIONS: Full Wave Rectifier
+
+ From N 1 * V 2 = N 2 * V 1
+
+ N 1 = Number of turns in Primary transformer , N 2 = Number of turns in Secondary transformer
+
+ V 1 = Primary Voltage , V 2 = Secondary Voltage
+
+ Here, V 2 = V m ,V rms = V m / √2
+
+ V dc = (2 * V m )/ π
+
+ Ripple factor of Full wave Rectifier is, γ = √(V rms / V dc ) 2 - 1
+
+ Theoretical Value of Ripple Factor ≈0.48
+ Experimental Value of Ripple factor ,
+
+
+
+
+
Close
-
Close
-
-
-
-
CALCULATIONS: Full Wave Rectifier
-
- From N 1 * V 2 = N 2 * V 1
-
- N 1 = Number of turns in Primary transformer , N 2 = Number of turns in Secondary transformer
-
- V 1 = Primary Voltage , V 2 = Secondary Voltage
-
- Here, V 2 = V m ,V rms = V m / √2
-
- V dc = (2 * V m )/ π
-
- Ripple factor of Full wave Rectifier is, γ = √(V rms / V dc ) 2 - 1
-
- Theoretical Value of Ripple Factor ≈0.48
- Experimental Value of Ripple factor ,
-
-
+
+
+
CALCULATIONS: Half Wave Rectifier
+
+ From N 1 * V 2 = N 2 * V 1
+
+ N 1 = Number of turns in Primary transformer , N 2 = Number of turns in Secondary transformer
+
+ V 1 = Primary Voltage , V 2 = Secondary Voltage
+
+
+ Here, V 2 = V m ,V rms = Vm /2
+
+ V dc =Vm /π
+
+ Ripple factor of Half wave Rectifier is ,γ = √(Vrms /Vdc )2 -1
+ Theoretical Value of Ripple Factor ≈1.21
+ Experimental Value of Ripple factor,
+
-
-
Close
-
-
-
-
CALCULATIONS: Half Wave Rectifier
-
- From N 1 * V 2 = N 2 * V 1
-
- N 1 = Number of turns in Primary transformer , N 2 = Number of turns in Secondary transformer
-
- V 1 = Primary Voltage , V 2 = Secondary Voltage
-
-
- Here, V 2 = V m ,V rms = Vm /2
-
- V dc =Vm /π
-
- Ripple factor of Half wave Rectifier is ,γ = √(Vrms /Vdc )2 -1
- Theoretical Value of Ripple Factor ≈1.21
- Experimental Value of Ripple factor,
-
-
-
-
Close
-
-
-
-
+
+
+
OUTPUT GRAPH: Half Wave Rectifier
@@ -212,27 +222,86 @@
OUTPUT GRAPH: Half Wave Rectifier
style="width: 315px;height: 196px; margin-left:12px;top:100px;">
-
Close
+
Close
-
-
OUTPUT GRAPH: Full Wave Rectifier
-
-
-
-
+
+
OUTPUT GRAPH: Full Wave Rectifier
+
+
+
+
+
+
Close
+
- Close
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
Controls
+
+
+
+
+
+ Connect to DSO
+
+
+
+
+ Select Transformer:
+
+ Select transformer
+ Step down Transformer
+ Step up transformer
+
+
+
+
+
+
+
+
+
N2: secondary turns
+
+
+
+
+
+
+
+
+
+
+ Get Input Waveform
+ Get Output Waveform
+ Show Result
+
+
+
+
+
+
+
+
+
+
Copyright © SOLVE The Virtual Lab @ NITK Surathkal
+
+
+
+
+
+
+
+