Finish draft 1 character sheet

This commit is contained in:
walcutt 2024-12-11 16:17:00 -05:00
parent 92f03e3fab
commit 8269cb4ac1
6 changed files with 451 additions and 150 deletions

View File

@ -3,9 +3,15 @@ import { HenchDataModel } from "./module/data-models.mjs";
import { HenchActorSheet } from "./module/sheets/hench-actor-sheet.mjs"; import { HenchActorSheet } from "./module/sheets/hench-actor-sheet.mjs";
Handlebars.registerHelper('int2checkbox', (size, threshold, options) => { Handlebars.registerHelper('int2checkbox', (size, threshold, options) => {
return new Array(size).fill(0).map( return Array(size).fill(0).map(
(e, i) => options.fn({index: i + 1, marked: i < threshold}) (e, i) => options.fn({index: i + 1, marked: i < threshold})
); ).reduce((prev, next) => (prev + next), "");
});
Handlebars.registerHelper('partialList', (list, start, end, options) => {
return list.slice(start, end).map(
(e, i) => options.fn({ item: e, index: (start + i)})
).reduce((prev, next) => (prev + next), "");
}); });
Hooks.once("init", () => { Hooks.once("init", () => {
@ -16,6 +22,6 @@ Hooks.once("init", () => {
Actors.unregisterSheet('core', ActorSheet); Actors.unregisterSheet('core', ActorSheet);
Actors.registerSheet('hench', HenchActorSheet, { Actors.registerSheet('hench', HenchActorSheet, {
makeDefault: true, makeDefault: true,
label: 'Hench Debug Sheet', label: 'Hench Sheet',
}); });
}); });

View File

@ -70,7 +70,7 @@ function getDataPathFromString(dataPathString) {
} }
} }
export function updateField(actor, dataPathString, value) { export async function updateField(actor, dataPathString, value) {
const dataPath = getDataPathFromString(dataPathString); const dataPath = getDataPathFromString(dataPathString);
console.log(`Converted ${dataPathString} to:`); console.log(`Converted ${dataPathString} to:`);
@ -85,11 +85,11 @@ export function updateField(actor, dataPathString, value) {
console.log(`Array write at index ${dataPath.index}`); console.log(`Array write at index ${dataPath.index}`);
console.log(copy); console.log(copy);
actor.update({ await actor.update({
[dataPath.path]: copy, [dataPath.path]: copy,
}); });
} else { } else {
actor.update({ await actor.update({
[dataPath.path]: value [dataPath.path]: value
}); });
} }

View File

@ -52,12 +52,25 @@ export class HenchActorSheet extends ActorSheet {
}); });
// text fields // text fields
html.find('.hench-text-input').on('change', (event) => { html.find('.hench-text-input').on('change', async (event) => {
const element = event.currentTarget; const element = event.currentTarget;
const path = element.dataset.fieldPath; const path = element.dataset.fieldPath;
const value = element.value; const value = element.value;
updateField(this.actor, path, value); await updateField(this.actor, path, value);
});
// harm auto-marking
html.find('.hench-harm-field').on('change', async (event) => {
const element = event.currentTarget;
const primaryPath = element.dataset.fieldPath;
const secondaryPath = element.dataset.dependentPath;
const stringValue = element.value;
const markedValue = stringValue !== null && stringValue !== undefined && stringValue !== "";
await updateField(this.actor, primaryPath, stringValue)
await updateField(this.actor, secondaryPath, markedValue);
}); });
} }

140
styles/hench.css Normal file
View File

@ -0,0 +1,140 @@
/* Color tags */
.hench-white {
background-color: #FFFFFF;
color: #000000;
}
.hench-l-grey {
background-color: #DDDDDD;
color: #000000;
}
.hench-m-grey {
background-color: #BBBBBB;
color: #000000;
}
.hench-d-grey {
background-color: #444444;
color: #FFFFFF;
}
.hench-black {
background-color: #111111;
color: #FFFFFF;
}
/* Flexbox */
.hench-row {
display: flex;
flex-direction: row;
align-items: stretch;
}
.hench-sheet-container {
display: flex;
flex-direction: column;
justify-content: center;
}
.hench-box {
display: flex;
flex-direction: column;
justify-content: center;
}
.hench-box > * {
flex-grow: 1;
flex-shrink: 0;
align-items: center;
}
.hench-flex-fixed {
flex-grow: 0;
flex-shrink: 0;
}
.hench-flex-resizeable {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.hench-gap-narrow {
gap: 0.5em;
}
.hench-gap-wide {
gap: 1em;
}
.hench-padding-narrow {
padding: 0.5em;
}
.hench-padding-wide {
padding: 1em;
}
/* Labels */
.hench-centered {
text-align: center;
}
/* Inputs */
.hench-sheet-container input[type="text"], .hench-sheet-container select {
border: 0px;
border-bottom: 1px solid #000;
border-radius: 0px;
background-color: #00000000;
height: auto;
padding: 0;
padding-top: 1px;
margin: 0;
}
/* Specific */
.hench-row-even{
justify-content: space-evenly;
}
.hench-stress-checkboxes-2-rows {
display: flex;
flex-wrap: wrap;
gap: 3.5%;
padding: 3.5%;
justify-content: center;
}
.hench-stress-checkboxes-2-rows > input[type="checkbox"] {
width: 12.5%;
flex-basis: 12.5%;
margin-left: 0;
margin-right: 0;
margin-bottom: 0.5em;
}
.hench-icon {
aspect-ratio: 1;
width: 10em;
}
.hench-harm-fixed-width {
width: 8em;
text-align: center;
}
.hench-harm-input-cell {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.hench-harm-input-cell > input[type=text] {
border: 0px solid #000;
}
.hench-harm-row {
border-bottom: 1px solid #000;
}

View File

@ -4,8 +4,8 @@
"description": "HENCH (2025)", "description": "HENCH (2025)",
"version": "0.0.0", "version": "0.0.0",
"compatibility": { "compatibility": {
"minimum": "11", "minimum": "12",
"verified": "11" "verified": "12"
}, },
"authors": [ "authors": [
{ {
@ -17,7 +17,7 @@
"esmodules": [ "esmodules": [
"hench.mjs" "hench.mjs"
], ],
"styles": [], "styles": ["styles/hench.css"],
"packs": [], "packs": [],
"languages": [], "languages": [],
"documentTypes": { "documentTypes": {

View File

@ -1,148 +1,290 @@
<form> <form>
<h1> {{ actor.name }} </h1> <div class="hench-sheet-container hench-padding-wide hench-gap-wide hench-white">
<button id="hench-console-log">Log data to console.</button> <!-- ID row -->
<h2> Details: </h2> <div class="hench-row hench-gap-wide">
<!-- Core - Name, Look, Playbook -->
<div id="hench-explicit-details"> <div class="hench-box hench-l-grey hench-flex-resizeable hench-padding-narrow">
<p>Name: <input type="text" class="hench-text-input" value="{{actor.name}}" data-field-path="name" /></p> <!-- Name -->
<p>Look: <input type="text" class="hench-text-input" value="{{actor.system.look}}" data-field-path="actor.system.look" /></p> <div class="hench-field hench-row hench-gap-narrow">
<div> <label class="hench-flex-fixed" for="hench-name">Name: </label>
<span><b>Playbook:</b></span> <input type="text" name="hench-name" class="hench-text-input hench-flex-resizeable" value="{{actor.name}}" data-field-path="name" />
<select class="hench-hench-sheet-playbook-dropdown"> </div>
<!-- Look -->
<div class="hench-field hench-row hench-gap-narrow">
<label class="hench-flex-fixed" for="hench-look">Look: </label>
<input type="text" name="hench-look" class="hench-text-input hench-flex-resizeable" value="{{actor.system.look}}" data-field-path="system.look" />
</div>
<!-- Playbook -->
<div class="hench-field hench-row hench-gap-narrow">
<label class="hench-flex-fixed" for="hench-playbook">Playbook: </label>
<select name="hench-playbook" class="hench-hench-sheet-playbook-dropdown hench-flex-resizeable">
{{#each playbookKeys}} {{#each playbookKeys}}
<option value="{{this.key}}" {{#if this.selected}}selected{{/if}}>{{this.key}}</option> <option value="{{this.key}}" {{#if this.selected}}selected{{/if}}>{{this.key}}</option>
{{/each}} {{/each}}
</select> </select>
</div> </div>
<h3> Details </h3>
<div>
<ul>
{{#each actor.system.details}}
<li>
<b>{{this.question}}:</b>
<input type="text" class="hench-text-input" data-field-path="system.details[{{@index}}].answer" value="{{this.answer}}" />
</li>
{{/each}}
</ul>
</div> </div>
<h3> Inclinations </h3> <!-- Inclinations -->
<div> <div class="hench-box hench-l-grey hench-flex-resizeable hench-padding-narrow">
<div class="hench-centered">
Inclinations
</div>
<ul> <ul>
{{#each actor.system.fixedInclinations}} {{#each actor.system.fixedInclinations}}
<li>{{this}}</li> <li>
{{this}}
</li>
{{/each}} {{/each}}
<li> <li>
<input type="text" class="hench-text-input" data-field-path="system.customInclination" value="{{actor.system.customInclination}}" /> <input type="text" class="hench-text-input" data-field-path="system.customInclination" value="{{actor.system.customInclination}}" />
</li> </li>
</ul> </ul>
</div> </div>
<h3>Mission Planning</h3> <!-- Icon -->
<div class="hench-box hench-l-grey hench-flex-fixed">
<img src="{{actor.img}}" data-edit="img" class="hench-icon" />
</div>
</div>
<!-- Details row -->
<div class="hench-row hench-gap-wide">
<!-- Details -->
<div class="hench-box hench-l-grey hench-flex-resizeable hench-padding-narrow">
{{#each actor.system.details}}
<div class="hench-row">
<label for="hench-detail-{{@index}}">{{this.question}}</label>
</div>
<div class="hench-row">
<input name="hench-detail-{{@index}}" type="text" class="hench-text-input" data-field-path="system.details[{{@index}}].answer" value="{{this.answer}}" />
</div>
{{/each}}
</div>
<!-- Mission Planning -->
<div class="hench-box hench-l-grey hench-flex-resizeable hench-padding-narrow">
<div class="hench-centered">
Mission Planning
</div>
<ul> <ul>
{{#each actor.system.missionPlanning}} {{#each actor.system.missionPlanning}}
<li>{{this}}</li> <li>{{this}}</li>
{{/each}} {{/each}}
</ul> </ul>
</div>
</div>
<!-- Stress -->
<div class="hench-row hench-gap-wide">
<div class="hench-box hench-l-grey hench-flex-resizeable hench-padding-narrow">
<div class="hench-centered">
<label for="hench-stress">
Stress
</label>
</div>
<div class="hench-row hench-row-even hench-gap-narrow">
{{#int2checkbox maxStress actor.system.stress}}
<input name="hench-stress" type="checkbox" class="hench-checkbox hench-checkbox-int-field" data-field-path="system.stress" data-value="{{index}}" {{#if marked}}checked {{/if}} />
{{/int2checkbox}}
</div>
</div>
</div>
<!-- Gear -->
<div class="hench-row hench-gap-wide">
<div class="hench-box hench-l-grey hench-flex-resizeable hench-padding-narrow">
<div class="hench-centered">
Gear
</div>
<div class="hench-row hench-gap-wide">
<div class="hench-box hench-flex-resizeable">
{{#partialList actor.system.fixedGear 0 5}}
<div class="hench-row hench-gap-narrow">
<div class="hench-flex-fixed">
<input type="checkbox" name="hench-gear-{{index}}" class="hench-checkbox hench-checkbox-toggle-field" data-field-path="system.fixedGear[{{index}}].marked" {{#if item.marked}}checked{{/if}} />
</div>
<div class="hench-box hench-flex-resizeable">
<div>
{{item.description}}
</div>
</div>
</div>
{{/partialList}}
</div>
<div class="hench-box hench-flex-resizeable">
{{#partialList actor.system.fixedGear 5 9}}
<div class="hench-row hench-gap-narrow">
<div class="hench-flex-fixed">
<input type="checkbox" name="hench-gear-{{index}}" class="hench-checkbox hench-checkbox-toggle-field" data-field-path="system.fixedGear[{{index}}].marked" {{#if item.marked}}checked{{/if}} />
</div>
<div class="hench-box hench-flex-resizeable">
<div>
{{item.description}}
</div>
</div>
</div>
{{/partialList}}
<div class="hench-row hench-gap-narrow">
<div class="hench-flex-fixed">
<input type="checkbox" name="hench-gear-9" class="hench-checkbox hench-checkbox-toggle-field" data-field-path="system.customGear.marked" {{#if actor.system.customGear.marked}}checked{{/if}} />
</div>
<div class="hench-box hench-flex-resizeable">
<div>
<input type="text" class="hench-text-input" data-field-path="system.customGear.description" value="{{actor.system.customGear.description}}" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Moves -->
<div class="hench-row hench-gap-wide">
<div class="hench-box hench-m-grey hench-flex-resizeable hench-padding-narrow hench-gap-narrow">
<div class="hench-centered">
Abilities
</div>
{{#each actor.system.moves}}
<div class="hench-row hench-l-grey hench-flex-resizeable hench-gap-narrow">
<div class="hench-box hench-flex-fixed">
<input type="checkbox" name="hench-move-checkbox-{{@index}}" class="hench-checkbox-toggle-field" data-field-path="system.moves[{{@index}}].marked" {{#if this.marked}}checked{{/if}} />
</div>
<div class="hench-box hench-flex-resizeable hench-gap-narrow hench-padding-narrow">
<div>
<label for="hench-move-checkbox-{{@index}}">{{this.name}}</label>
</div>
<div>
{{this.description}}
</div>
{{#if this.hasWriteIn}}
<div>
<input type="text" name="hench-move-writein-{{@index}}" class="hench-text-field" data-field-path="system.moves[{{@index}}].writein" value="{{this.writein}}" />
</div>
{{/if}}
</div>
</div>
{{/each}}
<div class="hench-row hench-l-grey hench-flex-resizeable hench-gap-narrow">
<div class="hench-box hench-flex-fixed">
<input type="checkbox" name="hench-move-checkbox-custom" class="hench-checkbox-toggle-field" data-field-path="system.customMove.marked" {{#if actor.system.customMove.marked}}checked{{/if}} />
</div>
<div class="hench-box hench-flex-resizeable hench-gap-narrow hench-padding-narrow">
<div>
<input type="text" name="hench-move-name-custom" class="hench-text-field" data-field-path="system.customMove.name" value="{{actor.system.customMove.name}}" {{#if actor.system.customMove.marked}} {{else}} disabled {{/if}} />
</div>
<div>
<input type="text" name="hench-move-description-custom" class="hench-text-field" data-field-path="system.customMove.description" value="{{actor.system.customMove.description}}" {{#if actor.system.customMove.marked}} {{else}} disabled {{/if}} />
</div>
</div>
</div>
</div>
</div>
<!-- Harm -->
<div class="hench-row hench-gap-wide">
<div class="hench-box hench-black hench-padding-narrow hench-flex-resizeable">
<div class="hench-row">
<div class="hench-flex-resizeable hench-centered">
Harm
</div>
</div>
<!-- tier 3 -->
<div class="hench-row hench-m-grey hench-harm-row hench-flex-resizeable">
<div class="hench-flex-fixed hench-m-grey hench-harm-fixed-width">
3:
</div>
{{#each actor.system.harm.levelThree}}
<div class="{{#if this.marked}}hench-white{{else}}hench-l-grey{{/if}} hench-flex-resizeable hench-padding-narrow hench-harm-input-cell">
<input type="text" class="hench-harm-field" data-field-path="system.harm.levelThree[{{@index}}].description" data-dependent-path="system.harm.levelThree[{{@index}}].marked" value="{{this.description}}" />
</div>
{{/each}}
<div class="hench-flex-fixed hench-m-grey hench-harm-fixed-width">
Need help.
</div>
</div>
<!-- tier 2 -->
<div class="hench-row hench-m-grey hench-harm-row hench-flex-resizeable">
<div class="hench-flex-fixed hench-m-grey hench-harm-fixed-width">
2:
</div>
{{#each actor.system.harm.levelTwo}}
<div class="{{#if this.marked}}hench-white{{else}}hench-l-grey{{/if}} hench-flex-resizeable hench-padding-narrow hench-harm-input-cell">
<input type="text" class="hench-harm-field" data-field-path="system.harm.levelTwo[{{@index}}].description" data-dependent-path="system.harm.levelTwo[{{@index}}].marked" value="{{this.description}}" />
</div>
{{/each}}
<div class="hench-flex-fixed hench-m-grey hench-harm-fixed-width">
-1 Card
</div>
</div>
<!-- tier 1-->
<div class="hench-row hench-m-grey hench-harm-row hench-flex-resizeable">
<div class="hench-flex-fixed hench-m-grey hench-harm-fixed-width">
1:
</div>
{{#each actor.system.harm.levelOne}}
<div class="{{#if this.marked}}hench-white{{else}}hench-l-grey{{/if}} hench-flex-resizeable hench-padding-narrow hench-harm-input-cell">
<input type="text" class="hench-harm-field" data-field-path="system.harm.levelOne[{{@index}}].description" data-dependent-path="system.harm.levelOne[{{@index}}].marked" value="{{this.description}}" />
</div>
{{/each}}
<div class="hench-flex-fixed hench-m-grey hench-harm-fixed-width">
<p><b>Gear Limit</b>: {{actor.system.gearLimit}}</p> </div>
</div>
<h3>Gear</h3> </div>
</div>
<!-- Experience -->
<div class="hench-row hench-gap-wide">
<div class="hench-box hench-l-grey hench-padding-narrow hench-gap-narrow hench-flex-resizeable">
<div class="hench-centered">
Experience
</div>
<div class="hench-row hench-row-even hench-gap-narrow hench-padding-narrow">
{{#int2checkbox maxExp actor.system.experience}}
<div>
<input type="checkbox" class="hench-checkbox-int-field" data-field-path="system.experience" data-value="{{index}}" {{#if marked}} checked {{/if}} />
</div>
{{/int2checkbox}}
</div>
<ul> <ul>
{{#each actor.system.fixedGear}} {{#each actor.system.experienceTriggers}}
<li> <li>
<input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.fixedGear[{{@index}}].marked" {{#if this.marked}}checked{{/if}}/>
{{this.description}} {{this.description}}
</li> </li>
{{/each}} {{/each}}
<li>
<input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.customGear.marked" {{#if actor.system.customGear.marked}}checked{{/if}}/>
<input type="text" class="hench-text-input" data-field-path="system.customGear.description" value="{{actor.system.customGear.description}}" />
</li>
</ul>
<h3>Abilities</h3>
<ul>
{{#each actor.system.moves}}
<li>
<input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.moves[{{@index}}].marked" {{#if this.marked}}checked{{/if}} />
<span><b>{{this.name}}:</b> {{this.description}}</span>
{{#if this.hasWriteIn}}
<input type="text" class="hench-text-input" data-field-path="system.moves[{{@index}}.writein]" value="{{this.writein}}" />
{{/if}}
</li>
{{/each}}
<li>
<input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.customMove.marked" {{#if actor.system.customMove.marked}}checked{{/if}} />
<textarea class="hench-text-input" data-field-path="system.customMove.description" {{#if actor.system.customMove.marked}}{{else}}disabled{{/if}}>{{actor.system.customMove.description}}</textarea>
</li>
</ul>
<h3> Harm: </h3>
<div>
<h4>Level 1:</h4>
<ul>
{{#each actor.system.harm.levelOne}}
<li>
<input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.harm.levelOne[{{@index}}].marked" {{#if this.marked}}checked{{/if}} />
<input type="text" class="hench-text-input" data-field-path="system.harm.levelOne[{{@index}}].description" value="{{this.description}}" />
</li>
{{/each}}
</ul>
<h4>Level 2:</h4>
<ul>
{{#each actor.system.harm.levelTwo}}
<li>
<input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.harm.levelTwo[{{@index}}].marked" {{#if this.marked}}checked{{/if}} />
<input type="text" class="hench-text-input" data-field-path="system.harm.levelTwo[{{@index}}].description" value="{{this.description}}" />
</li>
{{/each}}
</ul>
<h4>Level 3:</h4>
<ul>
{{#each actor.system.harm.levelThree}}
<li>
<input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.harm.levelThree[{{@index}}].marked" {{#if this.marked}}checked{{/if}} />
<input type="text" class="hench-text-input" data-field-path="system.harm.levelThree[{{@index}}].description" value="{{this.description}}" />
</li>
{{/each}}
</ul>
<h4>Level 3:</h4>
<ul>
{{#each actor.system.harm.levelFour}}
<li>
<input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.harm.levelFour[{{@index}}].marked" {{#if this.marked}}checked{{/if}} />
<input type="text" class="hench-text-input" data-field-path="system.harm.levelFour[{{@index}}].description" value="{{this.description}}" />
</li>
{{/each}}
</ul> </ul>
</div> </div>
<p>Stress: {{ actor.system.stress }}</p> </div>
<ul> <!-- Advancements -->
{{#int2checkbox maxStress actor.system.stress}} <div class="hench-row hench-gap-wide">
<li style="display:inline"><input type="checkbox" class="hench-checkbox-int-field" data-field-path="system.stress" data-value="{{index}}" {{#if marked}}checked{{/if}} /> </li> <!-- base advancements -->
{{/int2checkbox}} <div class="hench-box hench-m-grey hench-flex-resizeable hench-padding-narrow hench-gap-narrow">
</ul> <div class="hench-flex-fixed hench-centered">
<h3>Experience Triggers</h3> Advancements
<ul> </div>
{{#each actor.system.experienceTriggers}}
<li><input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.experienceTriggers[{{@index}}].marked" {{#if this.marked}}checked{{/if}} /> {{this.description}}</li>
{{/each}}
</ul>
<p>Experience: {{ actor.system.experience }}</p>
<ul>
{{#int2checkbox maxExp actor.system.experience}}
<li style="display:inline"><input type="checkbox" class="hench-checkbox-int-field" data-field-path="system.experience" data-value="{{index}}" {{#if marked}}checked{{/if}} /> </li>
{{/int2checkbox}}
</ul>
<h3>Advancements</h3>
<ul>
{{#each actor.system.baseAdvancements}} {{#each actor.system.baseAdvancements}}
<li><input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.baseAdvancements[{{@index}}].marked" {{#if this.marked}}checked{{/if}} /> {{this.description}}</li> <div class="hench-row hench-flex-resizeable hench-l-grey hench-padding-narrow hench-gap-narrow">
<div class="hench-box hench-flex-fixed">
<input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.baseAdvancements[{{@index}}].marked" {{#if this.marked}} checked {{/if}} />
</div>
<div class="hench-box hench-flex-resizeable">
{{this.description}}
</div>
</div>
{{/each}} {{/each}}
<hr /> </div>
<!-- advanced advancements -->
<div class="hench-box hench-black hench-flex-resizeable hench-gap-narrow hench-padding-narrow">
<div class="hench-flex-fixed hench-centered">
Advancements
</div>
<div class="hench-flex-fixed hench-centered">
<em>(Take only after 3 or more advancements)</em>
</div>
{{#each actor.system.exAdvancements}} {{#each actor.system.exAdvancements}}
<li><input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.exAdvancements[{{@index}}].marked" {{#if this.marked}}checked{{/if}} /> {{this.description}}</li> <div class="hench-row hench-flex-resizeable hench-l-grey hench-padding-narrow hench-gap-narrow">
<div class="hench-box hench-flex-fixed">
<input type="checkbox" class="hench-checkbox-toggle-field" data-field-path="system.exAdvancements[{{@index}}].marked" {{#if this.marked}} checked {{/if}} />
</div>
<div class="hench-box hench-flex-resizeable">
{{this.description}}
</div>
</div>
{{/each}} {{/each}}
</ul> </div>
</div>
</div> </div>
</form> </form>