Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>PDBFixer</title> | |
| <script> | |
| function setCurrentStep(step) { | |
| for (var i = 1; i < step; i++) | |
| document.getElementById("step"+i).style.color="black" | |
| document.getElementById("step"+step).style.color="red" | |
| for (var i = step+1; i < 8; i++) | |
| document.getElementById("step"+i).style.color="gray" | |
| if (step == 1) | |
| document.getElementById("newfile").disabled=true | |
| } | |
| function setCheckboxes(selected) { | |
| checkboxes = document.getElementById("table").getElementsByTagName("input") | |
| for (var i = 0; i < checkboxes.length; i++) | |
| checkboxes[i].checked = selected | |
| } | |
| function enableControls(container, enabled) { | |
| tags = ["input", "select"] | |
| for (var i = 0; i < tags.length; i++) { | |
| controls = container.getElementsByTagName(tags[i]) | |
| for (var j = 0; j < controls.length; j++) | |
| controls[j].disabled = !enabled | |
| } | |
| } | |
| function submitWithSpinner() { | |
| animateSpinner.animateIndex = 0 | |
| setTimeout(function() {animateSpinner();document.getElementById('overlay').style.visibility='visible';}, 1500) | |
| document.getElementById('mainform').submit() | |
| } | |
| function animateSpinner() { | |
| for (var i = 0; i < 3; i++) { | |
| var bar = document.getElementById("progress"+(i+1)) | |
| if (i == animateSpinner.animateIndex) | |
| bar.style.backgroundColor = "black" | |
| else | |
| bar.style.backgroundColor = "lightgray" | |
| } | |
| animateSpinner.animateIndex = (animateSpinner.animateIndex+1)%3 | |
| setTimeout(function() {animateSpinner()}, 1000) | |
| } | |
| </script> | |
| <style> | |
| body { | |
| margin-top: 0; | |
| font-family:sans-serif; | |
| background-color: rgb(217,217,217); | |
| background-image: url("/image?name=background.jpg"); | |
| background-size: 80%; | |
| background-repeat: repeat-y | |
| } | |
| input { | |
| font-size: small | |
| } | |
| select { | |
| font-size: small | |
| } | |
| table { | |
| border-collapse: collapse; | |
| margin: 7pt | |
| } | |
| th { | |
| padding: 2pt; | |
| background-color: lightgray | |
| } | |
| td { | |
| padding: 2pt | |
| } | |
| #progressParent { | |
| position: fixed; | |
| top: 40%; | |
| left: 50%; | |
| margin-top: -75px; | |
| margin-left: -125px | |
| } | |
| #overlay { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0px; | |
| left: 0px; | |
| background-color: rgba(255,255,255,0.75); | |
| visibility:hidden; | |
| } | |
| #progressMessage { | |
| width: 100%; | |
| position: fixed; | |
| top: 40%; | |
| margin-top: 90px; | |
| text-align: center | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="overlay"> | |
| <div id="progressParent"> | |
| <div id="progress1" style="width:50px;height:150px;position:absolute;left:0px"></div> | |
| <div id="progress2" style="width:50px;height:150px;position:absolute;left:100px"></div> | |
| <div id="progress3" style="width:50px;height:150px;position:absolute;left:200px"></div> | |
| </div> | |
| <div id="progressMessage"> | |
| <div style="font-size:xx-large">Processing</div> | |
| This may take some time. | |
| </div> | |
| </div> | |
| <span style="font-style:italic;font-size:large;float:right;position:relative;top:0;right:0;height:100%;padding:10px 10px"> | |
| <img src="/image?name=logo_small.png"/> | |
| <p/> | |
| <form method="post" action="/controls"> | |
| <input type="submit" name="newfile" value="New File" id="newfile"/> | |
| <input type="submit" name="quit" value="Quit" style="float:right"/> | |
| </form> | |
| <p id="step1">Load File</p> | |
| <p id="step2">Select Chains</p> | |
| <p id="step3">Add Residues</p> | |
| <p id="step4">Convert Residues</p> | |
| <p id="step5">Add Heavy Atoms</p> | |
| <p id="step6">Add Water/Hydrogens</p> | |
| <p id="step7">Save File</p> | |
| </span> | |
| <p/> |