---

---

<link rel="stylesheet" href="css/idea.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


<script src="js/highlight.pack.js"></script>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<style>
.button {
   background: #0090D9;
   background-image: -webkit-linear-gradient(top, #0090D9, #1E62D0);
   background-image: -moz-linear-gradient(top, #0090D9, #1E62D0);
   background-image: -ms-linear-gradient(top, #0090D9, #1E62D0);
   background-image: -o-linear-gradient(top, #0090D9, #1E62D0);
   background-image: linear-gradient(to bottom, #0090D9, #1E62D0);
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   color: #FFFFFF;
   font-family: Open Sans;
   font-size: 40px;
   font-weight: 100;
   padding: 40px;
   box-shadow: 1px 1px 5px 0px #000000;
   -webkit-box-shadow: 1px 1px 5px 0px #000000;
   -moz-box-shadow: 1px 1px 5px 0px #000000;
   text-shadow: 1px 1px 20px #000000;
   border: solid #337FED 1px;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   text-align: center;
}

.button:hover {
   border: solid #337FED 1px;
   background: #1E62D0;
   background-image: -webkit-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: -moz-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: -ms-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: -o-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: linear-gradient(to bottom, #1E62D0, #3D94F6);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   text-decoration: none;
}
    </style>

<script>
    $(document).ready(function() {
            initHighLight();
            //listHover();
        });


        function listHover(){
            $("#list").on({
                mouseenter: function () {
                    if(!$("#tools").is(":visible") && $("#list code").text() !== "") {
                        $("#tools").fadeIn().removeClass("hidden");
                    }
                },
                mouseleave: function () {
                    if($("#tools").is(":visible"))
                        $("#tools").fadeOut().removeClass("hidden").addClass("hidden");
                }
            });
        }

        function initHighLight() {
            $('#list pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        }

        function generateList() {
            $("#tools").fadeOut().removeClass("hidden").addClass("hidden");
            $("#btn_gen").prop("disabled", true);
            $.ajax({
                type: "POST",
                url: "convertitore.php",
                data: {old: $("#url").val(), is_f4m: $("input[name='is_f4m']:checked").val()},
                success: function (res) {
                    if(res){
                        $("#list code").text(res.toString());
                        $("#tools").fadeIn().removeClass("hidden");
                    }
                    initHighLight();
                    $("#btn_gen").prop("disabled", false);
                }
            });
        }

        function selectLista(){
            //win = win || window;
            var doc = window.document, sel, range;
            if (window.getSelection && doc.createRange) {
                sel = window.getSelection();
                range = doc.createRange();
                range.selectNodeContents(document.getElementById("code"));
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (doc.body.createTextRange) {
                range = doc.body.createTextRange();
                range.moveToElementText(document.getElementById("code"));
                range.select();
            }
            document.execCommand("copy");
            $("#message").fadeIn().delay(3500).fadeOut();
        }

        function downloadLista() {
            $("#btn_download").prop("disabled", true);
            $.ajax({
                url: "convertitore.php", // my URL
                type: "POST",
                data: {old: $("#url").val(), is_f4m: $("input[name='is_f4m']:checked").val()},
                dataType: 'xml',
                success: function(result) {
                    var restring = new XMLSerializer().serializeToString(result.documentElement);
                    var blob = new Blob([restring], { type: 'text/plain' });
                    var link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = "lista.xml";
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    $("#btn_download").prop("disabled", false);
                },
                error: function (jqXHR,textStatus,errorThrown) {
                    console.log(textStatus);
                    console.log(errorThrown);
                    $("#btn_download").prop("disabled", false);
                }
            });
        }
    
    function clearForm() {
    	$("#url").val('');
        $("#list code").text('');
        $("#tools").fadeOut();
    }
    
    </script>

<div>
<h1>Converti La tua Lista m3u in Xml</h1>
    <hr/>
<form>
        <div>
            <textarea name="url" id="url" placeholder="File m3u" style="width:100%; min-height: 10rem;"></textarea>
        </div>
        <div style="margin: auto; text-align:center;">
            <div style="margin: 2rem auto">
                    <label for="option-two" style="margin-right:1rem;">
                        <input id="option-one" type="radio" name="is_f4m" value="1" checked>
                        F4m
                    </label>

                    <label for="option-three"  style="margin-left:1rem;">
                        <input id="option-two" type="radio" name="is_f4m" value="0">
                        No F4m
                    </label>
                </div>
            <button id="btn_gen" type="button" onclick="generateList()" class="button"> Converti </button>
        </div>
    	<hr/>
        <div>
            <div id="list">
                <pre style="overflow:hidden; padding: 0 1rem;">
                    <code style="min-height: 10rem; max-height:15rem;" class="html" id="code"></code>
                </pre>
                <div id="tools" class="hidden">
                    <div style="text-align:center; margin:auto">
                        <button class="button" type="button" onclick="selectLista()">
                            <i class="fa fa-clipboard-check"></i>
                            Seleziona Tutto
                        </button>
                        <button id="btn_download" class="button" type="button" onclick="downloadLista()">
                            <i class="fa fa-file-download"></i>
                            Download Lista</button>
                        <button id="btn_clear" class="button" type="button" onclick="clearForm()">
                            <i class="fa fa-window-close"></i>
                            Cancella</button>
                    </div>
                </div>
                <div id="message" style="display:none; color:red;">Copiato Nella Clipboard</div>
            </div>
        </div>
    </form>
 
    
    
    <p style="margin: 0px 0px 1em;"> </p>
</div>