1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accurate Belleville, Ontario Weather</title>
<style>
body {
font-family: 'Inter', sans-serif; /* Using Inter font */
margin: 0; /* Remove default body margin */
padding: 20px;
background-color: #f0f0f0;
display: flex;
flex-direction: column; /* Arrange content vertically */
justify-content: center;
align-items: center;
min-height: 100vh;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
font-size: 2em; /* Larger heading */
}
.responsive-container {
width: 95%; /* Make it wider to accommodate the full page embed */
max-width: 1200px; /* Max width for larger screens to prevent it from getting too wide */
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 12px; /* Slightly larger rounded corners */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* More prominent shadow */
background-color: white;
margin-bottom: 20px;
overflow: hidden; /* Ensure content stays within rounded corners */
}
.iframe-wrapper {
position: relative;
/* Maintain an aspect ratio that suits a full webpage, e.g., 16:9 or taller */
/* A good starting point for a full webpage, adjust as needed for optimal viewing */
padding-bottom: 120%; /* Height will be 120% of the width, making it taller */
height: 0;
overflow: hidden;
border-radius: 8px; /* Slightly smaller rounded corners for inner frame */
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
}
.desc {
padding: 15px;
text-align: center;
font-size: 1.1em;
color: #555;
line-height: 1.6;
}
.desc a {
color: #007bff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease; /* Smooth transition for hover effect */
}
.desc a:hover {
text-decoration: underline;
color: #0056b3; /* Darker blue on hover */
}
/* Responsive adjustments for the container */
@media only screen and (max-width: 768px) {
.responsive-container {
width: 100%; /* Full width on smaller screens */
padding: 5px;
border-radius: 0; /* No rounded corners on very small screens for edge-to-edge */
}
.iframe-wrapper {
padding-bottom: 150%; /* Make it even taller on mobile if needed */
}
body {
padding: 10px;
}
}
</style>
<!-- Tailwind CSS is not strictly necessary as custom CSS is used, but included if you plan to use it -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1>Live Weather for Belleville, Ontario</h1>
<div class="responsive-container">
<div class="iframe-wrapper">
<!--
This iframe embeds the ENTIRE MSN Weather forecast page for Belleville, Ontario.
This provides accurate, dynamic weather data directly from MSN.
It will include all elements of their page (navigation, ads, map, forecast details).
-->
<iframe
src="https://www.msn.com/en-us/weather/forecast/in-Belleville,Ontario?loc=eyJsIjoiQmVsbGV2aWxsZSIsInIiOiJPbnRhcmlvIiwicjIiOiJIYXN0aW5ncyIsImMiOiJDYW5hZGEiLCJpIjoiQ0EiLCJ0IjoxMDIsImciOiJlbi11cyIsIngiOiItNzcuMzgyNiIsInk6IjQ0LjE2NCJ9&weadegreetype=F&content=AlertNowcast_wxalncrb"
title="Accurate Belleville, Ontario Weather Forecast from MSN"
sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation"
allowfullscreen
>
Your browser does not support iframes. Please visit
<a href="https://www.msn.com/en-us/weather/forecast/in-Belleville,Ontario?loc=eyJsIjoiQmVsbGV2aWxsZSIsInIiOiJPbnRhcmlvIiwicjIiOiJIYXN0aW5ncyIsImMiOiJDYW5hZGEiLCJpIjoiQ0EiLCJ0IjoxMDIsImciOiJlbi11cyIsIngiOiItNzcuMzgyNiIsInk6IjQ0LjE2NCJ9&weadegreetype=F&content=AlertNowcast_wxalncrb" target="_blank" rel="noopener noreferrer">MSN Weather for Belleville</a> directly.
</iframe>
</div>
<div class="desc">
The live weather data above is provided directly from MSN Weather for Belleville, Ontario.<br/>
For a general weather overview:
<a href="https://www.ctvnews.ca/weather" target="_blank" rel="noopener noreferrer">CTV News Weather</a><br/>
For local flying conditions:
<a href="https://www.uavforecast.com/" target="_blank" rel="noopener noreferrer">UAV Forecast</a>
</div>
</div>
</body>
</html>
|
