1<!-- Copyright 2018 the V8 project authors. All rights reserved. 2Use of this source code is governed by a BSD-style license that can be 3found 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