Merge pull request #1 from iobio/yang_bam2_add_landing_page

Yang bam2 add landing page
iobio · Sep 10, 2024 · 9a0cb33 · 9a0cb33
2 parents 468195b + 3e96609
commit 9a0cb33
Show file tree

Hide file tree

Showing 9 changed files with 702 additions and 0 deletions.
diff --git a/compatibility_page.js b/compatibility_page.js
@@ -0,0 +1,38 @@
+const Template = document.createElement('template');
+Template.innerHTML = `
+<style>
+#image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    overflow: hidden;
+}
+
+img {
+    max-width: 100%;
+    max-height: 100vh;
+    width: auto;
+    height: auto;
+    -webkit-user-select: none;
+    background-color: hsl(0, 0%, 90%);
+    transition: background-color 300ms;
+    display: block;
+    margin: auto;
+}
+</style>
+<div id="image-container">
+    <img src="/images/browserCompatability.png" alt="Compatible Browsers not found" id="browserImage">
+</div>
+`;
+
+class CompatibleBrowsersPage extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(Template.content.cloneNode(true));
+    }
+}
+
+customElements.define('iobio-compatible-browsers-page', CompatibleBrowsersPage);
+export { CompatibleBrowsersPage }
diff --git a/file_requirement.js b/file_requirement.js
@@ -0,0 +1,91 @@
+import { commonCss } from './lib/iobio-charts/common.js';
+const Template = document.createElement('template');
+Template.innerHTML = `
+<style>
+${commonCss}
+#main {
+    margin: 50px auto 0;
+    max-width: 900px; 
+    width: 100%; 
+    padding: 0 15px; 
+    box-sizing: border-box; 
+}
+
+#main header {
+    font-family: Quicksand;
+    font-size: 46px;
+}
+
+#main h1, h2, h3, h4 {
+    font-family: Muli;
+}
+
+#main h1 {
+    font-size: 26px;
+    font-weight: normal;
+}
+
+#main h2 {
+    font-size: 24px;
+}
+
+#main h3 {
+    font-size: 18px;
+    margin-top: 40px;
+}
+
+#main h4 {
+    margin-bottom: 5px;
+}
+
+#main body {
+    font-family: Open Sans;
+    width: 900px;
+    font-weight: 300;
+}
+
+a {
+    color: var(--data-color);
+    text-decoration: none; !important;
+}
+
+pre {
+    border: none;
+    background: none;
+}
+</style>
+
+<div id="main">
+    <body>
+        <header><a href="http://bam.iobio.io">bam<span style="color:rgb(200,200,200)">.iobio.io</span><span color>&nbsp;</span></a></header>
+
+        <h1>The indexed BAM</h1>
+
+        <p>bam.iobio needs indexed bam files so that it can sample regions from the entire file. Follow the instructions below to index your bam file and use bam.iobio.</p>
+
+        <h3>Install Bamtools</h3>
+
+        <p>Download and install bamtools using the instructions <a href="https://github.com/pezmaster31/bamtools/wiki/Building-and-installing">here</a>.</p>
+
+        <h3>Indexing your BAM</h3>
+
+        <p>Once you have successfully compiled bamtools, you can index your bam files with the following command:</p>
+        <pre>
+            $ /path/to/bamtools index -in mybam.bam
+        </pre>
+        <p>This command will create a new file, the index file (.bam.bai). Now you are ready to run <a href="../../../../index.html">bam.iobio</a>, selecting this file and your bam file when prompted.</p>
+    </body>
+</div>
+`;
+
+class FileRequirement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(Template.content.cloneNode(true));
+  }
+}
+
+customElements.define('iobio-file-requirements-page', FileRequirement);
+
+export { FileRequirement }
diff --git a/help_page.js b/help_page.js
@@ -0,0 +1,32 @@
+const helpTemplate = document.createElement('template');
+helpTemplate.innerHTML = `
+  <style>
+    #main {
+      font-size: 24px;
+      width: 500px;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 100px;
+    }
+  </style>
+  <div id='main'>
+    <h1>Getting Help</h1>
+    <p>
+      If you have any trouble with bam.iobio, you can email us directly
+      at <a href='mailto:iobioproject@gmail.com'>iobioproject@gmail.com</a>. 
+      We usually respond within a day, though we may not always be able to
+      fix something immediately.
+    </p>
+  </div>
+`;
+
+class HelpPage extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(helpTemplate.content.cloneNode(true));
+  }
+}
+
+customElements.define('iobio-help-page', HelpPage);
+export { HelpPage }