Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <!-- This script got from frontendfreecode.com -->
- <title>StartWeb Editor</title>
- <link rel="icon" href="../images/favicon.ico">
- <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
- <link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
- <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
- <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
- <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
- <script src='https://use.fontawesome.com/2188c74ac9.js'></script>
- <style>
- @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext");
- html, body {
- height: 100%;
- width: 100%;
- }
- body {
- margin: 0;
- padding: 0;
- font-family: "Open Sans";
- font-size: 14px;
- font-weight: 400;
- overflow: hidden;
- background-color: #ececec;
- color: #102c58;
- }
- * {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- ::-webkit-input-placeholder {
- color: #c3c3c3;
- }
- h1 {
- font-size: 24px;
- }
- h2 {
- font-size: 20px;
- }
- h3 {
- font-size: 18px;
- }
- .u-list {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .u-input {
- outline: 0;
- border: 1px solid #d0d0d0;
- padding: 5px 10px;
- height: 35px;
- font-size: 12px;
- -webkit-border-radius: 10px;
- border-radius: 10px;
- background-clip: padding-box;
- }
- .c-badge {
- font-size: 10px;
- font-weight: 700;
- min-width: 17px;
- padding: 5px 4px;
- border-radius: 100px;
- display: block;
- line-height: 0.7;
- color: #fff;
- text-align: center;
- white-space: nowrap;
- background-color: #f91605;
- }
- .c-badge--header-icon {
- position: absolute;
- bottom: -9px;
- }
- .tooltip {
- width: 120px;
- }
- .tooltip-inner {
- padding: 8px 10px;
- color: #fff;
- text-align: center;
- background-color: #051835;
- font-size: 12px;
- border-radius: 3px;
- }
- .tooltip-arrow {
- border-right-color: #051835 !important;
- }
- .hamburger-toggle {
- position: relative;
- padding: 0;
- background: transparent;
- border: 1px solid transparent;
- cursor: pointer;
- order: 1;
- }
- .hamburger-toggle [class*='bar-'] {
- display: block;
- background: #102c58;
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- -webkit-transition: .2s ease all;
- transition: .2s ease all;
- border-radius: 2px;
- height: 2px;
- width: 24px;
- margin-bottom: 4px;
- }
- .hamburger-toggle [class*='bar-']:nth-child(2) {
- width: 18px;
- }
- .hamburger-toggle [class*='bar-']:last-child {
- margin-bottom: 0;
- width: 12px;
- }
- .hamburger-toggle.is-opened {
- left: 3px;
- }
- .hamburger-toggle.is-opened [class*='bar-'] {
- background: #102c58;
- }
- .hamburger-toggle.is-opened .bar-top {
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- -webkit-transform-origin: 15% 15%;
- transform-origin: 15% 15%;
- }
- .hamburger-toggle.is-opened .bar-mid {
- opacity: 0;
- }
- .hamburger-toggle.is-opened .bar-bot {
- -webkit-transform: rotate(45deg);
- transform: rotate(-45deg);
- -webkit-transform-origin: 15% 95%;
- transform-origin: 15% 95%;
- width: 24px;
- }
- .hamburger-toggle:focus {
- outline-width: 0;
- }
- .hamburger-toggle:hover [class*='bar-'] {
- background: #f5642d;
- }
- .header-icons-group {
- display: flex;
- order: 3;
- margin-left: auto;
- height: 100%;
- border-left: 1px solid #cccccc;
- }
- .header-icons-group .c-header-icon:last-child {
- border-right: 0;
- }
- .c-header-icon {
- position: relative;
- display: flex;
- float: left;
- width: 70px;
- height: 100%;
- align-items: center;
- justify-content: center;
- line-height: 1;
- cursor: pointer;
- border-right: 1px solid #cccccc;
- }
- .c-header-icon i {
- font-size: 18px;
- line-height: 40px;
- }
- .c-header-icon--in-circle {
- border: 1px solid #d0d0d0;
- border-radius: 100%;
- }
- .c-header-icon:hover i {
- color: #f5642d;
- }
- .l-header {
- padding-left: 70px;
- position: fixed;
- top: 0;
- right: 0;
- z-index: 10;
- width: 100%;
- background: #ffffff;
- -webkit-transition: padding 0.5s ease-in-out;
- -moz-transition: padding 0.5s ease-in-out;
- -ms-transition: padding 0.5s ease-in-out;
- -o-transition: padding 0.5s ease-in-out;
- transition: padding 0.5s ease-in-out;
- }
- .l-header__inner {
- height: 100%;
- width: 100%;
- display: flex;
- height: 70px;
- align-items: center;
- justify-content: stretch;
- border-bottom: 1px solid;
- border-color: #cccccc;
- }
- .sidebar-is-expanded .l-header {
- padding-left: 220px;
- }
- .c-search {
- display: flex;
- height: 100%;
- width: 350px;
- }
- .c-search__input {
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
- border-right: 0;
- flex-basis: 100%;
- height: 100%;
- border: 0;
- font-size: 14px;
- padding: 0 20px;
- -webkit-transition: all 0.3s ease-in-out;
- -moz-transition: all 0.3s ease-in-out;
- -ms-transition: all 0.3s ease-in-out;
- -o-transition: all 0.3s ease-in-out;
- transition: all 0.3s ease-in-out;
- }
- .c-dropdown {
- opacity: 0;
- text-align: left;
- position: absolute;
- flex-direction: column;
- display: none;
- width: 300px;
- top: 30px;
- right: -40px;
- background-color: #fff;
- overflow: hidden;
- min-height: 300px;
- border: 1px solid #d0d0d0;
- -webkit-border-radius: 10px;
- border-radius: 10px;
- background-clip: padding-box;
- -webkit-box-shadow: 0px 5px 14px -1px #cecece;
- -moz-box-shadow: 0px 5px 14px -1px #cecece;
- box-shadow: 0px 5px 14px -1px #cecece;
- -webkit-transition: all 0.3s ease-in-out;
- -moz-transition: all 0.3s ease-in-out;
- -ms-transition: all 0.3s ease-in-out;
- -o-transition: all 0.3s ease-in-out;
- transition: all 0.3s ease-in-out;
- }
- .l-sidebar {
- width: 70px;
- position: absolute;
- z-index: 10;
- left: 0;
- top: 0;
- bottom: 0;
- background: #102c58;
- -webkit-transition: width 0.5s ease-in-out;
- -moz-transition: width 0.5s ease-in-out;
- -ms-transition: width 0.5s ease-in-out;
- -o-transition: width 0.5s ease-in-out;
- transition: width 0.5s ease-in-out;
- }
- .l-sidebar .logo {
- width: 100%;
- height: 70px;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: #051835;
- }
- .l-sidebar .logo .logo__txt {
- font-size: 26px;
- line-height: 1;
- color: #fff;
- text-align: center;
- font-weight: 700;
- }
- .l-sidebar__content {
- height: 100%;
- position: relative;
- }
- .sidebar-is-expanded .l-sidebar {
- width: 220px;
- }
- .c-menu > ul {
- display: flex;
- flex-direction: column;
- }
- .c-menu > ul .c-menu__item {
- color: #fff;
- max-width: 100%;
- overflow: hidden;
- }
- .c-menu > ul .c-menu__item__inner {
- display: flex;
- flex-direction: row;
- align-items: center;
- min-height: 60px;
- position: relative;
- cursor: pointer;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .c-menu > ul .c-menu__item__inner:before {
- position: absolute;
- content: " ";
- height: 0;
- width: 2px;
- left: 0;
- top: 50%;
- margin-top: -18px;
- background-color: #5f9cfd;
- opacity: 0;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .c-menu > ul .c-menu__item.is-active .c-menu__item__inner {
- border-left-color: #5f9cfd;
- background-color: #1e3e6f;
- }
- .c-menu > ul .c-menu__item.is-active .c-menu__item__inner i {
- color: #5f9cfd;
- }
- .c-menu > ul .c-menu__item.is-active .c-menu__item__inner .c-menu-item__title span {
- color: #5f9cfd;
- }
- .c-menu > ul .c-menu__item.is-active .c-menu__item__inner:before {
- height: 36px;
- opacity: 1;
- }
- .c-menu > ul .c-menu__item:not(.is-active):hover .c-menu__item__inner {
- background-color: #f5642d;
- border-left-color: #f5642d;
- }
- .c-menu > ul .c-menu__item i {
- flex: 0 0 70px;
- font-size: 18px;
- font-weight: normal;
- text-align: center;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .c-menu > ul .c-menu__item .c-menu-item__expand {
- position: relative;
- left: 100px;
- padding-right: 20px;
- margin-left: auto;
- -webkit-transition: all 1s ease-in-out;
- -moz-transition: all 1s ease-in-out;
- -ms-transition: all 1s ease-in-out;
- -o-transition: all 1s ease-in-out;
- transition: all 1s ease-in-out;
- }
- .sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__expand {
- left: 0px;
- }
- .c-menu > ul .c-menu__item .c-menu-item__title {
- flex-basis: 100%;
- padding-right: 10px;
- position: relative;
- left: 220px;
- opacity: 0;
- -webkit-transition: all 0.7s ease-in-out;
- -moz-transition: all 0.7s ease-in-out;
- -ms-transition: all 0.7s ease-in-out;
- -o-transition: all 0.7s ease-in-out;
- transition: all 0.7s ease-in-out;
- }
- .c-menu > ul .c-menu__item .c-menu-item__title span {
- font-weight: 400;
- font-size: 14px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__title {
- left: 0px;
- opacity: 1;
- }
- .c-menu > ul .c-menu__item .c-menu__submenu {
- background-color: #051835;
- padding: 15px;
- font-size: 12px;
- display: none;
- }
- .c-menu > ul .c-menu__item .c-menu__submenu li {
- padding-bottom: 15px;
- margin-bottom: 15px;
- border-bottom: 1px solid;
- border-color: #072048;
- color: #5f9cfd;
- }
- .c-menu > ul .c-menu__item .c-menu__submenu li:last-child {
- margin: 0;
- padding: 0;
- border: 0;
- }
- main.l-main {
- width: 100%;
- height: 100%;
- padding: 70px 0 0 70px;
- -webkit-transition: padding 0.5s ease-in-out;
- -moz-transition: padding 0.5s ease-in-out;
- -ms-transition: padding 0.5s ease-in-out;
- -o-transition: padding 0.5s ease-in-out;
- transition: padding 0.5s ease-in-out;
- }
- main.l-main .content-wrapper {
- padding: 25px 0 0;
- height: 100%;
- }
- main.l-main .content-wrapper .page-content {
- border-top: 1px solid #d0d0d0;
- /*padding-top: 25px;*/
- text-align: center;
- }
- main.l-main .content-wrapper--with-bg .page-content {
- /*background: #fff;*/
- border-radius: 3px;
- border: 1px solid #d0d0d0;
- }
- main.l-main .page-title {
- font-weight: 400;
- margin-top: 0;
- margin-bottom: 25px;
- }
- .sidebar-is-expanded main.l-main {
- padding-left: 220px;
- }
- .device-icons button {
- background: none;
- border: none;
- cursor: pointer;
- }
- /* Estilo para o conteúdo do iframe */
- #content {
- margin-top: 50px; /* Espaço para os ícones */
- }
- #iframe-container {
- width: 100%;
- height: 100vh;
- border: none;
- }
- .componentesweb {
- width: 330px;
- background: #fff;
- position: absolute;
- left: 0;
- height: 600px;
- overflow: auto;
- }
- .componentesweb ul {
- list-style: none;
- padding: 0;
- position: absolute;
- left: 84px;
- top: 82px;
- }
- .componentesweb li {
- margin-bottom: 10px; /* Adiciona espaçamento entre os itens da lista */
- }
- .componentesweb img {
- border: 1px solid #ccc; /* Adiciona borda de 5px sólida cinza */
- /*padding: 10px; /* Adiciona espaçamento interno de 5px */
- display: block; /* Remove espaçamento extra abaixo da imagem */
- max-width: 216px; /* Garante que a imagem não ultrapasse a largura da lista */
- height: auto; /* Mantém a proporção da imagem */
- }
- .componentesweb #div2 {
- display: none;
- }
- .componentesweb img {
- cursor: all-scroll;
- }
- </style>
- </head>
- <body>
- <header class="l-header">
- <div class="l-header__inner clearfix"><!--
- <div class="c-header-icon js-hamburger">
- <div class="hamburger-toggle"><span class="bar-top"></span>
- <span class="bar-mid"></span><span class="bar-bot"></span>
- </div>
- </div>-->
- <div class="c-header-icon has-dropdown">
- <a href="index.php"><i class="fa fa-th" title="Return to Dashboard"></i></a>
- <div class="c-dropdown c-dropdown--notifications">
- <div class="c-dropdown__header"></div>
- <div class="c-dropdown__content"></div>
- </div>
- </div>
- <div class="c-header-icon has-dropdown device-icons">
- <button class="desktop"><i class="fa fa-television"></i></button>
- <div class="c-dropdown c-dropdown--notifications">
- <div class="c-dropdown__header"></div>
- <div class="c-dropdown__content"></div>
- </div>
- </div>
- <div class="c-header-icon has-dropdown device-icons">
- <button class="tablet"><i class="fa fa-tablet"></i></button>
- <div class="c-dropdown c-dropdown--notifications">
- <div class="c-dropdown__header"></div>
- <div class="c-dropdown__content"></div>
- </div>
- </div>
- <div class="c-header-icon has-dropdown device-icons">
- <button class="mobile"><i class="fa fa-mobile" aria-hidden="true"></i></button>
- <div class="c-dropdown c-dropdown--notifications">
- <div class="c-dropdown__header"></div>
- <div class="c-dropdown__content"></div>
- </div>
- </div>
- <div class="header-icons-group">
- <div class="c-header-icon basket"><i class="fa fa-reply" title="Go back"></i></div>
- <div class="c-header-icon logout"><i class="fa fa-share" title="Return"></i></div>
- <div class="c-header-icon logout"><i class="fa fa-eye" title="Preview"></i></div>
- <div class="c-header-icon logout"><i class="fa fa-floppy-o" title="Publish"></i></div>
- <div class="c-header-icon logout"><i class="fa fa-star-o" title="Upgrade"></i></div>
- </div>
- </div>
- </header>
- <div class="l-sidebar">
- <div class="logo">
- <div class="logo__txt">S</div>
- </div>
- <div class="l-sidebar__content">
- <nav class="c-menu js-menu">
- <ul class="u-list">
- <li class="c-menu__item is-active" data-toggle="tooltip" title="Menu">
- <div class="c-menu__item__inner">
- <i class="fa fa-bars" aria-hidden="true"></i>
- <div class="c-menu-item__title"><span><button id="btn1">Menu</button></span></div>
- </div>
- </li>
- <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Header">
- <div class="c-menu__item__inner">
- <i class="fa fa-address-card-o" aria-hidden="true"></i>
- <div class="c-menu-item__title"><span><button id="btn2">Header</button></span></div>
- <!--<div class="c-menu-item__expand js-expand-submenu"><i class="fa fa-angle-down"></i></div>-->
- </div>
- <!--<ul class="c-menu__submenu u-list">
- <li>Payments</li>
- <li>Maps</li>
- <li>Notifications</li>
- </ul>-->
- </li>
- <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Content">
- <div class="c-menu__item__inner">
- <i class="fa fa-clone" aria-hidden="true"></i>
- <div class="c-menu-item__title"><span>Content</span></div>
- </div>
- </li>
- <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Team">
- <div class="c-menu__item__inner">
- <i class="fa fa-users" aria-hidden="true"></i>
- <div class="c-menu-item__title"><span>Team</span></div>
- </div>
- </li>
- <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Gallery">
- <div class="c-menu__item__inner">
- <i class="fa fa-picture-o" aria-hidden="true"></i>
- <div class="c-menu-item__title"><span>Gallery</span></div>
- </div>
- </li>
- <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Partners">
- <div class="c-menu__item__inner">
- <i class="fa fa-user-o" aria-hidden="true"></i>
- <div class="c-menu-item__title"><span>Partners</span></div>
- </div>
- </li>
- <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Testimonials">
- <div class="c-menu__item__inner">
- <i class="fa fa-address-card-o" aria-hidden="true"></i>
- <div class="c-menu-item__title"><span>Testimonials</span></div>
- </div>
- </li>
- <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Pricing">
- <div class="c-menu__item__inner">
- <i class="fa fa-usd" aria-hidden="true"></i>
- <div class="c-menu-item__title"><span>Pricing</span></div>
- </div>
- </li>
- <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Footer">
- <div class="c-menu__item__inner">
- <i class="fa fa-list-alt" aria-hidden="true"></i>
- <div class="c-menu-item__title"><span>Footer</span></div>
- </div>
- </li>
- </ul>
- </nav>
- </div>
- </div>
- <div class="componentesweb">
- <div id="div1">
- <ul>
- <li>
- <a href="#" class="draggable" draggable="true" ondragstart="drag(event, 'menu')">
- <img src="templates/content/content-1.png" alt="Image 1">
- </a>
- </li>
- <li>
- <a href="#" class="draggable" draggable="true" ondragstart="drag(event, 'header')">
- <img src="templates/content/content-2.png" alt="Image 2">
- </a>
- </li>
- <li><img src="templates/content/content-3.png" alt="Image 3"></li>
- <li><img src="templates/content/content-4.png" alt="Image 4"></li>
- <li><img src="templates/content/content-5.png" alt="Image 1"></li>
- <li><img src="templates/content/content-6.png" alt="Image 2"></li>
- <li><img src="templates/content/content-7.png" alt="Image 3"></li>
- <li><img src="templates/content/content-8.png" alt="Image 4"></li>
- </ul>
- </div>
- <div id="div2">
- <ul>
- <li><img src="assets/img/ivana-square.jpg" alt="Image 1"></li>
- <li><img src="assets/img/ivana-square.jpg" alt="Image 2"></li>
- <li><img src="assets/img/ivana-square.jpg" alt="Image 3"></li>
- <li><img src="assets/img/ivana-square.jpg" alt="Image 4"></li>
- </ul>
- </div>
- </div>
- <main class="l-main">
- <div class="content-wrapper content-wrapper--with-bg">
- <div class="content page-content" id="iframe-container" ondrop="drop(event)" ondragover="allowDrop(event)">
- <div class="dropzone">
- <div class="highlight"></div>
- </div>
- <!--<iframe src="templates/view/98869/" frameborder="0" margin="0" width="100%" height="100%" style="overflow:hidden" id="iframe"></iframe>-->
- </div>
- </div>
- </main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
- <script>
- "use strict";
- var Dashboard = function () {
- var global = {
- tooltipOptions: {
- placement: "right"
- },
- menuClass: ".c-menu"
- };
- var menuChangeActive = function menuChangeActive(el) {
- var hasSubmenu = $(el).hasClass("has-submenu");
- $(global.menuClass + " .is-active").removeClass("is-active");
- $(el).addClass("is-active");
- // if (hasSubmenu) {
- // $(el).find("ul").slideDown();
- // }
- };
- var sidebarChangeWidth = function sidebarChangeWidth() {
- var $menuItemsTitle = $("li .menu-item__title");
- $("body").toggleClass("sidebar-is-reduced sidebar-is-expanded");
- $(".hamburger-toggle").toggleClass("is-opened");
- if ($("body").hasClass("sidebar-is-expanded")) {
- $('[data-toggle="tooltip"]').tooltip("destroy");
- } else {
- $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
- }
- };
- return {
- init: function init() {
- $(".js-hamburger").on("click", sidebarChangeWidth);
- $(".js-menu li").on("click", function (e) {
- menuChangeActive(e.currentTarget);
- });
- $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
- }
- };
- }();
- Dashboard.init();
- //# sourceURL=pen.js
- </script>
- <script>
- // Adiciona comportamento de dropdown aos itens do menu
- document.addEventListener('DOMContentLoaded', function() {
- var dropdowns = document.querySelectorAll('.dropdown');
- dropdowns.forEach(function(dropdown) {
- dropdown.addEventListener('mouseover', function() {
- this.classList.add('show');
- this.querySelector('.dropdown-menu').style.display = 'block';
- });
- dropdown.addEventListener('mouseout', function() {
- this.classList.remove('show');
- this.querySelector('.dropdown-menu').style.display = 'none';
- });
- });
- });
- </script>
- <script>
- $(document).ready(function(){
- // Mostrar visualização de desktop por padrão
- $('.desktop').addClass('active');
- // Alternar entre visualizações de dispositivos
- $('.desktop').click(function(){
- $('#iframe').css('width', '100%');
- $('#iframe').css('height', '100vh');
- $('.tablet, .mobile').removeClass('active');
- $(this).addClass('active');
- });
- $('.tablet').click(function(){
- $('#iframe').css('width', '768px'); // Largura de tablet padrão
- $('#iframe').css('height', '1024px'); // Altura de tablet padrão
- $('.desktop, .mobile').removeClass('active');
- $(this).addClass('active');
- });
- $('.mobile').click(function(){
- $('#iframe').css('width', '360px'); // Largura de celular padrão
- $('#iframe').css('height', '640px'); // Altura de celular padrão
- $('.desktop, .tablet').removeClass('active');
- $(this).addClass('active');
- });
- });
- </script>
- <script>
- document.addEventListener("DOMContentLoaded", function () {
- var iframe = document.getElementById("iframe");
- // Adicionar evento de clique ao iframe
- iframe.contentDocument.body.addEventListener("click", function (event) {
- var target = event.target;
- // Verificar se o elemento clicado é um bloco editável
- if (target.classList.contains("editable-block")) {
- // Permitir edição do conteúdo do bloco
- target.contentEditable = true;
- target.focus();
- } else {
- // Desativar edição do conteúdo do bloco se clicado fora do bloco
- var blocks = iframe.contentDocument.querySelectorAll(".editable-block");
- blocks.forEach(function (block) {
- block.contentEditable = false;
- });
- }
- });
- });
- </script>
- <script>
- $(document).ready(function(){
- $("#btn1").click(function(){
- $(".componentesweb div").hide(); // Oculta todas as divs dentro de .container
- $("#div1").show(); // Mostra a div com id div1
- });
- $("#btn2").click(function(){
- $(".componentesweb div").hide(); // Oculta todas as divs dentro de .container
- $("#div2").show(); // Mostra a div com id div2
- });
- $("#btn3").click(function(){
- $(".componentesweb div").hide(); // Oculta todas as divs dentro de .container
- $("#div3").show(); // Mostra a div com id div3
- });
- });
- </script>
- <!-- CODIGO DO DRAG AND DROP -->
- <script>
- function allowDrop(event) {
- event.preventDefault();
- }
- function drag(event, type) {
- event.dataTransfer.setData("text", type);
- }
- async function loadHtmlFile(pathFile) {
- try {
- const response = await fetch(pathFile);
- const html = await response.text();
- return html;
- } catch (error) {
- console.error('Error on load file:', error);
- return null;
- }
- }
- async function drop(event) {
- event.preventDefault();
- var type = event.dataTransfer.getData("text");
- var content = "";
- template = {
- "menu": 'templates/content/content-1.html',
- "header": 'templates/content/content-2.html',
- "content": 'templates/content/content-3.html',
- "footer": 'templates/content/content-4.html'
- }
- content = await loadHtmlFile(template[type]);
- var dropzone = event.target.closest('.content');
- if (dropzone) {
- var block = document.createElement("div");
- block.className = "alert alert-primary position-relative";
- block.innerHTML = content;
- var deleteButton = document.createElement("i");
- deleteButton.className = "fa fa-trash delete-button";
- deleteButton.onclick = function() {
- if (confirm("Tem certeza que deseja deletar este bloco?")) {
- block.remove();
- }
- };
- var redButton = document.createElement("button");
- redButton.className = "red-button";
- redButton.innerHTML = "Deletar";
- redButton.onclick = function() {
- if (confirm("Tem certeza que deseja deletar este bloco?")) {
- block.remove();
- }
- };
- var duplicateButton = document.createElement("button");
- duplicateButton.className = "duplicate-button";
- duplicateButton.innerHTML = "Duplicar";
- duplicateButton.onclick = function() {
- duplicateBlock(block);
- };
- block.appendChild(deleteButton);
- block.appendChild(redButton);
- block.appendChild(duplicateButton);
- dropzone.appendChild(block);
- tinymce.init({
- selector: '.editable',
- height: 200,
- menubar: false,
- plugins: [
- 'advlist autolink lists link image charmap print preview anchor',
- 'searchreplace visualblocks code fullscreen',
- 'insertdatetime media table paste code help wordcount'
- ],
- toolbar: 'undo redo | formatselect | bold italic backcolor | \
- alignleft aligncenter alignright alignjustify | \
- bullist numlist outdent indent | removeformat | help'
- });
- }
- }
- function duplicateBlock(originalBlock) {
- var newBlock = originalBlock.cloneNode(true);
- var deleteButton = newBlock.querySelector('.delete-button');
- deleteButton.onclick = function() {
- if (confirm("Tem certeza que deseja deletar este bloco?")) {
- newBlock.remove();
- }
- };
- var redButton = newBlock.querySelector('.red-button');
- redButton.onclick = function() {
- if (confirm("Tem certeza que deseja deletar este bloco?")) {
- newBlock.remove();
- }
- };
- document.querySelector('.content').appendChild(newBlock);
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment