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 applicationHtml = ` 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 box-shadow: 4px 0px 20px rgba(0,0,0,0.05); 46 z-index: 2000; 47 } 48 .search-vessel{ 49 z-index: 999; 50 position: relative; 51 cursor: default; 52 } 53 .progress{ 54 bottom: 0; 55 position: absolute; 56 height: 1px; 57 left: 0; 58 right: 0; 59 } 60 61 :host(:not([search])) .search-vessel { 62 display: none; 63 } 64 :host(:not([search])) .search-vessel .search { 65 background-color: var(--dark-background5,#F6F6F6); 66 } 67 .search{ 68 grid-area: s; 69 background-color: var(--dark-background,#FFFFFF); 70 height: 48px; 71 display: flex; 72 justify-content: center; 73 align-items: center; 74 75 } 76 .search .search-bg{ 77 background-color: var(--dark-background5,#fff); 78 border-radius: 40px; 79 padding: 3px 20px; 80 display: flex; 81 justify-content: center; 82 align-items: center; 83 border: 1px solid var(--dark-border,#c5c5c5); 84 } 85 lit-search input{ 86 outline: none; 87 border: 0px; 88 background-color: transparent; 89 font-size: inherit; 90 color: var(--dark-color,#666666); 91 width: 30vw; 92 height: auto; 93 vertical-align:middle; 94 line-height:inherit; 95 height:inherit; 96 padding: 6px 6px 6px 6px}; 97 max-height: inherit; 98 box-sizing: border-box; 99 100 } 101 ::placeholder { /* CSS 3 標準 */ 102 color: #b5b7ba; 103 font-size: 1em; 104 } 105 lit-search input::placeholder { 106 color: #b5b7ba; 107 font-size: 1em; 108 } 109 .content{ 110 grid-area: b; 111 background-color: #ffffff; 112 height: 100%; 113 overflow: auto; 114 position:relative; 115 } 116 .sheet{ 117 118 } 119 .sidebar-button{ 120 position: absolute; 121 top: 0; 122 left: 0; 123 background-color: var(--dark-background1,#FFFFFF); 124 height: 100%; 125 border-radius: 0 5px 5px 0; 126 width: 48px; 127 display: flex; 128 align-content: center; 129 justify-content: center; 130 cursor: pointer; 131 } 132 :host{ 133 font-size: inherit; 134 display: inline-block; 135 transition: .3s; 136 } 137 :host([spin]){ 138 animation: rotate 1.75s linear infinite; 139 } 140 @keyframes rotate { 141 to{ 142 transform: rotate(360deg); 143 } 144 } 145 .icon{ 146 display: block; 147 width: 1em; 148 height: 1em; 149 margin: auto; 150 fill: currentColor; 151 overflow: hidden; 152 font-size: 20px; 153 color: var(--dark-color1,#47A7E0); 154 } 155 .content-center-option { 156 justify-content: center; 157 width: -webkit-fill-available; 158 margin-right: 5.2em; 159 align-items: center; 160 width: auto; 161 } 162 </style> 163 <div class="root" style="position: relative;"> 164 <lit-main-menu id="main-menu" class="menu" data=''></lit-main-menu> 165 <div class="search-vessel"> 166 <div class="search" style="position: relative;"> 167 <div class="sidebar-button" style="width: 0"> 168 <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024"> 169 <use id="use" xlink:href="./base-ui/icon.svg#icon-menu"></use> 170 </svg> 171 </div> 172 <lit-search id="lit-search"></lit-search> 173 </div> 174 <lit-progress-bar class="progress"></lit-progress-bar> 175 </div> 176 <div id="app-content" class="content"> 177 <ap-welcome style="visibility:visible;top:0px;left:0px;position:absolute;z-index: 100" id="ap-welcome"> 178 </ap-welcome> 179 <div style="height:100%;"> 180 <tab-ap-summary id="tabpane-summary" mode="hidden" tree ondragstart="return false"> 181 </tab-ap-summary> 182 </div> 183 </div> 184 </div> 185 `; 186
