Last active
March 17, 2021 18:25
-
-
Save raczajko/1db372f98ea62b4b3e03490600f5dc01 to your computer and use it in GitHub Desktop.
Formulario HTML5, con leaflet para capturar datos georeferenciados en un form.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html dir="ltr" lang="es"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/> | |
| <link rel="stylesheet" type="text/css" media="all" href="w3form6.css"> | |
| <title>Form Test</title> | |
| </head> | |
| <body> | |
| <div class="w3-row"> | |
| <div class="w3-twothird w3-container"> | |
| <form id="formulario" method="post" action="index.php" class="w3-container 3-card-4" enctype="multipart/form-data"> | |
| <br> | |
| <div id="wrapping" class="clearfix"> | |
| <section class="w3-twothird"> | |
| <input type="number" name="ci" id="name" placeholder="Tu nro. de cédula" autocomplete="off" tabindex="1" class="txtinput" required> | |
| <input type="tel" name="cel" id="telephone" placeholder="Tu nro. de teléfono" tabindex="2" class="txtinput" required> | |
| <input type="email" name="email" id="email" placeholder="Tu correo (opcional)" autocomplete="on" tabindex="3" class="txtinput"> | |
| <textarea name="denuncia" id="message" placeholder="Descripción de la irregularidad" tabindex="4" rows="3" cols="auto" class="textarea" onkeyup="this.value = this.value.replace(/[&*<>']/g, '')" required></textarea> | |
| <input type="hidden" id="lat" name="lat" value="a"> | |
| <input type="hidden" id="lng" name="lng" value="b"> | |
| <input type="hidden" name="pre" value="c"> | |
| <input type="hidden" name="estado" value="1"> | |
| <input type="hidden" name="ciudad" value="fdo"> | |
| <input type="datetime" name="fecha" value="d" class="w3-hide" id="fecha"> | |
| </section> | |
| <div class="w3-card-8"> | |
| <section id="recipientcase" class="w3-third"> | |
| <h3>Tipo de Reclamo:</h3> | |
| <select id="recipient" name="tipodenuncia" tabindex="6" class="selmenu"> | |
| <option value="1">UNO</option> | |
| <option value="2">DOS</option> | |
| <option value="3">TRES</option> | |
| <option value="4">CUATRO</option> | |
| <option value="99">Otros</option> | |
| </select> | |
| <div id="map" style="width: 100%; height: 300px"></div> | |
| <p>Alzar imagen</p> | |
| <input type="file" name="fileToUpload" id="fileToUpload" accept="image/*"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> | |
| <script> | |
| if (navigator.geolocation) { | |
| var timeoutVal = 10 * 1000 * 1000; | |
| //navigator.geolocation.watchPosition( | |
| navigator.geolocation.getCurrentPosition( | |
| displayPosition, | |
| displayError, | |
| { enableHighAccuracy: false, timeout: timeoutVal, maximumAge: 0 } | |
| ); | |
| } | |
| else { | |
| alert("Geolocalización no soportada"); | |
| } | |
| function displayPosition(position) { | |
| var lati = position.coords.latitude; | |
| var long = position.coords.longitude; | |
| var pres = position.coords.accuracy; | |
| var altu = position.coords.altitude; | |
| var map = L.map('map', | |
| {zoomControl:false}).setView([lati, long], 15); | |
| map.dragging.disable(); | |
| map.touchZoom.disable(); | |
| map.doubleClickZoom.disable(); | |
| map.scrollWheelZoom.disable(); | |
| map.boxZoom.disable(); | |
| //map.keyboard.disable(); | |
| jQuery(function(){ | |
| jQuery("#lat").val(lati); | |
| jQuery("#lng").val(long); | |
| jQuery("#pre").val(pres); | |
| jQuery("#fecha").val(tiempo()); | |
| console.log(jQuery("#lat").val(), jQuery("#lng").val(), jQuery("#pre").val(), jQuery("#fecha").val()); | |
| }); | |
| L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| }).addTo(map); | |
| L.marker([lati, long],{draggable: true}).addTo(map) | |
| //.bindPopup("Ubicación del Usuario" + "</br> Hora:" + parseTimestamp(position.timestamp)+"</br> Ubicacion: lat"+ position.coords.latitude + ", long " + position.coords.longitude + ", precision " + position.coords.accuracy).openPopup(); | |
| .bindPopup("Posición Actual").openPopup(); | |
| } | |
| function displayError(error) { | |
| var errors = { | |
| 1: 'Permiso Denegado', | |
| 2: 'No fue posible obtener la ubicación', | |
| 3: 'Tiempo Agotado' | |
| }; | |
| alert("Error: " + errors[error.code]); | |
| } | |
| function addZero(i) { | |
| if (i < 10) { | |
| i = "0" + i; | |
| } | |
| return i; | |
| } | |
| function tiempo() { | |
| var d = new Date(); | |
| var a = d.getFullYear(); | |
| var b = d.getMonth()+1; | |
| var c = addZero(d.getDate()); | |
| var h = addZero(d.getHours()); | |
| var m = addZero(d.getMinutes()); | |
| var s = addZero(d.getSeconds()); | |
| return a+"-"+b+"-"+c +" " + h + ":" + m + ":" + s; | |
| } | |
| function validar() { | |
| var x = document.forms["formulario"]["ci"].value; | |
| var y = document.forms["formulario"]["cel"].value; | |
| var z = document.forms["formulario"]["email"].value; | |
| var m = document.forms["formulario"]["lat"].value; | |
| var n = document.forms["formulario"]["lng"].value; | |
| var o = document.forms["formulario"]["pre"].value; | |
| if (x == null || x == "") { | |
| alert("Debe completar el numero de cedula"); | |
| return false; | |
| } | |
| if (y == null || y == "" ) { | |
| alert("Debe facilitar al menos un dato de contacto"); | |
| return false; | |
| } | |
| if ((m == "a" && n == "b") && o == "c") { | |
| alert("Aun no se pudieron optener las coordenadas, favor aguarde") | |
| return false; | |
| } | |
| } | |
| </script> | |
| </section> | |
| </div> | |
| </section> | |
| </div> | |
| <section id="buttons"> | |
| <input type="reset" name="reset" id="resetbtn" class="w3-btn w3-teal" value="Limpiar"> | |
| <input type="submit" name="submit" id="submitbtn" class="w3-btn w3-teal" tabindex="5" value="Enviar"> | |
| <br style="clear:both;"> | |
| </section> | |
| </form> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:400); | |
| @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css); | |
| @import url(http://yui.yahooapis.com/pure/0.3.0/pure-min.css); | |
| /* W3.CSS 1.74 by J.E.Refsnes. Do not remove this line. */ | |
| *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} | |
| /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ | |
| /*CUSTOM*/ | |
| .fa-map-marker{width:100%; font-size: 6em; color: #cf483e; text-shadow: 0 0 1px #000; animation: bounce 1s linear 3;} | |
| button{box-shadow: 0 0 1px #000;} | |
| .result{margin: 2em 2em 1em 2em;} | |
| .result img{margin-top: 1em;border: 1px solid #333;} | |
| .fa-spinner{font-size: 3em;} | |
| span{font-size:.7em;color: #777;} | |
| @keyframes bounce { /* thx to https://github.com/daneden/animate.css */ | |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} | |
| 40% {transform: translateY(-15px);} | |
| 60% {transform: translateY(-7px);} | |
| } | |
| span.radiobadge { display: block; margin-bottom: 8px; } | |
| span.radiobadge label { font-size: 1.2em; padding-bottom: 4px; } | |
| #prioritycase { | |
| float: left; | |
| display: block; | |
| } | |
| /** the form elements **/ | |
| #formulario { box-sizing: border-box; } | |
| #formulario .txtinput { | |
| display: block; | |
| font-family: "Helvetica Neue", Arial, sans-serif; | |
| border-style: solid; | |
| border-width: 1px; | |
| border-color: #dedede; | |
| margin-bottom: 20px; | |
| font-size: 1.55em; | |
| padding: 11px 25px; | |
| padding-left: 55px; | |
| width: 98%; | |
| color: #777; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; | |
| -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; | |
| transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; | |
| -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; | |
| -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; | |
| -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; | |
| } | |
| #formulario .txtinput:focus { | |
| color: #333; | |
| border-color: rgba(41, 92, 161, 0.4); | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6); | |
| -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6); | |
| -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6); | |
| outline: 0 none; | |
| } | |
| #formulario input#name { | |
| background: #fff url('images/user.png') 5px 4px no-repeat; | |
| } | |
| #formulario input#email { | |
| background: #fff url('images/email.png') 5px 4px no-repeat; | |
| } | |
| #formulario input#website { | |
| background: #fff url('images/website.png') 5px 4px no-repeat; | |
| } | |
| #formulario input#telephone { | |
| background: #fff url('images/phone.png') 5px 4px no-repeat; | |
| } | |
| #formulario textarea { | |
| display: block; | |
| font-family: "Helvetica Neue", Arial, sans-serif; | |
| border-style: solid; | |
| border-width: 1px; | |
| border-color: #dedede; | |
| margin-bottom: 15px; | |
| font-size: 1.5em; | |
| padding: 11px 25px; | |
| padding-left: 55px; | |
| width: 98%; | |
| height: 180px; | |
| color: #777; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; | |
| -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; | |
| transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; | |
| -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; | |
| -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; | |
| -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; | |
| } | |
| #formulario textarea:focus { | |
| color: #333; | |
| border-color: rgba(41, 92, 161, 0.4); | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6); | |
| -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6); | |
| -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6); | |
| outline: 0 none; | |
| } | |
| #formulario textarea.txtblock { | |
| background: #fff url('images/speech.png') 5px 4px no-repeat; | |
| } | |
| #formulario #aligned { | |
| box-sizing: border-box; | |
| float: left; | |
| width: 250px; | |
| margin-right: 10px; | |
| } | |
| #formulario #aside { | |
| float: left; | |
| width: 250px; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| #wrapping { width: 100%; box-sizing: border-box; } | |
| span.radiobadge { display: block; margin-bottom: 8px; } | |
| span.radiobadge label { font-size: 1.2em; padding-bottom: 4px; } | |
| select.selmenu { | |
| font-size: 17px; | |
| color: #676767; | |
| padding: 9px !important; | |
| border: 1px solid #aaa; | |
| width: 200px; | |
| } | |
| .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } | |
| .clearfix { display: inline-block; } | |
| html[xmlns] .clearfix { display: block; } | |
| * html .clearfix { height: 1%; } | |
| /*FIN CUSTOM*/ | |
| html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;/*background: #222;*/} | |
| body{margin:0} | |
| article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block} | |
| audio,canvas,video{display:inline-block;vertical-align:baseline} | |
| audio:not([controls]){display:none;height:0} | |
| [hidden],template{display:none} | |
| a{-webkit-tap-highlight-color:transparent;background-color:transparent} | |
| a:active,a:hover{outline:0} | |
| abbr[title]{border-bottom:1px dotted} | |
| b,strong{font-weight:bold} | |
| dfn{font-style:italic} | |
| mark{background:#ff0;color:#000} | |
| small{font-size:80%} | |
| sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} | |
| sup{top:-0.5em} sub{bottom:-0.25em} | |
| img{border:0} svg:not(:root){overflow:hidden} figure{margin:1em 40px} | |
| hr{-moz-box-sizing:content-box;box-sizing:content-box} | |
| pre{overflow:auto} | |
| code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} | |
| button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0} | |
| button{overflow:visible}button,select{text-transform:none} | |
| button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer} | |
| button[disabled],html input[disabled]{cursor:default} | |
| button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} | |
| input[type=checkbox],input[type=radio]{padding:0} | |
| input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto} | |
| input[type=search]{box-sizing:content-box;-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box} | |
| input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none} | |
| fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em} | |
| legend{border:0;padding:0} | |
| textarea{overflow:auto} | |
| optgroup{font-weight:bold} | |
| /* End extract from normalize.css */ | |
| html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5} | |
| h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0} | |
| h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit} | |
| h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px} | |
| hr{height:0;border:0;border-top:1px solid #eee;margin:20px 0} | |
| img{margin-bottom:-5px} | |
| a{color:inherit} | |
| table{border-collapse:collapse;border-spacing:0;width:100%;display:table} | |
| table,th,td{border:none} | |
| .w3-table-all{border:1px solid #ccc} | |
| .w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #d0d0d0} | |
| .w3-striped tbody tr:nth-child(even){background-color:#f2f2f2} | |
| .w3-table-all tr:nth-child(odd){background-color:#fff} | |
| .w3-table-all tr:nth-child(even){background-color:#f2f2f2} | |
| .w3-hoverable tbody tr{transition:background-color .25s ease} | |
| .w3-hoverable tbody tr:hover{background-color:#f2f2f2} | |
| .w3-centered tr th,.w3-centered tr td{text-align:center} | |
| .w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:6px 8px;display:table-cell;text-align:left;vertical-align:top} | |
| .w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px} | |
| .w3-btn{border:none;display:inline-block;outline:0;padding:6px 16px;vertical-align:middle;overflow:hidden;text-decoration:none !important;color:#fff;background-color:#000;text-align:center;transition:.2s ease-out;cursor:pointer;white-space:nowrap} | |
| .w3-btn.w3-disabled,.w3-btn-floating.w3-disabled,.w3-btn:disabled,.w3-btn-floating:disabled,.w3-btn-floating-large.w3-disabled,.w3-btn-floating-large:disabled{cursor:not-allowed;opacity:0.3;} | |
| .w3-btn.w3-disabled *,.w3-btn-floating.w3-disabled *,.w3-btn:disabled *,.w3-btn-floating:disabled *{pointer-events:none} | |
| .w3-btn.w3-disabled:hover,.w3-btn:disabled:hover,.w3-btn-floating.w3-disabled:hover,.w3-btn-floating:disabled:hover, | |
| .w3-btn-floating-large.w3-disabled:hover,.w3-btn-floating-large:disabled:hover{box-shadow:none} | |
| .w3-btn:hover,.w3-btn-floating:hover,.w3-btn-floating-large:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} | |
| .w3-btn-floating,.w3-btn-floating-large{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;transition:.3s;cursor:pointer;font-size:24px} | |
| .w3-btn-floating{width:40px;height:40px;line-height:40px} | |
| .w3-btn-floating-large{width:56px;height:56px;line-height:56px} | |
| .w3-btn-group .w3-btn{float:left;} | |
| .w3-btn.w3-ripple{position:relative} | |
| .w3-ripple:after{content:"";background:#90EE90;display:block;position:absolute;padding-top:300%;padding-left:350%;margin-left:-20px!important;margin-top:-120%;opacity:0;transition:all 0.8s} | |
| .w3-ripple:active:after{padding:0;margin:0;opacity:1;transition:0s} | |
| .w3-badge,.w3-tag{display:inline-block;padding-left:8px;padding-right:8px;font-weight:bold;text-align:center} | |
| .w3-badge{border-radius:50%} | |
| .w3-blockquote{margin:0;padding-left:16px;border-left:5px solid #ddd;font-style:italic} | |
| ul.w3-ul{list-style-type:none;padding:0;margin:0;} | |
| ul.w3-ul li{padding:6px 16px;border-bottom:1px solid #e0e0e0} | |
| ul.w3-ul li:last-child{border-bottom:none} | |
| .w3-image{position:relative} | |
| img.w3-image,.w3-image img{max-width:100%;height:auto} | |
| .w3-image .w3-title{position:absolute;bottom:8px;left:16px;color:#fff;font-size:20px} | |
| .w3-fluid{max-width:100%;height:auto} | |
| .w3-tooltip .w3-text{display:none} | |
| .w3-tooltip:hover .w3-text{display:inline-block} | |
| .w3-topnav{padding:8px 8px} | |
| .w3-topnav a,.w3-sidenav a,.w3-dropnav a{text-decoration:none !important} | |
| .w3-topnav a{padding:0 8px;border-bottom:3px solid transparent;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;} | |
| .w3-topnav a:hover{border-bottom:3px solid #fff} | |
| .w3-sidenav{height:100%;width:200px;position:fixed !important;z-index:1;overflow:auto} | |
| .w3-opennav,.w3-closenav{color:inherit} | |
| .w3-opennav:hover,.w3-closenav:hover{cursor:pointer;opacity:0.8} | |
| .w3-sidenav a{padding:4px 16px} | |
| .w3-sidenav a:hover,.w3-sidenav a:focus{background-color:#ccc} | |
| .w3-sidenav a,.w3-dropnav a{display:block;transition:.3s} | |
| .w3-dropnav a:hover{text-decoration:underline !important} | |
| .w3-tab div{display:none} | |
| .w3-tab div:target{display:block} | |
| .w3-modal{z-index:1;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)} | |
| .w3-modal:target{display:block} | |
| .w3-modal-content{margin:auto;background-color:#f3f3f3;position:relative;padding:0;outline:0;border:1px #555 solid;width:600px}.w3-closebtn{text-decoration:none;float:right;font-size:24px;font-weight:bold;color:inherit} | |
| .w3-closebtn:hover,.w3-closebtn:focus{color:#000;text-decoration:none;cursor:pointer} | |
| .w3-form{padding:16px}.w3-group,.w3-input-group{position:relative;margin-top:30px;margin-bottom:30px} | |
| .w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #808080;width:100%} | |
| .w3-label{position:absolute;top:-22px;left:0;color:#009688} | |
| .w3-select{background-color:transparent;padding:4px 0;width:100%;color:#000;border:1px solid transparent;border-bottom: 1px solid #009688} | |
| .w3-select select:focus{color:#000;border:1px solid #009688}.w3-select option[disabled]{color:#009688} | |
| /* w3-checkbox and w3-checkmark will be removed in version 1.8 */ | |
| .w3-checkbox:before,.w3-checkbox:after,.w3-checkbox,.w3-checkmark:before,.w3-checkmark:after,.w3-checkmark{box-sizing:border-box} | |
| .w3-checkbox{display:inline-block;line-height:24px;margin:8px 0} | |
| .w3-checkbox input[type=checkbox],.w3-checkbox input[type=radio]{display:none} | |
| .w3-checkbox input[type=checkbox]:checked + .w3-checkmark:before{background:#009688} | |
| .w3-checkbox input[type=checkbox]:checked + .w3-checkmark:after{opacity:1} | |
| .w3-checkbox input[type=radio]:checked + .w3-checkmark:before{background:#fff} | |
| .w3-checkbox input[type=radio]:checked + .w3-checkmark:after{opacity:1;background-color:#009688} | |
| .w3-checkmark:before{content:'';position:absolute;width:24px;height:24px;border:2px solid #009688} | |
| .w3-checkmark{position:relative;display:inline-block;vertical-align:top;cursor:pointer;width:24px;height:24px} | |
| .w3-checkmark:after{content:'';position:absolute;top:7px;left:6px;width:14px;height:8px;border:4px solid #fff;border-top:none;border-right:none;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)} | |
| .w3-checkbox input[type=radio] + .w3-checkmark:before{border-radius:50%;background-color:#fff} | |
| .w3-checkbox input[type=radio] + .w3-checkmark:after{content:'';position:absolute;top:6px;left:6px;width:12px;height:12px;border:0 solid #fff;border-radius:50%} | |
| .w3-checkbox input[type=checkbox]:disabled + .w3-checkmark{opacity:0.3;cursor:default} | |
| .w3-checkbox input[type=radio]:disabled + .w3-checkmark{opacity:0.3;cursor:default} | |
| /* w3-checkbox and w3-checkmark will be removed in version 1.8 */ | |
| input[type=checkbox].w3-check,input[type=radio].w3-radio{width:24px;height:24px;position:relative;top:6px;} | |
| input[type=checkbox].w3-check:checked+.w3-validate,input[type=radio].w3-radio:checked+.w3-validate{color:#009688} | |
| input[type=checkbox].w3-check:disabled+.w3-validate,input[type=radio].w3-radio:disabled+.w3-validate{color:#aaa} | |
| .w3-responsive{overflow-x:auto} | |
| .w3-container:after,.w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after,.w3-btn-group:before,.w3-btn-group:after{content:"";display:table;clear:both} | |
| .w3-col,.w3-half,.w3-third,.w3-twothird,.w3-quarter{float:left;width:100%} | |
| .w3-col.s1{width:8.33333%} | |
| .w3-col.s2{width:16.66666%} | |
| .w3-col.s3{width:24.99999%} | |
| .w3-col.s4{width:33.33333%} | |
| .w3-col.s5{width:41.66666%} | |
| .w3-col.s6{width:49.99999%} | |
| .w3-col.s7{width:58.33333%} | |
| .w3-col.s8{width:66.66666%} | |
| .w3-col.s9{width:74.99999%} | |
| .w3-col.s10{width:83.33333%} | |
| .w3-col.s11{width:91.66666%} | |
| .w3-col.s12,.w3-half,.w3-third,.w3-twothird,.w3-quarter{width:99.99999%} | |
| @media only screen and (min-width:601px){ | |
| .w3-col.m1{width:8.33333%} | |
| .w3-col.m2{width:16.66666%} | |
| .w3-col.m3,.w3-quarter{width:24.99999%} | |
| .w3-col.m4,.w3-third{width:33.33333%} | |
| .w3-col.m5{width:41.66666%} | |
| .w3-col.m6,.w3-half{width:49.99999%} | |
| .w3-col.m7{width:58.33333%} | |
| .w3-col.m8,.w3-twothird{width:66.66666%} | |
| .w3-col.m9{width:74.99999%} | |
| .w3-col.m10{width:83.33333%} | |
| .w3-col.m11{width:91.66666%} | |
| .w3-col.m12{width:99.99999%}} | |
| @media only screen and (min-width:993px){ | |
| .w3-col.l1{width:8.33333%} | |
| .w3-col.l2{width:16.66666%} | |
| .w3-col.l3,.w3-quarter{width:24.99999%} | |
| .w3-col.l4,.w3-third{width:33.33333%} | |
| .w3-col.l5{width:41.66666%} | |
| .w3-col.l6,.w3-half{width:49.99999%} | |
| .w3-col.l7{width:58.33333%} | |
| .w3-col.l8,.w3-twothird{width:66.66666%} | |
| .w3-col.l9{width:74.99999%} | |
| .w3-col.l10{width:83.33333%} | |
| .w3-col.l11{width:91.66666%} | |
| .w3-col.l12{width:99.99999%}} | |
| .w3-content{max-width:980px;margin:auto} | |
| .w3-rest{overflow:hidden} | |
| @media (max-width:601px){.w3-modal-content{margin:50px 10px 10px 10px;width:auto !important}} | |
| @media (max-width:768px){.w3-modal-content{width:500px}} | |
| @media (min-width:992px){.w3-modal-content{width:900px}} | |
| @media screen and (max-width:601px){.w3-topnav a{display:block}.w3-topnav a:first-child{padding:0 8px}} | |
| @media screen and (max-width:601px){.w3-topnav{text-align:center}} | |
| @media (max-width:601px){.w3-hide-small{display:none !important;}} | |
| @media (max-width:991px) and (min-width:601px){.w3-hide-medium{display:none !important;}} | |
| @media (min-width:992px){.w3-hide-large{display:none !important;}} | |
| .w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0} | |
| .w3-left{float:left !important}.w3-right{float:right !important} | |
| .w3-hide{display:none !important}.w3-show{display:block !important} | |
| .w3-tiny{font-size:10px !important} | |
| .w3-small{font-size:12px !important} | |
| .w3-medium{font-size:15px !important} | |
| .w3-large{font-size:18px !important} | |
| .w3-xlarge{font-size:24px !important} | |
| .w3-xxlarge{font-size:36px !important} | |
| .w3-xxxlarge{font-size:48px !important} | |
| .w3-slim{font-family:"Segoe UI",Arial,sans-serif !important} | |
| .w3-wide{font-family:"Segoe UI",Arial,sans-serif !important;letter-spacing:4px} | |
| .w3-jumbo{font-size:64px !important} | |
| .w3-left-align{text-align:left !important}.w3-right-align{text-align:right !important} | |
| .w3-justify{text-align:justify !important} | |
| .w3-center{text-align:center !important} | |
| .w3-circle{border-radius:50% !important} | |
| .w3-round-small{border-radius:2px !important}.w3-round,.w3-round-medium{border-radius:4px !important} | |
| .w3-round-large{border-radius:8px !important}.w3-round-xlarge{border-radius:16px !important} | |
| .w3-round-xxlarge{border-radius:32px !important}.w3-round-jumbo{border-radius:64px !important} | |
| .w3-border-0{border:0 !important} | |
| .w3-border{border:1px solid #ccc !important} | |
| .w3-border-top{border-top:1px solid #ccc !important}.w3-border-bottom{border-bottom:1px solid #ccc !important} | |
| .w3-border-left{border-left:1px solid #ccc !important}.w3-border-right{border-right:1px solid #ccc !important} | |
| .w3-margin-0{margin:0 !important} | |
| .w3-margin-2{margin:2px !important} | |
| .w3-margin-4{margin:4px !important} | |
| .w3-margin-8{margin:8px !important} | |
| .w3-margin-12{margin:12px !important} | |
| .w3-margin-16{margin:16px !important} | |
| .w3-margin-24{margin:24px !important} | |
| .w3-margin-32{margin:32px !important} | |
| .w3-margin-64{margin:64px !important} | |
| .w3-margin{margin:16px !important} | |
| .w3-margin-top{margin-top:16px !important}.w3-margin-bottom{margin-bottom:16px !important} | |
| .w3-margin-left{margin-left:16px !important}.w3-margin-right{margin-right:16px !important} | |
| .w3-padding-tiny{padding:2px 4px !important} | |
| .w3-padding-small{padding:4px 8px !important} | |
| .w3-padding-medium,.w3-padding{padding:8px 16px !important} | |
| .w3-padding-large{padding:12px 24px !important} | |
| .w3-padding-xlarge{padding:16px 32px !important} | |
| .w3-padding-xxlarge{padding:24px 48px !important} | |
| .w3-padding-jumbo{padding:32px 64px !important} | |
| .w3-padding-0{padding:0 !important} | |
| .w3-padding-4{padding-top:4px !important;padding-bottom:4px !important} | |
| .w3-padding-8{padding-top:8px !important;padding-bottom:8px !important} | |
| .w3-padding-16{padding-top:16px !important;padding-bottom:16px !important} | |
| .w3-padding-24{padding-top:24px !important;padding-bottom:24px !important} | |
| .w3-padding-32{padding-top:32px !important;padding-bottom:32px !important} | |
| .w3-padding-48{padding-top:48px !important;padding-bottom:48px !important} | |
| .w3-padding-64{padding-top:64px !important;padding-bottom:64px !important} | |
| .w3-padding-top{padding-top:8px !important}.w3-padding-bottom{padding-bottom:8px !important} | |
| .w3-padding-left{padding-left:16px !important}.w3-padding-right{padding-right:16px !important} | |
| .w3-row-padding{padding:0 8px} | |
| .w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:1px 8px} | |
| .w3-spin{animation:w3-spin 2s infinite linear;-webkit-animation:w3-spin 2s infinite linear} | |
| @-webkit-keyframes w3-spin{ | |
| 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} | |
| 100%{-webkit-transform:rotate(359deg);transform:rotate(359deg);}} | |
| @keyframes w3-spin{ | |
| 0%{-webkit-transform:rotate(0deg);transform: rotate(0deg);} | |
| 100%{-webkit-transform:rotate(359deg);transform:rotate(359deg);}} | |
| .w3-container{padding:1px 16px} | |
| .w3-example{background-color:#f1f1f1;padding:1px 16px} | |
| .w3-section{margin-top:16px;margin-bottom:16px} | |
| .w3-code{font-family:Consolas,"courier new";font-size:16px;line-height:1.4;width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #009688;word-wrap:break-word} | |
| .w3-example,.w3-code,.w3-reference{margin:20px 0} | |
| .w3-card{border:1px solid #ccc} | |
| .w3-card-2,.w3-example{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important} | |
| .w3-card-4{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important} | |
| .w3-card-8{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important} | |
| .w3-card-12{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19) !important} | |
| .w3-card-16{box-shadow:0 16px 24px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21) !important} | |
| .w3-card-24{box-shadow:0 24px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22) !important} | |
| .w3-animate-opacity{ | |
| -webkit-animation-name:opac;-webkit-animation-duration:4s;animation-name:opac;animation-duration:4s} | |
| @-webkit-keyframes opac{from{opacity:0} to{opacity:1}} | |
| @keyframes opac{from{opacity:0} to{opacity:1}} | |
| /* TOP */ | |
| .w3-animate-top{ | |
| position:relative;-webkit-animation-name:animatetop;-webkit-animation-duration:0.4s;animation-name:animatetop;animation-duration:0.4s} | |
| @-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} | |
| @keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} | |
| /* LEFT */ | |
| .w3-animate-left{ | |
| position:relative;-webkit-animation-name:animateleft;-webkit-animation-duration:0.4s;animation-name:animateleft;animation-duration:0.4s} | |
| @-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} | |
| @keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} | |
| /* RIGHT */ | |
| .w3-animate-right{ | |
| position:relative;-webkit-animation-name:animateright;-webkit-animation-duration:0.4s;animation-name:animateright;animation-duration:0.4s} | |
| @-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} | |
| @keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} | |
| /* BOTTOM */ | |
| .w3-animate-bottom{ | |
| position:relative;-webkit-animation-name:animatebottom;-webkit-animation-duration:0.4s;animation-name:animatebottom;animation-duration:0.4s} | |
| @-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}} | |
| @keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} | |
| /* COLORS */ | |
| .w3-text-amber{color:#ffc107 !important}.w3-amber{color:#000 !important;background-color:#ffc107 !important} | |
| .w3-text-aqua{color:#00ffff !important}.w3-aqua{color:#000 !important;background-color:#00ffff !important} | |
| .w3-text-blue{color:#2196F3 !important}.w3-blue{color:#fff !important;background-color:#2196F3 !important} | |
| .w3-text-light-blue{color:#87CEEB !important}.w3-light-blue{color:#000 !important;background-color:#87CEEB !important} | |
| .w3-text-brown{color:#795548 !important}.w3-brown{color:#fff !important;background-color:#795548 !important} | |
| .w3-text-cyan{color:#00bcd4 !important}.w3-cyan{color:#000 !important;background-color:#00bcd4 !important} | |
| .w3-text-blue-grey{color:#607d8b !important}.w3-blue-grey{color:#fff !important;background-color:#607d8b !important} | |
| .w3-text-green{color:#4CAF50 !important}.w3-green{color:#fff !important;background-color:#4CAF50 !important} | |
| .w3-text-light-green{color:#8bc34a !important}.w3-light-green{color:#000 !important;background-color:#8bc34a !important} | |
| .w3-text-indigo{color:#3f51b5 !important}.w3-indigo{color:#fff !important;background-color:#3f51b5 !important} | |
| .w3-text-khaki{color:#b4aa50 !important}.w3-khaki{color:#000 !important;background-color:#f0e68c !important} | |
| .w3-text-lime{color:#cddc39 !important}.w3-lime{color:#000 !important;background-color:#cddc39 !important} | |
| .w3-text-orange{color:#ff9800 !important}.w3-orange{color:#000 !important;background-color:#ff9800 !important} | |
| .w3-text-deep-orange{color:#ff5722 !important}.w3-deep-orange{color:#fff !important;background-color:#ff5722 !important} | |
| .w3-text-pink{color:#e91e63 !important}.w3-pink{color:#fff !important;background-color:#e91e63 !important} | |
| .w3-text-purple{color:#9c27b0 !important}.w3-purple{color:#fff !important;background-color:#9c27b0 !important} | |
| .w3-text-deep-purple{color:#673ab7 !important}.w3-deep-purple{color:#fff !important;background-color:#673ab7 !important} | |
| .w3-text-red{color:#f44336 !important}.w3-red{color:#fff !important;background-color:#f44336 !important} | |
| .w3-text-sand{color:#fdf5e6 !important}.w3-sand{color:#000 !important;background-color:#fdf5e6 !important} | |
| .w3-text-teal{color:#1BBD36 !important}.w3-teal{color:#fff !important;background-color:#1BBD36 !important} | |
| .w3-text-yellow{color:#d2be0e !important}.w3-yellow{color:#000 !important;background-color:#ffeb3b !important} | |
| .w3-text-white{color:#fff !important}.w3-white{color:#000 !important;background-color:#fff !important} | |
| .w3-text-black{color:#000 !important}.w3-black{color:#fff !important;background-color:#000 !important} | |
| .w3-text-grey{color:#757575 !important}.w3-grey{color:#000 !important;background-color:#9e9e9e !important} | |
| .w3-text-light-grey{color:#f1f1f1 !important}.w3-light-grey{color:#000;background-color:#f1f1f1 !important} | |
| .w3-text-dark-grey{color:#3a3a3a !important}.w3-dark-grey{color:white;background-color:#616161 !important} | |
| .w3-text-white-opacity{color:rgba(255,255,255,0.65) !important} | |
| .w3-text-black-opacity{color:rgba(0,0,0,0.60) !important} | |
| .w3-text-shadow{text-shadow:1px 1px 1px #444;letter-spacing:2px} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment