Actualización

main/inc/lib/formvalidator/Element/BigUpload.php

@@ -0,0 +1,86 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * Input file with progress element.
+ *
+ * Class BigUpload
+ */
+class BigUpload extends HTML_QuickForm_file
+{
+    /**
+     * @param string $elementName
+     * @param string $elementLabel
+     * @param array  $attributes
+     */
+    public function __construct($elementName = null, $elementLabel = null, $attributes = null)
+    {
+        parent::__construct($elementName, $elementLabel, $attributes);
+    }
+
+    /**
+     * @return string
+     */
+    public function toHtml()
+    {
+        $origin = $this->getAttribute('data-origin');
+        $id = $this->getAttribute('id');
+        $maxSize = getIniMaxFileSizeInBytes();
+        $errorUploadMessage = get_lang('FileSizeIsTooBig').' '.get_lang('MaxFileSize').' : '.getIniMaxFileSizeInBytes(true);
+        $html = parent::toHtml();
+        $html .= '<div id="'.$id.'-bigUploadProgressBarContainer">
+            <div id="'.$id.'-bigUploadProgressBarFilled"></div>
+        </div>
+        <div id="'.$id.'-bigUploadTimeRemaining"></div>
+        <div id="'.$id.'-bigUploadResponse"></div>';
+        $js = '<script src="'.api_get_path(WEB_LIBRARY_JS_PATH).'bigupload/js/bigUpload.js"></script>';
+        $js .= '<script>
+            var bigUpload = new bigUpload();
+            var uploadForm, formId, submitButtonId;
+            $(function() {
+                uploadForm = $("#'.$id.'").closest("form");
+                formId = uploadForm.attr("id");
+                submitButtonId = uploadForm.find("[type=\'submit\']").attr("id");
+                $("#"+submitButtonId).click(function(e) {
+                    if ($("#'.$id.'").val()) {
+                        e.preventDefault();
+                        setBigUploadSettings();
+                        bigUpload.fire();
+                    }
+                });
+            });
+            function setBigUploadSettings() {
+                //The id of the file input
+                bigUpload.settings.inputField = "'.$id.'";
+                //The id of the form with the file upload.
+                bigUpload.settings.formId = formId;
+                //The id of the progress bar
+                bigUpload.settings.progressBarField = "'.$id.'-bigUploadProgressBarFilled";
+                //The id of the time remaining field
+                bigUpload.settings.timeRemainingField = "'.$id.'-bigUploadTimeRemaining";
+                //The id of the text response field
+                bigUpload.settings.responseField = "'.$id.'-bigUploadResponse";
+                //The id of the submit button
+                bigUpload.settings.submitButton = submitButtonId;
+                //Color of the background of the progress bar
+                bigUpload.settings.progressBarColor = "#5bb75b";
+                //Color of the background of the progress bar when an error is triggered
+                bigUpload.settings.progressBarColorError = "#da4f49";
+                //Path to the php script for handling the uploads
+                bigUpload.settings.scriptPath = "'.api_get_path(WEB_LIBRARY_JS_PATH).'bigupload/inc/bigUpload.php";
+                //cid Req
+                bigUpload.settings.cidReq = "'.api_get_cidreq().'";
+                //Set the origin upload
+                bigUpload.settings.origin = "'.$origin.'";
+                //The parameters from the upload form
+                bigUpload.settings.formParams = uploadForm.serialize();
+                //Max file size allowed
+                bigUpload.settings.maxFileSize = "'.$maxSize.'";
+                // Message error upload filesize
+                bigUpload.settings.errMessageFileSize = "'.$errorUploadMessage.'";
+            }
+        </script>';
+
+        return $js.$html;
+    }
+}

main/inc/lib/formvalidator/Element/Color.php

@@ -0,0 +1,52 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * Input Color element.
+ *
+ * Class Color
+ */
+class Color extends HTML_QuickForm_text
+{
+    /**
+     * @param string $elementName
+     * @param string $elementLabel
+     * @param array  $attributes
+     */
+    public function __construct($elementName = null, $elementLabel = null, $attributes = null)
+    {
+        if (!isset($attributes['id'])) {
+            $attributes['id'] = $elementName;
+        }
+
+        $attributes['type'] = 'color';
+        $attributes['class'] = 'form-control';
+        $attributes['cols-size'] = isset($attributes['cols-size']) ? $attributes['cols-size'] : [2, 1, 9];
+
+        parent::__construct($elementName, $elementLabel, $attributes);
+
+        $this->_appendName = true;
+        $this->setType('color');
+    }
+
+    /**
+     * @return string
+     */
+    public function toHtml()
+    {
+        return parent::toHtml().<<<JS
+            <script>
+                $(function() {
+                    var txtColor = $('#{$this->getAttribute('id')}'),
+                        lblColor = txtColor.parent().next();
+
+                    lblColor.text(txtColor.val());
+
+                    txtColor.on('change', function () {
+                        lblColor.text(txtColor.val());
+                    })
+                });
+            </script>
+JS;
+    }
+}

main/inc/lib/formvalidator/Element/DatePicker.php

@@ -0,0 +1,186 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * Form element to select a date.
+ *
+ * Class DatePicker
+ */
+class DatePicker extends HTML_QuickForm_text
+{
+    /**
+     * @param string       $elementName
+     * @param string|array $elementLabel
+     * @param array        $attributes
+     */
+    public function __construct($elementName, $elementLabel = null, $attributes = null)
+    {
+        if (!isset($attributes['id'])) {
+            $attributes['id'] = $elementName;
+        }
+        $attributes['class'] = 'form-control';
+
+        parent::__construct($elementName, $elementLabel, $attributes);
+        $this->_appendName = true;
+    }
+
+    /**
+     * HTML code to display this datepicker.
+     *
+     * @return string
+     */
+    public function toHtml()
+    {
+        if ($this->_flagFrozen) {
+            return $this->getFrozenHtml();
+        }
+
+        $id = $this->getAttribute('id');
+        $value = $this->getValue();
+
+        if (!empty($value)) {
+            $value = api_format_date($value, DATE_FORMAT_LONG_NO_DAY);
+        }
+
+        return '
+            <div class="input-group">
+                <span class="input-group-addon cursor-pointer">
+                    <input '.$this->_getAttrString($this->_attributes).'>
+                </span>
+                <p class="form-control disabled" id="'.$id.'_alt_text">'.$value.'</p>
+                <input class="form-control" type="hidden" id="'.$id.'_alt" value="'.$value.'">
+                <span class="input-group-btn">
+                    <button class="btn btn-default" type="button"
+                            title="'.sprintf(get_lang('ResetFieldX'), $this->_label).'">
+                        <span class="fa fa-trash text-danger" aria-hidden="true"></span>
+                        <span class="sr-only">'.sprintf(get_lang('ResetFieldX'), $this->_label).'</span>
+                    </button>
+                </span>
+            </div>
+        '.$this->getElementJS();
+    }
+
+    /**
+     * @param string $value
+     */
+    public function setValue($value)
+    {
+        $value = substr($value, 0, 16);
+        $this->updateAttributes(
+            [
+                'value' => $value,
+            ]
+        );
+    }
+
+    /**
+     * @param string $layout
+     *
+     * @return string
+     */
+    public function getTemplate($layout)
+    {
+        $size = $this->calculateSize();
+
+        switch ($layout) {
+            case FormValidator::LAYOUT_INLINE:
+                return '
+                <div class="form-group {error_class}">
+                    <label {label-for} >
+                        <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
+                        {label}
+                    </label>
+
+                    {element}
+                </div>';
+            case FormValidator::LAYOUT_HORIZONTAL:
+                return '
+                <div class="form-group {error_class}">
+                    <label {label-for} class="col-sm-'.$size[0].' control-label {extra_label_class}" >
+                        <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
+                        {label}
+                    </label>
+                    <div class="col-sm-'.$size[1].'">
+                        {icon}
+
+                        {element}
+
+                        <!-- BEGIN label_2 -->
+                            <p class="help-block">{label_2}</p>
+                        <!-- END label_2 -->
+
+                        <!-- BEGIN error -->
+                            <span class="help-inline help-block">{error}</span>
+                        <!-- END error -->
+                    </div>
+                    <div class="col-sm-'.$size[2].'">
+                        <!-- BEGIN label_3 -->
+                            {label_3}
+                        <!-- END label_3 -->
+                    </div>
+                </div>';
+            case FormValidator::LAYOUT_BOX_NO_LABEL:
+                return '{element}';
+        }
+
+        return '<div class="form-group">
+                <label {label-for}>{label}</label>
+                {element}
+            </div>'
+        ;
+    }
+
+    /**
+     * Get the necessary javascript for this datepicker.
+     *
+     * @return string
+     */
+    private function getElementJS()
+    {
+        $js = null;
+        $id = $this->getAttribute('id');
+
+        $js .= "<script>                    
+            $(function() {
+                var txtDate = $('#$id'),
+                    inputGroup = txtDate.parents('.input-group'),
+                    txtDateAlt = $('#{$id}_alt'),
+                    txtDateAltText = $('#{$id}_alt_text');
+                    
+                txtDate
+                    .hide()
+                    .datepicker({
+                        defaultDate: '".$this->getValue()."',
+                        dateFormat: 'yy-mm-dd',
+                        altField: '#{$id}_alt',
+                        altFormat: \"".get_lang('DateFormatLongNoDayJS')."\",
+                        showOn: 'both',
+                        buttonImage: '".Display::return_icon('attendance.png', null, [], ICON_SIZE_TINY, true, true)."',
+                        buttonImageOnly: true,
+                        buttonText: '".get_lang('SelectDate')."',
+                        changeMonth: true,
+                        changeYear: true,
+                        yearRange: 'c-60y:c+5y'
+                    })
+                    .on('change', function (e) {
+                        txtDateAltText.text(txtDateAlt.val());
+                    });
+                    
+                txtDateAltText.on('click', function () {
+                    txtDate.datepicker('show');
+                });
+
+                inputGroup
+                    .find('button')
+                    .on('click', function (e) {
+                        e.preventDefault();
+
+                        $('#$id, #{$id}_alt').val('');
+                        $('#{$id}_alt_text').html('');
+                    });
+            });
+        </script>";
+
+        return $js;
+    }
+}

main/inc/lib/formvalidator/Element/DateRangePicker.php

@@ -0,0 +1,231 @@
+<?php
+
+/* For licensing terms, see /license.txt */
+
+/**
+ * Form element to select a range of dates (with popup datepicker).
+ */
+class DateRangePicker extends HTML_QuickForm_text
+{
+    /**
+     * DateRangePicker constructor.
+     *
+     * @param string       $elementName
+     * @param string|array $elementLabel
+     * @param array        $attributes
+     */
+    public function __construct($elementName, $elementLabel = null, $attributes = null)
+    {
+        if (!isset($attributes['id'])) {
+            $attributes['id'] = $elementName;
+        }
+        $attributes['class'] = 'form-control';
+        parent::__construct($elementName, $elementLabel, $attributes);
+        $this->_appendName = true;
+        $this->_type = 'date_range_picker';
+    }
+
+    /**
+     * @return string
+     */
+    public function toHtml()
+    {
+        $js = $this->getElementJS();
+
+        $this->removeAttribute('format');
+        $this->removeAttribute('timepicker');
+        $this->removeAttribute('validate_format');
+
+        return $js.parent::toHtml();
+    }
+
+    /**
+     * @param string $value
+     */
+    public function setValue($value)
+    {
+        $this->updateAttributes(
+            [
+                'value' => $value,
+            ]
+        );
+    }
+
+    /**
+     * @param array $dateRange
+     *
+     * @return array
+     */
+    public function parseDateRange($dateRange)
+    {
+        $dateRange = Security::remove_XSS($dateRange);
+        $dates = explode('/', $dateRange);
+        $dates = array_map('trim', $dates);
+        $start = isset($dates[0]) ? $dates[0] : '';
+        $end = isset($dates[1]) ? $dates[1] : '';
+
+        $pattern = 'yyyy-MM-dd HH:mm';
+        if ('false' === $this->getAttribute('timePicker') &&
+            false === strpos($this->getAttribute('format'), 'HH:mm')) {
+            $pattern = 'yyyy-MM-dd';
+        }
+
+        $formatter = new IntlDateFormatter(
+            'en',
+            IntlDateFormatter::NONE,
+            IntlDateFormatter::NONE,
+            'UTC',
+            IntlDateFormatter::GREGORIAN,
+            $pattern
+        );
+        $resultStart = $formatter->format($formatter->parse($start));
+        $resultEnd = $formatter->format($formatter->parse($end));
+
+        return [
+            'start' => $resultStart,
+            'end' => $resultEnd,
+        ];
+    }
+
+    /**
+     * @param array $dates result of parseDateRange()
+     *
+     * @return bool
+     */
+    public function validateDates($dates, $format = null)
+    {
+        if (empty($dates['start']) || empty($dates['end'])) {
+            return false;
+        }
+
+        $format = $format ? $format : 'Y-m-d H:i';
+        $d = DateTime::createFromFormat($format, $dates['start']);
+        $resultStart = $d && $d->format($format) == $dates['start'];
+
+        $d = DateTime::createFromFormat($format, $dates['end']);
+        $resultEnd = $d && $d->format($format) == $dates['end'];
+
+        if (!$resultStart || !$resultEnd) {
+            return false;
+        }
+
+        return true;
+    }
+
+    /**
+     * @param mixed $value
+     * @param array $submitValues
+     * @param array $errors
+     *
+     * @return string
+     */
+    public function getSubmitValue($value, &$submitValues, &$errors)
+    {
+        /** @var DateRangePicker $element */
+        $elementName = $this->getName();
+        $parsedDates = $this->parseDateRange($value);
+        $validateFormat = $this->getAttribute('validate_format');
+
+        if (!$this->validateDates($parsedDates, $validateFormat)) {
+            $errors[$elementName] = get_lang('CheckDates');
+        }
+        $submitValues[$elementName.'_start'] = $parsedDates['start'];
+        $submitValues[$elementName.'_end'] = $parsedDates['end'];
+
+        return $value;
+    }
+
+    /**
+     * Get the necessary javascript for this datepicker.
+     *
+     * @return string
+     */
+    private function getElementJS()
+    {
+        $js = null;
+        $id = $this->getAttribute('id');
+        $dateRange = $this->getAttribute('value');
+
+        $defaultDates = null;
+        if (!empty($dateRange)) {
+            $dates = $this->parseDateRange($dateRange);
+            $defaultDates = "
+                    startDate: '".$dates['start']."',
+                    endDate: '".$dates['end']."', ";
+        }
+
+        $minDate = null;
+        $minDateValue = Security::remove_XSS($this->getAttribute('minDate'));
+        if (!empty($minDateValue)) {
+            $minDate = "
+                minDate: '{$minDateValue}',
+            ";
+        }
+
+        $maxDate = null;
+        $maxDateValue = Security::remove_XSS($this->getAttribute('maxDate'));
+        if (!empty($maxDateValue)) {
+            $maxDate = "
+                maxDate: '{$maxDateValue}',
+            ";
+        }
+
+        $format = 'YYYY-MM-DD HH:mm';
+        $formatValue = Security::remove_XSS($this->getAttribute('format'));
+        if (!empty($formatValue)) {
+            $format = $formatValue;
+        }
+
+        $timePicker = 'true';
+        $timePickerValue = Security::remove_XSS($this->getAttribute('timePicker'));
+        if (!empty($timePickerValue)) {
+            $timePicker = 'false';
+        }
+
+        $timeIncrement = FormValidator::getTimepickerIncrement();
+
+        // timeFormat: 'hh:mm'
+        $js .= "<script>
+            $(function() {
+                $('#$id').daterangepicker({
+                    timePicker: $timePicker,
+                    timePickerIncrement: $timeIncrement,
+                    timePicker24Hour: true,
+                    $defaultDates
+                    $maxDate
+                    $minDate
+                    ranges: {
+                         '".addslashes(get_lang('Today'))."': [moment(), moment()],
+                         '".addslashes(get_lang('Yesterday'))."': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                         '".addslashes(get_lang('ThisMonth'))."': [moment().startOf('month'), moment().endOf('month')],
+                         '".addslashes(get_lang('LastMonth'))."': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
+                         '".addslashes(get_lang('ThisWeek'))."': [moment().weekday(1), moment().weekday(5)],
+                         '".addslashes(get_lang('NextWeek'))."': [moment().weekday(8), moment().weekday(12)]
+                    },
+                    //showDropdowns : true,
+
+                    locale: {
+                        separator: ' / ',
+                        format: '$format',
+                        applyLabel: '".addslashes(get_lang('Ok'))."',
+                        cancelLabel: '".addslashes(get_lang('Cancel'))."',
+                        fromLabel: '".addslashes(get_lang('From'))."',
+                        toLabel: '".addslashes(get_lang('Until'))."',
+                        customRangeLabel: '".addslashes(get_lang('CustomRange'))."',
+                    }
+                });
+
+                $('#$id').on('change', function() {
+                    var myPickedDates = $('#$id').val().split('/');
+                    var {$id}_start = myPickedDates[0].trim();
+                    var {$id}_end = myPickedDates[1].trim();
+
+                    $('input[name={$id}_start]').val({$id}_start);
+                    $('input[name={$id}_end]').val({$id}_end);
+                });
+            });
+        </script>";
+
+        return $js;
+    }
+}

main/inc/lib/formvalidator/Element/DateTimePicker.php

@@ -0,0 +1,191 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * Form element to select a date and hour.
+ */
+class DateTimePicker extends HTML_QuickForm_text
+{
+    /**
+     * DateTimePicker constructor.
+     *
+     * @param string       $elementName
+     * @param string|array $elementLabel
+     * @param array        $attributes
+     */
+    public function __construct($elementName, $elementLabel = null, $attributes = null)
+    {
+        if (!isset($attributes['id'])) {
+            $attributes['id'] = $elementName;
+        }
+        $attributes['class'] = 'form-control';
+        parent::__construct($elementName, $elementLabel, $attributes);
+        $this->_appendName = true;
+    }
+
+    /**
+     * HTML code to display this datepicker.
+     *
+     * @return string
+     */
+    public function toHtml()
+    {
+        if ($this->_flagFrozen) {
+            return $this->getFrozenHtml();
+        }
+
+        $id = $this->getAttribute('id');
+        $value = $this->getValue();
+
+        $formattedValue = '';
+        if (!empty($value)) {
+            $formattedValue = api_format_date($value, DATE_TIME_FORMAT_LONG_24H);
+        }
+
+        $label = $this->getLabel();
+        if (is_array($label) && isset($label[0])) {
+            $label = $label[0];
+        }
+
+        $resetFieldX = sprintf(get_lang('ResetFieldX'), $label);
+
+        return '
+            <div class="input-group" id="date_time_wrapper_'.$id.'">
+                <span class="input-group-addon cursor-pointer">
+                    <input '.$this->_getAttrString($this->_attributes).'>
+                </span>
+                <p class="form-control disabled" id="'.$id.'_alt_text">'.$formattedValue.'</p>
+                <input class="form-control" type="hidden" id="'.$id.'_alt" value="'.$value.'">
+                <span class="input-group-btn">
+                    <button class="btn btn-default" type="button"
+                            title="'.$resetFieldX.'">
+                        <span class="fa fa-trash text-danger" aria-hidden="true"></span>
+                        <span class="sr-only">'.$resetFieldX.'</span>
+                    </button>
+                </span>
+            </div>
+        '.$this->getElementJS();
+    }
+
+    /**
+     * @param string $value
+     */
+    public function setValue($value)
+    {
+        $value = substr($value, 0, 16);
+        $this->updateAttributes(['value' => $value]);
+    }
+
+    /**
+     * @param string $layout
+     *
+     * @return string
+     */
+    public function getTemplate($layout)
+    {
+        $size = $this->calculateSize();
+
+        switch ($layout) {
+            case FormValidator::LAYOUT_INLINE:
+                return '
+                <div class="form-group {error_class}">
+                    <label {label-for} >
+                        <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
+                        {label}
+                    </label>
+
+                    {element}
+                </div>';
+            case FormValidator::LAYOUT_HORIZONTAL:
+                return '
+                <div class="form-group {error_class}">
+                    <label {label-for} class="col-sm-'.$size[0].' control-label {extra_label_class}" >
+                        <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
+                        {label}
+                    </label>
+                    <div class="col-sm-'.$size[1].'">
+                        {icon}
+
+                        {element}
+
+                        <!-- BEGIN label_2 -->
+                            <p class="help-block">{label_2}</p>
+                        <!-- END label_2 -->
+
+                        <!-- BEGIN error -->
+                            <span class="help-inline help-block">{error}</span>
+                        <!-- END error -->
+                    </div>
+                    <div class="col-sm-'.$size[2].'">
+                        <!-- BEGIN label_3 -->
+                            {label_3}
+                        <!-- END label_3 -->
+                    </div>
+                </div>';
+            case FormValidator::LAYOUT_BOX_NO_LABEL:
+                return '{element}';
+        }
+    }
+
+    /**
+     * Get the necessary javascript for this datepicker.
+     *
+     * @return string
+     */
+    private function getElementJS()
+    {
+        $timeIncrement = FormValidator::getTimepickerIncrement();
+
+        $js = null;
+        $id = $this->getAttribute('id');
+        //timeFormat: 'hh:mm'
+        $js .= "<script>
+            $(function() {
+                var txtDateTime = $('#$id'),
+                    inputGroup = txtDateTime.parents('.input-group'),
+                    txtDateTimeAlt = $('#{$id}_alt'),
+                    txtDateTimeAltText = $('#{$id}_alt_text');
+
+                txtDateTime
+                    .hide()
+                    .datetimepicker({
+                        defaultDate: '".$this->getValue()."',
+                        dateFormat: 'yy-mm-dd',
+                        controlType: 'select',
+                        oneLine: true,
+                        stepMinute: $timeIncrement,
+                        timeFormat: 'HH:mm',
+                        altField: '#{$id}_alt',
+                        altFormat: \"".get_lang('DateFormatLongNoDayJS')."\",
+                        altTimeFormat: \"".get_lang('TimeFormatNoSecJS')."\",
+                        altSeparator: \" ".get_lang('AtTime')." \",
+                        altFieldTimeOnly: false,
+                        showOn: 'both',
+                        buttonImage: '".Display::return_icon('attendance.png', null, [], ICON_SIZE_TINY, true, true)."',
+                        buttonImageOnly: true,
+                        buttonText: '".get_lang('SelectDate')."',
+                        changeMonth: true,
+                        changeYear: true
+                    })
+                    .on('change', function (e) {
+                        txtDateTimeAltText.text(txtDateTimeAlt.val());
+                    });
+                    
+                txtDateTimeAltText.on('click', function () {
+                    txtDateTime.datepicker('show');
+                });
+
+                inputGroup
+                    .find('button')
+                    .on('click', function (e) {
+                        e.preventDefault();
+
+                        $('#$id, #{$id}_alt').val('');
+                        $('#{$id}_alt_text').html('');
+                    });
+            });
+        </script>";
+
+        return $js;
+    }
+}

main/inc/lib/formvalidator/Element/DateTimeRangePicker.php

@@ -0,0 +1,239 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * Form element to select a date.
+ *
+ * Class DatePicker
+ */
+class DateTimeRangePicker extends DateRangePicker
+{
+    /**
+     * HTML code to display this datepicker.
+     *
+     * @return string
+     */
+    public function toHtml()
+    {
+        if ($this->_flagFrozen) {
+            return $this->getFrozenHtml();
+        }
+
+        $id = $this->getAttribute('id');
+        $dateRange = $this->getValue();
+
+        $value = '';
+        if (!empty($dateRange)) {
+            $dates = $this->parseDateRange($dateRange);
+            $value = api_format_date($dates['date'], DATE_FORMAT_LONG_NO_DAY);
+        }
+
+        return '
+            <div class="input-group">
+                <span class="input-group-addon cursor-pointer">
+                    <input '.$this->_getAttrString($this->_attributes).'>
+                </span>
+                <p class="form-control disabled" id="'.$id.'_alt_text">'.$value.'</p>
+                <input class="form-control" type="hidden" id="'.$id.'_alt" value="'.$value.'">
+                <span class="input-group-btn">
+                    <button class="btn btn-default" type="button"
+                            title="'.sprintf(get_lang('ResetFieldX'), $this->_label).'">
+                        <span class="fa fa-trash text-danger" aria-hidden="true"></span>
+                        <span class="sr-only">'.sprintf(get_lang('ResetFieldX'), $this->_label).'</span>
+                    </button>
+                </span>                
+            </div>            
+        '.$this->getElementJS();
+    }
+
+    /**
+     * @param string $layout
+     *
+     * @return string
+     */
+    public function getTemplate($layout)
+    {
+        $size = $this->calculateSize();
+        $id = $this->getAttribute('id');
+
+        switch ($layout) {
+            case FormValidator::LAYOUT_INLINE:
+                return '
+                <div class="form-group {error_class}">
+                    <label {label-for} >
+                        <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
+                        {label}
+                    </label>
+                    {element}
+                </div>';
+                break;
+            case FormValidator::LAYOUT_HORIZONTAL:
+                return '
+                <span id="'.$id.'_date_time_wrapper">
+                <div class="form-group {error_class}">
+                    <label {label-for} class="col-sm-'.$size[0].' control-label" >
+                        <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
+                        {label}
+                    </label>
+                    <div class="col-sm-'.$size[1].'">
+                        {icon}
+                        {element}
+
+                        <!-- BEGIN label_2 -->
+                        <p class="help-block">{label_2}</p>
+                        <!-- END label_2 -->
+
+                        <!-- BEGIN error -->
+                        <span class="help-inline help-block">{error}</span>
+                        <!-- END error -->
+                    </div>
+                    <div class="col-sm-'.$size[2].'">
+                        <!-- BEGIN label_3 -->
+                            {label_3}
+                        <!-- END label_3 -->
+                    </div>            
+                </div>                
+                <div class="form-group {error_class}">
+                    <label class="col-sm-'.$size[0].' control-label" >
+                        <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
+                        '.get_lang('Hour').'
+                    </label>
+                    <div class="col-sm-'.$size[1].'"> 
+                        <div class="input-group"> 
+                            <p id="'.$id.'_time_range">                    
+                                <input type="text" id="'.$id.'_time_range_start" name="'.$id.'_time_range_start" class="time start" autocomplete="off"> 
+                                '.get_lang('To').'
+                                <input type="text" id="'.$id.'_time_range_end" name="'.$id.'_time_range_end" class="time end " autocomplete="off">
+                            </p>
+                        </div>                   
+                    </div>
+                </div> 
+                </span>                   
+                ';
+                break;
+            case FormValidator::LAYOUT_BOX_NO_LABEL:
+                return '
+                        <label {label-for}>{label}</label>
+                        <div class="input-group">
+                            
+                            {icon}
+                            {element}
+                        </div>';
+                break;
+        }
+    }
+
+    /**
+     * @param array $dateRange
+     *
+     * @return array
+     */
+    public function parseDateRange($dateRange)
+    {
+        $dateRange = Security::remove_XSS($dateRange);
+        $dates = explode('@@', $dateRange);
+        $dates = array_map('trim', $dates);
+        $start = isset($dates[0]) ? $dates[0] : '';
+        $end = isset($dates[1]) ? $dates[1] : '';
+
+        $date = substr($start, 0, 10);
+        $start = isset($dates[0]) ? $dates[0] : '';
+        //$start = substr($start, 11, strlen($start));
+        //$end = substr($end, 11, strlen($end));
+
+        return [
+            'date' => $date,
+            'start_time' => $start,
+            'end_time' => $end,
+        ];
+    }
+
+    /**
+     * @param string $value
+     */
+    public function setValue($value)
+    {
+        $this->updateAttributes(
+            [
+                'value' => $value,
+            ]
+        );
+    }
+
+    /**
+     * Get the necessary javascript for this datepicker.
+     *
+     * @return string
+     */
+    private function getElementJS()
+    {
+        $js = null;
+        $id = $this->getAttribute('id');
+
+        $dateRange = $this->getValue();
+
+        $defaultDate = '';
+        $startTime = '';
+        $endTime = '';
+        if (!empty($dateRange)) {
+            $dates = $this->parseDateRange($dateRange);
+            $defaultDate = $dates['date'];
+            $startTime = $dates['start_time'];
+            $endTime = $dates['end_time'];
+        }
+
+        $js .= "<script>                    
+            $(function() {
+                var txtDate = $('#$id'),
+                    inputGroup = txtDate.parents('.input-group'),
+                    txtDateAlt = $('#{$id}_alt'),
+                    txtDateAltText = $('#{$id}_alt_text');
+                    
+                txtDate
+                    .hide()
+                    .datepicker({
+                        defaultDate: '".$defaultDate."',
+                        dateFormat: 'yy-mm-dd',
+                        altField: '#{$id}_alt',
+                        altFormat: \"".get_lang('DateFormatLongNoDayJS')."\",
+                        showOn: 'both',
+                        buttonImage: '".Display::return_icon('attendance.png', null, [], ICON_SIZE_TINY, true, true)."',
+                        buttonImageOnly: true,
+                        buttonText: '".get_lang('SelectDate')."',
+                        changeMonth: true,
+                        changeYear: true,
+                        yearRange: 'c-60y:c+5y'
+                    })
+                    .on('change', function (e) {
+                        txtDateAltText.text(txtDateAlt.val());
+                    });
+                                        
+                txtDateAltText.on('click', function () {
+                    txtDate.datepicker('show');
+                });
+                
+                inputGroup
+                    .find('button')
+                    .on('click', function (e) {
+                        e.preventDefault();
+                        $('#$id, #{$id}_alt').val('');
+                        $('#{$id}_alt_text').html('');
+                    });
+                
+                $('#".$id."_time_range .time').timepicker({
+                    'showDuration': true,
+                    'timeFormat': 'H:i:s',
+                    'scrollDefault': 'now',                    
+                });
+                
+                $('#".$id."_time_range_start').timepicker('setTime', new Date('".$startTime."'));
+                $('#".$id."_time_range_end').timepicker('setTime', new Date('".$endTime."'));
+                
+                var timeOnlyExampleEl = document.getElementById('".$id."_time_range');
+                var timeOnlyDatepair = new Datepair(timeOnlyExampleEl);                
+            });
+        </script>";
+
+        return $js;
+    }
+}

main/inc/lib/formvalidator/Element/FloatNumber.php

@@ -0,0 +1,84 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * Float element.
+ *
+ * Accepts values like 3.1415 and 3,1415 (its processed and converted to 3.1415)
+ *
+ * Class Float
+ */
+class FloatNumber extends HTML_QuickForm_text
+{
+    /**
+     * @param string $elementName
+     * @param string $elementLabel
+     * @param array  $attributes
+     */
+    public function __construct($elementName = null, $elementLabel = null, $attributes = null)
+    {
+        if (!isset($attributes['id'])) {
+            $attributes['id'] = $elementName;
+        }
+
+        $attributes['type'] = 'float';
+        $attributes['class'] = 'form-control';
+
+        parent::__construct($elementName, $elementLabel, $attributes);
+        $this->_appendName = true;
+        $this->setType('float');
+    }
+
+    /**
+     * @param string $value
+     */
+    public function setValue($value)
+    {
+        $value = api_float_val($value);
+        $this->updateAttributes(
+            [
+                'value' => $value,
+            ]
+        );
+    }
+
+    /**
+     * @return float
+     */
+    public function getValue()
+    {
+        $value = $this->getAttribute('value');
+        $value = api_float_val($value);
+
+        return $value;
+    }
+
+    /**
+     * @param mixed $value
+     * @param array $submitValues
+     * @param array $errors
+     */
+    public function getSubmitValue($value, &$submitValues, &$errors)
+    {
+        $value = api_float_val($value);
+        $elementName = $this->getName();
+        $submitValues[$elementName] = $value;
+
+        return $value;
+    }
+
+    /**
+     * We check the options and return only the values that _could_ have been
+     * selected. We also return a scalar value if select is not "multiple".
+     */
+    public function exportValue(&$submitValues, $assoc = false)
+    {
+        $value = $this->_findValue($submitValues);
+        $value = api_float_val($value);
+        if (!$value) {
+            $value = '';
+        }
+
+        return $this->_prepareValue($value, $assoc);
+    }
+}

main/inc/lib/formvalidator/Element/HtmlEditor.php

@@ -0,0 +1,113 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+use Chamilo\CoreBundle\Component\Editor\CkEditor\CkEditor;
+
+/**
+ * A html editor field to use with QuickForm.
+ */
+class HtmlEditor extends HTML_QuickForm_textarea
+{
+    /** @var \Chamilo\CoreBundle\Component\Editor\Editor */
+    public $editor;
+
+    /**
+     * Full page.
+     */
+    public $fullPage;
+
+    /**
+     * Class Constructor.
+     *
+     * @param string       $name
+     * @param string|array $label      HTML editor  label
+     * @param array        $attributes Attributes for the textarea
+     * @param array        $config     optional configuration settings for the online editor
+     */
+    public function __construct(
+        $name,
+        $label = null,
+        $attributes = [],
+        $config = []
+    ) {
+        if (empty($name)) {
+            throw new \Exception('Name is required');
+        }
+
+        parent::__construct($name, $label, $attributes);
+        $id = $this->getAttribute('id');
+        $this->_persistantFreeze = true;
+        $this->_type = 'html_editor';
+        $editor = new CkEditor();
+        if ($editor) {
+            $this->editor = $editor;
+            $this->editor->setTextareaId($id);
+            $this->editor->setName($name);
+            $this->editor->processConfig($config);
+        }
+    }
+
+    /**
+     * Return the HTML editor in HTML.
+     *
+     * @return string
+     */
+    public function toHtml()
+    {
+        if ($this->editor) {
+            if ($this->editor->getConfigAttribute('fullPage')) {
+                $value = $this->getValue();
+                if (strlen(trim($value)) == 0) {
+                    // TODO: To be considered whether here to add
+                    // language and character set declarations.
+                    $value = '<!DOCTYPE html><html><head><title></title></head><body></body></html>';
+                    $this->setValue($value);
+                }
+            }
+        }
+
+        if ($this->isFrozen()) {
+            return $this->getFrozenHtml();
+        } else {
+            $styleCss = $this->editor->getConfigAttribute('style');
+            $style = false;
+            if ($styleCss) {
+                $style = true;
+            }
+
+            return $this->buildEditor($style);
+        }
+    }
+
+    /**
+     * Returns the html area content in HTML.
+     *
+     * @return string
+     */
+    public function getFrozenHtml()
+    {
+        return Security::remove_XSS($this->getValue());
+    }
+
+    /**
+     * @param bool $style
+     *
+     * @return string
+     */
+    public function buildEditor($style = false)
+    {
+        $result = '';
+        if ($this->editor) {
+            $value = $this->getCleanValue();
+
+            $this->editor->setName($this->getName());
+            if ($style === true) {
+                $result = $this->editor->createHtmlStyle($value);
+            } else {
+                $result = $this->editor->createHtml($value);
+            }
+        }
+
+        return $result;
+    }
+}

main/inc/lib/formvalidator/Element/InternalUrl.php

@@ -0,0 +1,31 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * InternalUrl element (URL without the domain as prefix).
+ *
+ * Class InternalUrl
+ */
+class InternalUrl extends HTML_QuickForm_text
+{
+    /**
+     * InternalUrl constructor.
+     *
+     * @param string $elementName
+     * @param string $elementLabel
+     * @param array  $attributes
+     */
+    public function __construct($elementName = null, $elementLabel = null, $attributes = null)
+    {
+        if (!isset($attributes['id'])) {
+            $attributes['id'] = $elementName;
+        }
+
+        $attributes['type'] = 'text';
+        $attributes['class'] = 'form-control';
+
+        parent::__construct($elementName, $elementLabel, $attributes);
+
+        $this->setType('text');
+    }
+}

main/inc/lib/formvalidator/Element/Number.php

@@ -0,0 +1,28 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * Number element.
+ *
+ * Class Number
+ */
+class Number extends HTML_QuickForm_text
+{
+    /**
+     * @param string $elementName
+     * @param string $elementLabel
+     * @param array  $attributes
+     */
+    public function __construct($elementName = null, $elementLabel = null, $attributes = null)
+    {
+        if (!isset($attributes['id'])) {
+            $attributes['id'] = $elementName;
+        }
+
+        $attributes['type'] = 'number';
+
+        parent::__construct($elementName, $elementLabel, $attributes);
+        $this->_appendName = true;
+        $this->setType('number');
+    }
+}

main/inc/lib/formvalidator/Element/SelectAjax.php

@@ -0,0 +1,212 @@
+<?php
+
+/* For licensing terms, see /license.txt */
+
+/**
+ * A drop down list with all languages to use with QuickForm.
+ */
+class SelectAjax extends HTML_QuickForm_select
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function __construct($elementName, $elementLabel = '', $options = null, $attributes = null)
+    {
+        parent::__construct($elementName, $elementLabel, $options, $attributes);
+    }
+
+    /**
+     * The ajax call must contain an array of id and text.
+     *
+     * @return string
+     */
+    public function toHtml()
+    {
+        $iso = api_get_language_isocode(api_get_interface_language());
+        $dropdownParent = $this->getAttribute('dropdownParent');
+        $dropdownParentCondition = $dropdownParent ? "dropdownParent: '$dropdownParent'," : '';
+        $formatResult = $this->getAttribute('formatResult');
+        $formatSelection = $this->getAttribute('formatSelection');
+        $formatCondition = '';
+
+        if (!empty($formatResult)) {
+            $formatCondition .= ',
+                templateResult : '.$formatResult;
+        }
+
+        if (!empty($formatSelection)) {
+            $formatCondition .= ',
+                templateSelection : '.$formatSelection;
+        }
+
+        $width = 'element';
+        $givenWidth = '100%';
+        if (!empty($givenWidth)) {
+            $width = $givenWidth;
+        }
+
+        //Get the minimumInputLength for select2
+        $minimumInputLength = $this->getAttribute('minimumInputLength') > 3 ?
+            $this->getAttribute('minimumInputLength') : 3
+        ;
+
+        $plHolder = $this->getAttribute('placeholder');
+        if (empty($plHolder)) {
+            $plHolder = preg_replace("/'/", "\\'", get_lang('SelectAnOption'));
+        }
+
+        $id = $this->getAttribute('id');
+
+        if (empty($id)) {
+            $id = $this->getAttribute('name');
+            $this->setAttribute('id', $id);
+        }
+        // URL must return ajax json_encode arrady [items => [['id'=>1, 'text'='content']]
+        $url = $this->getAttribute('url');
+
+        if (!$url) {
+            $url = $this->getAttribute('url_function');
+        } else {
+            $url = "'$url'";
+        }
+
+        $tagsAttr = $this->getAttribute('tags');
+        $multipleAttr = $this->getAttribute('multiple');
+
+        $tags = !empty($tagsAttr) ? (bool) $tagsAttr : false;
+        $tags = $tags ? 'true' : 'false';
+
+        $multiple = !empty($multipleAttr) ? (bool) $multipleAttr : false;
+        $multiple = $multiple ? 'true' : 'false';
+
+        $max = $this->getAttribute('maximumSelectionLength');
+        $max = !empty($max) ? "maximumSelectionLength: $max, " : '';
+
+        // wait XX milliseconds before triggering the request
+        $delay = ((int) $this->getAttribute('delay')) ?: 1000;
+
+        $html = <<<JS
+            <script>
+                $(function(){
+                    $('#{$this->getAttribute('id')}').select2({
+                        language: '$iso',
+                        placeholder: '$plHolder',
+                        allowClear: true,
+                        width: '$width',
+                        minimumInputLength: '$minimumInputLength',
+                        tags: $tags,
+                        $dropdownParentCondition
+                        ajax: {
+                            url: $url,
+                            delay: $delay,
+                            dataType: 'json',
+                            data: function(params) {
+                                return {
+                                    q: params.term, // search term
+                                    page_limit: 10,
+                                };
+                            },
+                            processResults: function (data, page) {
+                                // Parse the results into the format expected by Select2
+                                if (data.items) {
+                                    return {
+                                        results: data.items
+                                    };
+                                }
+                                return {
+                                    results: ''
+                                };
+                            }
+                        }
+                        $formatCondition
+                    });
+                });
+            </script>
+JS;
+
+        $this->removeAttribute('formatResult');
+        $this->removeAttribute('formatSelection');
+        $this->removeAttribute('minimumInputLength');
+        $this->removeAttribute('maximumSelectionLength');
+        $this->removeAttribute('tags');
+        $this->removeAttribute('placeholder');
+        $this->removeAttribute('class');
+        $this->removeAttribute('url');
+        $this->removeAttribute('url_function');
+        $this->removeAttribute('dropdownParent');
+        $this->setAttribute('style', 'width: 100%;');
+
+        return parent::toHtml().$html;
+    }
+
+    /**
+     * We check the options and return only the values that _could_ have been
+     * selected. We also return a scalar value if select is not "multiple".
+     */
+    public function exportValue(&$submitValues, $assoc = false)
+    {
+        $value = $this->_findValue($submitValues);
+
+        if (!$value) {
+            $value = '';
+        }
+
+        return $this->_prepareValue($value, $assoc);
+    }
+
+    public static function templateResultForUsersInCourse(): string
+    {
+        return "function (state) {
+                if (state.loading) {
+                    return state.text;
+                }
+
+                var \$container = \$(
+                    '<div class=\"select2-result-user clearfix\">' +
+                        '<div class=\"select2-result-user__avatar pull-left\">' +
+                            '<img>' +
+                        '</div>' +
+                        '<div class=\"select2-result-user__info pull-left\">' +
+                            '<div class=\"select2-result-user__name\"></div>' +
+                            '<div class=\"select2-result-user__username small\"></div>' +
+                        '</div>' +
+                    '</div>'
+                );
+
+                \$container.find('.select2-result-user__avatar img')
+                    .prop({ 'src': state.avatarUrl, 'alt': state.username })
+                    .css({ 'width': '40px', 'height': '40px' });
+                \$container.find('.select2-result-user__info').css({ 'paddingLeft': '6px' });
+                \$container.find('.select2-result-user__name').text(state.completeName);
+                \$container.find('.select2-result-user__username').text(state.username);
+
+                return \$container;
+            }";
+    }
+
+    public static function templateSelectionForUsersInCourse(): string
+    {
+        return "function (state) {
+                if (!state.id) {
+                    return state.text;
+                }
+    
+                if (!state.avatarUrl) {
+                    var avatarUrl = $(state.element).data('avatarurl');
+                    var username = $(state.element).data('username');
+                    
+                    state.avatarUrl = avatarUrl;
+                    state.username = username;
+                    state.completeName = state.text;
+                }
+    
+                var \$container = \$('<span><img> ' + state.completeName + '</span>');
+    
+                \$container.find('img')
+                    .prop({ 'src': state.avatarUrl, 'alt': state.username })
+                    .css({ 'width': '20px', 'height': '20px' });
+    
+                return \$container;
+            }";
+    }
+}

main/inc/lib/formvalidator/Element/SelectLanguage.php

@@ -0,0 +1,38 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * Class SelectLanguage
+ * A dropdownlist with all languages to use with QuickForm.
+ */
+class SelectLanguage extends HTML_QuickForm_select
+{
+    /**
+     * Class constructor.
+     */
+    public function __construct(
+        $elementName = null,
+        $elementLabel = null,
+        $options = [],
+        $attributes = []
+    ) {
+        parent::__construct($elementName, $elementLabel, $options, $attributes);
+
+        $default = isset($attributes['set_custom_default']) ? $attributes['set_custom_default'] : false;
+
+        // Get all languages
+        $languages = api_get_languages();
+        foreach ($languages['name'] as $index => $name) {
+            if (!empty($default)) {
+                $defaultValue = $default;
+            } else {
+                $defaultValue = api_get_setting('platformLanguage');
+            }
+            if ($languages['folder'][$index] == $defaultValue) {
+                $this->addOption($name, $languages['folder'][$index], ['selected' => 'selected']);
+            } else {
+                $this->addOption($name, $languages['folder'][$index]);
+            }
+        }
+    }
+}

main/inc/lib/formvalidator/Element/SelectTheme.php

@@ -0,0 +1,28 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * A dropdownlist with all themes to use with QuickForm.
+ */
+class SelectTheme extends HTML_QuickForm_select
+{
+    /**
+     * Class constructor.
+     */
+    public function __construct(
+        $elementName = null,
+        $elementLabel = null,
+        $options = null,
+        $attributes = null
+    ) {
+        parent::__construct($elementName, $elementLabel, $options, $attributes);
+        // Get all languages
+        $themes = api_get_themes();
+        $this->_options = [];
+        $this->_values = [];
+        $this->addOption('--', ''); // no theme select
+        foreach ($themes as $themeValue => $themeName) {
+            $this->addOption($themeName, $themeValue);
+        }
+    }
+}

main/inc/lib/formvalidator/Element/Url.php

@@ -0,0 +1,31 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * Url element.
+ *
+ * Class Url
+ */
+class Url extends HTML_QuickForm_text
+{
+    /**
+     * Url constructor.
+     *
+     * @param string $elementName
+     * @param string $elementLabel
+     * @param array  $attributes
+     */
+    public function __construct($elementName = null, $elementLabel = null, $attributes = null)
+    {
+        if (!isset($attributes['id'])) {
+            $attributes['id'] = $elementName;
+        }
+
+        $attributes['type'] = 'url';
+        $attributes['class'] = 'form-control';
+
+        parent::__construct($elementName, $elementLabel, $attributes);
+
+        $this->setType('url');
+    }
+}

main/inc/lib/formvalidator/Element/UserAvatar.php

@@ -0,0 +1,87 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+use Chamilo\UserBundle\Entity\User;
+
+/**
+ * Class UserAvatar
+ * FormValidator element to add an user avatar wrapping a hidden input with its user ID
+ * Is necessary set an instance of Chamilo\UserBundle\Entity\User as value. The exported value is the user ID.
+ */
+class UserAvatar extends HTML_QuickForm_input
+{
+    /** @var User */
+    private $user = null;
+    private $imageSize = 'small';
+    private $subTitle = '';
+
+    /**
+     * UserAvatar constructor.
+     *
+     * @param string $name
+     * @param string $label
+     * @param array  $attributes
+     */
+    public function __construct($name, $label, $attributes = [])
+    {
+        if (isset($attributes['image_size'])) {
+            $this->imageSize = $attributes['image_size'];
+            unset($attributes['image_size']);
+        }
+
+        if (isset($attributes['sub_title'])) {
+            $this->subTitle = $attributes['sub_title'];
+            unset($attributes['sub_title']);
+        }
+
+        parent::__construct($name, $label, $attributes);
+
+        $this->setType('hidden');
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function setValue($value)
+    {
+        $this->user = !is_a($value, 'Chamilo\UserBundle\Entity\User')
+            ? UserManager::getManager()->find($value)
+            : $value;
+
+        parent::setValue($this->user->getId());
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function toHtml()
+    {
+        if (!$this->user) {
+            return '';
+        }
+
+        $userInfo = api_get_user_info($this->user->getId());
+        $userPicture = isset($userInfo["avatar_{$this->imageSize}"])
+            ? $userInfo["avatar_{$this->imageSize}"]
+            : $userInfo["avatar"];
+
+        if (!$this->subTitle) {
+            $this->subTitle = $this->user->getUsername();
+        }
+
+        $html = parent::toHtml();
+        $html .= '
+            <div class="media">
+                <div class="media-left">
+                    <img src="'.$userPicture.'" alt="'.UserManager::formatUserFullName($this->user).'">
+                </div>
+                <div class="media-body">
+                    <h4 class="media-heading">'.UserManager::formatUserFullName($this->user).'</h4>
+                    '.$this->subTitle.'
+                </div>
+            </div>
+        ';
+
+        return $html;
+    }
+}

main/inc/lib/formvalidator/Element/index.html

@@ -0,0 +1,6 @@
+<html>
+<head>
+</head>
+<body>
+</body>
+</html>