1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>2Pipe</title> 7 <link rel="icon" type="image/png" href="images/2Pipe.png"> 8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> 9 <link rel="stylesheet" href="styles.css"> 10</head> 11<body> 12 <button id="theme-toggle" class="theme-toggle" title="Toggle theme"> 13 <i class="fas fa-moon"></i> 14 </button> 15 16 <div class="container"> 17 <div id="intro-section" class="intro-section"> 18 <img src="images/2Pipe.png" alt="2Pipe Logo" class="logo"> 19 <h1>Welcome to 2Pipe:</h1> 20 <h2> It starts with a question!</h2> 21 <p>We help you to identify the most suitable pipeline for MAG reconstruction according to your needs.</p> 22 <div class="intro-buttons"> 23 <div class="intro-row"> 24 <button id="start-btn" class="start-btn">Get Started</button> 25 <button id="gallery-btn" class="gallery-btn">Pipeline Gallery</button> 26 </div> 27 <div class="intro-row"> 28 <button id="workflow-btn" class="workflow-btn">Pipeline Workflows</button> 29 <button id="selector-page-btn" class="workflow-btn">Tool Gallery</button> 30 </div> 31 <div class="intro-row"> 32 <button id="table-btn" class="table-btn">Technical Comparison</button> 33 <button id="tools-table-btn" class="table-btn">Advanced Comparison</button> 34 </div> 35 <div class="intro-row"> 36 <button id="papers-btn" class="gallery-btn">Benchmarks & Literature</button> 37 <button id="general-workflow-btn" class="workflow-btn">General Workflow</button> 38 </div> 39 </div> 40 <div class="resource-buttons"> 41 <a href="https://journals.asm.org/doi/10.1128/msystems.00844-25" target="_blank" class="resource-btn docs-btn"> 42 <i class="fas fa-book"></i> 43 Documentation 44 </a> 45 <a href="https://form.jotform.com/jeffe10789/2pipe-form" target="_blank" class="resource-btn submit-btn"> 46 <i class="fas fa-plus-circle"></i> 47 Add your pipeline 48 </a> 49 <a href="https://github.com/jeffe107/2pipe" target="_blank" class="resource-btn github-btn"> 50 <i class="fab fa-github"></i> 51 Source Code 52 </a> 53 </div> 54 </div> 55 56 <div id="question-section" class="question-section" style="display: none;"> 57 <div class="progress-container"> 58 <div class="progress-bar"></div> 59 </div> 60 61 <div class="question-container"> 62 <div class="question-content"> 63 <h2 id="question-text"></h2> 64 <div id="options-container"></div> 65 </div> 66 67 <div class="navigation"> 68 <button id="back-to-intro-btn" class="back-btn">Back to Introduction</button> 69 <div class="nav-buttons"> 70 <button id="prev-btn" class="nav-btn" disabled>Previous</button> 71 <button id="next-btn" class="nav-btn">Next</button> 72 </div> 73 </div> 74 </div> 75 </div> 76 </div> 77 78 <!-- Workflow Info Section --> 79 <div id="workflow-info-section" class="workflow-info-section" style="display: none;"> 80 <div class="workflow-info-header"> 81 <h2>General Workflow</h2> 82 <button id="close-workflow-info-btn" class="close-btn">Ã</button> 83 </div> 84 <div class="workflow-info-container"> 85 <!-- Content will be loaded here --> 86 </div> 87 </div> 88 89 <!-- Gallery Section --> 90 <div id="gallery-section" class="gallery-section" style="display: none;"> 91 <div class="gallery-header"> 92 <h2>Pipeline Gallery</h2> 93 <button id="close-gallery-btn" class="close-btn">Ã</button> 94 </div> 95 <div id="gallery-container" class="gallery-container"></div> 96 </div> 97 98 <!-- Table Section --> 99 <div id="table-section" class="table-section" style="display: none;"> 100 <div class="table-header"> 101 <h2>Technical Comparison</h2> 102 <button id="close-table-btn" class="close-btn">Ã</button> 103 </div> 104 <div id="table-container" class="table-container"></div> 105 </div> 106 107 <!-- Tools Table Section --> 108 <div id="tools-table-section" class="table-section" style="display: none;"> 109 <div class="table-header"> 110 <h2>Advanced Comparison</h2> 111 <button id="close-tools-table-btn" class="close-btn">Ã</button> 112 </div> 113 <div id="tools-table-container" class="table-container"></div> 114 </div> 115 116 <!-- Papers Section --> 117 <div id="papers-section" class="gallery-section" style="display: none;"> 118 <div class="gallery-header"> 119 <h2>Benchmarks & Literature</h2> 120 <button id="close-papers-btn" class="close-btn">Ã</button> 121 </div> 122 <div id="papers-container" class="gallery-container"></div> 123 </div> 124 125 <!-- Tools Selector Page Section --> 126 <div id="selector-page-section" class="workflow-info-section" style="display: none;"> 127 <div class="workflow-info-header"> 128 <h2>Tool Gallery</h2> 129 <button id="close-selector-page-btn" class="close-btn">Ã</button> 130 </div> 131 <div class="workflow-info-container"> 132 <div id="selector-page-mount" class="tools-container"></div> 133 </div> 134 </div> 135 136 <!-- Workflow Section --> 137 <div id="workflow-section" class="workflow-section" style="display: none;"> 138 <div class="workflow-header"> 139 <h2>Pipeline Workflows</h2> 140 <button id="close-workflow-btn" class="close-btn">Ã</button> 141 </div> 142 <div class="workflow-container"> 143 <div class="workflow-selector"> 144 <div class="workflow-selector-content"> 145 <div class="selector-left"> 146 <label for="pipeline-select">Select a Pipeline:</label> 147 <select id="pipeline-select" class="pipeline-select"> 148 <option value="">Choose a pipeline...</option> 149 </select> 150 </div> 151 <button id="back-to-gallery-btn" class="back-to-gallery-btn"> 152 <i class="fas fa-arrow-left"></i> Go to Gallery 153 </button> 154 <button id="back-to-comparison-btn" class="back-to-gallery-btn"> 155 <i class="fas fa-arrow-left"></i> Technical Comparison 156 </button> 157 <button id="back-to-workflow-info-btn" class="back-to-gallery-btn"> 158 <i class="fas fa-arrow-left"></i> Tool Gallery 159 </button> 160 <button id="back-to-tools-table-btn" class="back-to-gallery-btn"> 161 <i class="fas fa-arrow-left"></i> Advanced Comparison 162 </button> 163 </div> 164 </div> 165 <div id="workflow-display" class="workflow-display"> 166 <!-- Workflow content will be dynamically inserted here --> 167 </div> 168 </div> 169 </div> 170 171
171<script src="pipelineObjects.js"></script>
171 172
172<script src="githubMetrics.js"></script>
172 173
173<script src="toolsPipelines.js"></script>
173 174
174<script src="papersReview.js"></script>
174 175
175<script src="gallery.js"></script>
175 176
176<script src="table.js"></script>
176 177
177<script src="toolsTable.js"></script>
177 178
178<script src="papersGallery.js"></script>
178 179
179<script src="workflow.js"></script>
179 180
180<script src="workflow-info.js"></script>
180 181
181<script src="toolsSelectorPage.js"></script>
181 182
182<script src="toolsSelector.js"></script>
182 183
183<script src="script.js"></script>
183 184 185 <div class="signature"> 186 <span>Developed by</span> 187 <a href="https://www.unifr.ch/bio/en/groups/falquet/" target="_blank" class="developer-link"> 188 <img src="images/unifr-logo.png" alt="University of Fribourg" class="unifr-logo"> 189 BugFri 190 </a> 191 </div> 192</body> 193 194</html> 195
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.