Skip to content

W
WeatherAPI
Commit 11d679ce authored by DangSauQuaKhu's avatar DangSauQuaKhu
Browse files
Options

deploy

parent 5688cd12
Hide whitespace changes
Inline Side-by-side
Showing with 9 additions and 175 deletions
docs/index.html
View file @ 11d679ce
......@@ -8,6 +8,6 @@
<style>@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}</style><link rel="stylesheet" href="styles.9c36b9530393e161.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.9c36b9530393e161.css"></noscript></head>
<body>
<app-root></app-root>
<script src="runtime.0e83b2a9f1351278.js" type="module"></script><script src="polyfills.a277350f6f1b17a3.js" type="module"></script><script src="main.b713d01cfa88d07e.js" type="module"></script>
<script src="runtime.0e83b2a9f1351278.js" type="module"></script><script src="polyfills.a277350f6f1b17a3.js" type="module"></script><script src="main.1a2ae4851d8fb084.js" type="module"></script>
</body></html>
\ No newline at end of file
docs/main.b713d01cfa88d07e.js → docs/main.1a2ae4851d8fb084.js
View file @ 11d679ce
This source diff could not be displayed because it is too large. You can view the blob instead.
src/app/anothercity/anothercity.component.ts
View file @ 11d679ce
......@@ -37,15 +37,16 @@ export class AnothercityComponent implements OnInit {
}
this.weather.iconImg = "https://openweathermap.org/img/wn/"+this.weather.weather[0].icon+"@2x.png";
console.log(this.weather);
this.center = {
lat: this.weather.coord.lat,
lng: this.weather.coord.lon,
};
}
)
this.center = {
lat: this.weather.coord.lat,
lng: this.weather.coord.lon,
};
console.log(this.center);
console.log("center",this.center);
}
zoomIn() {
......
src/app/today/today.component.css
View file @ 11d679ce
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
$morro: #aacbe6;
$cayucos: #9cd0ff;
$bahamas: #3cc0fe;
$capetown: #27a5fd;
$cabo: #0066ff;
$reynisfjara: #34373e;
$svalbard: #d2e9fa;
$bahamasAlpha: rgba($bahamas, 0.7);
$caboAlpha: rgba($cabo, 0.6);
$capetownShadow: rgba($capetown, 0.4);
$widgetHeight: 400px;
$pictoBackdropDiameter: $widgetHeight * 1.4;
$pictoFrameDiameter: $pictoBackdropDiameter * .6;
$pictoCloudBigDiameter: $pictoFrameDiameter * .65;
$pictoCloudSmallDiameter: $pictoCloudBigDiameter * .7;
$pictoCloudFillSize: $pictoCloudSmallDiameter * .7;
$iconCloudBigDiameter: 36px;
$iconCloudSmallDiameter: $iconCloudBigDiameter * .65;
$iconCloudFillSize: $iconCloudSmallDiameter * .7;
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background: #CEF;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 98vh;
}
.widget {
background: linear-gradient(to bottom right, $bahamas 20%, $cabo);
width: 900px;
height: $widgetHeight;
border-radius: 6px;
box-shadow: 0px 60px 80px -20px $capetownShadow;
position: relative;
overflow: hidden;
}
.pictoBackdrop {
position: absolute;
height: $pictoBackdropDiameter;
width: $pictoBackdropDiameter;
border-radius: 50%;
background: linear-gradient(160deg, $bahamasAlpha 40%, $caboAlpha);
right: -40px;
top: -90px;
}
.pictoFrame {
position: absolute;
background: $reynisfjara;
border-radius: 50%;
box-shadow: 0px 50px 60px -20px $cabo;
height: $pictoFrameDiameter;
width: $pictoFrameDiameter;
right: 80px;
top: 25px;
}
.pictoCloudBig {
position: absolute;
border-radius: 50%;
background: $morro;
box-shadow: 20px 20px 80px -20px $morro;
height: $pictoCloudBigDiameter;
width: $pictoCloudBigDiameter;
top: 80px;
right: 160px;
}
.pictoCloudFill {
position: absolute;
background: $morro;
box-shadow: 0px 20px 80px -20px $morro;
height: $pictoCloudFillSize;
width: $pictoCloudFillSize;
top: 191px;
right: 265px;
}
.pictoCloudSmall {
position: absolute;
border-radius: 50%;
background: $svalbard;
height: $pictoCloudSmallDiameter;
width: $pictoCloudSmallDiameter;
top: 146px;
right: 282px;
}
.iconCloudBig {
position: absolute;
border-radius: 50%;
background: $cayucos;
height: $iconCloudBigDiameter;
width: $iconCloudBigDiameter;
top: 200px;
left: 80px;
}
.iconCloudSmall {
position: absolute;
border-radius: 50%;
height: $iconCloudSmallDiameter;
width: $iconCloudSmallDiameter;
background: $svalbard;
top: 213px;
left: 70px;
}
.iconCloudFill {
position: absolute;
height: $iconCloudFillSize;
width: $iconCloudFillSize;
background: $cayucos;
top: 220px;
left: 80px;
}
.details{
font-family: Roboto, sans-serif;
display: flex;
flex-direction: column;
margin-top: 30px;
margin-left: 60px;
}
.temperature {
color: white;
font-weight: 300;
font-size: 10em;
}
.summary {
color: $svalbard;
font-size: 2em;
font-weight: 300;
width: 260px;
margin-top: -16px;
padding-bottom: 16px;
border-bottom: 2px solid $cayucos;
margin-left: 8px;
}
.summaryText {
margin: 0;
margin-left: 56px;
}
.precipitation, .wind {
color: $svalbard;
font-size: 1.6em;
font-weight: 300;
margin-left: 8px;
}
.precipitation {
margin-top: 16px;
}
.wind {
margin-top: 4px;
}
\ No newline at end of file
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