{"id":1071,"date":"2023-03-30T05:26:00","date_gmt":"2023-03-30T02:26:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1071"},"modified":"2023-03-30T12:08:06","modified_gmt":"2023-03-30T09:08:06","slug":"mini-app-interface","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/elements\/1071\/","title":{"rendered":"Mini app interface"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"848\" style=\"aspect-ratio: 642 \/ 848;\" width=\"642\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-29_20-22-16.webm\"><\/video><\/figure>\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;link href=&quot;https:\/\/fonts.googleapis.com\/css?family=Roboto:400,300,700&quot; rel=&quot;stylesheet&quot;&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/code.ionicframework.com\/ionicons\/2.0.1\/css\/ionicons.min.css&quot;&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/3.2.3\/animate.min.css&quot;&gt;\n\n  \n\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\n\n\n\n  &lt;div class=&quot;mobile-wrap block&quot;&gt;\n    &lt;div class=&quot;mobile clearfix&quot;&gt;\n      &lt;div class=&quot;header&quot;&gt;\n        &lt;span class=&quot;ion-ios-navicon pull-left&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;\n        &lt;span class=&quot;title&quot;&gt;Home&lt;\/span&gt;\n        &lt;span class=&quot;ion-ios-search pull-right&quot;&gt;&lt;\/span&gt;\n        &lt;div class=&quot;search&quot;&gt;\n        &lt;form method=&quot;post&quot;&gt;\n          &lt;input type=&quot;search&quot; placeholder=&quot;Search Here&quot;&gt;\n        &lt;\/form&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;sidebar&quot;&gt;\n        &lt;div class=&quot;sidebar-overlay&quot;&gt;&lt;\/div&gt;\n        &lt;div class=&quot;sidebar-content&quot;&gt;\n          &lt;div class=&quot;top-head&quot;&gt;\n            &lt;div class=&quot;name&quot;&gt;John Dou&lt;\/div&gt;\n            &lt;div class=&quot;email&quot;&gt;john_dou@gmail.com&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;nav-left&quot;&gt;\n            &lt;a href=&quot;#home&quot;&gt;&lt;span class=&quot;ion-ios-home-outline&quot;&gt;&lt;\/span&gt; Home&lt;\/a&gt;\n            &lt;a href=&quot;#alarm&quot;&gt;&lt;span class=&quot;ion-ios-list-outline&quot;&gt;&lt;\/span&gt; Alarm&lt;\/a&gt;\n            &lt;a href=&quot;#compose&quot;&gt;&lt;span class=&quot;ion-ios-compose-outline&quot;&gt;&lt;\/span&gt; Compose&lt;\/a&gt;\n            &lt;a href=&quot;#chats&quot;&gt;&lt;span class=&quot;ion-ios-chatboxes-outline&quot;&gt;&lt;\/span&gt; Chats&lt;\/a&gt;\n            &lt;a href=&quot;#profile&quot;&gt;&lt;span class=&quot;ion-ios-person-outline&quot;&gt;&lt;\/span&gt; Profile&lt;\/a&gt;\n            &lt;a href=&quot;#settings&quot;&gt;&lt;span class=&quot;ion-ios-gear-outline&quot;&gt;&lt;\/span&gt; Settings&lt;\/a&gt;\n            &lt;a href=&quot;#credits&quot;&gt;&lt;span class=&quot;ion-ios-information-outline&quot;&gt;&lt;\/span&gt; Credits&lt;\/a&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;content&quot;&gt;\n        &lt;div class=&quot;html search&quot;&gt;\n          &lt;div class=&quot;title bounceInDown animated&quot;&gt;Search Result&lt;\/div&gt;\n          &lt;p class=&quot;flipInX animated&quot;&gt;Sorry,&lt;br&gt;no matches found for &lt;b class=&quot;key&quot;&gt;&lt;\/b&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;html welcome visible&quot;&gt;\n          &lt;div class=&quot;datetime&quot;&gt;\n            &lt;div class=&quot;day lightSpeedIn animated&quot;&gt;Thursday&lt;\/div&gt;\n            &lt;div class=&quot;date lightSpeedIn animated&quot;&gt;June 18, 2015&lt;\/div&gt;\n            &lt;div class=&quot;time lightSpeedIn animated&quot;&gt;08:00 AM&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;html alarm&quot;&gt;\n          &lt;div class=&quot;forecast clearfix&quot;&gt;\n            &lt;div class=&quot;datetime pull-left bounceInLeft animated&quot;&gt;\n              &lt;div class=&quot;day&quot;&gt;Thursday&lt;\/div&gt;\n              &lt;div class=&quot;date&quot;&gt;June 18, 2015&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;temperature pull-right bounceInRight animated&quot;&gt;\n              &lt;div class=&quot;unit&quot;&gt;&lt;span class=&quot;ion-ios-sunny-outline&quot;&gt;&lt;\/span&gt; 34&lt;i&gt;&amp;deg;&lt;\/i&gt;&lt;\/div&gt;\n              &lt;div class=&quot;location&quot;&gt;Los Angeles, USA&lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;alarm-list&quot;&gt;\n            &lt;div class=&quot;note clearfix slideInRight animated&quot;&gt;\n              &lt;div class=&quot;time pull-left&quot;&gt;\n                &lt;div class=&quot;hour&quot;&gt;9&lt;\/div&gt;\n                &lt;div class=&quot;shift&quot;&gt;AM&lt;\/div&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;to-do pull-left&quot;&gt;\n                &lt;div class=&quot;title&quot;&gt;Finish HTML Coding&lt;\/div&gt;\n                &lt;div class=&quot;subject&quot;&gt;Web UI&lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;note clearfix slideInRight animated&quot;&gt;\n              &lt;div class=&quot;time pull-left&quot;&gt;\n                &lt;div class=&quot;hour&quot;&gt;1&lt;\/div&gt;\n                &lt;div class=&quot;shift&quot;&gt;PM&lt;\/div&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;to-do pull-left&quot;&gt;\n                &lt;div class=&quot;title&quot;&gt;Lunch Break&lt;\/div&gt;\n                &lt;div class=&quot;subject&quot;&gt;&lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;note clearfix slideInRight animated&quot; data-revert=&quot;slideOutRight&quot;&gt;\n              &lt;div class=&quot;time pull-left&quot;&gt;\n                &lt;div class=&quot;hour&quot;&gt;3&lt;\/div&gt;\n                &lt;div class=&quot;shift&quot;&gt;PM&lt;\/div&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;to-do pull-left&quot;&gt;\n                &lt;div class=&quot;title&quot;&gt;Design Stand Up&lt;\/div&gt;\n                &lt;div class=&quot;subject&quot;&gt;Hangouts&lt;\/div&gt;\n                &lt;div class=&quot;user-list clearfix&quot;&gt;\n                  &lt;div class=&quot;user pull-left&quot;&gt;&lt;img src=&quot;https:\/\/raw.githubusercontent.com\/khadkamhn\/secret-project\/master\/img\/usr-i.png&quot;&gt;&lt;\/div&gt;\n                  &lt;div class=&quot;user pull-left&quot;&gt;&lt;img src=&quot;https:\/\/raw.githubusercontent.com\/khadkamhn\/secret-project\/master\/img\/usr-ii.png&quot;&gt;&lt;\/div&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;html compose&quot;&gt;\n          &lt;div class=&quot;forms&quot;&gt;\n            &lt;div class=&quot;group clearfix slideInRight animated&quot;&gt;\n              &lt;label class=&quot;pull-left&quot; for=&quot;compose-time&quot;&gt;&lt;span class=&quot;ion-ios-time-outline&quot;&gt;&lt;\/span&gt; Time&lt;\/label&gt;\n              &lt;input class=&quot;pull-right&quot; id=&quot;compose-time&quot; type=&quot;time&quot;&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;group clearfix slideInLeft animated&quot;&gt;\n              &lt;label class=&quot;pull-left&quot; for=&quot;compose-date&quot;&gt;&lt;span class=&quot;ion-ios-calendar-outline&quot;&gt;&lt;\/span&gt; Date&lt;\/label&gt;\n              &lt;input class=&quot;pull-right&quot; id=&quot;compose-date&quot; type=&quot;date&quot;&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;group clearfix slideInRight animated&quot;&gt;\n              &lt;label class=&quot;pull-left&quot; for=&quot;compose-title&quot;&gt;&lt;span class=&quot;ion-ios-paper-outline&quot;&gt;&lt;\/span&gt; Title&lt;\/label&gt;\n              &lt;input class=&quot;pull-right&quot; id=&quot;compose-title&quot; type=&quot;text&quot;&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;group clearfix slideInLeft animated&quot;&gt;\n              &lt;label class=&quot;visible&quot; for=&quot;compose-detail&quot;&gt;&lt;span class=&quot;ion-ios-list-outline&quot;&gt;&lt;\/span&gt; Task&lt;\/label&gt;\n              &lt;textarea class=&quot;visible&quot; id=&quot;compose-detail&quot; rows=&quot;3&quot;&gt;&lt;\/textarea&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;action flipInY animated&quot;&gt;\n              &lt;button class=&quot;btn&quot;&gt;Compose&lt;\/button&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;html chats&quot;&gt;\n          &lt;div class=&quot;tabs-list clearfix&quot;&gt;\n            &lt;a href=&quot;#&quot; class=&quot;tab active&quot;&gt;Users&lt;\/a&gt;\n            &lt;a href=&quot;#&quot; class=&quot;tab&quot;&gt;Messages&lt;\/a&gt;\n            &lt;a href=&quot;#&quot; class=&quot;tab&quot;&gt;Groups&lt;\/a&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;active-users&quot;&gt;\n            &lt;div class=&quot;user clearfix rotateInDownLeft animated&quot;&gt;\n              &lt;div class=&quot;photo pull-left&quot;&gt;\n                &lt;img src=&quot;https:\/\/randomuser.me\/api\/portraits\/men\/99.jpg&quot;&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;desc pull-left&quot;&gt;\n                &lt;p class=&quot;name&quot;&gt;Connor Hartigan&lt;\/p&gt;\n                &lt;p class=&quot;position&quot;&gt;Web &amp;amp; UI Designer&lt;\/p&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;idle pull-right&quot;&gt;&lt;span class=&quot;away&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;user clearfix rotateInDownRight animated&quot;&gt;\n              &lt;div class=&quot;photo pull-left&quot;&gt;\n                &lt;img src=&quot;https:\/\/randomuser.me\/api\/portraits\/men\/89.jpg&quot;&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;desc pull-left&quot;&gt;\n                &lt;p class=&quot;name&quot;&gt;Jacob Lennon&lt;\/p&gt;\n                &lt;p class=&quot;position&quot;&gt;Front-End Developer&lt;\/p&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;idle pull-right&quot;&gt;&lt;span class=&quot;offline&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;user clearfix rotateInDownLeft animated&quot;&gt;\n              &lt;div class=&quot;photo pull-left&quot;&gt;\n                &lt;img src=&quot;https:\/\/randomuser.me\/api\/portraits\/men\/79.jpg&quot;&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;desc pull-left&quot;&gt;\n                &lt;p class=&quot;name&quot;&gt;Didier Mailly&lt;\/p&gt;\n                &lt;p class=&quot;position&quot;&gt;Co-Founder&lt;\/p&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;idle pull-right&quot;&gt;&lt;span class=&quot;away&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;user clearfix rotateInDownRight animated&quot;&gt;\n              &lt;div class=&quot;photo pull-left&quot;&gt;\n                &lt;img src=&quot;https:\/\/randomuser.me\/api\/portraits\/men\/69.jpg&quot;&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;desc pull-left&quot;&gt;\n                &lt;p class=&quot;name&quot;&gt;Miguel Cunha Ferreira&lt;\/p&gt;\n                &lt;p class=&quot;position&quot;&gt;Sales Manager&lt;\/p&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;idle pull-right&quot;&gt;&lt;span class=&quot;online&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;user clearfix rotateInDownLeft animated&quot;&gt;\n              &lt;div class=&quot;photo pull-left&quot;&gt;\n                &lt;img src=&quot;https:\/\/randomuser.me\/api\/portraits\/men\/59.jpg&quot;&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;desc pull-left&quot;&gt;\n                &lt;p class=&quot;name&quot;&gt;Eric Yuriev&lt;\/p&gt;\n                &lt;p class=&quot;position&quot;&gt;App Developer&lt;\/p&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;idle pull-right&quot;&gt;&lt;span class=&quot;online&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;user clearfix rotateInDownRight animated&quot;&gt;\n              &lt;div class=&quot;photo pull-left&quot;&gt;\n                &lt;img src=&quot;https:\/\/randomuser.me\/api\/portraits\/men\/49.jpg&quot;&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;desc pull-left&quot;&gt;\n                &lt;p class=&quot;name&quot;&gt;Theodore Clark&lt;\/p&gt;\n                &lt;p class=&quot;position&quot;&gt;Project Manager&lt;\/p&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;idle pull-right&quot;&gt;&lt;span class=&quot;online&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;html settings&quot;&gt;\n          &lt;div class=&quot;setting-list&quot;&gt;\n            &lt;div class=&quot;gear clearfix slideInRight animated&quot;&gt;\n              &lt;div class=&quot;title pull-left&quot;&gt;General&lt;\/div&gt;\n              &lt;div class=&quot;action pull-right&quot;&gt;&lt;span class=&quot;ion-ios-arrow-right&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;gear clearfix slideInLeft animated&quot;&gt;\n              &lt;div class=&quot;title pull-left&quot;&gt;&lt;label for=&quot;gear-notice&quot;&gt;Notification&lt;\/label&gt;&lt;\/div&gt;\n              &lt;div class=&quot;action pull-right&quot;&gt;&lt;input id=&quot;gear-notice&quot; class=&quot;on-off&quot; type=&quot;checkbox&quot;&gt;&lt;label for=&quot;gear-notice&quot;&gt;&lt;\/label&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;gear clearfix slideInRight animated&quot;&gt;\n              &lt;div class=&quot;title pull-left&quot;&gt;&lt;label for=&quot;gear-sound&quot;&gt;Sound&lt;\/label&gt;&lt;\/div&gt;\n              &lt;div class=&quot;action pull-right&quot;&gt;&lt;input id=&quot;gear-sound&quot; class=&quot;on-off&quot; type=&quot;checkbox&quot; checked&gt;&lt;label for=&quot;gear-sound&quot;&gt;&lt;\/label&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;gear clearfix slideInLeft animated&quot;&gt;\n              &lt;div class=&quot;title pull-left&quot;&gt;Theme&lt;\/div&gt;\n              &lt;div class=&quot;action pull-right&quot;&gt;Standard &lt;span class=&quot;ion-ios-arrow-right&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;gear clearfix slideInRight animated&quot;&gt;\n              &lt;div class=&quot;title pull-left&quot;&gt;Support&lt;\/div&gt;\n              &lt;div class=&quot;action pull-right&quot;&gt;&lt;span class=&quot;ion-ios-arrow-right&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;gear clearfix slideInLeft animated&quot;&gt;\n              &lt;div class=&quot;title pull-left&quot;&gt;Privacy&lt;\/div&gt;\n              &lt;div class=&quot;action pull-right&quot;&gt;&lt;span class=&quot;ion-ios-arrow-right&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;html profile&quot;&gt;\n          &lt;div class=&quot;photo flipInX animated&quot;&gt;\n            &lt;img src=&quot;https:\/\/images.unsplash.com\/photo-1597223557154-721c1cecc4b0?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=880&amp;q=80&quot;&gt;\n            &lt;div class=&quot;social&quot;&gt;\n              &lt;a href=&quot;https:\/\/facebook.com\/khadkamhn&quot; class=&quot;soc-item soc-count-1&quot;&gt;&lt;span class=&quot;ion-social-facebook&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\n              &lt;a href=&quot;https:\/\/twitter.com\/khadkamhn&quot; class=&quot;soc-item soc-count-2&quot;&gt;&lt;span class=&quot;ion-social-twitter&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\n              &lt;a href=&quot;https:\/\/github.com\/khadkamhn&quot; class=&quot;soc-item soc-count-3&quot;&gt;&lt;span class=&quot;ion-social-github&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\n              &lt;a href=&quot;https:\/\/pinterest.com\/khadkamhn&quot; class=&quot;soc-item soc-count-4&quot;&gt;&lt;span class=&quot;ion-social-pinterest&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\n              &lt;a href=&quot;https:\/\/np.linkedin.com\/in\/khadkamhn&quot; class=&quot;soc-item soc-count-5&quot;&gt;&lt;span class=&quot;ion-social-linkedin&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\n              &lt;a href=&quot;https:\/\/codepen.io\/khadkamhn&quot; class=&quot;soc-item soc-count-6&quot;&gt;&lt;span class=&quot;ion-social-codepen&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\n              &lt;a href=&quot;skype:khadkamhn?userinfo&quot; class=&quot;soc-item soc-count-7&quot;&gt;&lt;span class=&quot;ion-social-skype&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\n              &lt;a href=&quot;http:\/\/dribbble.com\/khadkamhn&quot; class=&quot;soc-item soc-count-8&quot;&gt;&lt;span class=&quot;ion-social-dribbble&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;details&quot;&gt;\n            &lt;p class=&quot;heading flipInY animated&quot;&gt;\n              &lt;span class=&quot;name&quot;&gt;John Dou&lt;\/span&gt;&lt;span class=&quot;position&quot;&gt;Arhitector&lt;\/span&gt;\n            &lt;\/p&gt;\n            &lt;p class=&quot;text fadeInUp animated&quot;&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum provident totam maiores. Dicta officia sunt facere possimus sed non suscipit magni minima alias. Assumenda natus, aperiam impedit commodi error voluptates.\n         &lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;html credits&quot;&gt;\n          &lt;div class=&quot;title flipInY animated&quot;&gt;I have been using the following assets to build this design&lt;\/div&gt;\n          &lt;div class=&quot;credit-ol&quot;&gt;\n            &lt;div class=&quot;credit-li lightSpeedIn animated&quot;&gt;&lt;a href=&quot;https:\/\/www.google.com\/fonts\/specimen\/Roboto&quot; target=&quot;_blank&quot;&gt;roboto&lt;\/a&gt; &lt;span&gt;for typography&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;credit-li lightSpeedIn animated&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;jquery&lt;\/a&gt; &lt;span&gt;for design\/ui&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;credit-li lightSpeedIn animated&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;ionicons&lt;\/a&gt; &lt;span&gt;for icons&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;credit-li lightSpeedIn animated&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;ui faces&lt;\/a&gt; &lt;span&gt;for avatar&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;credit-li lightSpeedIn animated&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;animate.css&lt;\/a&gt; &lt;span&gt;for animation&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;credit-li lightSpeedIn animated&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;concept of design&lt;\/a&gt; &lt;span&gt;for layout&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;credit-li lightSpeedIn animated&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;unsplash.com&lt;\/a&gt; &lt;span&gt;for background&lt;\/span&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;text zoomInUp animated&quot;&gt;I'm glad for using these resources and expecting same as time ahead&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;nav&quot;&gt;\n        &lt;a href=&quot;#profile&quot; class=&quot;nav-item nav-count-1&quot;&gt;&lt;i class=&quot;ion-ios-person-outline&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;invisible&quot;&gt;Profile&lt;\/span&gt;&lt;\/a&gt;\n        &lt;a href=&quot;#compose&quot; class=&quot;nav-item nav-count-2&quot;&gt;&lt;i class=&quot;ion-ios-compose-outline&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;invisible&quot;&gt;Compose&lt;\/span&gt;&lt;\/a&gt;\n        &lt;a href=&quot;#chats&quot; class=&quot;nav-item nav-count-3&quot;&gt;&lt;i class=&quot;ion-ios-chatboxes-outline&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;invisible&quot;&gt;Chats&lt;\/span&gt;&lt;\/a&gt;\n        &lt;a href=&quot;#alarm&quot; class=&quot;nav-item nav-count-4&quot;&gt;&lt;i class=&quot;ion-ios-alarm-outline&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;invisible&quot;&gt;Alarm&lt;\/span&gt;&lt;\/a&gt;\n        &lt;a href=&quot;#toggle&quot; class=&quot;mask&quot;&gt;&lt;i class=&quot;ion-ios-plus-empty&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n \n  \n  \n \n&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.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;}\">body {\n\tbackground: teal;\n\tfont: 300 18px\/18px Roboto;\n}\n\n*,\n:after,\n:before {\n\tbox-sizing: border-box;\n}\n\n.clearfix:after,\n.clearfix:before {\n\tcontent: &quot;&quot;;\n\tdisplay: table;\n}\n\n.clearfix:after {\n\tclear: both;\n\tdisplay: block;\n}\n\n.mobile-wrap {\n\tmargin: auto;\n\twidth: 300px;\n\theight: 534px;\n\toverflow: hidden;\n\tposition: relative;\n\tbackground: url(https:\/\/raw.githubusercontent.com\/khadkamhn\/secret-project\/master\/img\/background.jpg)\n\t\tcenter no-repeat;\n\tbox-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),\n\t\t0 17px 50px 0 rgba(0, 0, 0, 0.19);\n}\n\n.mobile-wrap:before {\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tcontent: &quot;&quot;;\n\tposition: absolute;\n\tbackground: rgba(90, 93, 165, 0.8);\n\tbackground: linear-gradient(\n\t\tto bottom,\n\t\trgba(90, 93, 165, 1),\n\t\trgba(0, 0, 0, 0.7)\n\t);\n}\n\n.mobile {\n\tz-index: 99;\n\tcolor: #fff;\n\theight: 100%;\n\tpadding: 15px;\n\tposition: relative;\n}\n\n.mobile .header {\n\tclear: both;\n\toverflow: hidden;\n\tposition: relative;\n}\n\n.mobile .header &gt; span {\n\tfont-size: 24px;\n\tmin-width: 24px;\n}\n\n.mobile .header &gt; .title {\n\tfont-size: 16px;\n\tline-height: 24px;\n\tmargin-left: 15px;\n}\n\n\n.mobile .header .pull-right {\n\tfloat: right;\n}\n.mobile .header .ion-ios-search {\n\tz-index: 999;\n\tposition: relative;\n}\n\n.mobile .header .ion-ios-arrow-back {\n\tmin-width: 25px;\n}\n\n.mobile .header .ion-ios-navicon &gt; i {\n\theight: 1px;\n\twidth: 20px;\n\tmargin-top: 5px;\n\tbackground: #fff;\n\tposition: relative;\n\tdisplay: inline-block;\n}\n\n.mobile .header .ion-ios-navicon &gt; i:after,\n.mobile .header .ion-ios-navicon &gt; i:before {\n\tcontent: &quot;&quot;;\n\twidth: inherit;\n\theight: inherit;\n\tposition: absolute;\n\tbackground: inherit;\n}\n\n.mobile .header .ion-ios-navicon &gt; i:before {\n\tbottom: 12px;\n}\n\n.mobile .header .ion-ios-navicon &gt; i:after {\n\tbottom: 6px;\n}\n.mobile .header .search {\n\tright: 0;\n\ttop: 0;\n\tposition: absolute;\n}\n.mobile .header .search input {\n\twidth: 0;\n\tcolor: #fff;\n\theight: 24px;\n\tborder: none;\n\tfont-size: 16px;\n\tmax-width: 150px;\n\tfont-weight: 300;\n\tpadding-right: 30px;\n\tfont-family: inherit;\n\tbackground: transparent;\n\ttransition: all 0.3s ease-in-out 0s;\n\tborder-bottom: 1px solid transparent;\n\t-webkit-appearance: textfield;\n}\n.mobile .header .search input:focus {\n\toutline: none;\n}\n.mobile .header .search input::-webkit-search-decoration,\n.mobile .header .search input::-webkit-search-cancel-button {\n\t-webkit-appearance: none;\n}\n.mobile .header .search .search-visible {\n\twidth: 100%;\n\tborder-bottom-color: #aaa;\n}\n.nav {\n\tright: 15px;\n\tz-index: 20;\n\twidth: 45px;\n\tbottom: 15px;\n\theight: 45px;\n\tdisplay: block;\n\tposition: absolute;\n\tline-height: 45px;\n\tborder-radius: 50%;\n\tbox-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);\n}\n\n.mask {\n\tz-index: 21;\n\tcolor: #fff;\n\twidth: inherit;\n\theight: inherit;\n\tcursor: pointer;\n\tfont-size: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tbackground: #f23363;\n\ttransition: all 0.1s ease-in-out 0s;\n}\n\n.nav.active .mask {\n\tbackground: #cf0e3f;\n\ttransform: rotate(-135deg);\n}\n\n.nav:after {\n\ttop: 0;\n\tleft: 0;\n\tcontent: &quot;&quot;;\n\twidth: inherit;\n\theight: inherit;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tbackground: #f23363;\n\ttransition: all 0.1s ease-in-out 0s;\n}\n\n.nav.active:after {\n\ttop: -125px;\n\tleft: -125px;\n\twidth: 350px;\n\theight: 350px;\n}\n\n.nav-item {\n\ttop: 0;\n\tleft: 0;\n\tz-index: 19;\n\twidth: 45px;\n\theight: 45px;\n\tcolor: #fff;\n\tfont-size: 24px;\n\ttransform: none;\n\tline-height: 45px;\n\tborder-radius: 50%;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: all 0.3s cubic-bezier(0.68, 1.55, 0.265, 1);\n}\n\n.nav.active .nav-count-1 {\n\ttransform: translate(10px, -100px);\n}\n\n.nav.active .nav-count-2 {\n\ttransform: translate(-35px, -80px);\n}\n\n.nav.active .nav-count-3 {\n\ttransform: translate(-80px, -45px);\n}\n\n.nav.active .nav-count-4 {\n\ttransform: translate(-100px, 0);\n}\n\n.pull-left {\n  cursor: pointer;\n}\n\n.pull-right {\n\tfloat: right;\n}\n\n.html,\n.invisible {\n\tdisplay: none;\n}\n\n.html.visible,\n.visible {\n\tdisplay: block;\n}\n\n.sidebar .sidebar-content,\n.sidebar .sidebar-overlay {\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tposition: absolute;\n\ttransition: all 0.3s ease-in-out 0s;\n}\n\n.sidebar .sidebar-overlay {\n\tright: 0;\n\topacity: 0;\n\twidth: 100%;\n\tz-index: 999;\n\ttransform: scale(0);\n\tbackground: rgba(0, 0, 0, 0.4);\n}\n\n.sidebar .sidebar-content {\n\twidth: 80%;\n\tcolor: #333;\n\tpadding: 15px;\n\tz-index: 9999;\n\tbackground: #fff;\n\ttransform: translateX(-100%);\n}\n\n.sidebar.active .sidebar-content {\n\ttransform: translateX(0);\n}\n\n.sidebar.active .sidebar-overlay {\n\topacity: 1;\n\ttransform: scale(1);\n}\n\n.sidebar .sidebar-content .top-head .name {\n\tfont-size: 28px;\n\tfont-weight: 400;\n\tmargin-bottom: 5px;\n}\n\n.sidebar .sidebar-content .top-head .email {\n\tfont-size: 13px;\n\tmargin-bottom: 50px;\n}\n\n.sidebar .sidebar-content .nav-left &gt; a {\n\tcolor: #333;\n\tdisplay: block;\n\tfont-size: 16px;\n\tpadding: 10px 0;\n\tline-height: 24px;\n\tvertical-align: top;\n\ttext-decoration: none;\n}\n\n.sidebar .sidebar-content .nav-left &gt; a &gt; span {\n\tcolor: #aaa;\n\tfont-size: 24px;\n\tmin-width: 40px;\n\tdisplay: inline-block;\n}\n\n.html.chats,\n.html.search,\n.html.compose,\n.html.credits,\n.html.settings,\n.html.welcome {\n\tmargin-top: 50px;\n}\n\n.on-off {\n\tdisplay: none;\n}\n\n.on-off + label {\n\twidth: 30px;\n\theight: 10px;\n\tposition: relative;\n\tborder-radius: 5px;\n\tbackground: #dedee0;\n\tdisplay: inline-block;\n\ttransition: all 0.3s ease-in-out 0s;\n}\n\n.on-off + label:after {\n\tleft: 0;\n\ttop: -2px;\n\twidth: 15px;\n\tcontent: &quot;&quot;;\n\theight: 15px;\n\tposition: absolute;\n\tborder-radius: 50%;\n\tbackground: #bebdc2;\n\ttransition: all 0.3s ease-in-out 0s;\n}\n\n.on-off:checked + label {\n\tbackground: #fd99b3;\n}\n\n.on-off:checked + label:after {\n\tleft: 15px;\n\tbackground: #fb3666;\n}\n\n.btn {\n\tcolor: #eee;\n\twidth: 100%;\n\tborder: none;\n\tfont-size: 16px;\n\tpadding: 12px 24px;\n\tbackground: #cf0e3f;\n\tborder-radius: 30px;\n}\n.search .title {\n\tfont-size: 24px;\n}\n.search .title p {\n\tmargin: 0;\n\tfont-size: 16px;\n\tline-height: 18px;\n}\n.welcome .datetime .date,\n.welcome .datetime .day {\n\tmargin-bottom: 15px;\n}\n\n.welcome .datetime .day {\n\tfont-size: 28px;\n\t-webkit-animation-duration: 0.2s;\n\tanimation-duration: 0.2s;\n}\n\n.welcome .datetime .date {\n\t-webkit-animation-duration: 0.35s;\n\tanimation-duration: 0.35s;\n}\n\n.forecast {\n\tmargin-top: 30px;\n}\n\n.forecast .temperature {\n\ttext-align: right;\n}\n\n.forecast .datetime .day,\n.forecast .temperature .unit {\n\tfont-size: 28px;\n\tmin-height: 33px;\n}\n\n.forecast .datetime .date,\n.forecast .temperature .location {\n\tcolor: #ccc;\n\tfont-size: 12px;\n}\n\n.forecast .temperature .unit &gt; i {\n\ttop: -2px;\n\tfont-style: normal;\n\tposition: relative;\n}\n\n.forecast .animated {\n\t-webkit-animation-duration: 0.2s;\n\tanimation-duration: 0.2s;\n}\n\n.alarm-list {\n\tmargin-top: 50px;\n}\n\n.alarm-list .note {\n\tpadding: 10px 0;\n}\n\n.alarm-list .note:nth-child(1) {\n\t-webkit-animation-duration: 0.2s;\n\tanimation-duration: 0.2s;\n}\n\n.alarm-list .note:nth-child(2) {\n\t-webkit-animation-duration: 0.3s;\n\tanimation-duration: 0.3s;\n}\n\n.alarm-list .note:nth-child(3) {\n\t-webkit-animation-duration: 0.4s;\n\tanimation-duration: 0.4s;\n}\n\n.alarm-list .note .time {\n\tmin-width: 35px;\n\tmargin-right: 30px;\n}\n\n.alarm-list .note .time &gt; .shift,\n.alarm-list .note .to-do &gt; .subject {\n\tcolor: #ccc;\n\tfont-size: 11px;\n}\n\n.alarm-list .note .time {\n\ttext-align: center;\n}\n\n.alarm-list .note .to-do &gt; .title {\n\tfont-size: 14px;\n}\n\n.alarm-list .note:not(:last-child) {\n\tposition: relative;\n}\n\n.alarm-list .note:not(:last-child):before {\n\tbottom: 0;\n\twidth: 82%;\n\tcontent: &quot;&quot;;\n\tright: -15px;\n\tposition: absolute;\n\tborder-bottom: 1px solid rgba(170, 170, 170, 0.5);\n}\n\n.user-list .user {\n\twidth: 30px;\n\theight: 30px;\n\tmargin: 4px;\n\toverflow: hidden;\n\tborder-radius: 50%;\n\tdisplay: inline-block;\n\tborder: 1px solid #bbb;\n}\n\n.user-list .user &gt; img {\n\twidth: 100%;\n}\n\n.compose .forms .group {\n\tmargin-bottom: 15px;\n}\n\n.compose .forms .group &gt; label {\n\tpadding: 6px 0;\n\tmin-width: 40px;\n\tdisplay: inline-block;\n}\n\n.compose .forms .group &gt; label &gt; span {\n\tmin-width: 20px;\n\tdisplay: inline-block;\n}\n\n.compose .forms .group input,\n.compose .forms .group textarea {\n\tcolor: #fff;\n\tborder: none;\n\tresize: none;\n\tmin-width: 185px;\n\tbackground: 0 0;\n\tpadding: 5px 10px 1px;\n\tborder-bottom: 1px solid rgba(170, 170, 170, 0.6);\n}\n\n.compose .forms .visible {\n\twidth: 100%;\n\tdisplay: block !important;\n}\n\n.compose .forms .action {\n\tmargin-top: 50px;\n}\n\n.compose .forms .group:nth-child(1) {\n\t-webkit-animation-duration: 0.1s;\n\tanimation-duration: 0.1s;\n}\n\n.compose .forms .group:nth-child(2) {\n\t-webkit-animation-duration: 0.2s;\n\tanimation-duration: 0.2s;\n}\n\n.compose .forms .group:nth-child(3) {\n\t-webkit-animation-duration: 0.3s;\n\tanimation-duration: 0.3s;\n}\n\n.compose .forms .group:nth-child(4) {\n\t-webkit-animation-duration: 0.4s;\n\tanimation-duration: 0.4s;\n}\n\n.chats .tabs-list {\n\tmargin-bottom: 15px;\n}\n\n.chats .tabs-list .tab {\n\tfloat: left;\n\tcolor: #aaa;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tmargin-right: 15px;\n\tpadding-bottom: 2px;\n\ttext-decoration: none;\n\ttext-transform: uppercase;\n\tborder-bottom: 2px solid transparent;\n}\n\n.chats .tabs-list .tab.active,\n.chats .tabs-list .tab:hover {\n\tcolor: #fff;\n\tborder-bottom: 2px solid;\n}\n\n.chats .active-users .user {\n\tpadding: 5px 0;\n\tcursor: default;\n}\n\n.chats .active-users .photo {\n\twidth: 40px;\n\theight: 40px;\n\toverflow: hidden;\n\tborder-radius: 50%;\n\tborder: 2px solid #fff;\n\tbox-shadow: 0 3px 2px rgba(0, 0, 0, 0.4);\n}\n\n.chats .active-users .photo img {\n\twidth: 100%;\n}\n\n.chats .active-users .desc {\n\tmargin-left: 15px;\n}\n\n.chats .active-users .desc p {\n\tmargin: 0;\n\tfont-size: 14px;\n}\n\n.chats .active-users .desc .name {\n\tfont-weight: 400;\n}\n\n.chats .active-users .desc .position {\n\tcolor: #aaa;\n\tfont-size: 12px;\n}\n\n.chats .active-users .user .idle {\n\theight: 40px;\n\tposition: relative;\n}\n\n.chats .active-users .user .idle &gt; span {\n\ttop: 50%;\n\tright: 0;\n\twidth: 15px;\n\theight: 15px;\n\tmargin-top: -7.5px;\n\tposition: absolute;\n\tborder-radius: 50%;\n\tdisplay: inline-block;\n\tborder: 1px solid #fff;\n}\n\n.chats .active-users .user .idle &gt; .online {\n\tbackground: #2ecc71;\n}\n\n.chats .active-users .user .idle &gt; .offline {\n\tbackground: #95a5a6;\n}\n\n.chats .active-users .user .idle &gt; .away {\n\tbackground: #f2ca27;\n}\n\n.chats .active-users .user:nth-child(1) {\n\t-webkit-animation-duration: 0.18s;\n\tanimation-duration: 0.18s;\n}\n\n.chats .active-users .user:nth-child(2) {\n\t-webkit-animation-duration: 0.25s;\n\tanimation-duration: 0.25s;\n}\n\n.chats .active-users .user:nth-child(3) {\n\t-webkit-animation-duration: 0.35s;\n\tanimation-duration: 0.35s;\n}\n\n.chats .active-users .user:nth-child(4) {\n\t-webkit-animation-duration: 0.4s;\n\tanimation-duration: 0.4s;\n}\n\n.chats .active-users .user:nth-child(5) {\n\t-webkit-animation-duration: 0.5s;\n\tanimation-duration: 0.5s;\n}\n\n.chats .active-users .user:nth-child(6) {\n\t-webkit-animation-duration: 0.6s;\n\tanimation-duration: 0.6s;\n}\n\n.chats .active-users .user .idle &gt; span:before {\n\tright: 20px;\n\tbottom: -2px;\n\tdisplay: none;\n\tpadding: 0 5px;\n\tfont-size: 12px;\n\tposition: absolute;\n\tborder-radius: 2px;\n\tcontent: attr(class);\n\tbackground: rgba(0, 0, 0, 0.4);\n\ttext-transform: capitalize;\n}\n\n.chats .active-users .user:hover .idle &gt; span:before {\n\tdisplay: block;\n\t-webkit-animation: fadeInRight 0.4s;\n\tanimation: fadeInRight 0.4s;\n}\n\n.profile {\n\tmargin-top: 40px;\n}\n\n.profile .photo {\n\tmargin: auto;\n\twidth: 150px;\n\theight: 150px;\n\toverflow: hidden;\n\tposition: relative;\n\tborder-radius: 50%;\n\tborder: 6px solid #ccc;\n}\n\n.profile .photo img {\n\twidth: 100%;\n\tborder-radius: 50%;\n\ttransition: all 0.2s ease-in-out 0s;\n}\n\n.profile .photo .social {\n\ttop: 50%;\n\tleft: 50%;\n\twidth: 30px;\n\tz-index: 99;\n\theight: 30px;\n\tmargin-top: -15px;\n\tmargin-left: -15px;\n\tposition: absolute;\n\ttransform: scale(0);\n\ttransition: all 0.4s ease-in-out 0s;\n}\n\n.profile .photo .social .soc-item {\n\ttop: 0;\n\tleft: 0;\n\tz-index: 19;\n\twidth: 35px;\n\theight: 35px;\n\tcolor: #eee;\n\tfont-size: 24px;\n\ttransform: none;\n\tline-height: 35px;\n\tborder-radius: 50%;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: all 0.3s cubic-bezier(0.68, 1.55, 0.265, 1);\n}\n\n.profile .photo .social .soc-item:hover {\n\tcolor: #fff;\n}\n\n.profile .photo:after {\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tz-index: 0;\n\tcontent: &quot;&quot;;\n\tposition: absolute;\n\tborder-radius: 50%;\n\ttransform: scale(0);\n\tbackground: rgba(0, 0, 0, 0.2);\n\ttransition: all 0.3s ease-in-out 0s;\n}\n\n.profile .photo:hover img {\n\ttransform: scale(0.5) rotate(10deg);\n}\n\n.profile .photo:hover .social,\n.profile .photo:hover:after {\n\ttransform: scale(1);\n}\n\n.profile .photo:hover .social .soc-count-1 {\n\ttransform: translate(0, -50px);\n}\n\n.profile .photo:hover .social .soc-count-2 {\n\ttransform: translate(-35px, -35px);\n}\n\n.profile .photo:hover .social .soc-count-3 {\n\ttransform: translate(-50px, 0);\n}\n\n.profile .photo:hover .social .soc-count-4 {\n\ttransform: translate(-35px, 35px);\n}\n\n.profile .photo:hover .social .soc-count-5 {\n\ttransform: translate(0, 50px);\n}\n\n.profile .photo:hover .social .soc-count-6 {\n\ttransform: translate(35px, 35px);\n}\n\n.profile .photo:hover .social .soc-count-7 {\n\ttransform: translate(50px, 0);\n}\n\n.profile .photo:hover .social .soc-count-8 {\n\ttransform: translate(35px, -35px);\n}\n\n.profile .details .heading {\n\tpadding: 5px;\n\tmargin: 10px 0;\n\ttext-align: center;\n\tborder-radius: 15px;\n\tbackground: rgba(0, 0, 0, 0.4);\n}\n\n.profile .details .heading &gt; .name {\n\tfont-size: 18px;\n\tfont-weight: 400;\n\tpadding-right: 5px;\n}\n\n.profile .details .heading &gt; .position {\n\tfont-size: 12px;\n\tpadding-left: 5px;\n\tvertical-align: 1px;\n\tborder-left: 1px solid;\n}\n\n.profile .details .text {\n\tmargin: 0;\n\tcolor: #ccc;\n\tline-height: 24px;\n\ttext-align: center;\n\t-webkit-animation-duration: 0.4s;\n\tanimation-duration: 0.4s;\n}\n\n.setting-list {\n\tmargin-left: -15px;\n\tmargin-right: -15px;\n}\n\n.setting-list .gear {\n\tpadding: 10px 15px;\n\tfont-size: 14px;\n\tfont-weight: 400;\n}\n\n.setting-list .gear:not(:last-child) {\n\tborder-bottom: 1px solid rgba(170, 170, 170, 0.4);\n}\n\n.setting-list .gear &gt; .action {\n\tcolor: #aaa;\n}\n\n.setting-list .gear:nth-child(1) {\n\t-webkit-animation-duration: 0.1s;\n\tanimation-duration: 0.1s;\n}\n\n.setting-list .gear:nth-child(2) {\n\t-webkit-animation-duration: 0.2s;\n\tanimation-duration: 0.2s;\n}\n\n.setting-list .gear:nth-child(3) {\n\t-webkit-animation-duration: 0.3s;\n\tanimation-duration: 0.3s;\n}\n\n.setting-list .gear:nth-child(4) {\n\t-webkit-animation-duration: 0.4s;\n\tanimation-duration: 0.4s;\n}\n\n.setting-list .gear:nth-child(5) {\n\t-webkit-animation-duration: 0.5s;\n\tanimation-duration: 0.5s;\n}\n\n.setting-list .gear:nth-child(6) {\n\t-webkit-animation-duration: 0.6s;\n\tanimation-duration: 0.6s;\n}\n\n.credits .title {\n\tline-height: 24px;\n\ttext-align: center;\n}\n\n.credits .credit-ol {\n\tmargin: 20px 0;\n\tcounter-reset: credits;\n}\n\n.credits .credit-li {\n\tline-height: 30px;\n\tposition: relative;\n\tpadding-left: 20px;\n}\n\n.credits .credit-li:before {\n\ttop: 0;\n\tleft: 0;\n\tposition: absolute;\n\tcontent: counter(credits);\n\tcounter-increment: credits;\n}\n\n.credits .credit-li:nth-child(1) {\n\t-webkit-animation-duration: 0.3s;\n\tanimation-duration: 0.3s;\n}\n\n.credits .credit-li:nth-child(2) {\n\t-webkit-animation-duration: 0.4s;\n\tanimation-duration: 0.4s;\n}\n\n.credits .credit-li:nth-child(3) {\n\t-webkit-animation-duration: 0.5s;\n\tanimation-duration: 0.5s;\n}\n\n.credits .credit-li:nth-child(4) {\n\t-webkit-animation-duration: 0.6s;\n\tanimation-duration: 0.6s;\n}\n\n.credits .credit-li:nth-child(5) {\n\t-webkit-animation-duration: 0.7s;\n\tanimation-duration: 0.7s;\n}\n\n.credits .credit-li:nth-child(6) {\n\t-webkit-animation-duration: 0.8s;\n\tanimation-duration: 0.8s;\n}\n\n.credits .credit-li a {\n\tcolor: inherit;\n\ttext-decoration: none;\n\tpadding: 1px 5px;\n\tborder-radius: 13px;\n\ttransition: all 0.6s ease-in-out 0s;\n}\n\n.credits .credit-li:hover a {\n\tbox-shadow: 150px 0 0 0 rgba(0, 0, 0, 0.4) inset;\n}\n\n.credits .credit-li span {\n\tfont-size: 13px;\n}\n\n.credits .text {\n\tmargin-top: 10px;\n\tline-height: 22px;\n\ttext-align: center;\n}\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;}\">$(function() {\n  App.init();\n});\nvar App = {\n  init: function() {\n        this.datetime(), this.side.nav(), this.search.bar(), this.navigation(), this.hyperlinks(), setInterval(&quot;App.datetime();&quot;, 1e3)\n  },\n  datetime: function() {\n        var e = new Array(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;),\n              t = new Array(&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;),\n              a = new Date,\n              i = a.getYear();\n        1e3 &gt; i &amp;&amp; (i += 1900);\n        var s = a.getDay(),\n              n = a.getMonth(),\n              r = a.getDate();\n        10 &gt; r &amp;&amp; (r = &quot;0&quot; + r);\n        var l = a.getHours(),\n              c = a.getMinutes(),\n              h = a.getSeconds(),\n              o = &quot;AM&quot;;\n        l &gt;= 12 &amp;&amp; (o = &quot;PM&quot;), l &gt; 12 &amp;&amp; (l -= 12), 0 == l &amp;&amp; (l = 12), 9 &gt;= c &amp;&amp; (c = &quot;0&quot; + c), 9 &gt;= h &amp;&amp; (h = &quot;0&quot; + h), $(&quot;.welcome .datetime .day&quot;).text(e[s]), $(&quot;.welcome .datetime .date&quot;).text(t[n] + &quot; &quot; + r + &quot;, &quot; + i), $(&quot;.welcome .datetime .time&quot;).text(l + &quot;:&quot; + c + &quot;:&quot; + h + &quot; &quot; + o)\n  },\n  title: function(e) {\n        return $(&quot;.header&gt;.title&quot;).text(e)\n  },\n  side: {\n        nav: function() {\n              this.toggle(), this.navigation()\n        },\n        toggle: function() {\n              $(&quot;.ion-ios-navicon&quot;).on(&quot;touchstart click&quot;, function(e) {\n                    e.preventDefault(), $(&quot;.sidebar&quot;).toggleClass(&quot;active&quot;), $(&quot;.nav&quot;).removeClass(&quot;active&quot;), $(&quot;.sidebar .sidebar-overlay&quot;).removeClass(&quot;fadeOut animated&quot;).addClass(&quot;fadeIn animated&quot;)\n              }), $(&quot;.sidebar .sidebar-overlay&quot;).on(&quot;touchstart click&quot;, function(e) {\n                    e.preventDefault(), $(&quot;.ion-ios-navicon&quot;).click(), $(this).removeClass(&quot;fadeIn&quot;).addClass(&quot;fadeOut&quot;)\n              })\n        },\n        navigation: function() {\n              $(&quot;.nav-left a&quot;).on(&quot;touchstart click&quot;, function(e) {\n                    e.preventDefault();\n                    var t = $(this).attr(&quot;href&quot;).replace(&quot;#&quot;, &quot;&quot;);\n                    $(&quot;.sidebar&quot;).toggleClass(&quot;active&quot;), $(&quot;.html&quot;).removeClass(&quot;visible&quot;), &quot;home&quot; == t || &quot;&quot; == t || null == t ? $(&quot;.html.welcome&quot;).addClass(&quot;visible&quot;) : $(&quot;.html.&quot; + t).addClass(&quot;visible&quot;), App.title($(this).text())\n              })\n        }\n  },\n  search: {\n        bar: function() {\n              $(&quot;.header .ion-ios-search&quot;).on(&quot;touchstart click&quot;, function() {\n                    var e = ($(&quot;.header .search input&quot;).hasClass(&quot;search-visible&quot;), $(&quot;.header .search input&quot;).val());\n                    return &quot;&quot; != e &amp;&amp; null != e ? (App.search.html($(&quot;.header .search input&quot;).val()), !1) : ($(&quot;.nav&quot;).removeClass(&quot;active&quot;), $(&quot;.header .search input&quot;).focus(), void $(&quot;.header .search input&quot;).toggleClass(&quot;search-visible&quot;))\n              }), $(&quot;.search form&quot;).on(&quot;submit&quot;, function(e) {\n                    e.preventDefault(), App.search.html($(&quot;.header .search input&quot;).val())\n              })\n        },\n        html: function(e) {\n              $(&quot;.search input&quot;).removeClass(&quot;search-visible&quot;), $(&quot;.html&quot;).removeClass(&quot;visible&quot;), $(&quot;.html.search&quot;).addClass(&quot;visible&quot;), App.title(&quot;Result&quot;), $(&quot;.html.search&quot;).html($(&quot;.html.search&quot;).html()), $(&quot;.html.search .key&quot;).html(e), $(&quot;.header .search input&quot;).val(&quot;&quot;)\n        }\n  },\n  navigation: function() {\n        $(&quot;.nav .mask&quot;).on(&quot;touchstart click&quot;, function(e) {\n              e.preventDefault(), $(this).parent().toggleClass(&quot;active&quot;)\n        })\n  },\n  hyperlinks: function() {\n        $(&quot;.nav .nav-item&quot;).on(&quot;click&quot;, function(e) {\n              e.preventDefault();\n              var t = $(this).attr(&quot;href&quot;).replace(&quot;#&quot;, &quot;&quot;);\n              $(&quot;.html&quot;).removeClass(&quot;visible&quot;), $(&quot;.html.&quot; + t).addClass(&quot;visible&quot;), $(&quot;.nav&quot;).toggleClass(&quot;active&quot;), App.title($(this).text())\n        })\n  }\n};<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1073,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-1071","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elements"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1071","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=1071"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1071\/revisions"}],"predecessor-version":[{"id":1085,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1071\/revisions\/1085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1073"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}