Skip to content

GitLab

Commit 6be17fe5 authored by Weiser's avatar Weiser
Browse files

csssss

parent c326d65d
Hide whitespace changes
Inline Side-by-side
frontend/src/components/weather/currentData.css
View file @ 6be17fe5
......@@ -22,6 +22,30 @@
cursor: pointer;
transition: background-color 0.3s;
}
.fw1 {
display: block;
margin-bottom: 5px;
}
.fw1 {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
display: grid;
text-align: center;
}
.fw1 {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.output {
margin-top: 40px;
......
frontend/src/components/weather/currentData.js
View file @ 6be17fe5
......@@ -301,8 +301,10 @@ const Currentdata = (props) => {
<br />
</div>
</div>
<div>
<label for="units">Choose a unit:</label>
<div class="fw1">
<div class="h3">
<h3>Choose a unit</h3>
</div>
<select name="unnits" id="units">
<option value="world">Rest of The World</option>
<option value="american">
......@@ -312,20 +314,36 @@ const Currentdata = (props) => {
</div>
<div class="generate">
<button className="thq-button-filled" onClick={getData}>
Generate
Generate your data
</button>
</div>
<br />
<div class="fw1">
<div class="h3">
<h3>Choose a Fileformat</h3>
</div>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download your data
</button>
<div id="apiUrl">
<div class="fw1">
<div class="h3">
<h3>Your Generated apiUrl with your custom Data</h3>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
</div>
);
......
frontend/src/components/weather/historicalWeatherData.css
View file @ 6be17fe5
......@@ -22,6 +22,30 @@
cursor: pointer;
transition: background-color 0.3s;
}
.fw1 {
display: block;
margin-bottom: 5px;
}
.fw1 {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
display:grid;
}
.fw1 {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.output {
margin-top: 40px;
......@@ -67,6 +91,3 @@ display: flex;
.h3{
margin-bottom: 10px;
}
.generate{
margin-top: 20px;
}
\ No newline at end of file
frontend/src/components/weather/historicalWeatherData.js
View file @ 6be17fe5
......@@ -305,26 +305,33 @@ const HistoricalWeatherData = (props) => {
</div>
<button className="thq-button-filled" onClick={getData}>
Generate
Generate your data
</button>
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
<label for="fileformat">Choose a File Format:</label>
<div class="fw1">
<div class="h3">
<h3>Choose a Fileformat</h3>
</div>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download
Download your data
</button>
<div id="apiUrl">
<label>API URL:</label>
<div class="fw1">
<div class="h3">
<h3>Your Generated apiUrl with your custom Data</h3>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
<div class="output">
<h2>Output:</h2>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
<pre id="weatherData"></pre>
</div>
</div>
</div>
......
frontend/src/components/weather/weatherForecastData.css
View file @ 6be17fe5
......@@ -22,6 +22,30 @@
cursor: pointer;
transition: background-color 0.3s;
}
.fw1 {
display: block;
margin-bottom: 5px;
}
.fw1 {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
display:grid;
text-align: center;
}
.fw1 {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.output {
margin-top: 40px;
......
frontend/src/components/weather/weatherForecastData.js
View file @ 6be17fe5
......@@ -407,12 +407,17 @@ const WeatherForecastData = (props) => {
<label for="alerts">Alerts</label>
</div>
</div>
<div>
<label for="days">Days:</label>
<div class="fw1">
<div class="h3">
<h3>How many forecast days do you want?</h3>
</div>
<label for="days"></label>
<input type="range" id="days" name="days" min="1" max="7" />
</div>
<div>
<label for="units">Choose a unit:</label>
<div class="fw1">
<div class="h3">
<h3>Choose a Unit</h3>
</div>
<select name="unnits" id="units">
<option value="world">Rest of The World</option>
<option value="american">
......@@ -422,34 +427,36 @@ const WeatherForecastData = (props) => {
</div>
<div>
<button className="thq-button-filled" onClick={getData}>
Generate
Generate your data
</button>
</div>
<br />
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
<label for="fileformat">Choose a File Format:</label>
<div class="fw1">
<div class="h3">
<h3>Choose a Fileformat</h3>
</div>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download
Download your data
</button>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input
className="input"
type="text"
id="apiUrloutput"
readOnly
/>
<div class="fw1">
<div class="h3">
<h3>Your Generated apiUrl with your custom Data</h3>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
</div>
</div>
);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal