<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width" >
< title > Power Budget Estimator< / title >
< script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">< / script >
< link href = "https://fonts.googleapis.com/css?family=Roboto:300,400" rel = "stylesheet" >
< link rel = "stylesheet" type = "text/css" href = "static/style.css" media = "screen and (min-width:500px)" >
< link rel = "stylesheet" type = "text/css" href = "static/style-m.css" media = "screen and (max-width:500px)" >
< link rel = "apple-touch-icon-precomposed" href = "static/apple-touch-icon.png" >
< script src = "https://use.fontawesome.com/2fef7be393.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.5.0/math.js" type = "text/javascript" > < / script >
< script type = "text/javascript" src = "static/common.js" > < / script >
< script type = "text/javascript" src = "static/script.js" > < / script >
< / head >
< body >
< h1 > Smart cities power budget estimator < / h1 >
< p > Designing an energy harvesting solution? Search for your components, add them and get a power requirement estimate< / p >
< input type = "text" name = "search-bar" class = "search-bar" placeholder = "Search parts" >
< div class = "filter-container" >
< p > SEARCH IN< / p >
< ul >
< li > < input type = "checkbox" class = "checkbox" id = "type" > < label class = "toggle-btn" for = "type" > Component type< br > < i class = "fa fa-map" style = "font-size:20pt" > < / i > < / label > < / li >
< li > < input type = "checkbox" class = "checkbox" id = "partno" checked = "" > < label class = "toggle-btn" for = "partno" > Part Number< br > < i class = "fa fa-hashtag" style = "font-size:20pt" > < / i > < / label > < / li >
< li > < input type = "checkbox" class = "checkbox" id = "description" checked = "" > < label class = "toggle-btn" for = "description" > Description< br > < i class = "fa fa-edit" style = "font-size:20pt" > < / i > < / label > < / li >
< / ul >
< / div >
< table id = "results" >
< tr >
< th id = "type" > Component type< / th >
< th id = "partno" > Part Number< / th >
< th id = "description" > Description< / th >
< / tr >
< / table >
< h3 id = "no-results" > No results.< / h3 >
< div class = "shadow" onclick = "overlay_out();calculateoverlay_out()" > < / div >
< div class = "overlay" >
< h2 > Part Details< / h2 >
< div id = "info-container" >
< table id = "details" >
< tr id = "type-head" class = "details-header" > < td > TYPE< / td > < / tr >
< tr id = "type" class = "details-content" > < td > < p > < / p >
< select class = "pinfo-input" id = "type-dropdown" onchange = "container_onchange()" >
{% for type in types %}
< option value = "{{type['id']}}" > {{type['name']}}< / option >
{% endfor %}
< / select >
< / td > < / tr >
< tr id = "partno-head" class = "details-header" > < td > PART NUMBER< / td > < / tr >
< tr id = "partno" class = "details-content" > < td > < p > < / p > < input type = "text" name = "partno-input" placeholder = "Part Number" class = "pinfo-input" id = "partno-input" / > < / td > < / tr >
< tr id = "description-head" class = "details-header" > < td > DESCRIPTION< / td > < / tr >
< tr id = "description" class = "details-content" > < td > < p > < / p > < input type = "text" name = "description-input" placeholder = "Description" class = "pinfo-input" id = "description-input" / > < / td > < / tr >
< tr id = "magical_autofill" style = "display:none" > < td > < input type = "button" id = "magic-autofill-button" onclick = "octopartFetch()" value = "magical auto-fill" style = "margin-bottom:6pt" / > powered by < a href = "http://octopart.com" class = "small_link" > OctoPart™< / a > < / td > < / tr >
< tr id = "datasheet-head" class = "details-header" > < td > DATASHEET: < / td > < / tr >
< tr id = "datasheet" style = "display: none" > < td > < input type = "file" accept = ".pdf" class = "pinfo-input" id = "datasheet-finput" > < / td > < / tr >
< tr id = "datasheet" style = "display: none" > < td > OR: < input type = "text" class = "pinfo-input" name = "datasheet-url-input" style = "width:80%; margin-bottom: 6pt;" placeholder = "Datasheet URL" > < / td > < / tr >
< tr id = "notes-head" class = "details-header" > < td > NOTES< / td > < / tr >
< tr id = "notes" class = "details-content" > < td > < p > < / p > < input type = "text" name = "notes-input" class = "pinfo-input" placeholder = "Notes" > < / td > < / tr >
< tr id = "parameters-head" class = "details-header" > < td > PARAMETERS< / td > < / tr >
< / table >
< div class = "button-container" >
< div class = "round-button" > < a href = "#" id = "delete-button" > < i class = "fa fa-trash" aria-hidden = "true" > < / i > < / a > < / div >
< div class = "round-button" > < a href = "#" id = "edit-button" > < i class = "fa fa-pencil" aria-hidden = "true" > < / i > < / a > < / div >
< div class = "round-button" > < a href = "#" id = "duplicate-button" onclick = "init_edit(-1)" > < i class = "fa fa-copy" aria-hidden = "true" > < / i > < / a > < / div >
< div class = "round-button text-center" > < a href = "#" id = "calculate-add-button" > < i class = "fa fa-calculator" aria-hidden = "true" > < / i > < / a > < / div >
< / div >
< / div >
< div >
< div class = "small-square-button" > < a href = "#" onclick = "overlay_out()" > < i class = "fa fa-times" aria-hidden = "true" > < / i > < / a > < / div >
< / div >
< / div >
< div class = "calculateoverlay" >
< h2 > Calculation results< / h2 >
< div id = "calculation-container" >
< table id = "calculations" >
< tr id = "calculation-head" class = "calculations-header" > < td > Results< / td > < / tr >
< tr id = "results" class = "calculations-content" > < td > < p > 0< / p >
< / td > < / tr >
< / table >
< div class = "button-container" >
< div class = "round-button text-center" > < a href = "#" id = "calculate-add-button" > < i class = "fa fa-calculator" aria-hidden = "true" > < / i > < / a > < / div >
< / div >
< / div >
< div >
< div class = "small-square-button" > < a href = "#" onclick = "calculateoverlay_out()" > < i class = "fa fa-times" aria-hidden = "true" > < / i > < / a > < / div >
< / div >
< / div >
< div class = "round-floating-button" > < a href = "#" onclick = "new_entry()" > < i class = "fa fa-plus" aria-hidden = "true" > < / i > < / a > < / div >
< div id = "calculate-button" class = "round-floating-button" > < a href = "#" onclick = "calculate()" > < i class = "fa fa-calculator" aria-hidden = "true" > < / i > < / a > < / div >
< / body >
< / html >
