Tiny File Manager

Back Back Up Advanced Editor

<?php
// doc
 //https://demos.pixinvent.com/robust-html-admin-template/html/ltr/vertical-multi-level-menu-template/form-input-grid.html

session_start();
include('config/config_DB.php');
include('config/checklogin.php');
check_login();

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

.profile-pic img{
   width: 100%;
   height: auto;
   object-fit: cover;
}
.profile-menu .dropdown-menu {
  right: 0;
  left: unset;
}
.profile-menu .fa-fw {
  margin-right: 10px;
}

.toggle-change::after {
  border-top: 0;
  border-bottom: 0.3em solid;
  
  
  .select2-selection__choice{
  background-color: var(--bs-gray-200);
  border: none !important;
  font-size: 12px;
  font-size: 0.85rem !important;
}
}

</style>

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
	
	
		
	
	
	
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
	
	<?php include("head.php"); ?>
	
	
	<style>
	
	.dual-list .list-group {
            margin-top: 8px;
        }

.list-left li, .list-right li {
            cursor: pointer;
        }

.list-arrows {
            padding-top: 100px;
        }

.list-arrows button {
                margin-bottom: 20px;
            }
	
	</style>

<div class="row">
								<div class="col-md-12">
									<div class="card card-purple">
										<div class="card-header">
										<h3 class="card-title">Création d'une catégorie</h3>
										</div>
                                
										<form method="post" enctype="multipart/form-data" role="form">
										<div class="card-body">
											<div class="row">
												<div class=" col-md-6 form-group">
													<label for="exampleInputEmail1">Nom</label>
													<input type="text" name="name" required class="form-control" id="exampleInputEmail1">
												</div>
											</div>

<div class="row">
												<div class=" col-md-6 form-group">
													<label for="exampleInputEmail1">Staff Phone Number</label>
													<input type="text" name="phone" required class="form-control" id="exampleInputEmail1">
												</div>
                                            </div>

<div class="row">
												<div class=" col-md-6 form-group">
													<label for="exampleInputEmail1">Staff Email</label>
													<input type="email" name="email" required class="form-control" id="exampleInputEmail1">
												</div>
											</div>
											
											
											
											<p>&nbsp;</p>
											
<!--											
											<div class="row style-select">
												<div class="col-md-2">
													<div class="subject-info-box-1">
													<label>Available Superheroes</label>
													<select multiple class="form-control" id="lstBox1">
													<option value="123">Superman</option>
													<option value="456">Batman</option>
													<option value="789">Spiderman</option>
													<option value="654">Captain America</option>
													</select>
													</div>

<div class="subject-info-arrows text-center">
														<br />
														<br />
														<input type='button' id='btnAllRight' value='>>' class="btn btn-default" />
														<br />
														<input type='button' id='btnRight' value='>' class="btn btn-default" />
														<br />
														<input type='button' id='btnLeft' value='<' class="btn btn-default" />
														<br />
														<input type='button' id='btnAllLeft' value='<<' class="btn btn-default" />
													</div>

<div class="subject-info-box-2">
													<label>Superheroes You Have Selected</label>
													<select multiple class="form-control" id="lstBox2">
													<option value="765">Nick Fury</option>
													<option value="698">The Hulk</option>
													<option value="856">Iron Man</option>
													</select>
													</div>

<div class="clearfix"></div>
												</div>
											</div>
-->											
											
											
											<div class="subject-info-box-1">
												<select multiple="multiple" id='lstBox1' class="form-control">
													<option value="ajax">Ajax</option>
													<option value="jquery">jQuery</option>		
													<option value="javascript">JavaScript</option>
													<option value="mootool">MooTools</option>
													<option value="prototype">Prototype</option>
													<option value="dojo">Dojo</option>
												</select>
											</div>

<div class="subject-info-arrows text-center">
												<input type='button' id='btnAllRight' value='>>' class="btn btn-default" /><br />
												<input type='button' id='btnRight' value='>' class="btn btn-default" /><br />
												<input type='button' id='btnLeft' value='<' class="btn btn-default" /><br />
												<input type='button' id='btnAllLeft' value='<<' class="btn btn-default" />
											</div>

<div class="subject-info-box-2">
												<select multiple="multiple" id='lstBox2' class="form-control">
													<option value="asp">ASP.NET</option>
													<option value="c#">C#</option>
													<option value="vb">VB.NET</option>
													<option value="java">Java</option>
													<option value="php">PHP</option>
													<option value="python">Python</option>
												</select>
											</div>

<div class="dual-list list-left col-md-5">
            <div class="well text-right">
                <div class="row">
                    <div class="col-md-10">
                        <div class="input-group">
                            <span class="input-group-addon glyphicon glyphicon-search"></span>
                            <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="btn-group">
                            <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
                        </div>
                    </div>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">bootstrap-duallist <a href="https://github.com/bbilginn/bootstrap-duallist" target="_blank">github</a></li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>

<div class="dual-list list-right col-md-5">
            <div class="well">
                <div class="row">
                    <div class="col-md-2">
                        <div class="btn-group">
                            <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
                        </div>
                    </div>
                    <div class="col-md-10">
                        <div class="input-group">
                            <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
                            <span class="input-group-addon glyphicon glyphicon-search"></span>
                        </div>
                    </div>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>

</div>
	
	-->
	
	
	<br />
	<br />
	<br />
	
	<h1>Hello, world!</h1>
      <textarea id="editor"></textarea>
	
	<br />
	<br />
	
	<div class="row text-center p-2 border-bottom">
    <h1>bootstrap 5 & select2</h>
  </div>
  <div class="row pt-4 justify-content-center "> 
  
  </br></br></br></br>
  
    <div class="col-6">
    
    <select class="form-select" id="multiple-select-field" data-placeholder="Choose anything" multiple>
    <option>Christmas Island</option>
    <option>South Sudan</option>
    <option>Jamaica</option>
    <option>Kenya</option>
    <option>French Guiana</option>
    <option>Mayotta</option>
    <option>Liechtenstein</option>
    <option>Denmark</option>
    <option>Eritrea</option>
    <option>Gibraltar</option>
    <option>Saint Helena, Ascension and Tristan da Cunha</option>
    <option>Haiti</option>
    <option>Namibia</option>
    <option>South Georgia and the South Sandwich Islands</option>
    <option>Vietnam</option>
    <option>Yemen</option>
    <option>Philippines</option>
    <option>Benin</option>
    <option>Czech Republic</option>
    <option>Russia</option>
</select>
    
    </div>  
  </div>

<div class="row">
  <div class="col-md-7">
    <select multiple="multiple" size="10" name="duallistbox_demo2" class="demo2" title="duallistbox_demo2">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3" selected="selected">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6" selected="selected">Option 6</option>
      <option value="option7">Option 7</option>
      <option value="option8">Option 8</option>
      <option value="option9">Option 9</option>
      <option value="option0">Option 10</option>
      <option value="option0">Option 11</option>
      <option value="option0">Option 12</option>
      <option value="option0">Option 13</option>
      <option value="option0">Option 14</option>
      <option value="option0">Option 15</option>
      <option value="option0">Option 16</option>
      <option value="option0">Option 17</option>
      <option value="option0">Option 18</option>
      <option value="option0">Option 19</option>
      <option value="option0">Option 20</option>
    </select>
    
  </div>
	
	
	
	
	
	<!--
  <div class="row" style="margin-top: 40px;">
    <div class="col">
      <button class="btn btn-primary float-right">Add payees</button>

<h2> Pay Bills </h2>
      <p><strong>Step 1:</strong> Select from your list of available payees to build a payment list</p>
      <hr/>
    </div>
  </div>
  <div class="row" style="margin-bottom: 40px;">
    <div class="col">
      <form id="demoform">
        <select multiple="multiple" size="10" name="duallistbox_demo1[]" title="duallistbox_demo1[]">
    <option value="payee1">Aviva Insurance - Business - 987654</option>
    <option value="payee2">Bell Mobility - 66853 (John Smith)</option>
    <option value="payee3">Bell Mobility - 75432 (Jane Smith)</option>
    <option value="payee4">Bell Mobility - 98765 (Jim Smith)</option>
    <option value="payee5">Canadian Tire Commercial Mastercard - **** 5525</option>
    <option value="payee6">Canadian Tire Mastercard - **** 3158 (President's Card)</option>
    <option value="payee7">FedEx Express Canada - 54321</option>
    <option value="payee8">Lowes Canada - 12345</option>
    <option value="payee9">Mastercard, PC Financial - **** 5535</option>
    <option value="payee10">Qtrade Investor - 12345</option>
    <option value="payee11" selected="selected">Servus Mastercard - **** 5545</option>
    <option value="payee12">Telus - 123456787 (Calagary  Office)</option>
    <option value="payee13">Telus - 123456788 (Edmonton NW Office)</option>
    <option value="payee14">Telus - 123456789 (Edmonton SE Office)</option>
  </select>
        <br>
        <div class="row">
          <div class="col-md-6 offset-md-6">
            <button type="submit" class="btn btn-primary w-100">Create payment (#)</button>
          </div>
        </div>
      </form>

</div>
  </div>

-->
												
											
											<div class="mt-2">
        <label class="control-label" for="textarea">Descrizione breve:</label>
        <textarea class="summernote" name="content_abstract">blabla</textarea>
    </div>

</div>

<div class="card-footer">
											<button type="submit" name="ajouter_categorie" class="btn btn-success">Ajouter</button>
										</div>
										
										</form>
									</div>   
								</div>

</div> 
						
						</div>
					
					</section> 
			
			</div> 
		
			
			<aside class="control-sidebar control-sidebar-dark">
			
			</aside>

<?php include("footer.php"); ?>
			
	
	</div> 
			
			<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

});
			
			/**/
			
			$(function () {

$('body').on('click', '.list-group .list-group-item', function () {
                $(this).toggleClass('active');
            });
            $('.list-arrows button').click(function () {
                var $button = $(this), actives = '';
                if ($button.hasClass('move-left')) {
                    actives = $('.list-right ul li.active');
                    actives.clone().appendTo('.list-left ul');
                    actives.remove();
                } else if ($button.hasClass('move-right')) {
                    actives = $('.list-left ul li.active');
                    actives.clone().appendTo('.list-right ul');
                    actives.remove();
                }
            });
            $('.dual-list .selector').click(function () {
                var $checkBox = $(this);
                if (!$checkBox.hasClass('selected')) {
                    $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
                    $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
                } else {
                    $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
                    $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
                }
            });
            $('[name="SearchDualList"]').keyup(function (e) {
                var code = e.keyCode || e.which;
                if (code == '9') return;
                if (code == '27') $(this).val(null);
                var $rows = $(this).closest('.dual-list').find('.list-group li');
                var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
                $rows.show().filter(function () {
                    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                    return !~text.indexOf(val);
                }).hide();
            });

});
			
			/**/
			
			(function () {
  $("#btnRight").click(function (e) {
    var selectedOpts = $("#lstBox1 option:selected");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }
    $("#lstBox2").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });
  $("#btnAllRight").click(function (e) {
    var selectedOpts = $("#lstBox1 option");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }
    $("#lstBox2").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });
  $("#btnLeft").click(function (e) {
    var selectedOpts = $("#lstBox2 option:selected");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }
    $("#lstBox1").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });
  $("#btnAllLeft").click(function (e) {
    var selectedOpts = $("#lstBox2 option");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }
    $("#lstBox1").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });
})(jQuery);
			
			document.querySelectorAll('.dropdown-toggle').forEach(item => 
			{
				item.addEventListener('click', event => 
				{
					if(event.target.classList.contains('dropdown-toggle') )
					{
						event.target.classList.toggle('toggle-change');
					}
					else if(event.target.parentElement.classList.contains('dropdown-toggle'))
					{
						event.target.parentElement.classList.toggle('toggle-change');
					}
				})
			});
			
			
			$(document).ready(function() {
      $('.summernote').summernote();
    });
			
			</script>
			
	</body>

</html>