adding more structure and id's to the container customization settings menu for more control later

This commit is contained in:
2025-06-23 23:04:19 -04:00
parent d7372b03bd
commit d756db4fb7
+28 -22
View File
@@ -672,7 +672,8 @@
document.getElementById("addContainerForm").insertAdjacentHTML( document.getElementById("addContainerForm").insertAdjacentHTML(
"beforeend", "beforeend",
` `
<div id=${this.id + "-bookmark-form"} class="formTitle">add bookmarks</div> <div id=${this.id + "-bookmark-menu"} >
<h1 class="formTitle">add bookmarks</h1>
<div> <div>
<label> enter url: </label> <label> enter url: </label>
<input id=${this.id + "-url-input"} type="text" name="url" /> <input id=${this.id + "-url-input"} type="text" name="url" />
@@ -692,31 +693,36 @@
<br /> <br />
<div id=${this.id + "-settings-form"}> <div id=${this.id + "-customization-menu"}>
<h1 class="formTitle">customize layer</h1>
<div class="formTitle">change background</div> <span id=${this.id + "-background-options"}>
<div> <p class="formTitle">change background</p>
<label>set background color: </label> <div>
<input id=${this.id + "-settings-bg-color"} type="color" /> <label>set background color: </label>
</div> <input id=${this.id + "-settings-bg-color"} type="color" />
<div> </div>
<label>set background opacity (%): </label> <div>
<input id=${this.id + "-settings-bg-alpha"} /> <label>set background opacity (%): </label>
</div> <input id=${this.id + "-settings-bg-alpha"} />
</div>
</span>
<br /> <br />
<div class="formTitle">change text</div> <span id=${this.id + "-text-options"}>
<div> <h1 class="formTitle">change text</h1>
<label>change font (see instructions for more info):</label> <div>
<input id=${this.id + "-settings-font-input"} /> <label>change font (see instructions for more info):</label>
<button id=${ <input id=${this.id + "-settings-font-input"} />
this.id + "-settings-set-font-button" <button id=${
}>set font</button> this.id + "-settings-set-font-button"
<label>current font:</label><span id=${ }>set font</button>
this.id + "-settings-font-name" <label>current font:</label><span id=${
}></span> this.id + "-settings-font-name"
</div> }></span>
</div>
</span>
<br /> <br />