Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
| from branca.element import Template, MacroElement | |
| template = """ | |
| {% macro html(this, kwargs) %} | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>jQuery UI Draggable - Default functionality</title> | |
| <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> | |
| <script src="https://code.jquery.com/jquery-1.12.4.js"></script> | |
| <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> | |
| <script> | |
| $( function() { | |
| $( "#maplegend" ).draggable({ | |
| start: function (event, ui) { | |
| $(this).css({ | |
| right: "auto", | |
| top: "auto", | |
| bottom: "auto" | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id='maplegend' class='maplegend' | |
| style='position: absolute; z-index:9999; border:2px solid grey; background-color:rgba(255, 255, 255, 0.8); | |
| border-radius:6px; padding: 10px; font-size:14px; right: 20px; bottom: 20px;'> | |
| <div class='legend-title'>Legend / مفتاح الخريطة</div> | |
| <div class='legend-scale'> | |
| <ul class='legend-labels'> | |
| <li><span style='background:red;opacity:0.7;'></span>Rescue / إغاثة</li> | |
| <li><span style='background:orange;opacity:0.7;'></span>Medical Assistance / مساعدة طبية</li> | |
| <li><span style='background:yellow;opacity:0.7;'></span>Shelter / مأوى</li> | |
| <li><span style='background:blue;opacity:0.7;'></span>Food & Water / طعام وماء</li> | |
| <li><span style='background:grey;opacity:0.7;'></span>Danger / مخاطر (تسرب الغاز، تلف في الخدمات العامة...)</li> | |
| <li><span style='background:green;opacity:0.7;'></span>Done / تم</li> | |
| <li><span style='background:pink;opacity:0.7;'></span>Planned / مخطط لها</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| <style type='text/css'> | |
| .maplegend .legend-title { | |
| text-align: left; | |
| margin-bottom: 5px; | |
| font-weight: bold; | |
| font-size: 90%; | |
| color: #333; | |
| } | |
| .maplegend .legend-scale ul { | |
| margin: 0; | |
| margin-bottom: 5px; | |
| padding: 0; | |
| float: left; | |
| list-style: none; | |
| } | |
| .maplegend .legend-scale ul li { | |
| font-size: 80%; | |
| list-style: none; | |
| margin-left: 0; | |
| line-height: 18px; | |
| margin-bottom: 2px; | |
| color: #111; | |
| } | |
| .maplegend ul.legend-labels li span { | |
| display: block; | |
| float: left; | |
| height: 16px; | |
| width: 30px; | |
| margin-right: 5px; | |
| margin-left: 0; | |
| border: 1px solid #999; | |
| } | |
| .maplegend .legend-source { | |
| font-size: 80%; | |
| color: #777; | |
| clear: both; | |
| } | |
| .maplegend a { | |
| color: #777; | |
| } | |
| </style> | |
| {% endmacro %}""" | |
| legend_macro = MacroElement() | |
| legend_macro._template = Template(template) | |
| __all__ = ["legend_macro"] |