11cb0ef41Sopenharmony_ci<!-- Copyright 2021 the V8 project authors. All rights reserved.
21cb0ef41Sopenharmony_ciUse of this source code is governed by a BSD-style license that can be
31cb0ef41Sopenharmony_cifound in the LICENSE file. -->
41cb0ef41Sopenharmony_ci
51cb0ef41Sopenharmony_ci<head>
61cb0ef41Sopenharmony_ci  <link href="./index.css" rel="stylesheet" />
71cb0ef41Sopenharmony_ci</head>
81cb0ef41Sopenharmony_ci<style>
91cb0ef41Sopenharmony_ci  #fileReader {
101cb0ef41Sopenharmony_ci    height: 100px;
111cb0ef41Sopenharmony_ci    line-height: 100px;
121cb0ef41Sopenharmony_ci    text-align: center;
131cb0ef41Sopenharmony_ci    cursor: pointer;
141cb0ef41Sopenharmony_ci    transition: all 0.5s ease-in-out;
151cb0ef41Sopenharmony_ci    background-color: var(--surface-color);
161cb0ef41Sopenharmony_ci    border: solid 1px var(--file-reader-border-color);
171cb0ef41Sopenharmony_ci    border-radius: 5px;
181cb0ef41Sopenharmony_ci  }
191cb0ef41Sopenharmony_ci
201cb0ef41Sopenharmony_ci  #fileReader:hover {
211cb0ef41Sopenharmony_ci    background-color: var(--primary-color);
221cb0ef41Sopenharmony_ci    color: var(--on-primary-color);
231cb0ef41Sopenharmony_ci  }
241cb0ef41Sopenharmony_ci
251cb0ef41Sopenharmony_ci  .done #fileReader {
261cb0ef41Sopenharmony_ci    display: none;
271cb0ef41Sopenharmony_ci  }
281cb0ef41Sopenharmony_ci
291cb0ef41Sopenharmony_ci  .fail #fileReader {
301cb0ef41Sopenharmony_ci    background-color: var(--error-color);
311cb0ef41Sopenharmony_ci  }
321cb0ef41Sopenharmony_ci
331cb0ef41Sopenharmony_ci  .loading #fileReader {
341cb0ef41Sopenharmony_ci    cursor: wait;
351cb0ef41Sopenharmony_ci  }
361cb0ef41Sopenharmony_ci
371cb0ef41Sopenharmony_ci  #fileReader > input {
381cb0ef41Sopenharmony_ci    display: none;
391cb0ef41Sopenharmony_ci  }
401cb0ef41Sopenharmony_ci
411cb0ef41Sopenharmony_ci  #loader {
421cb0ef41Sopenharmony_ci    display: none;
431cb0ef41Sopenharmony_ci    will-change: rotate;
441cb0ef41Sopenharmony_ci  }
451cb0ef41Sopenharmony_ci
461cb0ef41Sopenharmony_ci  .loading #loader {
471cb0ef41Sopenharmony_ci    display: block;
481cb0ef41Sopenharmony_ci    position: fixed;
491cb0ef41Sopenharmony_ci    z-index: 9999;
501cb0ef41Sopenharmony_ci    top: 0px;
511cb0ef41Sopenharmony_ci    left: 0px;
521cb0ef41Sopenharmony_ci    width: 100%;
531cb0ef41Sopenharmony_ci    height: 100%;
541cb0ef41Sopenharmony_ci    background-color: var(--file-reader-background-color);
551cb0ef41Sopenharmony_ci  }
561cb0ef41Sopenharmony_ci
571cb0ef41Sopenharmony_ci  #spinner, #progress, #progressText {
581cb0ef41Sopenharmony_ci    position: absolute;
591cb0ef41Sopenharmony_ci    width: 120px;
601cb0ef41Sopenharmony_ci    height: 120px;
611cb0ef41Sopenharmony_ci    top: 40%;
621cb0ef41Sopenharmony_ci    left: 50%;
631cb0ef41Sopenharmony_ci    margin-left: calc(-60px - 10px);
641cb0ef41Sopenharmony_ci    border-radius: 50%;
651cb0ef41Sopenharmony_ci  }
661cb0ef41Sopenharmony_ci  #spinner {
671cb0ef41Sopenharmony_ci    border: 20px solid var(--surface-color);
681cb0ef41Sopenharmony_ci    border-top: 20px solid var(--primary-color);
691cb0ef41Sopenharmony_ci    animation: spin 1s linear infinite;
701cb0ef41Sopenharmony_ci    will-change: transform;
711cb0ef41Sopenharmony_ci    transform: scale(1.1);
721cb0ef41Sopenharmony_ci  }
731cb0ef41Sopenharmony_ci
741cb0ef41Sopenharmony_ci  #progress, #progressText {
751cb0ef41Sopenharmony_ci    padding: 20px;
761cb0ef41Sopenharmony_ci  }
771cb0ef41Sopenharmony_ci
781cb0ef41Sopenharmony_ci  #progress {
791cb0ef41Sopenharmony_ci    transition: all 0.5s ease-in-out;
801cb0ef41Sopenharmony_ci  }
811cb0ef41Sopenharmony_ci
821cb0ef41Sopenharmony_ci  #progressText {
831cb0ef41Sopenharmony_ci    line-height: 120px;
841cb0ef41Sopenharmony_ci    font-size: 28px;
851cb0ef41Sopenharmony_ci    transform: scale(0.55);
861cb0ef41Sopenharmony_ci    text-align: center;
871cb0ef41Sopenharmony_ci    vertical-align: middle;
881cb0ef41Sopenharmony_ci    background-color:  var(--surface-color);
891cb0ef41Sopenharmony_ci  }
901cb0ef41Sopenharmony_ci
911cb0ef41Sopenharmony_ci  #label {
921cb0ef41Sopenharmony_ci    user-select: none;
931cb0ef41Sopenharmony_ci  }
941cb0ef41Sopenharmony_ci
951cb0ef41Sopenharmony_ci  @keyframes spin {
961cb0ef41Sopenharmony_ci    0% {
971cb0ef41Sopenharmony_ci      transform: rotate(0deg);
981cb0ef41Sopenharmony_ci    }
991cb0ef41Sopenharmony_ci
1001cb0ef41Sopenharmony_ci    100% {
1011cb0ef41Sopenharmony_ci      transform: rotate(360deg);
1021cb0ef41Sopenharmony_ci    }
1031cb0ef41Sopenharmony_ci  }
1041cb0ef41Sopenharmony_ci</style>
1051cb0ef41Sopenharmony_ci<div id="root">
1061cb0ef41Sopenharmony_ci  <div id="fileReader" class="panel" tabindex="1">
1071cb0ef41Sopenharmony_ci    <span id="label">
1081cb0ef41Sopenharmony_ci      Drag and drop a v8.log file into this area, or click to choose from disk.
1091cb0ef41Sopenharmony_ci    </span>
1101cb0ef41Sopenharmony_ci    <input id="file" type="file" name="file" />
1111cb0ef41Sopenharmony_ci  </div>
1121cb0ef41Sopenharmony_ci  <div id="loader">
1131cb0ef41Sopenharmony_ci    <div id="progress"></div>
1141cb0ef41Sopenharmony_ci    <div id="spinner"></div>
1151cb0ef41Sopenharmony_ci    <div id="progressText"></div>
1161cb0ef41Sopenharmony_ci  </div>
1171cb0ef41Sopenharmony_ci</div>
118