Skip to content

Commit 9ab81ae

Browse files
dipayan1985dipayan1985
committed
Review comments
1 parent 71599bd commit 9ab81ae

6 files changed

Lines changed: 62 additions & 39 deletions

File tree

‎wireframes/01-homepage.html‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
background: #e8e8e8;
1414
color: #444;
1515
}
16-
.wf { border: 2px dashed #999; }
16+
.wf { border: 2px solid #999; }
1717
.wf-label {
1818
font-size: 10px;
1919
color: #888;
@@ -24,7 +24,7 @@
2424
header {
2525
background: #fff;
2626
padding: 1rem 2rem;
27-
border-bottom: 2px dashed #999;
27+
border-bottom: 2px solid #999;
2828
display: flex;
2929
align-items: center;
3030
justify-content: space-between;
@@ -42,8 +42,8 @@
4242
}
4343
.hero {
4444
text-align: center;
45-
padding: 3rem 0;
46-
margin-bottom: 2rem;
45+
padding: 3rem 0 2rem;
46+
margin-bottom: 1rem;
4747
}
4848
.hero h1 { font-size: 28px; margin: 0 0 0.5rem; color: #333; }
4949
.hero .tagline { font-size: 16px; color: #555; margin-bottom: 0.5rem; }
@@ -53,10 +53,16 @@
5353
margin: 1.5rem auto 0;
5454
padding: 12px 16px;
5555
background: #f5f5f5;
56-
border: 2px dashed #999;
56+
border: 2px solid #999;
5757
border-radius: 4px;
5858
}
5959
.search-hint { font-size: 11px; color: #888; margin-top: 6px; }
60+
.project-intro {
61+
padding: 1.5rem;
62+
background: #fff;
63+
border: 2px solid #999;
64+
border-radius: 4px;
65+
}
6066
.resource-grid {
6167
display: grid;
6268
grid-template-columns: repeat(2, 1fr);
@@ -66,7 +72,7 @@
6672
.resource-card {
6773
background: #fff;
6874
padding: 1.5rem;
69-
border: 2px dashed #999;
75+
border: 2px solid #999;
7076
border-radius: 4px;
7177
}
7278
.resource-card h3 { font-size: 16px; margin: 0 0 0.5rem; }
@@ -76,7 +82,7 @@
7682
margin-top: 4rem;
7783
padding: 2rem;
7884
background: #fff;
79-
border-top: 2px dashed #999;
85+
border-top: 2px solid #999;
8086
}
8187
.footer-grid {
8288
display: grid;
@@ -94,8 +100,10 @@
94100
<body>
95101
<header>
96102
<div>
97-
<div class="logo wf"></div>
98-
<span style="margin-left: 1rem;">MICROBE | Data Portal</span>
103+
<a href="https://www.microbeproject.eu/" style="display:inline-flex; align-items:center; text-decoration:none; color:inherit;">
104+
<img src="logo_microbe.png" alt="MICROBE logo" class="wf" style="height:36px; width:auto; border-radius:4px;">
105+
<span style="margin-left: 1rem;">MICROBE | Data Portal</span>
106+
</a>
99107
</div>
100108
<nav>
101109
<a href="#">Home</a>
@@ -120,15 +128,15 @@ <h1>MICROBE Data Portal</h1>
120128
<div class="wf-label">Master categories — Environments (3). Each splits into SynCom / Environmental samples.</div>
121129
<div class="resource-grid" style="grid-template-columns: repeat(3, 1fr);">
122130
<div class="resource-card">
123-
<h3>Environments: Soil</h3>
131+
<h3>Use case: Soil</h3>
124132
<p>SynCom · Environmental samples</p>
125133
</div>
126134
<div class="resource-card">
127-
<h3>Environments: Marine</h3>
135+
<h3>Use case: Marine</h3>
128136
<p>SynCom · Environmental samples</p>
129137
</div>
130138
<div class="resource-card">
131-
<h3>Environments: Seed</h3>
139+
<h3>Use case: Seed</h3>
132140
<p>SynCom · Environmental samples</p>
133141
</div>
134142
</div>
@@ -148,7 +156,7 @@ <h3>Read the documentation</h3>
148156
</div>
149157
<div style="margin-top: 2rem;">
150158
<div class="wf-label">Project intro</div>
151-
<div style="padding: 1.5rem; background: #fff; border: 2px dashed #999; border-radius: 4px;">
159+
<div class="project-intro">
152160
<p style="margin: 0;">MICROBE paves the way for innovative microbiome biobanking — maximal taxonomic & functional biodiversity preservation, SynCom assembly, operational blueprint.</p>
153161
<p style="margin: 1rem 0 0;">DOI / citation | ENA · Biosamples · MGnify · BioStudies (Biolog, 4MU analyses) · WorkflowHub</p>
154162
</div>

‎wireframes/02-sample-list.html‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
<style>
88
* { box-sizing: border-box; }
99
body { font-family: system-ui, sans-serif; margin: 0; padding: 0; background: #e8e8e8; color: #444; }
10-
.wf { border: 2px dashed #999; }
10+
.wf { border: 2px solid #999; }
1111
.wf-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
1212
header {
1313
background: #fff;
1414
padding: 1rem 2rem;
15-
border-bottom: 2px dashed #999;
15+
border-bottom: 2px solid #999;
1616
display: flex;
1717
align-items: center;
1818
justify-content: space-between;
@@ -33,15 +33,15 @@
3333
min-width: 200px;
3434
padding: 8px 12px;
3535
background: #f5f5f5;
36-
border: 2px dashed #999;
36+
border: 2px solid #999;
3737
}
3838
.filters { display: flex; gap: 0.5rem; }
39-
.filter-btn { padding: 8px 12px; background: #fff; border: 2px dashed #999; cursor: pointer; }
39+
.filter-btn { padding: 8px 12px; background: #fff; border: 2px solid #999; cursor: pointer; }
4040
table {
4141
width: 100%;
4242
border-collapse: collapse;
4343
background: #fff;
44-
border: 2px dashed #999;
44+
border: 2px solid #999;
4545
}
4646
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #ddd; }
4747
th { background: #f5f5f5; font-size: 11px; color: #888; text-transform: uppercase; }
@@ -54,13 +54,18 @@
5454
}
5555
.page-info { font-size: 13px; color: #666; }
5656
.page-nav { display: flex; gap: 0.5rem; }
57-
.page-nav button { padding: 6px 12px; background: #fff; border: 2px dashed #999; cursor: pointer; }
57+
.page-nav button { padding: 6px 12px; background: #fff; border: 2px solid #999; cursor: pointer; }
5858
.back { display: inline-block; margin-bottom: 1rem; color: #666; text-decoration: none; font-size: 13px; }
5959
</style>
6060
</head>
6161
<body>
6262
<header>
63-
<div><div class="logo wf" style="display:inline-block;"></div><span style="margin-left: 0.5rem;">MICROBE | Data Portal</span></div>
63+
<div>
64+
<a href="https://www.microbeproject.eu/" style="display:inline-flex; align-items:center; text-decoration:none; color:inherit;">
65+
<img src="logo_microbe.png" alt="MICROBE logo" class="wf" style="height:28px; width:auto; border-radius:4px;">
66+
<span style="margin-left: 0.5rem;">MICROBE | Data Portal</span>
67+
</a>
68+
</div>
6469
<nav>
6570
<a href="#">Home</a>
6671
<a href="#">Environments</a>
@@ -71,16 +76,16 @@
7176
<main>
7277
<a href="index.html" class="back">← Back to wireframe index</a>
7378
<h1 class="page-title">Browse samples — Soil</h1>
74-
<p style="margin: 0 0 1rem; color: #666; font-size: 14px;">Master category: Environments · Sub-type: SynCom | Environmental samples</p>
79+
<p style="margin: 0 0 1rem; color: #666; font-size: 14px;">Main category: Environments · Sub-type: SynCom | Environmental samples</p>
7580
<div class="toolbar">
7681
<div class="search-mini">
7782
<div class="wf-label">Search</div>
7883
[Search samples by accession, title, taxonomy...]
7984
</div>
8085
<div class="filters">
8186
<div class="wf-label">Filters</div>
82-
<button class="filter-btn">Master category (Soil, Marine, Seed)</button>
83-
<button class="filter-btn">SynCom / Environmental</button>
87+
<button class="filter-btn">Main category (Soil, Marine, Seed)</button>
88+
<button class="filter-btn">Sub-category (SynCom, Environmental)</button>
8489
<button class="filter-btn">Date range</button>
8590
</div>
8691
</div>
@@ -90,7 +95,7 @@ <h1 class="page-title">Browse samples — Soil</h1>
9095
<tr>
9196
<th>Accession</th>
9297
<th>Title</th>
93-
<th>Master category</th>
98+
<th>Main category</th>
9499
<th>Sub-type</th>
95100
<th>Date</th>
96101
</tr>

‎wireframes/03-sample-detail.html‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
<style>
88
* { box-sizing: border-box; }
99
body { font-family: system-ui, sans-serif; margin: 0; padding: 0; background: #e8e8e8; color: #444; }
10-
.wf { border: 2px dashed #999; }
10+
.wf { border: 2px solid #999; }
1111
.wf-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
1212
header {
1313
background: #fff;
1414
padding: 1rem 2rem;
15-
border-bottom: 2px dashed #999;
15+
border-bottom: 2px solid #999;
1616
display: flex;
1717
align-items: center;
1818
justify-content: space-between;
@@ -31,7 +31,7 @@
3131
.section {
3232
background: #fff;
3333
padding: 1.5rem;
34-
border: 2px dashed #999;
34+
border: 2px solid #999;
3535
border-radius: 4px;
3636
margin-bottom: 1rem;
3737
}
@@ -45,7 +45,7 @@
4545
padding: 10px;
4646
margin-bottom: 8px;
4747
background: #f5f5f5;
48-
border: 2px dashed #999;
48+
border: 2px solid #999;
4949
text-align: center;
5050
text-decoration: none;
5151
color: #444;
@@ -55,7 +55,12 @@
5555
</head>
5656
<body>
5757
<header>
58-
<div><div class="logo wf" style="display:inline-block;"></div><span style="margin-left: 0.5rem;">MICROBE | Data Portal</span></div>
58+
<div>
59+
<a href="https://www.microbeproject.eu/" style="display:inline-flex; align-items:center; text-decoration:none; color:inherit;">
60+
<img src="logo_microbe.png" alt="MICROBE logo" class="wf" style="height:28px; width:auto; border-radius:4px;">
61+
<span style="margin-left: 0.5rem;">MICROBE | Data Portal</span>
62+
</a>
63+
</div>
5964
<nav>
6065
<a href="#">Home</a>
6166
<a href="#">Environments</a>
@@ -75,7 +80,7 @@ <h1 class="page-title">Soil SynCom — Trial A, replicate 7</h1>
7580
<h3>Sample metadata</h3>
7681
<table class="meta-table">
7782
<tr><td>Accession</td><td>SAMEA1234567</td></tr>
78-
<tr><td>Master category</td><td>Soil</td></tr>
83+
<tr><td>Main category</td><td>Soil</td></tr>
7984
<tr><td>Sub-type</td><td>SynCom</td></tr>
8085
<tr><td>Collection date</td><td>2024-01-15</td></tr>
8186
<tr><td>Study</td><td>MICROBE Soil Trial A</td></tr>

‎wireframes/05-api-docs.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
<style>
88
* { box-sizing: border-box; }
99
body { font-family: system-ui, sans-serif; margin: 0; padding: 0; background: #e8e8e8; color: #444; }
10-
.wf { border: 2px dashed #999; }
10+
.wf { border: 2px solid #999; }
1111
.wf-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
1212
header {
1313
background: #fff;
1414
padding: 1rem 2rem;
15-
border-bottom: 2px dashed #999;
15+
border-bottom: 2px solid #999;
1616
display: flex;
1717
align-items: center;
1818
justify-content: space-between;
@@ -25,7 +25,7 @@
2525
.toc {
2626
background: #fff;
2727
padding: 1rem;
28-
border: 2px dashed #999;
28+
border: 2px solid #999;
2929
border-radius: 4px;
3030
height: fit-content;
3131
}
@@ -34,7 +34,7 @@
3434
.section {
3535
background: #fff;
3636
padding: 1.5rem;
37-
border: 2px dashed #999;
37+
border: 2px solid #999;
3838
border-radius: 4px;
3939
margin-bottom: 1rem;
4040
}
@@ -45,23 +45,28 @@
4545
font-size: 13px;
4646
padding: 10px 12px;
4747
background: #f5f5f5;
48-
border: 2px dashed #999;
48+
border: 2px solid #999;
4949
margin: 0.5rem 0;
5050
}
5151
.code-block {
5252
font-family: monospace;
5353
font-size: 12px;
5454
padding: 1rem;
5555
background: #f5f5f5;
56-
border: 2px dashed #999;
56+
border: 2px solid #999;
5757
overflow-x: auto;
5858
}
5959
.back { display: inline-block; margin-bottom: 1rem; color: #666; text-decoration: none; font-size: 13px; }
6060
</style>
6161
</head>
6262
<body>
6363
<header>
64-
<div><div class="logo wf" style="display:inline-block;"></div><span style="margin-left: 0.5rem;">MICROBE | Data Portal</span></div>
64+
<div>
65+
<a href="https://www.microbeproject.eu/" style="display:inline-flex; align-items:center; text-decoration:none; color:inherit;">
66+
<img src="logo_microbe.png" alt="MICROBE logo" class="wf" style="height:28px; width:auto; border-radius:4px;">
67+
<span style="margin-left: 0.5rem;">MICROBE | Data Portal</span>
68+
</a>
69+
</div>
6570
<nav>
6671
<a href="#">Home</a>
6772
<a href="#">Environments</a>

‎wireframes/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@
4848
<h1>MICROBE Data Portal Wireframes</h1>
4949
<p class="subtitle">Microbiome biobanking — Environments (soil, marine, seed) · SynCom / Environmental samples</p>
5050
<ul class="wireframe-list">
51-
<li><a href="01-homepage.html">01 — Homepage <small>Hero, search, master category cards, footer</small></a></li>
52-
<li><a href="02-sample-list.html">02 — Sample Browse (List) <small>Table, filters (Master category, SynCom vs Environmental), pagination</small></a></li>
51+
<li><a href="01-homepage.html">01 — Homepage <small>Hero, search, main category cards, footer</small></a></li>
52+
<li><a href="02-sample-list.html">02 — Sample Browse (List) <small>Table, filters (Main category, SynCom vs Environmental), pagination</small></a></li>
5353
<li><a href="03-sample-detail.html">03 — Sample Detail <small>Metadata, BioStudies links (Biolog, 4MU), related data</small></a></li>
5454
<li><a href="05-api-docs.html">04 — API / Documentation <small>Endpoint browser, code examples, BioStudies</small></a></li>
5555
</ul>

‎wireframes/logo_microbe.png‎

31.9 KB
Loading

0 commit comments

Comments
 (0)