oi-metrology/Static/wafer-counter.html
2024-06-17 17:11:36 -07:00

314 lines
11 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Wafer Counter</title>
<script src="/js/jquery-3.6.0.min.js?v=2024-03-13_13-22" type="text/javascript"></script>
<script src="/js/wafer-counter.js?v=2024-03-13_13-22" type="text/javascript"></script>
<script src="/js/common.js?v=2024-03-13_13-22" type="text/javascript"></script>
<script type="module"
src="/package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js"></script>
<style>
body {
background-color: white;
}
input {
font-size: large;
text-align: center;
}
input[type=button],
input[type=submit],
input[type=reset] {
min-height: 50px;
min-width: 100px;
}
.waferNumber {
height: 39px;
}
.waferSlot {
min-width: 200px;
height: 3px;
}
.waferSlotPresent {
max-height: 2px;
background-color: lightgreen;
}
.waferSlotEmpty {
max-height: 2px;
background-color: whitesmoke;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<table width="100%">
<tr>
<td>Tool Id:</td>
<td>
<ifx-text-field id="toolId" disabled="true" size="m">
</ifx-text-field>
</td>
</tr>
<tr>
<td>Operation:</td>
<td>
<ifx-text-field id="operation" disabled="true" size="m">
</ifx-text-field>
</td>
</tr>
<tr>
<td>Lot:</td>
<td>
<ifx-text-field id="lot" disabled="false" size="m" placeholder="123456">
</ifx-text-field>
</td>
</tr>
<tr>
<td>Cassette #:</td>
<td>
<ifx-text-field id="cassette" disabled="true" size="m" value="1">
</ifx-text-field>
</td>
</tr>
<tr>
<td style="min-width: 100px;">Wafer Count:</td>
<td>
<ifx-text-field id="waferCount" disabled="true" size="m">
</ifx-text-field>
</td>
</tr>
</table>
</td>
<td style="vertical-align: top; text-align: center;">
<table border="0" width="100%">
<tr>
<td>
<div class="waferNumber">25</div>
</td>
</tr>
<tr>
<td>
<div class="waferNumber">20</div>
</td>
</tr>
<tr>
<td>
<div class="waferNumber">15</div>
</td>
</tr>
<tr>
<td>
<div class="waferNumber">10</div>
</td>
</tr>
<tr>
<td>
<di>5</div>
</td>
</tr>
</table>
</td>
<td style="vertical-align: top;">
<table border="1" width="100%">
<tr tag="25" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="24" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="23" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="22" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="21" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="20" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="19" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="18" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="17" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="16" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="15" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="14" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="13" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="12" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="11" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="10" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="09" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="08" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="07" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="06" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="05" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="04" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="03" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="02" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
<tr tag="01" class="slot waferSlotPresent">
<td>
<div class="waferSlot">&nbsp;</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" style="max-width: 640px; margin-bottom: 200px;">
<tr>
<td>
<ifx-button id="Save" type="button" disabled="false" variant="primary" size="m" target="_blank"
theme="default" full-width="false">
Save
</ifx-button>
</td>
<td>
<ifx-button id="Clear" type="button" disabled="false" variant="primary" size="m" target="_blank"
theme="default" full-width="false">
Clear
</ifx-button>
</td>
<td>
<div id="lastDateTime">&nbsp;</div>
<ifx-button id="Connect" type="button" disabled="false" variant="primary" size="m" target="_blank"
theme="default" full-width="false">
Connect
</ifx-button>
</td>
</tr>
</table>
<ifx-footer variant="medium" copyright-text="© 1999 - 2024 Infineon Technologies AG">
<div slot="socials">
<ifx-link variant="title" href="http://facebook.com/infineon">
<ifx-icon icon="facebook"></ifx-icon>
</ifx-link>
<ifx-link variant="title" href="http://youtube.com/infineon">
<ifx-icon icon="youtube"></ifx-icon>
</ifx-link>
<ifx-link variant="title" href="http://instagram.com/infineon">
<ifx-icon icon="instagram"></ifx-icon>
</ifx-link>
<ifx-link variant="title" href="http://linkedin.com/infineon">
<ifx-icon icon="linkedin"></ifx-icon>
</ifx-link>
<ifx-link variant="title" href="http://twitter.com/infineon">
<ifx-icon icon="twitter"></ifx-icon>
</ifx-link>
<ifx-link variant="title" href="http://xing.com/infineon">
<ifx-icon icon="xing"></ifx-icon>
</ifx-link>
</div>
</ifx-footer>
<script>
$(document).ready(function () {
initWaferCounter("/api/v1/WaferCounter/");
});
</script>
</body>
</html>