<?php
/**
 * Filename : index.php
 * Created  : Andy Christian S. Loyola <acl20032003@gmail.com> (https://AndyLoyola.Com)
 * Copyright 2024 - Andy Christian S. Loyola <acl20032003@gmail.com> (https://AndyLoyola.Com)
 *
 * Skype    : andy_christian_loyola_
 * Email    : acl20032003@gmail.com
 */
define ('_IN_MAIN_MODULE', 1);
 
?>



<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML Elements</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro.css" />
        <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro-icons.css" />
        <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro-responsive.css" />
        <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro-colors.css" />

        <link type="text/css" rel="stylesheet" href="tmpl/js/jquery-ui/jquery-ui.min.css" />
        <link type="text/css" rel="stylesheet" href="tmpl/js/DataTables/datatables.min.css" />
        <link type="text/css" rel="stylesheet" href="tmpl/js/DataTables/DataTables-1.13.6/css/dataTables.jqueryui.css" />
<!--        <link type="text/css" rel="stylesheet" href="tmpl/js/tinymce/skins/ui/oxide/skin.min.css" />-->
<!--        <link type="text/css" rel="stylesheet" href="tmpl/js/tinymce/skins/content/default/content.min.css" />-->


        <style type="text/css">
            body {
                background: #c0c0c0;
                color: #000 !important;
                padding: 10px !important;
            }

            body, h1, h2, h3, h4, h5, h6, a, p {
                font-family: "Times New Roman", "Bitstream Charter", Times, serif !important;
                /*font-family: Courier, monospace !important;*/
            }

            h1, h2, h3, h4, h5, h6,
            label {
                font-weight: bold !important;
            }

            a {
                color: #000 !important;
            }

            .container {
                width: 1024px;
                margin: 0 auto !important;
            }


            .dataTables_wrapper {
                /*font-family: Arial Narrow, Arial, sans-serif !important;*/
                /*font-size: 12px !important;*/

                border: 2px solid #ccc !important;
                border-radius: 5px !important;
                -moz-border-radius: 5px !important;
                -webkit-border-radius: 5px !important;

                padding: 10px !important;

                /*font-size: 14px !important;*/
            }


            .GeneratedMarquee {
                font-family: Courier, monospace !important;
                font-size: 18px !important;
                font-weight: bold !important;
                line-height: 1.3em !important;
                color: #ffff99 !important;
                background: #000 !important;
                padding: 3px !important;
            }

            .dataTables_wrapper {
                font-size: 12px !important;
            }

            .ui-buttonset {
                padding-bottom: 10px !important;
            }

            table.dataTable {
                padding-top: 10px !important;
            }

            table.dataTable th {
                font-weight: bold !important;
            }
            
            
            #elements {
                width: 100%;
                padd 10px;
                border: 1px solid #ccc;
                background: #f9f9f9;
            }
            
            .draggable {
                padding: 10px;
                margin: 10px;
                background: #ddd;
                cursor: move;
                text-align: center;
            }

            #drop-area {
                height: 300px;
                border: 2px dashed #ccc;
                text-align: center;
                padding: 10px;
            }
        </style>
    </head>
    <body>

        <marquee class="GeneratedMarquee" direction="left" scrollamount="11" behavior="scroll">Profitable News And Updates From TheProfitScoop.com Come Back To This Page Every Day And Watch Your Profitablility Grow.</marquee>

        <div class="grid">
            <div class="row cell align-center">
                <a href="https://www.theprofitscoop.com" style="text-decoration:none!important;">
                    <img border="0" src="https://www.theprofitscoop.com/logoscoop.png" width="224" height="167"> <br />
                    <h1 class="text-bold">The Profit Scoop: HTML Elements</h1>
                </a>
            </div>

            <div class="row cells8 padding10 bg-white">
                <div class="cell"></div>
                <div class="cell colspan6">
                    <div class="row cells4">
                        <div class="cell">
                            <h4>Drag and Drop Elements</h4> <hr />

                            <div id="elements">
                                <div class="draggable" data-type="textbox">Textbox</div>
                                <div class="draggable" data-type="textarea">Textarea</div>
                                <div class="draggable" data-type="select">Select</div>
                                <div class="draggable" data-type="button">Button</div>
                                <div class="draggable" data-type="radio">Radio</div>
                            </div>
                        </div>

                        <div class="cell" id="drop-area">
                            <p>Drag and drop elements here</p>
                        </div>
                    </div>
                </div>
                <div class="cell"></div>
            </div>
        </div>



        <script src="tmpl/js/jquery-3.3.1.min.js"></script>
        <script src="tmpl/css/metroui/js/metro.js"></script>
        <script src="tmpl/js/jquery-ui/jquery-ui.min.js"></script>
        <script src="tmpl/js/jquery.cookie.js"></script>
        <script src="tmpl/js/DataTables/datatables.min.js"></script>
<!--        <script src="tmpl/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>-->

        <script type="text/javascript">
            $(document).ready(function() {
                $('.draggable').draggable({ helper : 'clone' });

                $('#drop-area').draggable({ helper : 'clone' });


                $('#drop-area').droppable({
                    accept  : '.draggable',
                    drop    : function(event, ui) {
                        var type = ui.helper.data('type');
                        var newElement;

                        switch (type) {
                            case 'textbox' :
                                newElement = $('<input type="text" placeholder="Textbox placeholder" class="draggable" style="width:100%;" />');
                                break;

                            case 'textarea' :
                                newElement = $('<textarea placeholder="Textarea placeholder text" style="width:100%;"></textarea>');
                                break;

                            case 'select' :
                                newElement = $('<select style="width:100%;"><option value="-">Select Value</option></select>')
                                break;

                            case 'button' :
                                newElement = $('<button>Click Me</button>');
                                break;

                            case 'radio' :
                                newElement = $('<input type="radio" />');
                                break;
                        }

                        if (newElement) {
                            newElement.addClass('draggable-element');
                            $(this).append(newElement);
                        }
                    }
                });
            });
        </script>
    </body>
</html>
