Automated-Silico-In-Vitro-Platform/UI-ExperimentDesignStudioLayout.html at main · cssamLabs/Automated-Silico-In-Vitro-Platform · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Experiment Design Studio (EDS) UI Layout Concept</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 20px;
        background-color: #f4f4f4;
        color: #333;
      }
      .container {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      .panel {
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 15px;
      }
      .sidebar-left {
        flex-basis: 20%;
        background-color: #e9e9e9;
        min-height: 600px;
      }
      .main-area {
        flex-basis: 55%;
        background-color: #ffffff;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 0 20px;
      }
      .sidebar-right {
        flex-basis: 25%;
        background-color: #e9e9e9;
        min-height: 600px;
      }
      h2,
      h3 {
        color: #0056b3;
      }
      .step {
        padding: 10px;
        margin-bottom: 5px;
        cursor: pointer;
      }
      .step.active {
        background-color: #0056b3;
        color: white;
        border-radius: 4px;
      }
      .validation-item.success {
        color: green;
      }
      .validation-item.error {
        color: red;
      }
      .validation-item.warning {
        color: orange;
      }
    </style>
  </head>
  <body>
    <h1>Experiment Design Studio (EDS) UI Layout Concept</h1>

    <div class="container">
      <!-- Left Sidebar: Workflow Navigator -->
      <div class="sidebar-left panel">
        <h2>Workflow Navigator</h2>
        <div class="step active">Step 1: Define Goal</div>
        <div class="step">Step 2: Select Materials</div>
        <div class="step">Step 3: Configure Parameters</div>
        <div class="step">Step 4: Review & Submit</div>
        <hr />
        <button>[Save Draft]</button>
      </div>

      <!-- Main Area: Interactive Configuration -->
      <div class="main-area panel">
        <h2>Main Configuration Area (Step 1 Active)</h2>

        <!-- Content changes based on active step -->
        <div id="step1-content">
          <h3>Step 1: Project & Goal Definition</h3>
          <p>
            <strong>Goal Selector:</strong> Dropdown menu for high-level assay
            types (e.g., "General Toxicity," "Dose Response").
          </p>
          <hr />
          <h3>Modeling Service Input Panel</h3>
          <p>AI Suggestion: 50 candidates prioritized by Model v4.2</p>
          <button>[Auto-Fill Materials]</button>
        </div>

        <!-- Step 2-4 content would replace the above div in a real app -->
      </div>

      <!-- Right Sidebar: Summary & Validation -->
      <div class="sidebar-right panel">
        <h2>Summary & Validation</h2>
        <h3>Experiment Summary</h3>
        <p><strong>Name:</strong> Toxicity Screen #001</p>
        <p><strong>Goal:</strong> 96-well plate test</p>
        <hr />
        <h3>Validation Status (Real-time)</h3>
        <ul>
          <li class="validation-item success">
            ✅ <strong>Available:</strong> Compound X (enough stock)
          </li>
          <li class="validation-item error">
            ❌ <strong>OUT OF STOCK:</strong> Cell Line A (0 units left)
          </li>
          <li class="validation-item warning">
            ⚠️ <strong>Warning:</strong> Incubation time is outside model's
            optimal range
          </li>
        </ul>
        <hr />
        <p><strong>Total Items:</strong> 5 materials selected</p>
        <button
          style="
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            margin-top: 20px;
          "
        >
          [Submit Experiment]
        </button>
      </div>
    </div>
  </body>
</html>