Skip to content

Commit c74fa59

Browse files
end2endzoneend2endzone
committed
Updated the demo website sample.
1 parent cbad6d2 commit c74fa59

File tree

10 files changed

+1058
-19
lines changed

10 files changed

+1058
-19
lines changed

‎samples/demo_website/www/contact/background.jpg‎

20.7 KB
Loading

‎samples/demo_website/www/contact/index.html‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
6-
<title>Contact</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Contact Us</title>
7+
<style>
8+
body { font-family: Arial, sans-serif; margin: 40px; }
9+
.container { max-width: 600px; margin: auto; }
10+
label { display: block; margin-top: 10px; }
11+
input, textarea { width: 100%; padding: 10px; margin-top: 5px; }
12+
button { margin-top: 15px; padding: 10px 20px; background-color: blue; color: white; border: none; cursor: pointer; }
13+
.profile-image-container {
14+
text-align: center; /* Centers the image horizontally */
15+
}
16+
.profile-image-container img {
17+
width: 300px;
18+
height: auto; /* Keeps aspect ratio */
19+
}
20+
</style>
721
</head>
822
<body>
9-
<article id="post-13" class="post-13 page type-page status-publish hentry wpautop">
10-
<header class="entry-header">
11-
<h1 class="entry-title">Contact</h1>
12-
</header>
13-
<div class="entry-content">
14-
<p>Feel free to contact me about your DIY projects!</p>
15-
<div role="form" class="wpcf7" id="wpcf7-f2524-p13-o1" lang="en-US" dir="ltr">
16-
<div class="screen-reader-response">
17-
<p role="status" aria-live="polite" aria-atomic="true"></p>
18-
<ul></ul>
23+
24+
<div class="container">
25+
<h2>Contact Me</h2>
26+
<div class="profile-image-container">
27+
<img class="foobar" src="../static/profile-picture.jpg">
1928
</div>
2029
<form action="/contact/#wpcf7-f2524-p13-o1" method="post" class="wpcf7-form init" novalidate="novalidate" data-status="init">
2130
<p>Your Name (required)<br>
@@ -37,7 +46,7 @@ <h1 class="entry-title">Contact</h1>
3746
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" aria-invalid="false"><span class="ajax-loader"></span></p>
3847
<div class="wpcf7-response-output" aria-hidden="true"></div>
3948
</form>
40-
</div>
41-
</article>
49+
</div>
50+
4251
</body>
4352
</html>

‎samples/demo_website/www/favicon.ico‎

3.19 KB
Binary file not shown.

‎samples/demo_website/www/index.html‎

Lines changed: 69 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,76 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
6-
<title>Website root</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Nature & Outdoors Blog</title>
7+
<link id="theme-style" rel="stylesheet" href="static/light-mode.css">
8+
<style>
9+
.navbar {
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: center;
13+
background-color: #4CAF50;
14+
padding: 15px;
15+
}
16+
.navbar a {
17+
color: white;
18+
text-decoration: none;
19+
padding: 15px 20px;
20+
font-size: 18px;
21+
}
22+
.navbar a:hover {
23+
background-color: rgba(255, 255, 255, 0.2);
24+
border-radius: 5px;
25+
}
26+
.nav-right {
27+
margin-left: auto;
28+
}
29+
.switch-theme {
30+
background-color: #FFA726;
31+
padding: 10px;
32+
border: none;
33+
color: white;
34+
font-size: 16px;
35+
cursor: pointer;
36+
border-radius: 5px;
37+
transition: background 0.3s ease;
38+
}
39+
.switch-theme:hover {
40+
background-color: #FB8C00;
41+
}
42+
.content {
43+
max-width: 800px;
44+
margin: 50px auto;
45+
padding: 20px;
46+
text-align: center;
47+
}
48+
</style>
749
</head>
850
<body>
9-
Website root!
51+
52+
<nav class="navbar">
53+
<a href="index.html">Home</a>
54+
<a href="blog/index.html">Blog</a>
55+
<a href="contact/index.html">Contact</a>
56+
<button class="switch-theme nav-right" onclick="toggleTheme()">Switch Theme</button>
57+
</nav>
58+
59+
<div class="content">
60+
<h1>Welcome to the Nature & Outdoors Blog</h1>
61+
<p>Immerse yourself in the beauty of nature. Discover breathtaking landscapes, essential hiking tips, and the wonders of wildlife.</p>
62+
63+
<p>Our goal is to inspire adventure and share knowledge on preserving the great outdoors. From national parks to hidden gems, we've got it all.</p>
64+
65+
<p>Whether you're a seasoned explorer or a beginner, join us in appreciating the natural world like never before.</p>
66+
</div>
67+
68+
<script>
69+
function toggleTheme() {
70+
const themeStyle = document.getElementById("theme-style");
71+
themeStyle.href = themeStyle.href.includes("light-mode.css") ? "static/dark-mode.css" : "static/light-mode.css";
72+
}
73+
</script>
74+
1075
</body>
1176
</html>

‎samples/demo_website/www/index.html.old‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Nature & Outdoors Blog</title>
7+
<link id="theme-style" rel="stylesheet" href="static/light-mode.css">
8+
<link id="theme-style" rel="stylesheet" href="static/dark-mode.css">
9+
<style>
10+
.navbar {
11+
display: flex;
12+
justify-content: center;
13+
background-color: #4CAF50;
14+
padding: 15px;
15+
}
16+
.navbar a {
17+
color: white;
18+
text-decoration: none;
19+
padding: 15px 20px;
20+
font-size: 18px;
21+
}
22+
.navbar a:hover {
23+
background-color: rgba(255, 255, 255, 0.2);
24+
border-radius: 5px;
25+
}
26+
.content {
27+
max-width: 800px;
28+
margin: 50px auto;
29+
padding: 20px;
30+
text-align: center;
31+
}
32+
.switch-theme {
33+
background-color: #FFA726;
34+
padding: 10px;
35+
border: none;
36+
color: white;
37+
font-size: 16px;
38+
cursor: pointer;
39+
border-radius: 5px;
40+
transition: background 0.3s ease;
41+
}
42+
.switch-theme:hover {
43+
background-color: #FB8C00;
44+
}
45+
</style>
46+
</head>
47+
<body>
48+
49+
<nav class="navbar">
50+
<a href="home/index.html">Home</a>
51+
<a href="blog/index.html">Blog</a>
52+
<a href="contact/index.html">Contact</a>
53+
</nav>
54+
55+
<div class="content">
56+
<h1>Welcome to the Nature & Outdoors Blog</h1>
57+
<p>Immerse yourself in the beauty of nature. Discover breathtaking landscapes, essential hiking tips, and the wonders of wildlife.</p>
58+
59+
<p>Our goal is to inspire adventure and share knowledge on preserving the great outdoors. From national parks to hidden gems, we've got it all.</p>
60+
61+
<p>Whether you're a seasoned explorer or a beginner, join us in appreciating the natural world like never before.</p>
62+
63+
<button class="switch-theme" onclick="toggleTheme()">Switch Theme</button>
64+
</div>
65+
66+
<script>
67+
function toggleTheme() {
68+
const themeStyle = document.getElementById("theme-style");
69+
themeStyle.href = themeStyle.href.includes("light-mode.css") ? "dark-mode.css" : "light-mode.css";
70+
}
71+
</script>
72+
73+
</body>
74+
</html>

‎samples/demo_website/www/static/banner.jpg‎

42.3 KB
Loading

‎samples/demo_website/www/static/dark-mode.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
body {
2+
font-family: 'Arial', sans-serif;
3+
background-color: #1B1F22; /* Deep charcoal */
4+
color: #E3E6D5; /* Soft cream text */
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
.container {
10+
max-width: 800px;
11+
margin: auto;
12+
padding: 20px;
13+
}
14+
15+
h1, h2, h3 {
16+
color: #A5C882; /* Muted pastel green */
17+
}
18+
19+
a {
20+
color: #CFAE6D; /* Warm golden brown for links */
21+
text-decoration: none;
22+
transition: color 0.3s ease;
23+
}
24+
25+
a:hover {
26+
color: #E0C085; /* Lightened golden shade */
27+
}
28+
29+
.button {
30+
background-color: #689F38; /* Earthy green */
31+
color: white;
32+
padding: 10px 15px;
33+
border: none;
34+
border-radius: 5px;
35+
cursor: pointer;
36+
transition: background 0.3s ease;
37+
}
38+
39+
.button:hover {
40+
background-color: #4E7931; /* Slightly darker green */
41+
}

‎samples/demo_website/www/static/light-mode.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
body {
2+
font-family: 'Arial', sans-serif;
3+
background-color: #F8F5E1; /* Soft earthy tone */
4+
color: #2E4B30; /* Deep forest green */
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
.container {
10+
max-width: 800px;
11+
margin: auto;
12+
padding: 20px;
13+
}
14+
15+
h1, h2, h3 {
16+
color: #4D6B3C; /* Muted green for headers */
17+
}
18+
19+
a {
20+
color: #A15F34; /* Warm brown for links */
21+
text-decoration: none;
22+
transition: color 0.3s ease;
23+
}
24+
25+
a:hover {
26+
color: #C47C45; /* Lightened brown on hover */
27+
}
28+
29+
.button {
30+
background-color: #8BC34A; /* Nature-inspired green */
31+
color: white;
32+
padding: 10px 15px;
33+
border: none;
34+
border-radius: 5px;
35+
cursor: pointer;
36+
transition: background 0.3s ease;
37+
}
38+
39+
.button:hover {
40+
background-color: #689F38; /* Slightly deeper green */
41+
}

0 commit comments

Comments
 (0)