diff --git a/TrimSP.html b/TrimSP.html index 1d11d41..cfb02ce 100644 --- a/TrimSP.html +++ b/TrimSP.html @@ -2,8 +2,8 @@ + - - TRIMSP-NL Workbench - -
-
-
- - - - +
+
+ +
- - - - - -
- - - - - - - - - - - - - - +
+ +
+ +
+ + + +
+
+
+
+
+
+
+ Target +

Layer stack

+
+ +
+
+
- - -
- - - -
- - -
Layer #CompositionDensity [g/cm3]Thickness [Å]
-
+
LayerCompositionDensity [g/cm3]Thickness [Å]
- 		- - - - - - - - - - - - - - - - - - - -
Projectile parameters
Projectile -
Number of projectiles
Starting depth [Å]
Depth increment [Å]
Energy [eV]
Energy sigma [eV]
Angle [deg]
Angle sigma [deg]
RNG / Seed - - -
-
+
+
+
+
+
+ Beam +

Projectile

+
+
+
+ + + + + + + + + + +
+
+
Enable scan on @@ -158,7 +165,15 @@
- +
+
+
+
+ Transport model +

Advanced parameters

+
+
+
-
EF @@ -373,29 +388,33 @@
-

- For further details see:
- W. Eckstein, Computer Simulation of Ion-Solid Interactions,
- Springer Series in Materials Science, Vol. 10 (Springer-Verlag, Berlin, 1991).
- - https://doi.org/10.1007/978-3-642-73513-4 - -

-

- If you use this software in published work, please cite the relevant - TRIM.SP references and the TRIMSP-NL Workbench paper. -

-

- Source repository: - - gitea.psi.ch/LMU/TRIMSP - -

+ + + +
- - - + +
Folder: - Backend: - @@ -429,12 +448,8 @@ if (webOrApp) { console.log('this script is not running in Node.js'); // Run as a web app - //let row = document.getElementById("FileRow"); - //row.parentNode.removeChild(row); - //row = document.getElementById("FolderRow"); - //row.parentNode.removeChild(row); - document.getElementById("FileRow").style.visibility = "hidden";; - document.getElementById("FolderRow").style.visibility = "hidden";; + document.getElementById("FileRow").hidden = true; + document.getElementById("FolderRow").hidden = true; } else { console.log('this script is running in Node.js'); // Run as standalone app diff --git a/ZGUI.css b/ZGUI.css index 388ae22..b970e28 100644 --- a/ZGUI.css +++ b/ZGUI.css @@ -2,371 +2,613 @@ box-sizing: border-box; } +:root { + --trim-bg: #e9eef0; + --trim-panel: #fffdf8; + --trim-panel-soft: #f3f6f4; + --trim-ink: #1d2b32; + --trim-muted: #617077; + --trim-deep: #173943; + --trim-accent: #bd5f37; + --trim-accent-hover: #9f4827; + --trim-border: #c8d3d5; + --trim-focus: #2d7888; + --trim-status-height: 38px; +} + +html { + height: 100%; +} + +body { + background: + radial-gradient(circle at 8% 5%, rgba(189, 95, 55, 0.16), transparent 28rem), + linear-gradient(145deg, #f5f1e9 0%, var(--trim-bg) 58%, #dce6e7 100%); + color: var(--trim-ink); + font-family: "Trebuchet MS", "Lucida Sans", Geneva, sans-serif; + height: 100vh; + height: 100dvh; + margin: 0; + overflow: hidden; + padding: 8px 10px calc(var(--trim-status-height) + 8px); +} + td { - white-space: wrap; + white-space: normal; } -.guitable { - background-color: #DDDDDD; - border: 1px solid #000000; - /* border-collapse: collapse; */ - border-radius: 10px; - border: none; - border-spacing: 0px; - padding: 5px; - margin-left: auto; - margin-right: auto; - margin-top: 0.5em; - margin-bottom: 0.5em; +button, +input, +select { + font: inherit; } -.guitable tr:last-child td:first-child { - border-bottom-left-radius: 12px; +input[type="text"], +input[type="number"], +select { + background: #fff; + border: 1px solid #aebdc0; + border-radius: 5px; + color: var(--trim-ink); + min-height: 29px; + padding: 3px 7px; } -.guitable tr:last-child td:last-child { - border-bottom-right-radius: 12px; +input[type="text"]:focus, +input[type="number"]:focus, +select:focus, +button:focus-visible, +input[type="button"]:focus-visible { + border-color: var(--trim-focus); + box-shadow: 0 0 0 3px rgba(45, 120, 136, 0.17); + outline: none; } -.guitable tr:first-child td:first-child { - border-top-left-radius: 12px; +input:disabled { + background: #e8edef; + color: #59676d; + cursor: not-allowed; } -.guitable tr:first-child td:last-child { - border-top-right-radius: 12px; +button, +input[type="button"] { + background: #fff; + border: 1px solid #8da5aa; + border-radius: 5px; + color: var(--trim-deep); + cursor: pointer; + font-weight: 700; + padding: 6px 11px; } -.guitable tr:nth-child(odd) { - background-color: #DDDDDD; +button:hover, +input[type="button"]:hover { + background: #eaf1f1; } -.guitable tr:nth-child(even) { - background-color: #DDDDDD; -} - -/* For mobile phones: */ -[class*="col-"] { +.app-shell { + height: 100%; + margin: 0 auto; + max-width: 1240px; + min-height: 0; width: 100%; } -@media only screen and (min-width: 700px) { +.app-card { + background: linear-gradient(180deg, var(--trim-panel) 0%, #fafbf8 100%); + border: 1px solid rgba(97, 112, 119, 0.3); + border-radius: 13px; + box-shadow: 0 18px 45px rgba(29, 43, 50, 0.17); + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; + overflow: hidden; +} - /* For tablets: */ - .col-s-1 { - width: 50%; - background-color: #DDDDDD; +.tab { + background: var(--trim-deep); + display: flex; + flex: 0 0 auto; + gap: 3px; + overflow-x: auto; + padding: 4px 6px; +} + +.tab button { + background: transparent; + border: 0; + border-radius: 6px; + color: #dce8e9; + font-size: 0.93rem; + padding: 6px 11px; + transition: background 0.16s ease, color 0.16s ease; + white-space: nowrap; +} + +.tab button:hover { + background: rgba(255, 255, 255, 0.13); + color: #fff; +} + +.tab button.active { + background: var(--trim-panel); + color: var(--trim-deep); +} + +.main-action-bar { + align-items: center; + background: var(--trim-panel-soft); + border-bottom: 1px solid var(--trim-border); + box-shadow: 0 5px 15px rgba(29, 43, 50, 0.07); + display: flex; + flex: 0 0 auto; + gap: 16px; + justify-content: space-between; + padding: 7px 12px; + z-index: 10; +} + +.action-bar-title { + align-items: center; + display: flex; + gap: 10px; + min-width: 0; +} + +.app-brand-icon { + border-radius: 7px; + flex: 0 0 auto; + height: 32px; + width: 32px; +} + +.action-bar-title strong { + color: var(--trim-deep); + display: block; + font-family: Georgia, "Times New Roman", serif; + font-size: 1rem; +} + +.action-bar-eyebrow { + color: var(--trim-muted); + display: block; + font-size: 0.7rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.run-action { + background: var(--trim-accent); + border-color: var(--trim-accent); + color: #fff; + flex: 0 0 auto; + min-width: 145px; + padding: 8px 14px; +} + +.run-action:hover { + background: var(--trim-accent-hover); +} + +.tabcontent { + background: var(--trim-panel); + border: 0; + flex: 1 1 auto; + min-height: 0; + overflow: auto; + padding: 10px 12px 14px; +} + +/* Compact configuration panels keep the default window free of scrollbars. */ +.output-settings { + align-items: end; + display: grid; + gap: 10px; + grid-template-columns: minmax(180px, 0.8fr) minmax(320px, 1.8fr); + margin-bottom: 9px; +} + +.compact-field, +.settings-field { + min-width: 0; +} + +.compact-field > span, +.compact-field > label, +.settings-field > span { + color: var(--trim-muted); + display: block; + font-size: 0.75rem; + font-weight: 700; + margin-bottom: 2px; +} + +.compact-field > input, +.settings-field > input, +.settings-field > select { + width: 100%; +} + +.field-with-action { + display: flex; + gap: 6px; +} + +.field-with-action input[type="text"] { + flex: 1 1 auto; + min-width: 0; +} + +.layers-workspace { + align-items: start; + display: grid; + gap: 10px; + grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); +} + +.settings-panel, +.reference-panel { + background: #fff; + border: 1px solid var(--trim-border); + border-radius: 9px; + min-width: 0; + padding: 9px 10px; +} + +.section-heading { + align-items: center; + display: flex; + justify-content: space-between; + margin-bottom: 6px; + min-height: 32px; +} + +.section-heading h2, +.reference-panel h2 { + color: var(--trim-deep); + font-family: Georgia, "Times New Roman", serif; + font-size: 1rem; + line-height: 1.15; + margin: 0; +} + +.section-eyebrow { + color: var(--trim-accent); + display: block; + font-size: 0.67rem; + font-weight: 700; + letter-spacing: 0.08em; + margin-bottom: 1px; + text-transform: uppercase; +} + +.layer-count { + align-items: center; + color: var(--trim-muted); + display: flex; + font-size: 0.75rem; + font-weight: 700; + gap: 6px; +} + +.layer-count input { + width: 58px; +} + +.layer-table-wrap { + overflow-x: auto; +} + +.projectile-grid { + display: grid; + gap: 6px 9px; + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +#Plots > table { + border-collapse: separate; + border-spacing: 0; + width: 100%; +} + +#LTable { + border: 0; + border-collapse: separate; + border-spacing: 0; + overflow: hidden; + width: 100%; +} + +#LTable td { + border-bottom: 1px solid var(--trim-border); + border-left: 0; + border-right: 0; + border-top: 0; + padding: 5px 6px; +} + +#LTable tr:first-child td { + background: #e7eeed; + color: var(--trim-deep); + font-size: 0.84rem; +} + +#LTable tr:not(:first-child):hover td { + background: #f5f8f5; +} + +#ScansControls, +#ScansLine, +#ScansTable { + margin-top: 12px; +} + +#ScansControls table, +#ScansTable { + background: var(--trim-panel-soft); + border: 1px solid var(--trim-border); + border-radius: 8px; + padding: 8px; +} + +#ScansControls td, +#ScansTable td { + padding: 6px; +} + +#Plots > table td { + padding: 8px; + vertical-align: top; + width: 50%; +} + +.advanced-layout { + align-items: start; + display: grid; + gap: 10px; + grid-template-columns: minmax(560px, 2.2fr) minmax(240px, 0.8fr); +} + +.advanced-parameters > table { + border-collapse: separate; + border-spacing: 5px 2px; + width: 100%; +} + +.advanced-parameters { + padding: 7px 9px; +} + +.advanced-parameters .section-heading { + margin-bottom: 2px; +} + +.advanced-parameters > table td { + padding: 2px 3px; +} + +.advanced-parameters > table td:nth-child(odd) { + color: var(--trim-deep); + font-size: 0.8rem; + font-weight: 700; +} + +.advanced-parameters input { + min-height: 27px; + max-width: 94px; + width: 100%; +} + +.reference-panel { + background: + linear-gradient(145deg, rgba(189, 95, 55, 0.08), transparent 55%), + var(--trim-panel-soft); + color: #46565d; + font-size: 0.75rem; + line-height: 1.32; + padding: 8px 9px; +} + +.reference-panel p { + margin: 6px 0; +} + +.reference-link { + color: #1f6675; + display: block; + overflow-wrap: anywhere; +} + +.reference-divider { + border-top: 1px solid var(--trim-border); + margin: 7px 0 6px; +} + +.reference-label { + color: var(--trim-deep); + display: block; + font-size: 0.7rem; + font-weight: 700; + margin-bottom: 3px; + text-transform: uppercase; +} + +.tooltip { + cursor: help; + position: relative; +} + +.tooltip .tooltiptext { + background: #142d35; + border-radius: 7px; + box-shadow: 0 8px 24px rgba(17, 34, 40, 0.25); + color: #fff; + font-weight: 400; + left: 0; + line-height: 1.35; + padding: 9px 11px; + position: absolute; + text-align: left; + top: calc(100% + 5px); + display: none; + width: 330px; + z-index: 100; +} + +.tooltip:hover .tooltiptext, +.tooltip:focus-within .tooltiptext { + display: block; +} + +.transient-warning { + background: #fff1c9; + border: 1px solid #c79824; + border-radius: 7px; + box-shadow: 0 7px 20px rgba(29, 43, 50, 0.17); + color: #523c08; + line-height: 1.35; + max-width: 380px; + opacity: 0; + padding: 9px 12px; + pointer-events: none; + position: fixed; + transition: opacity 0.2s ease; + z-index: 1000; +} + +.transient-warning.visible { + opacity: 1; +} + +.estimated-density { + background: #fff1c9 !important; + border-color: #c79824 !important; +} + +.status-bar { + align-items: center; + background: #edf2f2; + border-top: 1px solid #aebec1; + bottom: 0; + box-shadow: 0 -3px 12px rgba(29, 43, 50, 0.1); + color: var(--trim-ink); + display: flex; + flex-wrap: nowrap; + font-size: 0.82rem; + gap: 14px; + left: 0; + min-height: var(--trim-status-height); + padding: 5px 12px; + position: fixed; + right: 0; + z-index: 900; +} + +.status-item { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.status-item strong { + color: var(--trim-deep); +} + +.status-progress { + flex: 1 1 220px; + min-width: 150px; +} + +.status-progress-track { + background: #d3dcde; + border: 1px solid #aebec1; + border-radius: 999px; + height: 18px; + overflow: hidden; + width: 100%; +} + +.status-progress-fill { + background: linear-gradient(90deg, #2d7888, #45a0a6); + color: #fff; + font-size: 0.72rem; + font-weight: 700; + height: 100%; + line-height: 16px; + padding: 0 4px; + text-align: center; + transition: width 0.2s ease; + width: 0%; +} + +@media only screen and (max-width: 760px) { + body { + padding: 0 0 var(--trim-status-height); } - .col-s-2 { - width: 50%; - background-color: #DDDDDD; + .app-card { + border: 0; + border-radius: 0; } - .col-s-full { - width: 100%; - background-color: #F2F2F2; + .main-action-bar { + align-items: stretch; + flex-direction: column; + gap: 8px; } - [class*="col-"] { - width: 100%; + .run-action { + width: 100%; } - @media only screen and (min-width: 990px) { - - /* For desktop: */ - .col-1 { - width: 50%; - background-color: #F2F2F2; - } - - .col-2 { - width: 50%; - background-color: #F2F2F2; - } - - .col-full { - width: 100%; - background-color: #F2F2F2; - } + .output-settings, + .layers-workspace, + .projectile-grid { + grid-template-columns: 1fr; } - [class*="col-"] { - float: left; - padding: 5px; - border: none; + .advanced-layout { + grid-template-columns: 1fr; } - .row::after { - content: ""; - clear: both; - display: table; + .advanced-parameters { + overflow-x: auto; } - .transient-warning { - position: fixed; - max-width: 360px; - padding: 10px 14px; - background-color: #fff4cc; - border: 1px solid #c5a100; - border-radius: 8px; - color: #4d3b00; - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); - font-size: 0.95rem; - line-height: 1.35; - opacity: 0; - pointer-events: none; - transition: opacity 0.25s ease; - z-index: 1000; + #Plots > table, + #Plots > table > tbody, + #Plots > table > tbody > tr, + #Plots > table > tbody > tr > td { + display: block; + width: 100%; } - .transient-warning.visible { - opacity: 1; - } - - .estimated-density { - background-color: #fff4cc; - border: 1px solid #c5a100; - } - - .status-bar { - position: fixed; - left: 0; - right: 0; - bottom: 0; - display: flex; - flex-wrap: wrap; - gap: 8px 16px; - align-items: center; - padding: 8px 14px; - background-color: #eef2f5; - border-top: 1px solid #b8c3cc; - color: #23313d; - font-size: 0.88rem; - box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); - z-index: 900; - } - - .status-item { - min-width: 180px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .status-item strong { - color: #10202c; + .status-item:nth-child(-n+3) { + display: none; } .status-progress { - flex: 1 1 260px; - min-width: 220px; + min-width: 120px; + } +} + +@media only screen and (min-width: 761px) and (max-width: 900px) { + .advanced-layout { + grid-template-columns: 1fr; } - .status-progress-track { - width: 100%; - height: 22px; - background-color: #d7dee5; - border-radius: 8px; - overflow: hidden; - border: 1px solid #b8c3cc; + .reference-panel { + display: grid; + gap: 8px 14px; + grid-template-columns: 1fr 1fr; } - .status-progress-fill { - width: 0%; - height: 100%; - background-color: #2e8b57; - color: black; - padding-left: 3px; - text-align: center; - line-height: 20px; - font-size: 0.78rem; - font-weight: 600; - transition: width 0.2s ease; + .reference-panel .section-eyebrow, + .reference-panel h2, + .reference-divider { + grid-column: 1 / -1; } - - .group_name { - padding-left: 1em; - padding-right: 1em; - font-size: 105%; - font-weight: bold; - width: 1%; - white-space: nowrap; - /* text-align: center; */ - } - - .yellow_td { - padding-left: 1em; - padding-right: 1em; - background-color: yellow; - width: 1%; - white-space: nowrap; - } - - .gray_td { - padding-left: 1em; - padding-right: 1em; - background-color: gray; - width: 1%; - white-space: nowrap; - } - - .nocol_td { - padding-left: 1em; - padding-right: 1em; - width: 1%; - white-space: nowrap; - } - - /* Style the tab */ - .tab { - overflow: hidden; - border: 1px solid #ccc; - background-color: #f1f1f1; - } - - /* Style the buttons that are used to open the tab content */ - .tab button { - background-color: inherit; - float: left; - border: none; - outline: none; - cursor: pointer; - padding: 14px 16px; - transition: 0.3s; - font-size: 105%; - font-weight: bold; - } - - /* Change background color of buttons on hover */ - .tab button:hover { - background-color: #ddd; - } - - /* Create an active/current tablink class */ - .tab button.active { - background-color: #ccc; - } - - /* Style the tab content */ - .tabcontent { - display: none; - padding: 6px 12px; - border: 1px solid #ccc; - border-top: none; - } - - /* Go from zero to full opacity */ - @keyframes fadeEffect { - from { - opacity: 0; - } - - to { - opacity: 1; - } - } - - /* Chrome, Safari, Opera */ - @-webkit-keyframes example { - 0% { - background-color: red; - left: 20px; - top: 0px; - } - - 25% { - background-color: orange; - left: 25px; - top: 0px; - } - - 50% { - background-color: green; - left: 30px; - top: 0px; - } - - 75% { - background-color: orange; - left: 25px; - top: 0px; - } - - 100% { - background-color: red; - left: 20px; - top: 0px; - } - } - - /* Standard syntax */ - @keyframes example { - 0% { - background-color: red; - left: 20px; - top: 0px; - } - - 25% { - background-color: orange; - left: 25px; - top: 0px; - } - - 50% { - background-color: green; - left: 30px; - top: 0px; - } - - 75% { - background-color: orange; - left: 25px; - top: 0px; - } - - 100% { - background-color: red; - left: 20px; - top: 0px; - } - } - - #myBar { - width: 10%; - height: 30px; - background-color: #4CAF50; - text-align: center; - /* To center it horizontally (if you want) */ - line-height: 30px; - /* To center it vertically */ - color: white; - } - - /* Tooltip container */ - .tooltip { - position: relative; - display: inline-block; - /* border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ - } - - /* Tooltip text */ - .tooltip .tooltiptext { - visibility: hidden; - width: 320px; - background-color: black; - color: #fff; - text-align: left; - padding: 5px; - border-radius: 6px; - - /* Position the tooltip text - see examples below! */ - position: absolute; - z-index: 1; - } - - /* Show the tooltip text when you mouse over the tooltip container */ - .tooltip:hover .tooltiptext { - visibility: visible; - } -} \ No newline at end of file +}