Skip to content

L
landingPage-Nexpie
Commit 28189b32 by Chaiwith Santaweesuk
Options

update

parent 7aec3190
Showing with 99 additions and 73 deletions
.firebase/hosting.YnVpbGQ.cache
asset-manifest.json,1567435596085,ff9dd12e80477651d66cee7393efe82f3271c1e82ddc342d7027715be35ba47a
precache-manifest.ad22dc0b26434cea537150ceb23606ff.js,1567435596085,04f7099dabe8eb1921c75473dd660171426603b5e0299ce2783c503075e13809
index.html,1567435596085,c8d6eed10e25fec89cc6e50cf24bf7d70601021723366c923fab3b776b70359f
asset-manifest.json,1568389674309,9da10bce03bfcaf561933ed4ec9bd9ca99cdaa9db12c25004bbaf57d51b855bb
favicon.ico,1565083503842,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
service-worker.js,1567435596085,d217c8855c2163d5590a1064ee1178422be73a5ce0d7b5fabb19b06398c1843c
static/css/main.a43607a4.chunk.css.map,1567435596108,b47e3b94408ca1b5f00234f22dde566b16fd767e49657706b147637e8b22e561
manifest.json,1565083503843,6aaf3d87dd9bb1e96f9c691c50d0ed378ed98a120a76dea78291281834cd36e9
static/css/main.a43607a4.chunk.css,1567435596086,125a1896a560cfb2846d2d2bbe3da9d70d1724a3834da2ffa98ada4c6a5b34d0
static/js/runtime~main.a8a9905a.js,1567435596086,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
static/js/runtime~main.a8a9905a.js.map,1567435596107,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
static/js/main.9547b370.chunk.js.map,1567435596107,4bf88838c91bd6c0552b0f9b046a0da42828a8afb69f994c6b1a4f94cf2d7a40
static/js/main.9547b370.chunk.js,1567435596107,7930424c035ad84159c3f9c3674dc2fdb250e78c168cc52e234990933389bc11
static/css/2.655cd109.chunk.css,1567435596108,b9381307d281dd581b7e8e40fa46f5dc5f129dceb138844f58205737d3b8b156
static/css/2.655cd109.chunk.css.map,1567435596109,c5e0c12c108d428b20ea3a6e39bf4d5e1f10006f035e8cb3ade2d9d843334742
static/js/2.1a3fd4c2.chunk.js,1567435596107,b5b52eff5015e551b302084887912f1e01e0c71a3d4afc2f27a9595349ce937c
static/js/2.1a3fd4c2.chunk.js.map,1567435596108,c11a22832416c4fca8b09716dbec209d856a2a9edd92e1ea0872e0e0622d0097
precache-manifest.2317e93a842c8fb87eb560501c0cbcba.js,1568389674307,a9e8e014097d23e4e90613f9bae31d62ee44f510bbf291b6eba94417d173a820
index.html,1568389674307,3e5bb6995cb010862154e4ee9506bba2169b8b247d72f0f5454935e781855c1e
service-worker.js,1568389674309,efd48510e865f83b887af02b357fa23e29d603c6314bb5e5e53571a10410070f
manifest.json,1567779358007,ed6e768ed41272d109f4b4f9e841a8c355a27b3608ea5998fed8089944e24f1f
static/css/main.4800a63b.chunk.css.map,1568389674329,1dd6d3c32ded879aed8baccb3419f5fee3d4a32222493eb7571ab14e885a4f20
static/css/main.4800a63b.chunk.css,1568389674311,a84cc9c4c3cda6820783c617e12848c0317ee01a6a3ee8aed5e2a66bb92e9aec
static/js/runtime~main.a8a9905a.js,1568389674329,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
static/js/main.834a24a2.chunk.js,1568389674309,ff47de44130e5b5770397831ee6f3532b34b579f4e9e88319fd8605dc8caf375
static/js/runtime~main.a8a9905a.js.map,1568389674329,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
static/js/main.834a24a2.chunk.js.map,1568389674329,7d8cfc581d3a01c5b6cc80f67f11bea1b7f5a0ffb5cb07b8a13c3f95a009c85d
static/css/2.655cd109.chunk.css,1568389674331,b9381307d281dd581b7e8e40fa46f5dc5f129dceb138844f58205737d3b8b156
static/media/Cloud01.3ba8e626.png,1568389674309,8e144e90f1a2e28b68781e283ba3b53409e5b1db7c1ac90c66cd85c4057193b2
static/media/Cloud03.33540b2a.png,1568389674331,4604dfad04458ed3061dae2eaacd154b51b8403f5a159f2ba113c6e424b1ffc9
static/media/Cloud02.c7fdae7f.png,1568389674329,191b41aa9bfb01f5e480c0ad304d40da252ffab7ee4a77bce70eab8ba0d267c9
static/css/2.655cd109.chunk.css.map,1568389674331,c5e0c12c108d428b20ea3a6e39bf4d5e1f10006f035e8cb3ade2d9d843334742
static/js/2.4d471763.chunk.js,1568389674329,af1a9b5ecee4205e82d23757ed44e2b3f867d9c19355a21ede7794c469f40a89
static/js/2.4d471763.chunk.js.map,1568389674330,cc2b8d229122a7a186aae6965afffc239b75d2011ad9934cbd64b0e241c83349
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Mitr:300&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css" /> -->
<!-- <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css" /> -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!--
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Mitr:300&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css" /> -->
<!-- <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css" /> -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
......@@ -24,12 +25,13 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>NEXPIE IoT Platform</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>NEXPIE IoT Platform</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
......@@ -39,23 +41,27 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
<footer>
<!-- <script src="jquery.min.js"></script> -->
<!-- <script src="owlcarousel/owl.carousel.min.js"></script> -->
</footer>
<!-- <script>
</body>
<footer>
<!-- <script src="jquery.min.js"></script> -->
<!-- <script src="owlcarousel/owl.carousel.min.js"></script> -->
</footer>
<script>
$(document).ready(function(){
$(window).scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 100) { // check if user scrolled more than 50 from top of the browser window
console.log("sssss")
$(".is-fixed-top").css("background-color", "#fff"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
if ($(document).scrollTop() > 30) { // check if user scrolled more than 50 from top of the browser window
// console.log("sssss")
// document.body.style.backgroundColor = "pink";
document.getElementById("navheader").style.backgroundColor = "#fff";
// $("navheader").css("background-color", "#fff"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
} else {
console.log("11111")
$(".is-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
// console.log("11111")
// document.body.style.backgroundColor = "red";
document.getElementById("navheader").style.backgroundColor = "transparent";
// $("navheader").css("background-color", "transparent"); // if not, change it back to transparent
}
console.log($(document).scrollTop())
// console.log($(document).scrollTop())
});
});
</script> -->
</html>
</script>
</html>
\ No newline at end of file
src/components/Header.js
......@@ -108,7 +108,7 @@ class HeaderComponent extends Component {
render() {
const { open } = this.state;
return (
<Navbar fixed={'top'} transparent={true} active={open} style={{ padding: '0.5rem 2rem' }}>
<Navbar fixed={'top'} active={open} style={{ padding: '0.5rem 2rem' }} id="navheader">
<Navbar.Brand>
<Navbar.Item renderAs="a" href="#">
<Image src={logo} style={{ width: 170 }} />
......
src/components/Home/Services.js
......@@ -43,6 +43,7 @@ export default class Services extends React.Component {
justifyContent: 'space-evenly',
paddingBottom: '60px',
overflow: 'hidden',
backgroundColor:'#F3F9FD'
}}>
<h1 className="title">
<FormattedMessage id="Services.Title" />
......
src/scss/style.scss
......@@ -122,7 +122,7 @@ body {
.service-card {
max-width: 300px;
min-width: 245px;
height: 400px;
height: 350px;
border-radius: 6px;
box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 1px #f0f0f0;
......@@ -132,19 +132,24 @@ body {
flex-direction: column;
align-items: center;
overflow: hidden;
&:first-child {
background-color: #42b3e5;
}
&:nth-child(2) {
background-color: #0384ce;
}
&:nth-child(3) {
background-color: #3156a3;
}
// &:first-child {
// background-color: #42b3e5;
// }
// &:nth-child(2) {
// background-color: #0384ce;
// }
// &:nth-child(3) {
// background-color: #3156a3;
// }
.img-wrapper {
border-color: #018ddd;
border-top-style: solid;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-top-width: 10px;
background-color: $white;
width: 100%;
height: 70%;
height: 60%;
margin: 60 0;
display: flex;
align-items: center;
......@@ -153,20 +158,22 @@ body {
.service-wrapper {
width: 100%;
max-height: 200px;
color: $white;
// color: $white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20px;
padding: 0px 20px;
.service-title {
font-size: 22px;
font-weight: 500;
color: #4a4a4a;
}
.service-description {
font-size: 16px;
text-align: center;
font-weight: normal;
color: #858585;
}
}
}
......@@ -258,24 +265,24 @@ body {
box-shadow: 0 10px 25px 0 rgba(3, 132, 206, 0.28), 0 2px 24px 0 rgba(0, 0, 0, 0.02);
&:nth-child(2) {
.text-wrapper {
border-top-left-radius:6px;
border-top-right-radius:6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
color: #fff;
background-color: #42b3e5;
}
}
&:nth-child(3) {
.text-wrapper {
border-top-left-radius:6px;
border-top-right-radius:6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
color: #fff;
background-color: #0384ce;
}
}
&:nth-child(4) {
.text-wrapper {
border-top-left-radius:6px;
border-top-right-radius:6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
color: #fff;
background-color: #3156a3;
}
......@@ -396,7 +403,7 @@ body {
}
}
}
.tb-background{
.tb-background {
background-color: rgba(0, 126, 229, 0.12);
}
}
......@@ -640,3 +647,11 @@ html.has-navbar-fixed-top,
body.has-navbar-fixed-top {
padding-top: 0px;
}
.navbar {
background-color: transparent;
}
// body:not([data-scroll='0']) {
// .navbar{
// background-color: #fff;
// }
// }
src/utils/WindowDimension.js
......@@ -6,19 +6,19 @@ export default function WindowDimensions(WrappedComponent) {
componentDidMount() {
this.updateWindowDimensions();
console.log("componentDidMount")
console.log(window.innerWidth)
// console.log("componentDidMount")
// console.log(window.innerWidth)
window.addEventListener('resize', this.updateWindowDimensions);
}
componentWillUnmount() {
console.log("componentWillUnmount")
console.log(window.innerWidth)
// console.log("componentWillUnmount")
// console.log(window.innerWidth)
window.removeEventListener('resize', this.updateWindowDimensions);
}
updateWindowDimensions = () => {
console.log(window.innerWidth)
// console.log(window.innerWidth)
this.setState({ width: window.innerWidth, height: window.innerHeight });
};
......
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