{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "6dd89730",
   "metadata": {},
   "source": [
    "# CryoLauncher Online"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2a8d311d",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "/* Full-width layout */\n",
       ".bd-main .bd-content,\n",
       ".bd-main .bd-content .bd-article-container,\n",
       ".bd-main .bd-content .bd-article,\n",
       "article.bd-article {\n",
       "  max-width: 100% !important;\n",
       "  width: 100% !important;\n",
       "}\n",
       "\n",
       "/* Hide code cells and pager */\n",
       "div.cell_input,\n",
       "div.prompt,\n",
       ".prev-next-area {\n",
       "  display: none !important;\n",
       "}\n",
       "\n",
       "/* Page shell */\n",
       ".run-center-wrap {\n",
       "  max-width: 1120px;\n",
       "  margin: 28px auto 24px;\n",
       "  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n",
       "}\n",
       "\n",
       ".run-center-kicker {\n",
       "  display: inline-block;\n",
       "  padding: 6px 12px;\n",
       "  border-radius: 999px;\n",
       "  background: rgba(13,110,253,.08);\n",
       "  color: #0d6efd;\n",
       "  font-size: 12px;\n",
       "  font-weight: 700;\n",
       "  letter-spacing: .02em;\n",
       "  margin-bottom: 14px;\n",
       "}\n",
       "\n",
       ".run-center-title {\n",
       "  font-size: 34px;\n",
       "  font-weight: 700;\n",
       "  line-height: 1.15;\n",
       "  color: #1f2937;\n",
       "  margin-bottom: 10px;\n",
       "}\n",
       "\n",
       ".run-center-sub {\n",
       "  font-size: 17px;\n",
       "  line-height: 1.65;\n",
       "  color: rgba(0,0,0,.72);\n",
       "  max-width: 900px;\n",
       "  margin-bottom: 30px;\n",
       "}\n",
       "\n",
       "/* Cards grid */\n",
       ".run-center-grid {\n",
       "  display: grid;\n",
       "  grid-template-columns: repeat(2, minmax(0, 1fr));\n",
       "  gap: 24px;\n",
       "  align-items: stretch;\n",
       "}\n",
       "\n",
       ".run-card {\n",
       "  display: flex;\n",
       "  flex-direction: column;\n",
       "  justify-content: space-between;\n",
       "  min-height: 100%;\n",
       "  background: #ffffff;\n",
       "  border: 1px solid rgba(0,0,0,.08);\n",
       "  border-radius: 18px;\n",
       "  box-shadow: 0 8px 24px rgba(0,0,0,.05);\n",
       "  padding: 28px 24px 24px;\n",
       "}\n",
       "\n",
       ".run-card:hover {\n",
       "  transform: translateY(-2px);\n",
       "  box-shadow: 0 14px 30px rgba(0,0,0,.08);\n",
       "  border-color: rgba(13,110,253,.20);\n",
       "}\n",
       "\n",
       ".run-card-badge {\n",
       "  display: inline-block;\n",
       "  padding: 6px 12px;\n",
       "  border-radius: 999px;\n",
       "  background: rgba(13,110,253,.10);\n",
       "  color: #0d6efd;\n",
       "  font-size: 12px;\n",
       "  font-weight: 700;\n",
       "  letter-spacing: .02em;\n",
       "  margin-bottom: 14px;\n",
       "}\n",
       "\n",
       ".run-card-badge.secondary {\n",
       "  background: rgba(25,135,84,.10);\n",
       "  color: #198754;\n",
       "}\n",
       "\n",
       ".run-card-title {\n",
       "  font-size: 26px;\n",
       "  font-weight: 700;\n",
       "  line-height: 1.2;\n",
       "  color: #1f2937;\n",
       "  margin-bottom: 12px;\n",
       "}\n",
       "\n",
       ".run-card-text {\n",
       "  color: rgba(0,0,0,.70);\n",
       "  line-height: 1.65;\n",
       "  font-size: 15px;\n",
       "  margin-bottom: 18px;\n",
       "}\n",
       "\n",
       ".run-card-list {\n",
       "  margin: 0 0 24px 0;\n",
       "  padding-left: 18px;\n",
       "  color: rgba(0,0,0,.74);\n",
       "  font-size: 14px;\n",
       "  line-height: 1.75;\n",
       "}\n",
       "\n",
       ".run-card-list li {\n",
       "  margin-bottom: 4px;\n",
       "}\n",
       "\n",
       ".run-btn {\n",
       "  display: inline-block;\n",
       "  padding: 13px 20px;\n",
       "  border: none;\n",
       "  border-radius: 12px;\n",
       "  background: #0d6efd;\n",
       "  color: white !important;\n",
       "  text-decoration: none;\n",
       "  font-weight: 700;\n",
       "  font-size: 15px;\n",
       "  cursor: pointer;\n",
       "  box-shadow: 0 8px 18px rgba(13,110,253,.18);\n",
       "  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;\n",
       "}\n",
       "\n",
       ".run-btn:hover {\n",
       "  background: #0b5ed7;\n",
       "  transform: translateY(-1px);\n",
       "}\n",
       "\n",
       ".run-btn.secondary {\n",
       "  background: #198754;\n",
       "  box-shadow: 0 8px 18px rgba(25,135,84,.18);\n",
       "}\n",
       "\n",
       ".run-btn.secondary:hover {\n",
       "  background: #157347;\n",
       "}\n",
       "\n",
       ".run-card-footer {\n",
       "  margin-top: auto;\n",
       "}\n",
       "\n",
       "/* Responsive */\n",
       "@media (max-width: 900px) {\n",
       "  .run-center-grid {\n",
       "    grid-template-columns: 1fr;\n",
       "  }\n",
       "}\n",
       "</style>\n",
       "\n",
       "<div class=\"run-center-wrap\">\n",
       "  <div class=\"run-center-kicker\">Interactive Platform</div>\n",
       "\n",
       "  <div class=\"run-center-title\">Choose a workflow</div>\n",
       "\n",
       "  <div class=\"run-center-sub\">\n",
       "    Launch coupled data assimilation workflows through ICESEE, or run ice-sheet models directly through existing containerized and Spack-based environments.\n",
       "  </div>\n",
       "\n",
       "  <div class=\"run-center-grid\">\n",
       "\n",
       "    <div class=\"run-card\">\n",
       "      <div>\n",
       "        <div class=\"run-card-badge\">Data Assimilation Workflow</div>\n",
       "        <div class=\"run-card-title\">ICESEE Data Assimilation</div>\n",
       "        <div class=\"run-card-text\">\n",
       "          Run coupled ICESEE data assimilation workflows with supported ice-sheet models through a unified interactive interface.\n",
       "        </div>\n",
       "        <ul class=\"run-card-list\">\n",
       "          <li>Data assimilation and state estimation workflows</li>\n",
       "          <li>Local, remote, and cloud execution modes</li>\n",
       "          <li>Integrated configuration, submission, and result preview</li>\n",
       "        </ul>\n",
       "      </div>\n",
       "      <div class=\"run-card-footer\">\n",
       "        <button class=\"run-btn\" onclick=\"openICESEEGUI()\">Open ICESEE GUI</button>\n",
       "      </div>\n",
       "    </div>\n",
       "\n",
       "    <div class=\"run-card\">\n",
       "      <div>\n",
       "        <div class=\"run-card-badge secondary\">Model-Only Workflow</div>\n",
       "        <div class=\"run-card-title\">Ice-Sheet Modeling</div>\n",
       "        <div class=\"run-card-text\">\n",
       "          Run supported ice-sheet models directly without the data assimilation layer, using environments already available through containers and Spack.\n",
       "        </div>\n",
       "        <ul class=\"run-card-list\">\n",
       "          <li>Model-only workflows without ICESEE DA coupling</li>\n",
       "          <li>Container access through ICESEE-Containers</li>\n",
       "          <li>Spack-based installation and execution pathways</li>\n",
       "        </ul>\n",
       "      </div>\n",
       "      <div class=\"run-card-footer\">\n",
       "        <button class=\"run-btn secondary\" onclick=\"openIceSheetsGUI()\">Open Modeling GUI</button>\n",
       "      </div>\n",
       "    </div>\n",
       "\n",
       "  </div>\n",
       "</div>\n",
       "\n",
       "<script>\n",
       "function appRoot() {\n",
       "  const parts = window.location.pathname.split(\"/\");\n",
       "  parts.pop();\n",
       "  return window.location.origin + parts.join(\"/\");\n",
       "}\n",
       "\n",
       "function openICESEEGUI() {\n",
       "  window.open(appRoot() + \"/icesee-gui/\", \"_blank\", \"noopener\");\n",
       "}\n",
       "\n",
       "function openIceSheetsGUI() {\n",
       "  window.open(appRoot() + \"/icesheets/\", \"_blank\", \"noopener\");\n",
       "}\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import HTML\n",
    "\n",
    "HTML(\"\"\"\n",
    "<style>\n",
    "/* Full-width layout */\n",
    ".bd-main .bd-content,\n",
    ".bd-main .bd-content .bd-article-container,\n",
    ".bd-main .bd-content .bd-article,\n",
    "article.bd-article {\n",
    "  max-width: 100% !important;\n",
    "  width: 100% !important;\n",
    "}\n",
    "\n",
    "/* Hide code cells and pager */\n",
    "div.cell_input,\n",
    "div.prompt,\n",
    ".prev-next-area {\n",
    "  display: none !important;\n",
    "}\n",
    "\n",
    "/* Page shell */\n",
    ".run-center-wrap {\n",
    "  max-width: 1120px;\n",
    "  margin: 28px auto 24px;\n",
    "  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n",
    "}\n",
    "\n",
    ".run-center-kicker {\n",
    "  display: inline-block;\n",
    "  padding: 6px 12px;\n",
    "  border-radius: 999px;\n",
    "  background: rgba(13,110,253,.08);\n",
    "  color: #0d6efd;\n",
    "  font-size: 12px;\n",
    "  font-weight: 700;\n",
    "  letter-spacing: .02em;\n",
    "  margin-bottom: 14px;\n",
    "}\n",
    "\n",
    ".run-center-title {\n",
    "  font-size: 34px;\n",
    "  font-weight: 700;\n",
    "  line-height: 1.15;\n",
    "  color: #1f2937;\n",
    "  margin-bottom: 10px;\n",
    "}\n",
    "\n",
    ".run-center-sub {\n",
    "  font-size: 17px;\n",
    "  line-height: 1.65;\n",
    "  color: rgba(0,0,0,.72);\n",
    "  max-width: 900px;\n",
    "  margin-bottom: 30px;\n",
    "}\n",
    "\n",
    "/* Cards grid */\n",
    ".run-center-grid {\n",
    "  display: grid;\n",
    "  grid-template-columns: repeat(2, minmax(0, 1fr));\n",
    "  gap: 24px;\n",
    "  align-items: stretch;\n",
    "}\n",
    "\n",
    ".run-card {\n",
    "  display: flex;\n",
    "  flex-direction: column;\n",
    "  justify-content: space-between;\n",
    "  min-height: 100%;\n",
    "  background: #ffffff;\n",
    "  border: 1px solid rgba(0,0,0,.08);\n",
    "  border-radius: 18px;\n",
    "  box-shadow: 0 8px 24px rgba(0,0,0,.05);\n",
    "  padding: 28px 24px 24px;\n",
    "}\n",
    "\n",
    ".run-card:hover {\n",
    "  transform: translateY(-2px);\n",
    "  box-shadow: 0 14px 30px rgba(0,0,0,.08);\n",
    "  border-color: rgba(13,110,253,.20);\n",
    "}\n",
    "\n",
    ".run-card-badge {\n",
    "  display: inline-block;\n",
    "  padding: 6px 12px;\n",
    "  border-radius: 999px;\n",
    "  background: rgba(13,110,253,.10);\n",
    "  color: #0d6efd;\n",
    "  font-size: 12px;\n",
    "  font-weight: 700;\n",
    "  letter-spacing: .02em;\n",
    "  margin-bottom: 14px;\n",
    "}\n",
    "\n",
    ".run-card-badge.secondary {\n",
    "  background: rgba(25,135,84,.10);\n",
    "  color: #198754;\n",
    "}\n",
    "\n",
    ".run-card-title {\n",
    "  font-size: 26px;\n",
    "  font-weight: 700;\n",
    "  line-height: 1.2;\n",
    "  color: #1f2937;\n",
    "  margin-bottom: 12px;\n",
    "}\n",
    "\n",
    ".run-card-text {\n",
    "  color: rgba(0,0,0,.70);\n",
    "  line-height: 1.65;\n",
    "  font-size: 15px;\n",
    "  margin-bottom: 18px;\n",
    "}\n",
    "\n",
    ".run-card-list {\n",
    "  margin: 0 0 24px 0;\n",
    "  padding-left: 18px;\n",
    "  color: rgba(0,0,0,.74);\n",
    "  font-size: 14px;\n",
    "  line-height: 1.75;\n",
    "}\n",
    "\n",
    ".run-card-list li {\n",
    "  margin-bottom: 4px;\n",
    "}\n",
    "\n",
    ".run-btn {\n",
    "  display: inline-block;\n",
    "  padding: 13px 20px;\n",
    "  border: none;\n",
    "  border-radius: 12px;\n",
    "  background: #0d6efd;\n",
    "  color: white !important;\n",
    "  text-decoration: none;\n",
    "  font-weight: 700;\n",
    "  font-size: 15px;\n",
    "  cursor: pointer;\n",
    "  box-shadow: 0 8px 18px rgba(13,110,253,.18);\n",
    "  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;\n",
    "}\n",
    "\n",
    ".run-btn:hover {\n",
    "  background: #0b5ed7;\n",
    "  transform: translateY(-1px);\n",
    "}\n",
    "\n",
    ".run-btn.secondary {\n",
    "  background: #198754;\n",
    "  box-shadow: 0 8px 18px rgba(25,135,84,.18);\n",
    "}\n",
    "\n",
    ".run-btn.secondary:hover {\n",
    "  background: #157347;\n",
    "}\n",
    "\n",
    ".run-card-footer {\n",
    "  margin-top: auto;\n",
    "}\n",
    "\n",
    "/* Responsive */\n",
    "@media (max-width: 900px) {\n",
    "  .run-center-grid {\n",
    "    grid-template-columns: 1fr;\n",
    "  }\n",
    "}\n",
    "</style>\n",
    "\n",
    "<div class=\"run-center-wrap\">\n",
    "  <div class=\"run-center-kicker\">Interactive Platform</div>\n",
    "\n",
    "  <div class=\"run-center-title\">Choose a workflow</div>\n",
    "\n",
    "  <div class=\"run-center-sub\">\n",
    "    Launch coupled data assimilation workflows through ICESEE, or run ice-sheet models directly through existing containerized and Spack-based environments.\n",
    "  </div>\n",
    "\n",
    "  <div class=\"run-center-grid\">\n",
    "\n",
    "    <div class=\"run-card\">\n",
    "      <div>\n",
    "        <div class=\"run-card-badge\">Data Assimilation Workflow</div>\n",
    "        <div class=\"run-card-title\">ICESEE Data Assimilation</div>\n",
    "        <div class=\"run-card-text\">\n",
    "          Run coupled ICESEE data assimilation workflows with supported ice-sheet models through a unified interactive interface.\n",
    "        </div>\n",
    "        <ul class=\"run-card-list\">\n",
    "          <li>Data assimilation and state estimation workflows</li>\n",
    "          <li>Local, remote, and cloud execution modes</li>\n",
    "          <li>Integrated configuration, submission, and result preview</li>\n",
    "        </ul>\n",
    "      </div>\n",
    "      <div class=\"run-card-footer\">\n",
    "        <button class=\"run-btn\" onclick=\"openICESEEGUI()\">Open ICESEE GUI</button>\n",
    "      </div>\n",
    "    </div>\n",
    "\n",
    "    <div class=\"run-card\">\n",
    "      <div>\n",
    "        <div class=\"run-card-badge secondary\">Model-Only Workflow</div>\n",
    "        <div class=\"run-card-title\">Ice-Sheet Modeling</div>\n",
    "        <div class=\"run-card-text\">\n",
    "          Run supported ice-sheet models directly without the data assimilation layer, using environments already available through containers and Spack.\n",
    "        </div>\n",
    "        <ul class=\"run-card-list\">\n",
    "          <li>Model-only workflows without ICESEE DA coupling</li>\n",
    "          <li>Container access through ICESEE-Containers</li>\n",
    "          <li>Spack-based installation and execution pathways</li>\n",
    "        </ul>\n",
    "      </div>\n",
    "      <div class=\"run-card-footer\">\n",
    "        <button class=\"run-btn secondary\" onclick=\"openIceSheetsGUI()\">Open Modeling GUI</button>\n",
    "      </div>\n",
    "    </div>\n",
    "\n",
    "  </div>\n",
    "</div>\n",
    "\n",
    "<script>\n",
    "function getAppBase() {\n",
    "  const protocol = window.location.protocol;\n",
    "  const origin = window.location.origin;\n",
    "  const path = window.location.pathname;\n",
    "\n",
    "  if (protocol === \"file:\") {\n",
    "    return \"http://127.0.0.1:8080\";\n",
    "  }\n",
    "\n",
    "  const nbIdx = path.indexOf(\"/icesee_jupyter_notebooks/\");\n",
    "  if (nbIdx >= 0) {\n",
    "    return origin + path.slice(0, nbIdx);\n",
    "  }\n",
    "\n",
    "  return origin;\n",
    "}\n",
    "\n",
    "function openICESEEGUI() {\n",
    "  window.open(getAppBase() + \"/icesee-gui/\", \"_blank\", \"noopener\");\n",
    "}\n",
    "\n",
    "function openIceSheetsGUI() {\n",
    "  window.open(getAppBase() + \"/icesheets/\", \"_blank\", \"noopener\");\n",
    "}\n",
    "</script>\n",
    "\"\"\")"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python3 (icesee1)",
   "language": "python",
   "name": "icesee1"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
