thiago_db

Drag and Drop Dashboard

Mar 19th, 2024
944
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 28.41 KB | None | 0 0
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <!-- This script got from frontendfreecode.com -->
  7. <title>StartWeb Editor</title>
  8. <link rel="icon" href="../images/favicon.ico">  
  9. <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  10. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  11. <link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
  12. <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  13. <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
  14. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
  15. <script src='https://use.fontawesome.com/2188c74ac9.js'></script>
  16. <style>
  17. @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext");
  18. html, body {
  19.     height: 100%;
  20.     width: 100%;
  21. }
  22. body {
  23.     margin: 0;
  24.     padding: 0;
  25.     font-family: "Open Sans";
  26.     font-size: 14px;
  27.     font-weight: 400;
  28.     overflow: hidden;
  29.     background-color: #ececec;
  30.    color: #102c58;
  31. }
  32. * {
  33.     -webkit-box-sizing: border-box;
  34.     -moz-box-sizing: border-box;
  35.     box-sizing: border-box;
  36. }
  37. ::-webkit-input-placeholder {
  38.     color: #c3c3c3;
  39. }
  40. h1 {
  41.     font-size: 24px;
  42. }
  43. h2 {
  44.     font-size: 20px;
  45. }
  46. h3 {
  47.     font-size: 18px;
  48. }
  49. .u-list {
  50.     margin: 0;
  51.     padding: 0;
  52.     list-style: none;
  53. }
  54. .u-input {
  55.     outline: 0;
  56.     border: 1px solid #d0d0d0;
  57.    padding: 5px 10px;
  58.     height: 35px;
  59.     font-size: 12px;
  60.     -webkit-border-radius: 10px;
  61.     border-radius: 10px;
  62.     background-clip: padding-box;
  63. }
  64. .c-badge {
  65.     font-size: 10px;
  66.     font-weight: 700;
  67.     min-width: 17px;
  68.     padding: 5px 4px;
  69.     border-radius: 100px;
  70.     display: block;
  71.     line-height: 0.7;
  72.     color: #fff;
  73.    text-align: center;
  74.     white-space: nowrap;
  75.     background-color: #f91605;
  76. }
  77. .c-badge--header-icon {
  78.     position: absolute;
  79.     bottom: -9px;
  80. }
  81. .tooltip {
  82.     width: 120px;
  83. }
  84. .tooltip-inner {
  85.     padding: 8px 10px;
  86.     color: #fff;
  87.    text-align: center;
  88.     background-color: #051835;
  89.    font-size: 12px;
  90.     border-radius: 3px;
  91. }
  92. .tooltip-arrow {
  93.     border-right-color: #051835 !important;
  94. }
  95. .hamburger-toggle {
  96.     position: relative;
  97.     padding: 0;
  98.     background: transparent;
  99.     border: 1px solid transparent;
  100.     cursor: pointer;
  101.     order: 1;
  102. }
  103. .hamburger-toggle [class*='bar-'] {
  104.     display: block;
  105.     background: #102c58;
  106.    -webkit-transform: rotate(0deg);
  107.     transform: rotate(0deg);
  108.     -webkit-transition: .2s ease all;
  109.     transition: .2s ease all;
  110.     border-radius: 2px;
  111.     height: 2px;
  112.     width: 24px;
  113.     margin-bottom: 4px;
  114. }
  115. .hamburger-toggle [class*='bar-']:nth-child(2) {
  116.     width: 18px;
  117. }
  118. .hamburger-toggle [class*='bar-']:last-child {
  119.     margin-bottom: 0;
  120.     width: 12px;
  121. }
  122. .hamburger-toggle.is-opened {
  123.     left: 3px;
  124. }
  125. .hamburger-toggle.is-opened [class*='bar-'] {
  126.     background: #102c58;
  127. }
  128. .hamburger-toggle.is-opened .bar-top {
  129.     -webkit-transform: rotate(45deg);
  130.     transform: rotate(45deg);
  131.     -webkit-transform-origin: 15% 15%;
  132.     transform-origin: 15% 15%;
  133. }
  134. .hamburger-toggle.is-opened .bar-mid {
  135.     opacity: 0;
  136. }
  137. .hamburger-toggle.is-opened .bar-bot {
  138.     -webkit-transform: rotate(45deg);
  139.     transform: rotate(-45deg);
  140.     -webkit-transform-origin: 15% 95%;
  141.     transform-origin: 15% 95%;
  142.     width: 24px;
  143. }
  144. .hamburger-toggle:focus {
  145.     outline-width: 0;
  146. }
  147. .hamburger-toggle:hover [class*='bar-'] {
  148.     background: #f5642d;
  149. }
  150. .header-icons-group {
  151.     display: flex;
  152.     order: 3;
  153.     margin-left: auto;
  154.     height: 100%;
  155.     border-left: 1px solid #cccccc;
  156. }
  157. .header-icons-group .c-header-icon:last-child {
  158.     border-right: 0;
  159. }
  160. .c-header-icon {
  161.     position: relative;
  162.     display: flex;
  163.     float: left;
  164.     width: 70px;
  165.     height: 100%;
  166.     align-items: center;
  167.     justify-content: center;
  168.     line-height: 1;
  169.     cursor: pointer;
  170.     border-right: 1px solid #cccccc;
  171. }
  172. .c-header-icon i {
  173.     font-size: 18px;
  174.     line-height: 40px;
  175. }
  176. .c-header-icon--in-circle {
  177.     border: 1px solid #d0d0d0;
  178.    border-radius: 100%;
  179. }
  180. .c-header-icon:hover i {
  181.     color: #f5642d;
  182. }
  183. .l-header {
  184.     padding-left: 70px;
  185.     position: fixed;
  186.     top: 0;
  187.     right: 0;
  188.     z-index: 10;
  189.     width: 100%;
  190.     background: #ffffff;
  191.    -webkit-transition: padding 0.5s ease-in-out;
  192.     -moz-transition: padding 0.5s ease-in-out;
  193.     -ms-transition: padding 0.5s ease-in-out;
  194.     -o-transition: padding 0.5s ease-in-out;
  195.     transition: padding 0.5s ease-in-out;
  196. }
  197. .l-header__inner {
  198.     height: 100%;
  199.     width: 100%;
  200.     display: flex;
  201.     height: 70px;
  202.     align-items: center;
  203.     justify-content: stretch;
  204.     border-bottom: 1px solid;
  205.     border-color: #cccccc;
  206. }
  207. .sidebar-is-expanded .l-header {
  208.     padding-left: 220px;
  209. }
  210. .c-search {
  211.     display: flex;
  212.     height: 100%;
  213.     width: 350px;
  214. }
  215. .c-search__input {
  216.     border-top-right-radius: 0px;
  217.     border-bottom-right-radius: 0px;
  218.     border-right: 0;
  219.     flex-basis: 100%;
  220.     height: 100%;
  221.     border: 0;
  222.     font-size: 14px;
  223.     padding: 0 20px;
  224.     -webkit-transition: all 0.3s ease-in-out;
  225.     -moz-transition: all 0.3s ease-in-out;
  226.     -ms-transition: all 0.3s ease-in-out;
  227.     -o-transition: all 0.3s ease-in-out;
  228.     transition: all 0.3s ease-in-out;
  229. }
  230. .c-dropdown {
  231.     opacity: 0;
  232.     text-align: left;
  233.     position: absolute;
  234.     flex-direction: column;
  235.     display: none;
  236.     width: 300px;
  237.     top: 30px;
  238.     right: -40px;
  239.     background-color: #fff;
  240.    overflow: hidden;
  241.     min-height: 300px;
  242.     border: 1px solid #d0d0d0;
  243.    -webkit-border-radius: 10px;
  244.     border-radius: 10px;
  245.     background-clip: padding-box;
  246.     -webkit-box-shadow: 0px 5px 14px -1px #cecece;
  247.    -moz-box-shadow: 0px 5px 14px -1px #cecece;
  248.    box-shadow: 0px 5px 14px -1px #cecece;
  249.    -webkit-transition: all 0.3s ease-in-out;
  250.     -moz-transition: all 0.3s ease-in-out;
  251.     -ms-transition: all 0.3s ease-in-out;
  252.     -o-transition: all 0.3s ease-in-out;
  253.     transition: all 0.3s ease-in-out;
  254. }
  255. .l-sidebar {
  256.     width: 70px;
  257.     position: absolute;
  258.     z-index: 10;
  259.     left: 0;
  260.     top: 0;
  261.     bottom: 0;
  262.     background: #102c58;
  263.    -webkit-transition: width 0.5s ease-in-out;
  264.     -moz-transition: width 0.5s ease-in-out;
  265.     -ms-transition: width 0.5s ease-in-out;
  266.     -o-transition: width 0.5s ease-in-out;
  267.     transition: width 0.5s ease-in-out;
  268. }
  269. .l-sidebar .logo {
  270.     width: 100%;
  271.     height: 70px;
  272.     display: flex;
  273.     align-items: center;
  274.     justify-content: center;
  275.     background-color: #051835;
  276. }
  277. .l-sidebar .logo .logo__txt {
  278.     font-size: 26px;
  279.     line-height: 1;
  280.     color: #fff;
  281.    text-align: center;
  282.     font-weight: 700;
  283. }
  284. .l-sidebar__content {
  285.     height: 100%;
  286.     position: relative;
  287. }
  288. .sidebar-is-expanded .l-sidebar {
  289.     width: 220px;
  290. }
  291. .c-menu > ul {
  292.     display: flex;
  293.     flex-direction: column;
  294. }
  295. .c-menu > ul .c-menu__item {
  296.     color: #fff;
  297.    max-width: 100%;
  298.     overflow: hidden;
  299. }
  300. .c-menu > ul .c-menu__item__inner {
  301.     display: flex;
  302.     flex-direction: row;
  303.     align-items: center;
  304.     min-height: 60px;
  305.     position: relative;
  306.     cursor: pointer;
  307.     -webkit-transition: all 0.5s ease-in-out;
  308.     -moz-transition: all 0.5s ease-in-out;
  309.     -ms-transition: all 0.5s ease-in-out;
  310.     -o-transition: all 0.5s ease-in-out;
  311.     transition: all 0.5s ease-in-out;
  312. }
  313. .c-menu > ul .c-menu__item__inner:before {
  314.     position: absolute;
  315.     content: " ";
  316.     height: 0;
  317.     width: 2px;
  318.     left: 0;
  319.     top: 50%;
  320.     margin-top: -18px;
  321.     background-color: #5f9cfd;
  322.    opacity: 0;
  323.     -webkit-transition: all 0.5s ease-in-out;
  324.     -moz-transition: all 0.5s ease-in-out;
  325.     -ms-transition: all 0.5s ease-in-out;
  326.     -o-transition: all 0.5s ease-in-out;
  327.     transition: all 0.5s ease-in-out;
  328. }
  329. .c-menu > ul .c-menu__item.is-active .c-menu__item__inner {
  330.     border-left-color: #5f9cfd;
  331.    background-color: #1e3e6f;
  332. }
  333. .c-menu > ul .c-menu__item.is-active .c-menu__item__inner i {
  334.     color: #5f9cfd;
  335. }
  336. .c-menu > ul .c-menu__item.is-active .c-menu__item__inner .c-menu-item__title span {
  337.     color: #5f9cfd;
  338. }
  339. .c-menu > ul .c-menu__item.is-active .c-menu__item__inner:before {
  340.     height: 36px;
  341.     opacity: 1;
  342. }
  343. .c-menu > ul .c-menu__item:not(.is-active):hover .c-menu__item__inner {
  344.     background-color: #f5642d;
  345.    border-left-color: #f5642d;
  346. }
  347. .c-menu > ul .c-menu__item i {
  348.     flex: 0 0 70px;
  349.     font-size: 18px;
  350.     font-weight: normal;
  351.     text-align: center;
  352.     -webkit-transition: all 0.5s ease-in-out;
  353.     -moz-transition: all 0.5s ease-in-out;
  354.     -ms-transition: all 0.5s ease-in-out;
  355.     -o-transition: all 0.5s ease-in-out;
  356.     transition: all 0.5s ease-in-out;
  357. }
  358. .c-menu > ul .c-menu__item .c-menu-item__expand {
  359.     position: relative;
  360.     left: 100px;
  361.     padding-right: 20px;
  362.     margin-left: auto;
  363.     -webkit-transition: all 1s ease-in-out;
  364.     -moz-transition: all 1s ease-in-out;
  365.     -ms-transition: all 1s ease-in-out;
  366.     -o-transition: all 1s ease-in-out;
  367.     transition: all 1s ease-in-out;
  368. }
  369. .sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__expand {
  370.     left: 0px;
  371. }
  372. .c-menu > ul .c-menu__item .c-menu-item__title {
  373.     flex-basis: 100%;
  374.     padding-right: 10px;
  375.     position: relative;
  376.     left: 220px;
  377.     opacity: 0;
  378.     -webkit-transition: all 0.7s ease-in-out;
  379.     -moz-transition: all 0.7s ease-in-out;
  380.     -ms-transition: all 0.7s ease-in-out;
  381.     -o-transition: all 0.7s ease-in-out;
  382.     transition: all 0.7s ease-in-out;
  383. }
  384. .c-menu > ul .c-menu__item .c-menu-item__title span {
  385.     font-weight: 400;
  386.     font-size: 14px;
  387.     white-space: nowrap;
  388.     overflow: hidden;
  389.     text-overflow: ellipsis;
  390.     -webkit-transition: all 0.5s ease-in-out;
  391.     -moz-transition: all 0.5s ease-in-out;
  392.     -ms-transition: all 0.5s ease-in-out;
  393.     -o-transition: all 0.5s ease-in-out;
  394.     transition: all 0.5s ease-in-out;
  395. }
  396. .sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__title {
  397.     left: 0px;
  398.     opacity: 1;
  399. }
  400. .c-menu > ul .c-menu__item .c-menu__submenu {
  401.     background-color: #051835;
  402.    padding: 15px;
  403.     font-size: 12px;
  404.     display: none;
  405. }
  406. .c-menu > ul .c-menu__item .c-menu__submenu li {
  407.     padding-bottom: 15px;
  408.     margin-bottom: 15px;
  409.     border-bottom: 1px solid;
  410.     border-color: #072048;
  411.    color: #5f9cfd;
  412. }
  413. .c-menu > ul .c-menu__item .c-menu__submenu li:last-child {
  414.     margin: 0;
  415.     padding: 0;
  416.     border: 0;
  417. }
  418. main.l-main {
  419.     width: 100%;
  420.     height: 100%;
  421.     padding: 70px 0 0 70px;
  422.     -webkit-transition: padding 0.5s ease-in-out;
  423.     -moz-transition: padding 0.5s ease-in-out;
  424.     -ms-transition: padding 0.5s ease-in-out;
  425.     -o-transition: padding 0.5s ease-in-out;
  426.     transition: padding 0.5s ease-in-out;
  427. }
  428. main.l-main .content-wrapper {
  429.     padding: 25px 0 0;
  430.     height: 100%;
  431. }
  432. main.l-main .content-wrapper .page-content {
  433.     border-top: 1px solid #d0d0d0;
  434.    /*padding-top: 25px;*/
  435.     text-align: center;
  436. }
  437. main.l-main .content-wrapper--with-bg .page-content {
  438.     /*background: #fff;*/
  439.     border-radius: 3px;
  440.     border: 1px solid #d0d0d0;
  441. }
  442. main.l-main .page-title {
  443.     font-weight: 400;
  444.     margin-top: 0;
  445.     margin-bottom: 25px;
  446. }
  447. .sidebar-is-expanded main.l-main {
  448.     padding-left: 220px;
  449. }
  450.  
  451.     .device-icons button {
  452.         background: none;
  453.         border: none;
  454.         cursor: pointer;
  455.     }
  456.  
  457.     /* Estilo para o conteúdo do iframe */
  458.     #content {
  459.        margin-top: 50px; /* Espaço para os ícones */
  460.     }
  461.     #iframe-container {
  462.        width: 100%;
  463.         height: 100vh;
  464.         border: none;
  465.     }
  466. .componentesweb {
  467.     width: 330px;
  468.     background: #fff;
  469.    position: absolute;
  470.     left: 0;
  471.     height: 600px;
  472.     overflow: auto;
  473. }
  474. .componentesweb ul {
  475.     list-style: none;
  476.     padding: 0;
  477.     position: absolute;
  478.     left: 84px;
  479.     top: 82px;
  480.   }
  481. .componentesweb li {
  482.     margin-bottom: 10px; /* Adiciona espaçamento entre os itens da lista */
  483.   }
  484. .componentesweb img {
  485.     border: 1px solid #ccc; /* Adiciona borda de 5px sólida cinza */
  486.    /*padding: 10px; /* Adiciona espaçamento interno de 5px */
  487.     display: block; /* Remove espaçamento extra abaixo da imagem */
  488.     max-width: 216px; /* Garante que a imagem não ultrapasse a largura da lista */
  489.     height: auto; /* Mantém a proporção da imagem */
  490.   }
  491. .componentesweb #div2 {
  492.    display: none;
  493. }
  494. .componentesweb img {
  495.     cursor: all-scroll;
  496. }
  497. </style>
  498.  
  499. </head>
  500. <body>
  501. <header class="l-header">
  502.     <div class="l-header__inner clearfix"><!--
  503.         <div class="c-header-icon js-hamburger">
  504.             <div class="hamburger-toggle"><span class="bar-top"></span>
  505.             <span class="bar-mid"></span><span class="bar-bot"></span>
  506.             </div>
  507.         </div>-->
  508.         <div class="c-header-icon has-dropdown">
  509.             <a href="index.php"><i class="fa fa-th" title="Return to Dashboard"></i></a>
  510.             <div class="c-dropdown c-dropdown--notifications">
  511.                 <div class="c-dropdown__header"></div>
  512.                 <div class="c-dropdown__content"></div>
  513.             </div>
  514.         </div>
  515.         <div class="c-header-icon has-dropdown device-icons">
  516.             <button class="desktop"><i class="fa fa-television"></i></button>
  517.             <div class="c-dropdown c-dropdown--notifications">
  518.                 <div class="c-dropdown__header"></div>
  519.                 <div class="c-dropdown__content"></div>
  520.             </div>
  521.         </div>
  522.         <div class="c-header-icon has-dropdown device-icons">
  523.             <button class="tablet"><i class="fa fa-tablet"></i></button>
  524.             <div class="c-dropdown c-dropdown--notifications">
  525.                 <div class="c-dropdown__header"></div>
  526.                 <div class="c-dropdown__content"></div>
  527.             </div>
  528.         </div>
  529.         <div class="c-header-icon has-dropdown device-icons">
  530.             <button class="mobile"><i class="fa fa-mobile" aria-hidden="true"></i></button>
  531.             <div class="c-dropdown c-dropdown--notifications">
  532.                 <div class="c-dropdown__header"></div>
  533.                 <div class="c-dropdown__content"></div>
  534.             </div>
  535.         </div>
  536.         <div class="header-icons-group">
  537.             <div class="c-header-icon basket"><i class="fa fa-reply" title="Go back"></i></div>
  538.             <div class="c-header-icon logout"><i class="fa fa-share" title="Return"></i></div>
  539.             <div class="c-header-icon logout"><i class="fa fa-eye" title="Preview"></i></div>
  540.             <div class="c-header-icon logout"><i class="fa fa-floppy-o" title="Publish"></i></div>
  541.             <div class="c-header-icon logout"><i class="fa fa-star-o" title="Upgrade"></i></div>
  542.         </div>
  543.     </div>
  544. </header>
  545. <div class="l-sidebar">
  546.     <div class="logo">
  547.         <div class="logo__txt">S</div>
  548.     </div>
  549.     <div class="l-sidebar__content">
  550.         <nav class="c-menu js-menu">
  551.             <ul class="u-list">
  552.                 <li class="c-menu__item is-active" data-toggle="tooltip" title="Menu">
  553.                     <div class="c-menu__item__inner">
  554.                         <i class="fa fa-bars" aria-hidden="true"></i>
  555.                         <div class="c-menu-item__title"><span><button id="btn1">Menu</button></span></div>
  556.                     </div>
  557.                 </li>
  558.                 <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Header">
  559.                     <div class="c-menu__item__inner">
  560.                         <i class="fa fa-address-card-o" aria-hidden="true"></i>
  561.                         <div class="c-menu-item__title"><span><button id="btn2">Header</button></span></div>
  562.                         <!--<div class="c-menu-item__expand js-expand-submenu"><i class="fa fa-angle-down"></i></div>-->
  563.                     </div>
  564.                     <!--<ul class="c-menu__submenu u-list">
  565.                         <li>Payments</li>
  566.                         <li>Maps</li>
  567.                         <li>Notifications</li>
  568.                     </ul>-->
  569.                 </li>
  570.                 <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Content">
  571.                     <div class="c-menu__item__inner">
  572.                         <i class="fa fa-clone" aria-hidden="true"></i>
  573.                         <div class="c-menu-item__title"><span>Content</span></div>
  574.                     </div>
  575.                 </li>
  576.                 <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Team">
  577.                     <div class="c-menu__item__inner">
  578.                         <i class="fa fa-users" aria-hidden="true"></i>
  579.                         <div class="c-menu-item__title"><span>Team</span></div>
  580.                     </div>
  581.                 </li>
  582.                 <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Gallery">
  583.                     <div class="c-menu__item__inner">
  584.                         <i class="fa fa-picture-o" aria-hidden="true"></i>
  585.                         <div class="c-menu-item__title"><span>Gallery</span></div>
  586.                     </div>
  587.                 </li>
  588.                 <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Partners">
  589.                     <div class="c-menu__item__inner">
  590.                         <i class="fa fa-user-o" aria-hidden="true"></i>
  591.                         <div class="c-menu-item__title"><span>Partners</span></div>
  592.                     </div>
  593.                 </li>
  594.                 <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Testimonials">
  595.                     <div class="c-menu__item__inner">
  596.                         <i class="fa fa-address-card-o" aria-hidden="true"></i>
  597.                         <div class="c-menu-item__title"><span>Testimonials</span></div>
  598.                     </div>
  599.                 </li>
  600.                 <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Pricing">
  601.                     <div class="c-menu__item__inner">
  602.                         <i class="fa fa-usd" aria-hidden="true"></i>
  603.                         <div class="c-menu-item__title"><span>Pricing</span></div>
  604.                     </div>
  605.                 </li>
  606.                 <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Footer">
  607.                     <div class="c-menu__item__inner">
  608.                         <i class="fa fa-list-alt" aria-hidden="true"></i>
  609.                         <div class="c-menu-item__title"><span>Footer</span></div>
  610.                     </div>
  611.                 </li>
  612.             </ul>
  613.         </nav>
  614.     </div>
  615. </div>
  616. <div class="componentesweb">
  617.     <div id="div1">
  618.         <ul>
  619.           <li>
  620.             <a href="#" class="draggable" draggable="true" ondragstart="drag(event, 'menu')">
  621.                 <img src="templates/content/content-1.png" alt="Image 1">
  622.             </a>
  623.         </li>
  624.           <li>
  625.             <a href="#" class="draggable" draggable="true" ondragstart="drag(event, 'header')">
  626.                 <img src="templates/content/content-2.png" alt="Image 2">
  627.             </a>
  628.         </li>
  629.           <li><img src="templates/content/content-3.png" alt="Image 3"></li>
  630.           <li><img src="templates/content/content-4.png" alt="Image 4"></li>
  631.           <li><img src="templates/content/content-5.png" alt="Image 1"></li>
  632.           <li><img src="templates/content/content-6.png" alt="Image 2"></li>
  633.           <li><img src="templates/content/content-7.png" alt="Image 3"></li>
  634.           <li><img src="templates/content/content-8.png" alt="Image 4"></li>
  635.         </ul>
  636.     </div>
  637.     <div id="div2">
  638.         <ul>
  639.           <li><img src="assets/img/ivana-square.jpg" alt="Image 1"></li>
  640.           <li><img src="assets/img/ivana-square.jpg" alt="Image 2"></li>
  641.           <li><img src="assets/img/ivana-square.jpg" alt="Image 3"></li>
  642.           <li><img src="assets/img/ivana-square.jpg" alt="Image 4"></li>
  643.         </ul>
  644.     </div>
  645. </div>
  646. <main class="l-main">
  647.     <div class="content-wrapper content-wrapper--with-bg">
  648.        
  649.         <div class="content page-content" id="iframe-container" ondrop="drop(event)" ondragover="allowDrop(event)">
  650.             <div class="dropzone">
  651.           <div class="highlight"></div>
  652.         </div>
  653.             <!--<iframe src="templates/view/98869/" frameborder="0" margin="0" width="100%" height="100%" style="overflow:hidden" id="iframe"></iframe>-->
  654.         </div>
  655.     </div>
  656. </main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
  657. <script>
  658. "use strict";
  659. var Dashboard = function () {
  660.     var global = {
  661.         tooltipOptions: {
  662.             placement: "right"
  663.         },
  664.         menuClass: ".c-menu"
  665.     };
  666.     var menuChangeActive = function menuChangeActive(el) {
  667.         var hasSubmenu = $(el).hasClass("has-submenu");
  668.         $(global.menuClass + " .is-active").removeClass("is-active");
  669.         $(el).addClass("is-active");
  670.  
  671.         // if (hasSubmenu) {
  672.         //  $(el).find("ul").slideDown();
  673.         // }
  674.     };
  675.     var sidebarChangeWidth = function sidebarChangeWidth() {
  676.         var $menuItemsTitle = $("li .menu-item__title");
  677.  
  678.         $("body").toggleClass("sidebar-is-reduced sidebar-is-expanded");
  679.         $(".hamburger-toggle").toggleClass("is-opened");
  680.  
  681.         if ($("body").hasClass("sidebar-is-expanded")) {
  682.             $('[data-toggle="tooltip"]').tooltip("destroy");
  683.         } else {
  684.             $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
  685.         }
  686.     };
  687.     return {
  688.         init: function init() {
  689.             $(".js-hamburger").on("click", sidebarChangeWidth);
  690.  
  691.             $(".js-menu li").on("click", function (e) {
  692.                 menuChangeActive(e.currentTarget);
  693.             });
  694.  
  695.             $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
  696.         }
  697.     };
  698. }();
  699. Dashboard.init();
  700. //# sourceURL=pen.js
  701. </script>
  702.  
  703. <script>
  704. // Adiciona comportamento de dropdown aos itens do menu
  705. document.addEventListener('DOMContentLoaded', function() {
  706.   var dropdowns = document.querySelectorAll('.dropdown');
  707.   dropdowns.forEach(function(dropdown) {
  708.     dropdown.addEventListener('mouseover', function() {
  709.       this.classList.add('show');
  710.       this.querySelector('.dropdown-menu').style.display = 'block';
  711.     });
  712.  
  713.     dropdown.addEventListener('mouseout', function() {
  714.       this.classList.remove('show');
  715.       this.querySelector('.dropdown-menu').style.display = 'none';
  716.     });
  717.   });
  718. });
  719. </script>
  720.  
  721. <script>
  722. $(document).ready(function(){
  723.     // Mostrar visualização de desktop por padrão
  724.     $('.desktop').addClass('active');
  725.  
  726.     // Alternar entre visualizações de dispositivos
  727.     $('.desktop').click(function(){
  728.         $('#iframe').css('width', '100%');
  729.         $('#iframe').css('height', '100vh');
  730.         $('.tablet, .mobile').removeClass('active');
  731.         $(this).addClass('active');
  732.     });
  733.  
  734.     $('.tablet').click(function(){
  735.         $('#iframe').css('width', '768px'); // Largura de tablet padrão
  736.         $('#iframe').css('height', '1024px'); // Altura de tablet padrão
  737.         $('.desktop, .mobile').removeClass('active');
  738.         $(this).addClass('active');
  739.     });
  740.  
  741.     $('.mobile').click(function(){
  742.         $('#iframe').css('width', '360px'); // Largura de celular padrão
  743.         $('#iframe').css('height', '640px'); // Altura de celular padrão
  744.         $('.desktop, .tablet').removeClass('active');
  745.         $(this).addClass('active');
  746.     });
  747. });
  748. </script>
  749.  
  750. <script>
  751.     document.addEventListener("DOMContentLoaded", function () {
  752.         var iframe = document.getElementById("iframe");
  753.  
  754.         // Adicionar evento de clique ao iframe
  755.         iframe.contentDocument.body.addEventListener("click", function (event) {
  756.             var target = event.target;
  757.  
  758.             // Verificar se o elemento clicado é um bloco editável
  759.             if (target.classList.contains("editable-block")) {
  760.                 // Permitir edição do conteúdo do bloco
  761.                 target.contentEditable = true;
  762.                 target.focus();
  763.             } else {
  764.                 // Desativar edição do conteúdo do bloco se clicado fora do bloco
  765.                 var blocks = iframe.contentDocument.querySelectorAll(".editable-block");
  766.                 blocks.forEach(function (block) {
  767.                     block.contentEditable = false;
  768.                 });
  769.             }
  770.         });
  771.     });
  772. </script>
  773.  
  774. <script>
  775.   $(document).ready(function(){
  776.     $("#btn1").click(function(){
  777.       $(".componentesweb div").hide(); // Oculta todas as divs dentro de .container
  778.       $("#div1").show(); // Mostra a div com id div1
  779.     });
  780.    
  781.     $("#btn2").click(function(){
  782.       $(".componentesweb div").hide(); // Oculta todas as divs dentro de .container
  783.       $("#div2").show(); // Mostra a div com id div2
  784.     });
  785.    
  786.     $("#btn3").click(function(){
  787.       $(".componentesweb div").hide(); // Oculta todas as divs dentro de .container
  788.       $("#div3").show(); // Mostra a div com id div3
  789.     });
  790.   });
  791. </script>
  792.  
  793. <!-- CODIGO DO DRAG AND DROP -->
  794. <script>
  795. function allowDrop(event) {
  796.     event.preventDefault();
  797. }
  798.  
  799. function drag(event, type) {
  800.     event.dataTransfer.setData("text", type);
  801. }
  802.  
  803. async function loadHtmlFile(pathFile) {
  804.     try {
  805.         const response = await fetch(pathFile);
  806.         const html = await response.text();
  807.         return html;
  808.     } catch (error) {
  809.         console.error('Error on load file:', error);
  810.         return null;
  811.     }
  812. }
  813.  
  814. async function drop(event) {
  815.     event.preventDefault();
  816.     var type = event.dataTransfer.getData("text");
  817.     var content = "";
  818.  
  819.     template = {
  820.         "menu": 'templates/content/content-1.html',
  821.         "header": 'templates/content/content-2.html',
  822.         "content": 'templates/content/content-3.html',
  823.         "footer": 'templates/content/content-4.html'
  824.     }
  825.  
  826.     content = await loadHtmlFile(template[type]);
  827.  
  828.     var dropzone = event.target.closest('.content');
  829.     if (dropzone) {
  830.         var block = document.createElement("div");
  831.         block.className = "alert alert-primary position-relative";
  832.         block.innerHTML = content;
  833.  
  834.         var deleteButton = document.createElement("i");
  835.         deleteButton.className = "fa fa-trash delete-button";
  836.         deleteButton.onclick = function() {
  837.             if (confirm("Tem certeza que deseja deletar este bloco?")) {
  838.                 block.remove();
  839.             }
  840.         };
  841.  
  842.         var redButton = document.createElement("button");
  843.         redButton.className = "red-button";
  844.         redButton.innerHTML = "Deletar";
  845.         redButton.onclick = function() {
  846.             if (confirm("Tem certeza que deseja deletar este bloco?")) {
  847.                 block.remove();
  848.             }
  849.         };
  850.  
  851.         var duplicateButton = document.createElement("button");
  852.         duplicateButton.className = "duplicate-button";
  853.         duplicateButton.innerHTML = "Duplicar";
  854.         duplicateButton.onclick = function() {
  855.             duplicateBlock(block);
  856.         };
  857.  
  858.         block.appendChild(deleteButton);
  859.         block.appendChild(redButton);
  860.         block.appendChild(duplicateButton);
  861.  
  862.         dropzone.appendChild(block);
  863.  
  864.         tinymce.init({
  865.             selector: '.editable',
  866.             height: 200,
  867.             menubar: false,
  868.             plugins: [
  869.                 'advlist autolink lists link image charmap print preview anchor',
  870.                 'searchreplace visualblocks code fullscreen',
  871.                 'insertdatetime media table paste code help wordcount'
  872.             ],
  873.             toolbar: 'undo redo | formatselect | bold italic backcolor | \
  874.                        alignleft aligncenter alignright alignjustify | \
  875.                        bullist numlist outdent indent | removeformat | help'
  876.         });
  877.     }
  878. }
  879.  
  880. function duplicateBlock(originalBlock) {
  881.     var newBlock = originalBlock.cloneNode(true);
  882.     var deleteButton = newBlock.querySelector('.delete-button');
  883.     deleteButton.onclick = function() {
  884.         if (confirm("Tem certeza que deseja deletar este bloco?")) {
  885.             newBlock.remove();
  886.         }
  887.     };
  888.     var redButton = newBlock.querySelector('.red-button');
  889.     redButton.onclick = function() {
  890.         if (confirm("Tem certeza que deseja deletar este bloco?")) {
  891.             newBlock.remove();
  892.         }
  893.     };
  894.     document.querySelector('.content').appendChild(newBlock);
  895. }
  896. </script>
  897.  
  898. </body>
  899. </html>
Advertisement
Add Comment
Please, Sign In to add comment