src/third_party/v8/tools/system-analyzer/log-file-reader-template.html - cobalt - Git at Google

 <!-- Copyright 2020 the V8 project authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file. -->

 <head>
   <link href="./index.css" rel="stylesheet">
 </head>
 <style>
   #fileReader {
     height: 100px;
     line-height: 100px;
     text-align: center;
     cursor: pointer;
     transition: all 0.5s ease-in-out;
     background-color: var(--surface-color);
   }

   #fileReader:hover {
     background-color: var(--primary-color);
     color: var(--on-primary-color);
   }

   .done #fileReader{
     height: 20px;
     line-height: 20px;
   }

   .fail #fileReader {
     background-color: var(--error-color);
   }

   .loading #fileReader {
     cursor: wait;
   }

   #fileReader>input {
     display: none;
   }

   #loader {
     display: none;
   }

   .loading #loader {
     display: block;
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     background-color: var(--file-reader-background-color);
   }
   #spinner {
     position: absolute;
     width: 100px;
     height: 100px;
     top: 40%;
     left: 50%;
     margin-left: -50px;
     border: 30px solid var(--surface-color);
     border-top: 30px solid var(--primary-color);
     border-radius: 50%;
     animation: spin 1s ease-in-out infinite;
   }

   @keyframes spin {
     0% {
       transform: rotate(0deg);
     }

     100% {
       transform: rotate(360deg);
     }
   }
 </style>
 <div id="root">
   <div id="fileReader" class="panel" tabindex=1>
     <span id="label">
       Drag and drop a v8.log file into this area, or click to choose from disk.
     </span>
     <input id="file" type="file" name="file">
   </div>
   <div id="loader">
     <div id="spinner"></div>
   </div>
 </div>
	<!-- Copyright 2020 the V8 project authors. All rights reserved.
	Use of this source code is governed by a BSD-style license that can be
	found in the LICENSE file. -->

	<head>
	<link href="./index.css" rel="stylesheet">
	</head>
	<style>
	#fileReader {
	height: 100px;
	line-height: 100px;
	text-align: center;
	cursor: pointer;
	transition: all 0.5s ease-in-out;
	background-color: var(--surface-color);
	}

	#fileReader:hover {
	background-color: var(--primary-color);
	color: var(--on-primary-color);
	}

	.done #fileReader{
	height: 20px;
	line-height: 20px;
	}

	.fail #fileReader {
	background-color: var(--error-color);
	}

	.loading #fileReader {
	cursor: wait;
	}

	#fileReader>input {
	display: none;
	}

	#loader {
	display: none;
	}

	.loading #loader {
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: var(--file-reader-background-color);
	}
	#spinner {
	position: absolute;
	width: 100px;
	height: 100px;
	top: 40%;
	left: 50%;
	margin-left: -50px;
	border: 30px solid var(--surface-color);
	border-top: 30px solid var(--primary-color);
	border-radius: 50%;
	animation: spin 1s ease-in-out infinite;
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(360deg);
	}
	}
	</style>
	<div id="root">
	<div id="fileReader" class="panel" tabindex=1>
	<span id="label">
	Drag and drop a v8.log file into this area, or click to choose from disk.
	</span>
	<input id="file" type="file" name="file">
	</div>
	<div id="loader">
	<div id="spinner"></div>
	</div>
	</div>