Skip to content

Commit

Permalink
Format Instruction Page
Browse files Browse the repository at this point in the history 
Format Instruction Page
  • Loading branch information
@zain55337
zain55337 committed Jul 11, 2023
1 parent 9137c6c commit 7d67b20
Show file tree
Hide file tree
Showing 5 changed files with 236 additions and 298 deletions.
4 changes: 2 additions & 2 deletions src/javascript/components/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@ const App = () => {
id="footer"
data-aos="fade-up"
data-aos-easing="ease-in-out"
data-aos-duration="500"
data-aos-duration="200"
>
<FooterBarWithRouter />
</footer>
<a

Check failure on line 63 in src/javascript/components/App.jsx

View workflow job for this annotation

GitHub Actions / build 

The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
href="/#"
href="#"
className="back-to-top d-flex align-items-center justify-content-center"
>
<i className="bi bi-arrow-up-short" />
Expand Down
310 changes: 216 additions & 94 deletions src/javascript/components/GenerateCSV.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,109 +7,231 @@ const GenerateCSV = () => {
});

return (
<div className="row">
<div className="col-12">
<h1 className="my-5">Format instructions</h1>

<p className="lead my-5">
Generate a CSV file containing the spectral power distribution of all
of the measurements taken during the experiment.
<>
<main id="main">
<section className="portfolio">
<div className="container">
<div className="section-title">
<h2>Format Instructions</h2>
<p>
Generate a CSV file containing the spectral power distribution
of all of the measurements taken during the experiment.
</p>
</div>
</div>
</section>
<section className="why-us pt-2">
<div className="container p-5">
<div className="row">
<div className="section-title">
<h2>Specification</h2>
<p>
The first column contains the wavelength in nanometers. The
subsequent columns contain the spectral (ir)radiance for each
of the measurements taken during the experiment. Your data can
contain up to 5 measurements:
</p>
</div>
<div className="row px-5">
<div className="col-md-12">
<table className="table table-striped table-bordered table-hover generate-csv-table mb-5">
<thead className="table-dark">
<tr>
<th>Column</th>
<th>Required?</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Yes</td>
<td>
Wavelength in nanometers. This should be restricted to
the visible light range (380-780 nm) and contain only
integer wavelengths (e.g. 380, 385, 390 ...).
</td>
</tr>
<tr>
<td>2</td>
<td>Yes</td>
<td>
First measurement spectral (ir)radiance in µW/mW/W per
mm²/cm²/m² (per sr)
</td>
</tr>
<tr>
<td>3</td>
<td>No</td>
<td>
Second measurement spectral (ir)radiance in µW/mW/W
per mm²/cm²/m² (per sr)
</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>N</td>
<td>No</td>
<td>
Nth measurement spectral (ir)radiance in µW/mW/W per
mm²/cm²/m² (per sr)
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="row">
<div className="section-title">
<h2>Example</h2>
</div>
<div className="row px-5">
<div className="col-md-12 text-center">
<p>Wavelength,Measurement 1,Measurement 2,Measurement 3</p>
<p>380,1.87,1.18,0.82</p>
<p>385,2.36,1.48,1.02</p>
<p>...</p>
<p>775,0.52,0.33,0.28</p>
<p>780,0.43,0.27,0.21</p>
</div>
<div className="col-md-12 text-center">
<p>
To download example spectral power distribution, click on
Download Button.
</p>
<Link
download="sample.csv"
href="/examples/sample.csv"
className="btn btn-primary"
>
Download
</Link>
<p className="pt-3">
Please note that the accuracy of calculations implemented
here depends on the uncertainties present in the uploaded
data. For more information, please see{" "}
<a href="/about">the about page</a>.
</p>
</div>
</div>
</div>
</div>
</section>
<p className="mb-5 text-center">
<Link to="/upload" className="btn btn-primary">
Next
</Link>
</p>
</main>
</>
// <div className="row">
// <div className="col-12">
// <h1 className="my-5">Format instructions</h1>

<h2 className="mb-3">Specification</h2>
// <p className="lead my-5">
// Generate a CSV file containing the spectral power distribution of all
// of the measurements taken during the experiment.
// </p>

<p className="mb-3">
The first column contains the wavelength in nanometers. The subsequent
columns contain the spectral (ir)radiance for each of the measurements
taken during the experiment. Your data can contain up to 5
measurements:
</p>
// <h2 className="mb-3">Specification</h2>

<table className="table mb-5">
<thead>
<tr>
<th>Column</th>
<th>Required?</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Yes</td>
<td>
Wavelength in nanometers. This should be restricted to the
visible light range (380-780 nm) and contain only integer
wavelengths (e.g. 380, 385, 390 ...).
</td>
</tr>
<tr>
<td>2</td>
<td>Yes</td>
<td>
First measurement spectral (ir)radiance in µW/mW/W per
mm²/cm²/m² (per sr)
</td>
</tr>
<tr>
<td>3</td>
<td>No</td>
<td>
Second measurement spectral (ir)radiance in µW/mW/W per
mm²/cm²/m² (per sr)
</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>N</td>
<td>No</td>
<td>
Nth measurement spectral (ir)radiance in µW/mW/W per mm²/cm²/m²
(per sr)
</td>
</tr>
</tbody>
</table>
// <p className="mb-3">
// The first column contains the wavelength in nanometers. The subsequent
// columns contain the spectral (ir)radiance for each of the measurements
// taken during the experiment. Your data can contain up to 5
// measurements:
// </p>

<h3>Example</h3>
// <table className="table mb-5">
// <thead>
// <tr>
// <th>Column</th>
// <th>Required?</th>
// <th>Description</th>
// </tr>
// </thead>
// <tbody>
// <tr>
// <td>1</td>
// <td>Yes</td>
// <td>
// Wavelength in nanometers. This should be restricted to the
// visible light range (380-780 nm) and contain only integer
// wavelengths (e.g. 380, 385, 390 ...).
// </td>
// </tr>
// <tr>
// <td>2</td>
// <td>Yes</td>
// <td>
// First measurement spectral (ir)radiance in µW/mW/W per
// mm²/cm²/m² (per sr)
// </td>
// </tr>
// <tr>
// <td>3</td>
// <td>No</td>
// <td>
// Second measurement spectral (ir)radiance in µW/mW/W per
// mm²/cm²/m² (per sr)
// </td>
// </tr>
// <tr>
// <td>...</td>
// <td>...</td>
// <td>...</td>
// </tr>
// <tr>
// <td>N</td>
// <td>No</td>
// <td>
// Nth measurement spectral (ir)radiance in µW/mW/W per mm²/cm²/m²
// (per sr)
// </td>
// </tr>
// </tbody>
// </table>

<pre>
<code>
{`Wavelength,Measurement 1,Measurement 2,Measurement 3
380,1.87,1.18,0.82
385,2.36,1.48,1.02
...
775,0.52,0.33,0.28
780,0.43,0.27,0.21
`}
</code>
</pre>
// <h3>Example</h3>

<ul>
<li>
<a download="sample.csv" href="/examples/sample.csv">
Download example spectral power distribution
</a>
</li>
</ul>
// <pre>
// <code>
// {`Wavelength,Measurement 1,Measurement 2,Measurement 3
// 380,1.87,1.18,0.82
// 385,2.36,1.48,1.02
// ...
// 775,0.52,0.33,0.28
// 780,0.43,0.27,0.21
// `}
// </code>
// </pre>

<p>
Please note that the accuracy of calculations implemented here depends
on the uncertainties present in the uploaded data. For more
information, please see <a href="/about">the about page</a>.
</p>
// <ul>
// <li>
// <a download="sample.csv" href="/examples/sample.csv">
// Download example spectral power distribution
// </a>
// </li>
// </ul>

<p className="my-5">
<Link to="/upload" className="btn btn-primary">
Next
</Link>
</p>
</div>
</div>
// <p>
// Please note that the accuracy of calculations implemented here depends
// on the uncertainties present in the uploaded data. For more
// information, please see <a href="/about">the about page</a>.
// </p>

// <p className="my-5">
// <Link to="/upload" className="btn btn-primary">
// Next
// </Link>
// </p>
// </div>
// </div>
);
};

Expand Down
Loading

0 comments on commit 7d67b20

Please sign in to comment.