1/* 2 * Copyright (C) 2022 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 */ 15 16export const SpRecordTraceHtml = ` 17 <style> 18 :host{ 19 display: block; 20 height: 100%; 21 width: 100%; 22 background-color: var(--dark-background5,#F6F6F6); 23 } 24 .vessel { 25 background-color: var( 26 --dark-background5,#F6F6F6); 27 height:100%; 28 } 29 30 .header { 31 padding-top: 30px; 32 padding-bottom: 20px; 33 background-color: var(--dark-background3,#FFFFFF); 34 width: 100%; 35 } 36 37 .span-col-2{ 38 margin-left: 20px; 39 display: flex; 40 align-items: center 41 } 42 43 .header-right { 44 display: flex; 45 margin-left: auto; 46 margin-right: 5%; 47 } 48 .header-des{ 49 font-family: PingFangSC-Regular; 50 font-size: 1em; 51 color: #999999; 52 text-align: left; 53 font-weight: 400; 54 } 55 56 .target { 57 opacity: 0.9; 58 font-family: Helvetica; 59 font-size: 14px; 60 color: var(--dark-color2,#000000); 61 line-height: 16px; 62 font-weight: 400; 63 white-space:nowrap; 64 align-self: center; 65 } 66 67 .select{ 68 width: 300px; 69 height: 32px; 70 margin-left: 14px; 71 margin-right: 10px; 72 border: 1px solid var(--dark-color1,#4D4D4D); 73 background: var(--dark-background1,#ffffff); 74 font-size: 14px; 75 border-radius: 16px; 76 opacity: 0.6; 77 -webkit-appearance: none; 78 font-family: Helvetica; 79 color: var(--dark-color1,#000000); 80 line-height: 20px; 81 font-weight: 400; 82 padding: 5px 10px 5px 10px; 83 text-align: center; 84 background: url('img/down.png') no-repeat 96% center; 85 } 86 .device_version { 87 width: 200px; 88 height: 32px; 89 margin-left: 5px; 90 margin-right: 24px; 91 background: var(--dark-background1,#ffffff); 92 border: 1px solid var(--dark-color1,#4D4D4D); 93 border-radius: 16px; 94 opacity: 0.6; 95 font-family: Helvetica; 96 font-size: 14px; 97 color: var(--dark-color1,#000000); 98 text-align: center; 99 line-height: 20px; 100 font-weight: 400; 101 padding: 5px 10px 5px 10px; 102 -webkit-appearance: none; 103 background: url('img/down.png') no-repeat 96% center; 104 } 105 .body{ 106 width: 90%; 107 height:80vh; 108 margin-left: 3%; 109 margin-top: 2%; 110 margin-bottom: 2%; 111 display: grid; 112 grid-template-columns: min-content 1fr; 113 background-color: var(--dark-background3,#FFFFFF); 114 border-radius: 16px 16px 16px 16px; 115 } 116 117 .menugroup{ 118 height: 100%; 119 background: var(--dark-background3,#FFFFFF); 120 } 121 .menuitem{ 122 background: var(--dark-background3,#FFFFFF); 123 } 124 .content{ 125 background: var(--dark-background3,#FFFFFF); 126 border-style: none none none solid; 127 border-width: 1px; 128 border-color: rgba(166,164,164,0.2); 129 border-radius: 0px 16px 16px 0px; 130 } 131 :host([show_hint]) #hint { 132 color: #DB5860; 133 position: absolute; 134 left:1%; 135 animation: textRoll 5s ease-in-out 0s backwards; 136 white-space: nowrap; 137 display: block; 138 font-weight: 700; 139 } 140 #hint { 141 display: none; 142 } 143 144 @keyframes textRoll { 145 0% { 146 left: 1%; 147 148 } 149 100% { 150 left:100%; 151 } 152 } 153 .cancel { 154 visibility: hidden; 155 } 156 .prompt { 157 position: absolute; 158 margin-left: 35px; 159 line-height: 32px; 160 font-family: Helvetica; 161 font-size: 14px; 162 opacity: 0.6; 163 } 164 </style> 165 <div class="vessel"> 166 <div class="header"> 167 <div style="display: flex;margin-bottom: 24px;margin-left:20px;"> 168 <span class="target">Target Platform:</span> 169 <div id="device-prompt"> 170 <span class="prompt"></span> 171 <select class="select" id = "device-select"></select> 172 </div> 173 <select class="device_version" id = "device-version"> 174 </select> 175 <lit-button style="width: 180px" class="add" height="32px" width="164px" color="#0A59F7" 176 font_size="14px" border="1px solid #0A59F7" 177 padding="0 0 0 12px" justify_content="left" icon="add" margin_icon="0 10px 0 8px">Add HDC Device</lit-button> 178 <div class="header-right"> 179 <lit-button class="disconnect" style="margin-right: 30px" height="32px" width="96px" font_size="14px" 180 justify_content="center" color="#FFFFFF" 181 border_radius="16px" back='#0A59F7' opacity="0.6" border="0 solid">Disconnect</lit-button> 182 <lit-button class="record" style="margin-right: 30px" height="32px" width="96px" font_size="14px" 183 justify_content="center" color="#FFFFFF" 184 border_radius="16px" back='#0A59F7' opacity="0.6" border="0 solid"> 185 <span class="record_text">Record</span> 186 </lit-button> 187 <lit-button class="cancel" height="32px" width="96px" font_size="14px" justify_content="center" 188 color="#FFFFFF" border_radius="16px" back='#0A59F7' opacity="0.6" border="0 solid"> 189 <span class="record_text">Cancel</span> 190 </lit-button> 191 </div> 192 </div> 193 <div class="span-col-2" > 194 <span class="header-des" id="hint">It looks like you didn't add any probes. Please add at least one</span> 195 </div> 196 </div> 197 <div class="body"> 198 <lit-main-menu-group class="menugroup" id= "menu-group" title="" nocollapsed radius></lit-main-menu-group> 199 <div id="app-content" class="content"> 200 </div> 201 </div> 202 </div> 203 `; 204
