{"id":1569,"date":"2023-06-15T10:44:00","date_gmt":"2023-06-15T07:44:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1569"},"modified":"2023-06-14T16:47:42","modified_gmt":"2023-06-14T13:47:42","slug":"night-day-switch","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/switch\/1569\/","title":{"rendered":"Night &amp; Day"},"content":{"rendered":"<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img fetchpriority=\"high\" decoding=\"async\" width=\"638\" height=\"346\" src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/06\/peek-2023-06-14-15-38.gif\" alt=\"Night &amp; Day switch\" class=\"wp-image-1570 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">  &lt;div class=&quot;layout&quot;&gt;\n    &lt;div class=&quot;day-label&quot;&gt;Day&lt;\/div&gt;\n    &lt;label class=&quot;container&quot;&gt;\n      &lt;input id=&quot;input&quot; type=&quot;checkbox&quot; checked=&quot;checked&quot;&gt;\n      &lt;span class=&quot;checkmark&quot;&gt;\n    &lt;svg id=&quot;toggle&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewbox=&quot;0 0 60 34&quot; width=&quot;60&quot; height=&quot;34&quot;&gt;\n      &lt;defs&gt;\n        &lt;filter id=&quot;glow&quot;&gt;\n          &lt;fegaussianblur stddeviation=&quot;2&quot; result=&quot;coloredBlur&quot;\/&gt;\n          &lt;femerge&gt;\n            &lt;femergenode in=&quot;coloredBlur&quot;\/&gt;\n            &lt;femergenode in=&quot;SourceGraphic&quot;\/&gt;\n          &lt;\/femerge&gt;\n        &lt;\/filter&gt;\n      \n        &lt;clippath id=&quot;container&quot; &gt;\n          &lt;rect width=&quot;60&quot; height=&quot;34&quot; rx=&quot;17&quot;\/&gt;\n        &lt;\/clippath&gt;\n        &lt;g id=&quot;day&quot;&gt;\n          &lt;rect x=&quot;0&quot; width=&quot;60&quot; height=&quot;34&quot; style=&quot;fill: #61b9e5&quot;\/&gt;\n          &lt;g id=&quot;day-content&quot;&gt;\n            &lt;g transform=&quot;translate(-30 0)&quot;&gt;\n            &lt;g id=&quot;land&quot;&gt;\n              &lt;path d=&quot;M49.07,13.32c-1.07,1.19-.55,2.29-1.42,2.92s-2.08-.19-2.58.42c-.19.22-.3.66.66,2.91s1.53,3.57,2.25,3.66c.94.12,1.08-1.24,3.08-2.24,1.53-.77,2.55-.53,2.92-1.34.22-.47,0-1-.33-2a26.68,26.68,0,0,0-1.5-2.83c-.79-1.6-.78-2.26-1.34-2.41C50.06,12.21,49.2,13.17,49.07,13.32Z&quot; style=&quot;fill: #2c962e&quot;\/&gt;\n              &lt;path d=&quot;M57.81,12.74c-1.15-.08-2.54.74-2.58,1.75a2.12,2.12,0,0,0,1.41,1.75,4.82,4.82,0,0,0,2.34.08h0s.77,1.42,1.16,1.33.49-1.18.25-2.16S59.34,12.85,57.81,12.74Z&quot; style=&quot;fill: #2c962e&quot;\/&gt;\n              &lt;path d=&quot;M58.06,19.57c-.91.9-1.58,1.55-1.42,2.08.24.77,2.24,1.31,3.25.42s.5-3.36-.25-3.58C59.27,18.38,58.85,18.79,58.06,19.57Z&quot; style=&quot;fill: #2c962e&quot;\/&gt;\n              &lt;path d=&quot;M66.89,13.32c-1.07,1.19-.55,2.29-1.42,2.92s-2.07-.19-2.58.42c-.19.22-.3.66.67,2.91s1.52,3.57,2.25,3.66c.93.12,1.07-1.24,3.08-2.24,1.52-.77,2.55-.53,2.91-1.34.22-.47,0-1-.33-2A26.68,26.68,0,0,0,70,14.82c-.78-1.6-.77-2.26-1.33-2.41C67.89,12.21,67,13.17,66.89,13.32Z&quot; style=&quot;fill: #2c962e&quot;\/&gt;\n              &lt;path d=&quot;M75.63,12.74c-1.15-.08-2.54.74-2.58,1.75a2.12,2.12,0,0,0,1.42,1.75,4.79,4.79,0,0,0,2.33.08h0s.77,1.42,1.16,1.33.49-1.18.25-2.16S77.16,12.85,75.63,12.74Z&quot; style=&quot;fill: #2c962e&quot;\/&gt;\n              &lt;path d=&quot;M75.88,19.57c-.91.9-1.58,1.55-1.41,2.08.23.77,2.23,1.31,3.24.42s.5-3.36-.24-3.58C77.09,18.38,76.68,18.79,75.88,19.57Z&quot; style=&quot;fill: #2c962e&quot;\/&gt;\n            &lt;\/g&gt;\n              &lt;\/g&gt;\n            &lt;g class=&quot;clouds&quot;&gt;\n            &lt;g class=&quot;clouds-small&quot;&gt;\n            &lt;path d=&quot;M13.35,22.45a1,1,0,0,0-.44.1A1.62,1.62,0,0,0,11.29,21a1.67,1.67,0,0,0-.59.11,1.84,1.84,0,0,0-3.55.61h0a1.38,1.38,0,0,0,0,2.75h6.21a1,1,0,1,0,0-2Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #d0edff&quot;\/&gt;\n            &lt;path d=&quot;M27.38,23.72a1.05,1.05,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.41,1.84,1.84,0,0,0-3.56.61h0a1.38,1.38,0,1,0,0,2.75h6.21a1,1,0,0,0,0-2.05Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #d0edff&quot;\/&gt;\n            &lt;path d=&quot;M56.7,24a1,1,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.42,1.85,1.85,0,0,0-3.56.61h0a1.38,1.38,0,0,0,0,2.75H56.7a1,1,0,0,0,0-2Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #d0edff&quot;\/&gt;\n            &lt;path d=&quot;M84.35,22.45a1,1,0,0,0-.44.1A1.62,1.62,0,0,0,82.29,21a1.67,1.67,0,0,0-.59.11,1.84,1.84,0,0,0-3.55.61h0a1.38,1.38,0,0,0,0,2.75h6.21a1,1,0,1,0,0-2Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #d0edff&quot;\/&gt;\n            &lt;path d=&quot;M98.38,23.72a1.05,1.05,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.41,1.84,1.84,0,0,0-3.56.61h0a1.38,1.38,0,1,0,0,2.75h6.21a1,1,0,0,0,0-2.05Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #d0edff&quot;\/&gt;\n            &lt;path d=&quot;M127.7,24a1,1,0,0,0-.44.1,1.63,1.63,0,0,0-2.21-1.42,1.85,1.85,0,0,0-3.56.61h0a1.38,1.38,0,0,0,0,2.75h6.21a1,1,0,0,0,0-2Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #d0edff&quot;\/&gt;\n            &lt;\/g&gt;\n            &lt;g class=&quot;clouds-medium&quot;&gt;\n            &lt;path d=&quot;M61.44,18.4a1.85,1.85,0,0,0-.77.18,2.85,2.85,0,0,0-2.85-2.68,3,3,0,0,0-1,.19,3.25,3.25,0,0,0-6.26,1.07h0a2.42,2.42,0,0,0,0,4.84H61.44a1.8,1.8,0,1,0,0-3.6Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #e9f8ff&quot;\/&gt;\n            &lt;path d=&quot;M26,17.07a1.84,1.84,0,0,0-.77.17,2.86,2.86,0,0,0-2.85-2.68,2.75,2.75,0,0,0-1,.2,3.24,3.24,0,0,0-6.26,1.07h0a2.42,2.42,0,1,0,0,4.84H26a1.8,1.8,0,0,0,0-3.6Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #e9f8ff&quot;\/&gt;\n            &lt;path d=&quot;M126.44,18.4a1.85,1.85,0,0,0-.77.18,2.85,2.85,0,0,0-2.85-2.68,3,3,0,0,0-1,.19,3.25,3.25,0,0,0-6.26,1.07h0a2.42,2.42,0,0,0,0,4.84h10.92a1.8,1.8,0,1,0,0-3.6Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #e9f8ff&quot;\/&gt;\n            &lt;path d=&quot;M91,17.07a1.84,1.84,0,0,0-.77.17,2.86,2.86,0,0,0-2.85-2.68,2.75,2.75,0,0,0-1,.2,3.24,3.24,0,0,0-6.26,1.07h0a2.42,2.42,0,0,0,0,4.84H91a1.8,1.8,0,0,0,0-3.6Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #e9f8ff&quot;\/&gt;\n            &lt;\/g&gt;\n            &lt;g class=&quot;clouds-big&quot;&gt;\n            &lt;path d=&quot;M24.82,10.83a3.09,3.09,0,0,0-1.29.29A4.78,4.78,0,0,0,17,7,5.43,5.43,0,0,0,6.54,8.76h0a4,4,0,1,0,0,8.09H24.82a3,3,0,0,0,0-6Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #fff&quot;\/&gt;\n            &lt;path d=&quot;M53.6,9.45a2.37,2.37,0,0,0-1,.24,3.86,3.86,0,0,0-3.84-3.61,4.09,4.09,0,0,0-1.4.26,4.36,4.36,0,0,0-8.41,1.45h0a3.25,3.25,0,0,0,0,6.5H53.6a2.42,2.42,0,1,0,0-4.84Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #fff&quot;\/&gt;\n            &lt;path d=&quot;M98.72,10.83a3.09,3.09,0,0,0-1.29.29A4.78,4.78,0,0,0,90.91,7a5.43,5.43,0,0,0-10.47,1.8h0a4,4,0,1,0,0,8.09H98.72a3,3,0,1,0,0-6Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #fff&quot;\/&gt;\n            &lt;path d=&quot;M127.5,9.45a2.41,2.41,0,0,0-1,.24,3.85,3.85,0,0,0-3.84-3.61,4.09,4.09,0,0,0-1.4.26,4.36,4.36,0,0,0-8.41,1.45h0a3.25,3.25,0,0,0,0,6.5h14.7a2.42,2.42,0,0,0,0-4.84Z&quot; transform=&quot;translate(-2 -2)&quot; style=&quot;fill: #fff&quot;\/&gt;\n            &lt;\/g&gt;\n            &lt;\/g&gt;\n          &lt;\/g&gt;\n          \n          &lt;g id=&quot;balloon&quot; transform=&quot;translate(-1 -2)&quot;&gt;\n            &lt;path d=&quot;M30,18.46C30,24,25.52,32.09,20,32.09S10,24,10,18.46a10,10,0,1,1,20,0Z&quot; style=&quot;fill: #004373&quot;\/&gt;\n            &lt;polygon transform=&quot;translate(10 9)&quot; points=&quot;9.39 23.36 8.59 24.57 10.9 24.57 10.48 23.14 9.39 23.36&quot; style=&quot;fill: #004373&quot;\/&gt;\n            &lt;path id=&quot;string-bend&quot; d=&quot;M19.84,31.6c0,2,.66,3.24.66,6.4,0,2.91-.29,2.33-3.24,4.93&quot; style=&quot;fill: none;stroke: #313a3f;stroke-miterlimit: 10;stroke-width: 0.5px&quot;\/&gt;\n            \n            &lt;\/g&gt;\n      \n        &lt;\/g&gt;\n        &lt;g id=&quot;night&quot;&gt;\n          &lt;rect  id=&quot;night-back&quot; width=&quot;60&quot; height=&quot;34&quot; style=&quot;fill: #004373&quot;\/&gt;\n  \n          &lt;g id=&quot;night-content&quot;&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;46 4.89 46.62 6.14 48.01 6.35 47.01 7.33 47.24 8.71 46 8.06 44.76 8.71 44.99 7.33 43.99 6.35 45.38 6.14 46 4.89&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;58.58 21.93 59.46 23.02 60.86 22.91 60.1 24.09 60.63 25.39 59.28 25.02 58.21 25.94 58.14 24.54 56.94 23.8 58.25 23.3 58.58 21.93&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;40.71 12.02 40.82 13.42 42.03 14.13 40.74 14.66 40.44 16.04 39.53 14.97 38.13 15.11 38.87 13.91 38.3 12.63 39.67 12.96 40.71 12.02&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;5 16.89 5.62 18.14 7.01 18.35 6 19.33 6.24 20.71 5 20.06 3.76 20.71 4 19.33 2.99 18.35 4.38 18.14 5 16.89&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;60.57 6.97 60.79 8.36 62.05 8.97 60.8 9.6 60.61 10.99 59.62 10 58.24 10.25 58.88 9 58.22 7.76 59.6 7.99 60.57 6.97&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;30.91 26.12 30.86 27.52 31.98 28.36 30.63 28.74 30.18 30.07 29.4 28.91 28 28.89 28.86 27.78 28.45 26.44 29.77 26.93 30.91 26.12&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;17.52 13.95 18.44 15.01 19.83 14.86 19.11 16.06 19.68 17.34 18.32 17.02 17.28 17.96 17.16 16.56 15.94 15.87 17.23 15.32 17.52 13.95&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;60.53 16.01 61.11 16.41 61.76 16.15 61.56 16.83 62 17.37 61.3 17.39 60.92 17.98 60.69 17.32 60.01 17.14 60.56 16.71 60.53 16.01&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;41.99 21.89 42.31 22.52 43 22.62 42.5 23.11 42.62 23.8 41.99 23.47 41.37 23.8 41.49 23.11 40.99 22.62 41.69 22.52 41.99 21.89&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;63.47 26.02 63.43 26.72 63.98 27.15 63.3 27.32 63.05 27.98 62.68 27.39 61.98 27.36 62.43 26.82 62.24 26.14 62.89 26.4 63.47 26.02&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;36.99 9.89 37.31 10.52 38 10.62 37.5 11.11 37.62 11.8 36.99 11.47 36.37 11.8 36.49 11.11 35.99 10.62 36.69 10.52 36.99 9.89&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;28.5 4.89 28.65 5.2 29 5.25 28.75 5.5 28.81 5.85 28.5 5.68 28.18 5.85 28.24 5.5 27.99 5.25 28.34 5.2 28.5 4.89&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;28.5 12.89 28.65 13.2 29 13.25 28.75 13.5 28.81 13.85 28.5 13.68 28.18 13.85 28.24 13.5 27.99 13.25 28.34 13.2 28.5 12.89&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;47.75 22.96 47.72 23.31 47.98 23.54 47.64 23.61 47.5 23.94 47.32 23.63 46.97 23.6 47.21 23.34 47.13 23 47.45 23.14 47.75 22.96&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;51.75 31.96 51.72 32.31 51.98 32.54 51.64 32.62 51.5 32.94 51.32 32.63 50.97 32.6 51.21 32.34 51.13 32 51.45 32.15 51.75 31.96&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;44.69 29.93 44.7 30.28 45 30.47 44.67 30.59 44.58 30.93 44.37 30.66 44.01 30.68 44.21 30.38 44.08 30.06 44.42 30.15 44.69 29.93&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;24.32 10.92 24.58 11.16 24.92 11.07 24.78 11.4 24.96 11.7 24.61 11.66 24.39 11.93 24.31 11.58 23.98 11.45 24.29 11.27 24.32 10.92&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;24.94 13.18 24.71 13.45 24.79 13.79 24.47 13.65 24.17 13.84 24.2 13.49 23.93 13.26 24.27 13.19 24.41 12.86 24.59 13.16 24.94 13.18&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;32 19.89 32.31 20.52 33 20.62 32.5 21.11 32.62 21.8 32 21.47 31.37 21.8 31.49 21.11 30.99 20.62 31.68 20.52 32 19.89&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;19.61 21.97 20.15 22.42 20.82 22.23 20.56 22.88 20.95 23.46 20.25 23.42 19.82 23.97 19.64 23.29 18.98 23.04 19.58 22.67 19.61 21.97&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n            &lt;polygon class=&quot;star&quot; points=&quot;9.51 8.04 9.43 8.74 9.96 9.2 9.28 9.34 9 9.98 8.65 9.37 7.96 9.31 8.43 8.79 8.27 8.11 8.91 8.4 9.51 8.04&quot; style=&quot;fill: #fff5a6&quot;\/&gt;\n          &lt;\/g&gt;\n          \n          &lt;circle cx=&quot;41&quot; cy=&quot;17&quot; r=&quot;10&quot; style=&quot;fill: #3366ff; filter:url(#glow)&quot;\/&gt;\n        &lt;\/g&gt;\n        &lt;clippath id=&quot;switch&quot; &gt;\n          &lt;circle id=&quot;circle&quot; cx=&quot;19&quot; cy=&quot;17&quot; r=&quot;10&quot;\/&gt;\n        &lt;\/clippath&gt;\n        \n        &lt;path id=&quot;string-straight&quot; d=&quot;M19.84,31.6c0,2.21-.17,3.38-.17,7.63,0,2.39,1.33,3.7,3.24,3.7&quot; style=&quot;fill: none;stroke: #313a3f;stroke-miterlimit: 10;stroke-width: 0.5px&quot;\/&gt;\n      &lt;\/defs&gt;\n  \n      &lt;g clip-path=&quot;url(#container)&quot;&gt;\n        &lt;use id=&quot;back&quot; href=&quot;#day&quot;\/&gt;\n        &lt;g clip-path=&quot;url(#switch)&quot;&gt;\n          &lt;use id=&quot;front&quot; href=&quot;#night&quot; \/&gt;\n        &lt;\/g&gt;\n        &lt;rect class=&quot;inner-shadow&quot; width=&quot;70&quot; height=&quot;44&quot; rx=&quot;20&quot;\/&gt;\n      &lt;\/g&gt;\n      \n      &lt;rect width=&quot;60&quot; height=&quot;44&quot; rx=&quot;17&quot; opacity=&quot;0&quot;\/&gt;\n  \n    &lt;\/svg&gt;\n    &lt;\/span&gt;\n    &lt;\/label&gt;\n    &lt;div class=&quot;night-label&quot;&gt;Night&lt;\/div&gt;\n  &lt;\/div&gt;\n\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.1.1\/gsap.min.js&quot;  &gt;&lt;\/script&gt; \n&lt;script src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/16327\/MorphSVGPlugin3.min.js&quot;&gt;&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@import url('https:\/\/fonts.googleapis.com\/css?family=Lora&amp;display=swap');\n\nbody, html\n{\n\tmargin: 0;\n\tpadding: 0;\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\tfont-family: 'Lora', serif;\n\tcolor: #303030;\n}\n\n.night-label{\n\topacity: 0.2;\n}\n\nbody\n{\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: #FEF9EA;\n}\n\n.layout\n{\n\twidth: 70vw;\n\tmax-width: 350px;\n\tmin-width: 250px;\n\theight: 30vh;\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 3fr 1fr;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 30px;\n\tfont-size: 20px;\n}\n\n.layout:nth-child(1)\n{\n\ttext-align: right;\n}\n\nsvg\n{\t\n\twidth: 100%;\n\theight: 100%;\n\tcursor: pointer;\n}\n\n#night-content\n{\n\topacity: 0.8;\n}\n\n.inner-shadow\n{\n\tstroke-opacity: 0.1;\n\tstroke-width: 5;\n\tstroke: black;\n\tfill: none;\n}\n\n#land\n{\n\topacity: 0;\n}\n\n.container input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">console.clear();\n\nlet duration = 0.4;\nlet isDay = false;\n\nlet back = document.getElementById('back');\nlet front = document.getElementById('front');\n\nlet switchTime = () =&gt; {\n\t\n\tback.setAttribute('href', '#' + (isDay ? 'day' : 'night'));\n\tfront.setAttribute('href', '#' + (isDay ? 'night' : 'day'));\n}\nlet scale = 30;\nlet toNightAnimation = gsap.timeline();\n\ntoNightAnimation\n.to('#night-content', {duration: duration * 0.5, opacity: 1, ease: 'power2.inOut', x: 0})\n.to('#circle', {\n\tduration: duration,\n\tease: 'power4.in',\n\tscaleX: scale,\n\tscaleY: scale,\n\tx: 1,\n\ttransformOrigin: '100% 50%',\n}, 0)\n.to('.day-label', {duration: duration * 2, ease: 'power2.inOut', opacity: 0.2}, 0)\n.to('.night-label', {duration: duration * 2, ease: 'power2.inOut', opacity: 1}, 0)\n.set('#circle', {\n\t\/\/ transformOrigin: '0% 50%',\n\tscaleX:-scale,\n\t\/\/ x: 8.5,\n\tonUpdate: () =&gt; switchTime()\n}, duration).to('#circle', {\n\tduration: duration,\n\tease: 'power4.out',\n\tscaleX: -1,\n\tscaleY: 1,\n\tx: 2,\n}, duration)\n\/\/ .to('#night-back', {duration: duration, fill: '#000033'}, 0)\n.to('.clouds', {duration: duration * 0.75, opacity: 0.7, ease: 'power2.inOut'}, duration * 1.25)\n.to('#land', {duration: duration * 0.75, opacity: 1, ease: 'power2.inOut'}, duration * 1.25)\n.to('body', {backgroundColor: '#b0b0b9', color: 'black', duration: duration * 2}, 0)\n\nlet stars = Array.from(document.getElementsByClassName('star'));\nstars.map(star =&gt; gsap.to(star, {duration: 'random(0.4, 1.5)', repeat: -1, yoyo: true, opacity: 'random(0.2, 0.5)'}))\ngsap.to('.clouds-big', {duration: 15, repeat: -1, x: -74, ease: 'linear'})\ngsap.to('.clouds-medium', {duration: 20, repeat: -1, x: -65, ease: 'linear'})\ngsap.to('.clouds-small', {duration: 25, repeat: -1, x: -71, ease: 'linear'})\ngsap.to('#land', {duration: 7, repeat: -1, x: 18, ease: 'linear'})\n\nlet switchToggle = document.getElementById('input');\nswitchToggle.addEventListener('change', () =&gt; toggle())\n\nlet balloonSwitchTween = gsap.to('#switch', {duration: 6, y: -6, x: -1, ease: 'power2.inOut', repeat: -1, yoyo: true})\nlet balloonTween = gsap.to('#balloon', {duration: 6, y: -7, x: -2, rotate: 15, transformOrigin: '12 10', ease: 'power2.inOut', repeat: -1, yoyo: true})\nlet balloonStringTween = gsap.to('#string-bend', {duration: 6, rotate: -15, transformOrigin: '0 0',  morphSVG: &quot;#string-straight&quot;, ease: 'power2.inOut', repeat: -1, yoyo: true})\n\nlet toggle = () =&gt; \n{\n\tisDay = switchToggle.checked == true;\n\tif (isDay) {\n    \ttoNightAnimation.reverse();\n\t\tballoonSwitchTween.restart();\n\t\tballoonTween.restart();\n\t\tballoonStringTween.restart();\n\t} else {\n    \ttoNightAnimation.play();\n\t\tballoonSwitchTween.pause();\n\t\tballoonTween.pause();\n\t\tballoonStringTween.pause();\n\t\tgsap.to('#switch', {duration: duration, y: 0, x: 0, ease: 'power2.inOut'})\n\t\tgsap.to('#balloon', {duration: duration, y: 0, x: -2, ease: 'power2.inOut'})\n\t}\n}\ntoggle();\nif(CodePen.isThumbnail) toggle();\n\ntoNightAnimation.reverse();\ntoNightAnimation.pause();<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1570,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[58],"tags":[],"class_list":["post-1569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-switch"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1569"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1569\/revisions"}],"predecessor-version":[{"id":1571,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1569\/revisions\/1571"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1570"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}