1/* 2 * Copyright (C) 2024 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15export const appHtml = ` 16 <style> 17 :host{ 18 19 } 20 .root{ 21 display: grid; 22 grid-template-rows: min-content 1fr; 23 grid-template-columns: min-content 1fr; 24 grid-template-areas: 'm s' 25 'm b'; 26 height: 100vh; 27 width: 100vw; 28 } 29 .filedrag::after { 30 content: 'Drop the trace file to open it'; 31 position: fixed; 32 z-index: 2001; 33 top: 0; 34 left: 0; 35 right: 0; 36 bottom: 0; 37 border: 5px dashed var(--dark-color1,#404854); 38 text-align: center; 39 font-size: 3rem; 40 line-height: 100vh; 41 background: rgba(255, 255, 255, 0.5); 42 } 43 .menu{ 44 grid-area: m; 45 /*transition: all 0.2s;*/ 46 box-shadow: 4px 0px 20px rgba(0,0,0,0.05); 47 z-index: 2000; 48 } 49 .search-vessel{ 50 z-index: 999; 51 position: relative; 52 cursor: default; 53 } 54 .progress{ 55 bottom: 0; 56 position: absolute; 57 height: 1px; 58 left: 0; 59 right: 0; 60 } 61 62 :host(:not([search])) .search-vessel { 63 display: none; 64 } 65 :host(:not([search])) .search-vessel .search { 66 background-color: var(--dark-background5,#F6F6F6); 67 } 68 .search{ 69 grid-area: s; 70 background-color: var(--dark-background,#FFFFFF); 71 height: 48px; 72 display: flex; 73 justify-content: center; 74 align-items: center; 75 76 } 77 .search .search-bg{ 78 background-color: var(--dark-background5,#fff); 79 border-radius: 40px; 80 padding: 3px 20px; 81 display: flex; 82 justify-content: center; 83 align-items: center; 84 border: 1px solid var(--dark-border,#c5c5c5); 85 } 86 lit-search input{ 87 outline: none; 88 border: 0px; 89 background-color: transparent; 90 font-size: inherit; 91 color: var(--dark-color,#666666); 92 width: 30vw; 93 height: auto; 94 vertical-align:middle; 95 line-height:inherit; 96 height:inherit; 97 padding: 6px 6px 6px 6px}; 98 max-height: inherit; 99 box-sizing: border-box; 100 101 } 102 ::placeholder { 103 color: #b5b7ba; 104 font-size: 1em; 105 } 106 .content{ 107 grid-area: b; 108 background-color: #ffffff; 109 height: 100%; 110 overflow: auto; 111 position:relative; 112 } 113 .sheet{ 114 115 } 116 :host{ 117 font-size: inherit; 118 display: inline-block; 119 transition: .3s; 120 } 121 :host([spin]){ 122 animation: rotate 1.75s linear infinite; 123 } 124 @keyframes rotate { 125 to{ 126 transform: rotate(360deg); 127 } 128 } 129 .icon{ 130 display: block; 131 width: 1em; 132 height: 1em; 133 margin: auto; 134 fill: currentColor; 135 overflow: hidden; 136 font-size: 20px; 137 color: var(--dark-color1,#47A7E0); 138 } 139 .content-center-option { 140 justify-content: center; 141 width: -webkit-fill-available; 142 margin-right: 5.2em; 143 align-items: center; 144 width: auto; 145 } 146 </style> 147 <div class="root" style="position: relative;"> 148 <lit-main-menu id="main-menu" class="menu" data=''></lit-main-menu> 149 <div id="app-content" class="content"> 150 <memory-welcome style="visibility:visible;top:0px;left:0px;position:absolute;z-index: 100" id="memory-welcome"> 151 </memory-welcome> 152 <memory-dotting id="tabpane-summary" style="visibility:hidden;top:0px;left:0px;position:absolute;z-index: 101" mode="hidden" tree ondragstart="return false"></memory-dotting> 153 <memory-dotting-tree style="visibility:hidden;top:0px;left:0px;position:absolute;z-index: 102;width: -webkit-fill-available" id="tab-pane-tree" mode="hidden" tree ondragstart="return false"></memory-dotting-tree> 154 </div> 155 </div> 156 `; 157