Skip to content

GitLab

Commit 9a61c2f6 authored by EnesKarakas's avatar EnesKarakas
Browse files

And now we begin

parent 9810acf2
Hide whitespace changes
Inline Side-by-side
.gitlab-ci.yml deleted 100644 → 0
View file @ 9810acf2
# This file is a template, and might need editing before it works on your project.
# To contribute improvements to CI/CD templates, please follow the Development guide at:
# https://docs.gitlab.com/ee/development/cicd/templates.html
# This specific template is located at:
# https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/npm.gitlab-ci.yml
publish:
image: node:latest
stage: deploy
rules:
- if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH || $CI_COMMIT_REF_NAME =~ /^v\d+\.\d+\.\d+.*$/
changes:
- package.json
script:
# If no .npmrc is included in the repo, generate a temporary one that is configured to publish to GitLab's NPM registry
- |
if [[ ! -f .npmrc ]]; then
echo 'No .npmrc found! Creating one now. Please review the following link for more information: https://docs.gitlab.com/ee/user/packages/npm_registry/index.html#project-level-npm-endpoint-1'
{
echo "@${CI_PROJECT_ROOT_NAMESPACE}:registry=${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/npm/"
echo "${CI_API_V4_URL#http*:}/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=\${CI_JOB_TOKEN}"
} >> .npmrc
fi
- echo "Created the following .npmrc:"; cat .npmrc
# Extract a few values from package.json
- NPM_PACKAGE_NAME=$(node -p "require('./package.json').name")
- NPM_PACKAGE_VERSION=$(node -p "require('./package.json').version")
# Validate that the package name is properly scoped to the project's root namespace.
# For more information, see https://docs.gitlab.com/ee/user/packages/npm_registry/#package-naming-convention
- |
if [[ ! $NPM_PACKAGE_NAME =~ ^@$CI_PROJECT_ROOT_NAMESPACE/ ]]; then
echo "Invalid package scope! Packages must be scoped in the root namespace of the project, e.g. \"@${CI_PROJECT_ROOT_NAMESPACE}/${CI_PROJECT_NAME}\""
echo 'For more information, see https://docs.gitlab.com/ee/user/packages/npm_registry/#package-naming-convention'
exit 1
fi
# Compare the version in package.json to all published versions.
# If the package.json version has not yet been published, run `npm publish`.
- |
if [[ $(npm view "${NPM_PACKAGE_NAME}" versions) != *"'${NPM_PACKAGE_VERSION}'"* ]]; then
npm publish
echo "Successfully published version ${NPM_PACKAGE_VERSION} of ${NPM_PACKAGE_NAME} to GitLab's NPM registry: ${CI_PROJECT_URL}/-/packages"
else
echo "Version ${NPM_PACKAGE_VERSION} of ${NPM_PACKAGE_NAME} has already been published, so no new version has been published."
fi
frontend/public/index.html
View file @ 9a61c2f6
...@@ -2,12 +2,88 @@ ...@@ -2,12 +2,88 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>Flat Dizzy Grasshopper</title> <title>Weather App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:card" content="summary_large_image" />
<style data-tag="reset-style-sheet"> <style data-tag="reset-style-sheet">
html { line-height: 1.15;}body { margin: 0;}* { box-sizing: border-box; border-width: 0; border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption { margin: 0; padding: 0;}button { background-color: transparent;}button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}button,select { text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus { outline: 1px dotted ButtonText;}a { color: inherit; text-decoration: inherit;}input { padding: 2px 4px;}img { display: block;}html { scroll-behavior: smooth } html {
line-height: 1.15;
}
body {
margin: 0;
}
* {
box-sizing: border-box;
border-width: 0;
border-style: solid;
}
p,
li,
ul,
pre,
div,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote,
figcaption {
margin: 0;
padding: 0;
}
button {
background-color: transparent;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focus,
[type="button"]:-moz-focus,
[type="reset"]:-moz-focus,
[type="submit"]:-moz-focus {
outline: 1px dotted ButtonText;
}
a {
color: inherit;
text-decoration: inherit;
}
input {
padding: 2px 4px;
}
img {
display: block;
}
html {
scroll-behavior: smooth;
}
</style> </style>
<style data-tag="default-style-sheet"> <style data-tag="default-style-sheet">
html { html {
...@@ -17,7 +93,7 @@ ...@@ -17,7 +93,7 @@
body { body {
font-weight: 400; font-weight: 400;
font-style:normal; font-style: normal;
text-decoration: none; text-decoration: none;
text-transform: none; text-transform: none;
letter-spacing: normal; letter-spacing: normal;
...@@ -46,6 +122,10 @@ ...@@ -46,6 +122,10 @@
rel="stylesheet" rel="stylesheet"
href="https://unpkg.com/@teleporthq/teleport-custom-scripts/dist/style.css" href="https://unpkg.com/@teleporthq/teleport-custom-scripts/dist/style.css"
/> />
<link
rel="icon"
href="external/whatsapp bild 2024-03-19 um 17.00.17_eac967f9-1500h.jpg"
/>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
frontend/src/components/logos1.css
View file @ 9a61c2f6
...@@ -18,23 +18,15 @@ ...@@ -18,23 +18,15 @@
} }
.logos1-logo1 { .logos1-logo1 {
object-fit: contain; object-fit: contain;
width: 40%;
background-color: var(--dl-color-theme-neutral-dark);
} }
.logos1-logo2 { .logos1-logo2 {
object-fit: contain; object-fit: contain;
width: 40%;
} }
.logos1-logo3 {
object-fit: contain; @media (max-width: 767px) {
}
.logos1-logo4 {
object-fit: contain;
}
.logos1-logo5 {
object-fit: contain;
}
.logos1-logo6 {
object-fit: contain;
}
@media(max-width: 767px) {
.logos1-container { .logos1-container {
gap: var(--dl-space-space-twounits); gap: var(--dl-space-space-twounits);
} }
......
frontend/src/components/logos1.js
View file @ 9a61c2f6
import React from 'react' import React from "react";
import PropTypes from 'prop-types' import PropTypes from "prop-types";
import './logos1.css' import "./logos1.css";
const Logos1 = (props) => { const Logos1 = (props) => {
return ( return (
<div className="logos1-container thq-section-padding"> <div className="logos1-container thq-section-padding">
<div className="logos1-max-width thq-section-max-width"> <div className="logos1-max-width thq-section-max-width">
<h2 className="logos1-text thq-heading-2">{props.heading1}</h2> <h2 className="logos1-text thq-heading-2">{props.heading1}</h2>
<div className="thq-grid-6"> <div className="thq-grid-2">
<img <img
alt={props.logo1Alt} alt={props.logo1Alt}
src={props.logo1Src} src={props.logo1Src}
className="logos1-logo1 thq-img-ratio-16-9" className="logos1-logo1 thq-img-ratio-16-9"
onClick={() => window.open("https://www.weatherapi.com/", "_blank")}
/> />
<img <img
alt={props.logo2Alt} alt={props.logo2Alt}
src={props.logo2Src} src={props.logo2Src}
className="logos1-logo2 thq-img-ratio-16-9" className="logos1-logo2 thq-img-ratio-16-9"
/> onClick={() => window.open("https://open-meteo.com/", "_blank")}
<img
alt={props.logo3Alt}
src={props.logo3Src}
className="logos1-logo3 thq-img-ratio-16-9"
/>
<img
alt={props.logo4Alt}
src={props.logo4Src}
className="logos1-logo4 thq-img-ratio-16-9"
/>
<img
alt={props.logo5Alt}
src={props.logo5Src}
className="logos1-logo5 thq-img-ratio-16-9"
/>
<img
alt={props.logo6Alt}
src={props.logo6Src}
className="logos1-logo6 thq-img-ratio-16-9"
/> />
</div> </div>
</div> </div>
</div> </div>
) );
} };
Logos1.defaultProps = { Logos1.defaultProps = {
logo2Alt: 'Logo2',
heading1: heading1:
"Trusted by the world's best companies social proof to build credibility", "Highlighted weather data sourced from leading APIs providing comprehensive meteorological insight.",
logo1Src: logo1Src: "https://cdn.weatherapi.com/v4/images/weatherapi_logo.png",
'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/838a2368-6357-4526-a3f3-57fee519d8ec?org_if_sml=1&q=80&force_format=original', logo1Alt: "Logo1",
logo3Alt: 'Logo3',
logo4Alt: 'Logo4',
logo5Src:
'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/97476fa7-08ff-463d-99d2-c4ceb6ae9222?org_if_sml=1&q=80&force_format=original',
logo4Src:
'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/c78f8e14-cf7b-4e8b-821c-3d6b89ed8db4?org_if_sml=1&q=80&force_format=original',
logo3Src:
'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/49215785-2559-40a7-be66-9dd3bdf5eb7a?org_if_sml=1&q=80&force_format=original',
logo5Alt: 'Logo5',
logo6Alt: 'Logo6',
logo6Src:
'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/07f56a12-c428-4896-8819-194d1fef39f2?org_if_sml=1&q=80&force_format=original',
logo1Alt: 'Weather App Logo',
logo2Src: logo2Src:
'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/2cf31efa-183b-4247-920e-60025ea69bfe?org_if_sml=1&q=80&force_format=original', "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAAJ1BMVEVHcEz/iAD/iAD/jADoegR8OA4gABJEDxC4XQqbSwxjJw8tABHPawfzL3XvAAAAAnRSTlMApz4h+3MAAACTSURBVHgBY2BUQgICDELIXEUGJRRAXa6xspGSMpAAIiDXJCy9WclydfaS9uwgINd7Z1emkVVl5+6drbuMGJRXOxuHOVkVG3c3A2kGlVQjJbfJVsVAQrntEINNhpGSdjCQqwbm6qBwoYphXKhRcK6Sd0VrphGCa7IM6AzTxUrqk5WOA7nKRkDHQZES7UIDLdjRIgUAOuhTEb+UHIIAAAAASUVORK5CYII=",
} logo2Alt: "Logo2",
};
Logos1.propTypes = { Logos1.propTypes = {
logo2Alt: PropTypes.string,
heading1: PropTypes.string, heading1: PropTypes.string,
logo1Src: PropTypes.string, logo1Src: PropTypes.string,
logo3Alt: PropTypes.string,
logo4Alt: PropTypes.string,
logo5Src: PropTypes.string,
logo4Src: PropTypes.string,
logo3Src: PropTypes.string,
logo5Alt: PropTypes.string,
logo6Alt: PropTypes.string,
logo6Src: PropTypes.string,
logo1Alt: PropTypes.string, logo1Alt: PropTypes.string,
logo2Src: PropTypes.string, logo2Src: PropTypes.string,
} logo2Alt: PropTypes.string,
};
export default Logos1 export default Logos1;
frontend/src/components/navbar4.css
View file @ 9a61c2f6
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
left: 0px; left: 0px;
position: static; position: static;
} }
@media(max-width: 767px) { @media (max-width: 767px) {
.navbar4-navbar-interactive { .navbar4-navbar-interactive {
padding-left: var(--dl-space-space-twounits); padding-left: var(--dl-space-space-twounits);
padding-right: var(--dl-space-space-twounits); padding-right: var(--dl-space-space-twounits);
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
justify-content: center; justify-content: center;
} }
} }
@media(max-width: 479px) { @media (max-width: 479px) {
.navbar4-navbar-interactive { .navbar4-navbar-interactive {
padding: var(--dl-space-space-unit); padding: var(--dl-space-space-unit);
} }
......
frontend/src/components/navbar4.js
View file @ 9a61c2f6
import React from 'react' import React from "react";
import PropTypes from 'prop-types' import PropTypes from "prop-types";
import './navbar4.css' import "./navbar4.css";
const Navbar4 = (props) => { const Navbar4 = (props) => {
return ( return (
...@@ -15,10 +15,20 @@ const Navbar4 = (props) => { ...@@ -15,10 +15,20 @@ const Navbar4 = (props) => {
/> />
<div data-thq="thq-navbar-nav" className="navbar4-desktop-menu"> <div data-thq="thq-navbar-nav" className="navbar4-desktop-menu">
<nav className="navbar4-links"> <nav className="navbar4-links">
<span className="thq-link thq-body-small">{props.link1}</span> <span
className="thq-link thq-body-small"
onClick={() => (window.location.href = "/")}
>
{props.link1}
</span>
<span className="thq-link thq-body-small">{props.link2}</span> <span className="thq-link thq-body-small">{props.link2}</span>
<span className="thq-link thq-body-small">{props.link3}</span> <span className="thq-link thq-body-small">{props.link3}</span>
<span className="thq-link thq-body-small">{props.link4}</span> <span
className="thq-link thq-body-small"
onClick={() => (window.location.href = "/data")}
>
{props.link4}
</span>
<span className="thq-link thq-body-small">{props.link5}</span> <span className="thq-link thq-body-small">{props.link5}</span>
</nav> </nav>
<div className="navbar4-buttons"> <div className="navbar4-buttons">
...@@ -26,68 +36,30 @@ const Navbar4 = (props) => { ...@@ -26,68 +36,30 @@ const Navbar4 = (props) => {
<button className="thq-button-outline">{props.action2}</button> <button className="thq-button-outline">{props.action2}</button>
</div> </div>
</div> </div>
<div data-thq="thq-burger-menu" className="navbar4-burger-menu">
<svg viewBox="0 0 1024 1024" className="navbar4-icon">
<path
d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
className=""
></path>
</svg>
</div>
<div data-thq="thq-mobile-menu" className="navbar4-mobile-menu">
<div className="navbar4-nav">
<div className="navbar4-top">
<img
alt={props.logoAlt}
src={props.logoSrc}
className="navbar4-logo"
/>
<div data-thq="thq-close-menu" className="navbar4-close-menu">
<svg viewBox="0 0 1024 1024" className="navbar4-icon2">
<path
d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
className=""
></path>
</svg>
</div>
</div>
<nav className="navbar4-links1">
<span className="thq-link thq-body-small">{props.link1}</span>
<span className="thq-link thq-body-small">{props.link2}</span>
<span className="thq-link thq-body-small">{props.link3}</span>
<span className="thq-link thq-body-small">{props.link4}</span>
<span className="thq-link thq-body-small">{props.link5}</span>
</nav>
</div>
<div className="navbar4-buttons1">
<button className="thq-button-filled">Login</button>
<button className="thq-button-outline">Register</button>
</div>
</div>
</header> </header>
</div> </div>
) );
} };
Navbar4.defaultProps = { Navbar4.defaultProps = {
link5: 'Link5', link5: "Link5",
link4: 'Link4', link4: "Data",
link3: 'Contact', link3: "Contact",
link2: 'About', link2: "About",
link1: 'Home', link1: "Home",
logoAlt: 'Weather App', logoAlt: "Weather App",
logoSrc: logoSrc:
'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/fac575ac-7a41-484f-b7ac-875042de11f8?org_if_sml=1&force_format=original', "https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/fac575ac-7a41-484f-b7ac-875042de11f8?org_if_sml=1&force_format=original",
action2: '/about', action2: "/about",
action1: '/', action1: "/",
imageSrc: '23887698-7562-4cff-bf5f-d07a1767f79b', imageSrc: "23887698-7562-4cff-bf5f-d07a1767f79b",
imageAlt: 'image', imageAlt: "image",
imageSrc1: '23887698-7562-4cff-bf5f-d07a1767f79b', imageSrc1: "23887698-7562-4cff-bf5f-d07a1767f79b",
imageAlt1: 'image', imageAlt1: "image",
image1Src: image1Src:
'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/fac575ac-7a41-484f-b7ac-875042de11f8?org_if_sml=1&force_format=original', "https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/fac575ac-7a41-484f-b7ac-875042de11f8?org_if_sml=1&force_format=original",
rootClassName: '', rootClassName: "",
} };
Navbar4.propTypes = { Navbar4.propTypes = {
link5: PropTypes.string, link5: PropTypes.string,
...@@ -105,6 +77,6 @@ Navbar4.propTypes = { ...@@ -105,6 +77,6 @@ Navbar4.propTypes = {
imageAlt1: PropTypes.string, imageAlt1: PropTypes.string,
image1Src: PropTypes.string, image1Src: PropTypes.string,
rootClassName: PropTypes.string, rootClassName: PropTypes.string,
} };
export default Navbar4 export default Navbar4;
frontend/src/index.js
View file @ 9a61c2f6
import React from 'react' import React from "react";
import ReactDOM from 'react-dom' import ReactDOM from "react-dom";
import { import {
BrowserRouter as Router, BrowserRouter as Router,
Route, Route,
Switch, Switch,
Redirect, Redirect,
} from 'react-router-dom' } from "react-router-dom";
import './style.css' import "./style.css";
import Home from './views/home' import Home from "./views/home";
import NotFound from './views/not-found' import Data from "./views/data";
import NotFound from "./views/not-found";
const App = () => { const App = () => {
return ( return (
<Router> <Router>
<Switch> <Switch>
<Route component={Home} exact path="/" /> <Route component={Home} exact path="/" />
<Route component={Data} exact path="/data" />
<Route component={NotFound} path="**" /> <Route component={NotFound} path="**" />
<Redirect to="**" /> <Redirect to="**" />
</Switch> </Switch>
</Router> </Router>
) );
} };
ReactDOM.render(<App />, document.getElementById('app')) ReactDOM.render(<App />, document.getElementById("app"));
frontend/src/style.css
View file @ 9a61c2f6
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
--dl-space-space-unit: 16px; --dl-space-space-unit: 16px;
--dl-size-size-xxlarge: 288px; --dl-size-size-xxlarge: 288px;
--dl-size-size-maxwidth: 1400px; --dl-size-size-maxwidth: 1400px;
--dl-color-theme-accent1: #C9E8FF; --dl-color-theme-accent1: #c9e8ff;
--dl-color-theme-accent2: #B2D1E6; --dl-color-theme-accent2: #b2d1e6;
--dl-radius-radius-round: 50%; --dl-radius-radius-round: 50%;
--dl-color-theme-primary1: #147487; --dl-color-theme-primary1: #147487;
--dl-color-theme-primary2: #0A3A44; --dl-color-theme-primary2: #0a3a44;
--dl-space-space-halfunit: 8px; --dl-space-space-halfunit: 8px;
--dl-space-space-sixunits: 96px; --dl-space-space-sixunits: 96px;
--dl-space-space-twounits: 32px; --dl-space-space-twounits: 32px;
...@@ -20,10 +20,10 @@ ...@@ -20,10 +20,10 @@
--dl-radius-radius-radius8: 8px; --dl-radius-radius-radius8: 8px;
--dl-space-space-fiveunits: 80px; --dl-space-space-fiveunits: 80px;
--dl-space-space-fourunits: 64px; --dl-space-space-fourunits: 64px;
--dl-color-theme-secondary1: #A9D5DD; --dl-color-theme-secondary1: #a9d5dd;
--dl-color-theme-secondary2: #8FC1D4; --dl-color-theme-secondary2: #8fc1d4;
--dl-space-space-threeunits: 48px; --dl-space-space-threeunits: 48px;
--dl-color-theme-neutral-dark: #F5F4F4; --dl-color-theme-neutral-dark: #f5f4f4;
--dl-radius-radius-cardradius: 8px; --dl-radius-radius-cardradius: 8px;
--dl-color-theme-neutral-light: #222222; --dl-color-theme-neutral-light: #222222;
--dl-radius-radius-imageradius: 8px; --dl-radius-radius-imageradius: 8px;
...@@ -287,7 +287,7 @@ ...@@ -287,7 +287,7 @@
padding-right: var(--dl-space-space-twounits); padding-right: var(--dl-space-space-twounits);
padding-bottom: var(--dl-space-space-halfunit); padding-bottom: var(--dl-space-space-halfunit);
background-color: var(--dl-color-theme-neutral-light); background-color: var(--dl-color-theme-neutral-light);
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg width%3D%2220%22 height%3D%2220%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M4.293 7.293a1 1 0 011.414 0L10 11.586l4.293-4.293a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z%22/%3E%3C/svg%3E'); background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width%3D%2220%22 height%3D%2220%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M4.293 7.293a1 1 0 011.414 0L10 11.586l4.293-4.293a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z%22/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 8px center; background-position: right 8px center;
} }
...@@ -338,79 +338,3 @@ ...@@ -338,79 +338,3 @@
text-transform: none; text-transform: none;
text-decoration: none; text-decoration: none;
} }
@media(max-width: 991px) {
.thq-flex-row {
flex-direction: column;
}
.thq-grid-4 {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media(max-width: 767px) {
.thq-section-padding {
padding: var(--dl-space-space-threeunits);
}
.thq-flex-column {
gap: var(--dl-space-space-oneandhalfunits);
}
.thq-flex-row {
gap: var(--dl-space-space-oneandhalfunits);
}
.thq-grid-6 {
grid-gap: var(--dl-space-space-oneandhalfunits);
grid-template-columns: 1fr 1fr 1fr;
}
.thq-grid-5 {
grid-gap: var(--dl-space-space-oneandhalfunits);
grid-template-columns: 1fr 1fr 1fr;
}
.thq-card {
padding: var(--dl-space-space-oneandhalfunits);
}
.thq-grid-3 {
grid-gap: var(--dl-space-space-oneandhalfunits);
grid-template-columns: 1fr 1fr;
}
.thq-grid-4 {
grid-gap: var(--dl-space-space-oneandhalfunits);
flex-direction: row;
grid-template-columns: 1fr 1fr;
}
.thq-grid-2 {
grid-gap: var(--dl-space-space-oneandhalfunits);
grid-template-columns: 1fr;
}
}
@media(max-width: 479px) {
.thq-section-padding {
padding: var(--dl-space-space-oneandhalfunits);
}
.thq-flex-column {
gap: var(--dl-space-space-unit);
}
.thq-flex-row {
gap: var(--dl-space-space-unit);
}
.thq-grid-6 {
grid-gap: var(--dl-space-space-unit);
grid-template-columns: 1fr 1fr;
}
.thq-grid-5 {
grid-gap: var(--dl-space-space-unit);
grid-template-columns: 1fr 1fr;
}
.thq-grid-3 {
grid-gap: var(--dl-space-space-unit);
align-items: center;
grid-template-columns: 1fr;
}
.thq-grid-4 {
grid-gap: var(--dl-space-space-unit);
align-items: center;
flex-direction: column;
grid-template-columns: 1fr;
}
.thq-grid-2 {
grid-gap: var(--dl-space-space-unit);
}
}
frontend/src/views/data.js 0 → 100644
View file @ 9a61c2f6
import React from "react";
import Navbar4 from "../components/navbar4";
import Footer15 from "../components/footer15";
import "./home.css";
const Data = (props) => {
//JS Code
return (
<div className="home-container">
<div className="home-navbar1">
<Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
</div>
<div class="container">
<div class="box">
<h1>Wetterdaten abrufen</h1>
<div class="filter">
<label for="city">Stadt:</label>
<input type="text" id="city" placeholder="Stadt" />
<br />
<label for="start">Startdatum:</label>
<input type="date" id="start" value="2024-04-24" />
<br />
<label for="end">Enddatum:</label>
<input type="date" id="end" value="2024-05-08" />
<br />
<label for="storage">Speicherort:</label>
<select id="storage">
<option value="local">Lokal</option>
<option value="database">Datenbank</option>
</select>
<br />
<label for="format">Datenformat:</label>
<select id="format">
<option value="json">JSON</option>
<option value="csv">CSV</option>
<option value="xml">XML</option>
</select>
<br />
<button onclick="getData()">Daten abrufen</button>
</div>
</div>
<div class="box">
<h2>Wetterdaten</h2>
<pre id="weatherData"></pre>
</div>
</div>
<div className="home-footer11">
<Footer15></Footer15>
</div>
</div>
);
};
export default Data;
frontend/src/views/home.js
View file @ 9a61c2f6
import React from 'react' import React from "react";
import { Helmet } from 'react-helmet' import { Helmet } from "react-helmet";
import Navbar4 from '../components/navbar4' import Navbar4 from "../components/navbar4";
import Hero3 from '../components/hero3' import Hero3 from "../components/hero3";
import Logos1 from '../components/logos1' import Logos1 from "../components/logos1";
import Gallery1 from '../components/gallery1' import Gallery1 from "../components/gallery1";
import Features17 from '../components/features17' import Features17 from "../components/features17";
import Features18 from '../components/features18' import Features18 from "../components/features18";
import Features171 from '../components/features171' import Features171 from "../components/features171";
import CTA1 from '../components/cta1' import CTA1 from "../components/cta1";
import FAQ1 from '../components/faq1' import FAQ1 from "../components/faq1";
import Contact4 from '../components/contact4' import Contact4 from "../components/contact4";
import Footer15 from '../components/footer15' import Footer15 from "../components/footer15";
import './home.css' import "./home.css";
const Home = (props) => { const Home = (props) => {
return ( return (
<div className="home-container"> <div className="home-container">
<Helmet> <Helmet>
<title>Flat Dizzy Grasshopper</title> <title>Weather App</title>
<meta property="og:title" content="Flat Dizzy Grasshopper" /> <meta property="og:title" content="Weather App" />
</Helmet> </Helmet>
<div className="home-navbar1"> <div className="home-navbar1">
<Navbar4 rootClassName="navbar4-root-class-name"></Navbar4> <Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
...@@ -56,7 +56,7 @@ const Home = (props) => { ...@@ -56,7 +56,7 @@ const Home = (props) => {
<Footer15></Footer15> <Footer15></Footer15>
</div> </div>
</div> </div>
) );
} };
export default Home export default Home;
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