1 <!-- Copyright 2018 the V8 project authors. All rights reserved. 2 Use of this source code is governed by a BSD-style license that can be 3 found in the LICENSE file. --> 4 <template id="trace-file-reader-template"> 5 <style> 6 #fileReader { 7 width: 100%; 8 height: 100px; 9 line-height: 100px; 10 text-align: center; 11 border: solid 1px #000000; 12 border-radius: 5px; 13 cursor: pointer; 14 transition: all 0.5s ease-in-out; 15 } 16 17 #fileReader.done { 18 height: 20px; 19 line-height: 20px; 20 } 21 22 #fileReader:hover { 23 background-color: #e0edfe ; 24 } 25 26 .loading #fileReader { 27 cursor: wait; 28 } 29 30 #fileReader > input { 31 display: none; 32 } 33 34 35 #loader { 36 display: none; 37 } 38 39 .loading #loader { 40 display: block; 41 position: fixed; 42 top: 0px; 43 left: 0px; 44 width: 100%; 45 height: 100%; 46 background-color: rgba(255, 255, 255, 0.5); 47 } 48 49 #spinner { 50 position: absolute; 51 width: 100px; 52 height: 100px; 53 top: 40%; 54 left: 50%; 55 margin-left: -50px; 56 border: 30px solid #000; 57 border-top: 30px solid #36E; 58 border-radius: 50%; 59 animation: spin 1s ease-in-out infinite; 60 } 61 62 @keyframes spin { 63 0% { 64 transform: rotate(0deg); 65 }; 66 100% { 67 transform: rotate(360deg); 68 }; 69 } 70 </style> 71 72 <section id="fileReaderSection"> 73 <div id="fileReader" tabindex=1 > 74 <span id="label"> 75 Drag and drop a trace file into this area, or click to choose from disk. 76 </span> 77 <input id="file" type="file" name="file" /> 78 </div> 79 <div id="loader"> 80 <div id="spinner"></div> 81 </div> 82 </section> 83 </template> 84 <script type="text/javascript" src="model.js"></script> 85 86 <script src="trace-file-reader.js"></script> 87
