Skip to content

Commit e74d7b1

Browse files
TheWindowsFan2000TheWindowsFan2000
authored
Commit6
1 parent 7fe8e20 commit e74d7b1

8 files changed

Lines changed: 352 additions & 8 deletions

‎doreamonmarking.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@
66
<meta name="viewport" content="width=device-width">
77
<title>Doraemon Activity Page</title>
88
</head>
9-
<header>
9+
<header>
1010
<h1 id="title"> doreamonfacts </h1>
1111
<nav>
1212
<ul>
1313
<li><a href="index.html">Home</a></li>
1414
<li><a href="doreamonregister.html">Register</a></li>
1515
<li><a href="doreamonmedia.html">Doreamon Media</a></li>
1616
<li><a href="doreamonmarking.html">Doreamon Form</a></li>
17+
<li><a href="gadgets.html">Doreamon Gadget</a></li>
1718
</ul>
1819

1920
</nav>
@@ -23,7 +24,7 @@ <h1 id="title"> doreamonfacts </h1>
2324
<fieldset>
2425
<legend id="title"><b>Doraemon Friendship Form</b></legend>
2526

26-
<form action="action_page.php">
27+
<form action="result.html">
2728

2829
<label>Name</label><br>
2930
<input type="text" id="name" name="name"><br><br>

‎doreamonmedia.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@
44
<link rel="stylesheet" href="style.css">
55
<title>Doreamon Fact Page</title>
66
</head>
7-
<header>
7+
<header>
88
<h1 id="title"> doreamonfacts </h1>
99
<nav>
1010
<ul>
1111
<li><a href="index.html">Home</a></li>
1212
<li><a href="doreamonregister.html">Register</a></li>
1313
<li><a href="doreamonmedia.html">Doreamon Media</a></li>
1414
<li><a href="doreamonmarking.html">Doreamon Form</a></li>
15+
<li><a href="gadgets.html">Doreamon Gadget</a></li>
1516
</ul>
1617

1718
</nav>

‎doreamonregister.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@
88

99
<link href="style.css" rel="stylesheet" type="text/css" />
1010
</head>
11-
<header>
11+
<header>
1212
<h1 id="title"> doreamonfacts </h1>
1313
<nav>
1414
<ul>
1515
<li><a href="index.html">Home</a></li>
1616
<li><a href="doreamonregister.html">Register</a></li>
1717
<li><a href="doreamonmedia.html">Doreamon Media</a></li>
1818
<li><a href="doreamonmarking.html">Doreamon Form</a></li>
19+
<li><a href="gadgets.html">Doreamon Gadget</a></li>
1920
</ul>
2021

2122
</nav>

‎factsaboutdoreamon.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@
33
<head>
44
<link rel="stylesheet" href="style.css">
55
<title>Doreamon Fact Page</title>
6-
<header>
6+
<header>
77
<h1 id="title"> doreamonfacts </h1>
88
<nav>
99
<ul>
1010
<li><a href="index.html">Home</a></li>
1111
<li><a href="doreamonregister.html">Register</a></li>
1212
<li><a href="doreamonmedia.html">Doreamon Media</a></li>
1313
<li><a href="doreamonmarking.html">Doreamon Form</a></li>
14+
<li><a href="gadgets.html">Doreamon Gadget</a></li>
1415
</ul>
1516

1617
</nav>

‎gadgets.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Doraemon Gadgets</title>
6+
<link rel="stylesheet" href="style.css">
7+
8+
<header>
9+
<h1 id="title"> doreamonfacts </h1>
10+
<nav>
11+
<ul>
12+
<li><a href="index.html">Home</a></li>
13+
<li><a href="doreamonregister.html">Register</a></li>
14+
<li><a href="doreamonmedia.html">Doreamon Media</a></li>
15+
<li><a href="doreamonmarking.html">Doreamon Form</a></li>
16+
<li><a href="gadgets.html">Doreamon Gadget</a></li>
17+
</ul>
18+
19+
</nav>
20+
</header>
21+
</head>
22+
<body>
23+
<style>/* BODY BACKGROUND */
24+
body {
25+
margin: 0;
26+
font-family: Arial, sans-serif;
27+
color: #fff;
28+
29+
/* Background image + properties */
30+
background-image: url("images/imli.jpg");
31+
background-repeat: no-repeat;
32+
background-position: center;
33+
background-attachment: fixed;
34+
background-size: cover;
35+
}
36+
37+
/* HEADER WITH GRADIENT */
38+
header {
39+
padding: 20px;
40+
text-align: center;
41+
background: linear-gradient(90deg, #00c6ff, #0072ff);
42+
animation: slideDown 2s ease;
43+
}
44+
@keyframes slideDown {
45+
from {
46+
transform: translateY(-100px);
47+
opacity: 0;
48+
}
49+
to {
50+
transform: translateY(0);
51+
opacity: 1;
52+
}
53+
}
54+
55+
/* MAIN CONTAINER */
56+
.container {
57+
display: grid;
58+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
59+
gap: 20px;
60+
padding: 40px;
61+
}
62+
63+
/* GADGET CARD */
64+
.card {
65+
background-color: rgba(0, 0, 0, 0.6);
66+
padding: 20px;
67+
border-radius: 12px;
68+
text-align: center;
69+
/* Background gradient inside card */
70+
background-image: linear-gradient(135deg, #1e3c72, #2a5298);
71+
/* Animation */
72+
animation: fadeIn 2s ease-in;
73+
}
74+
75+
@keyframes fadeIn {
76+
from {
77+
opacity: 0;
78+
transform: scale(0.9);
79+
}
80+
to {
81+
opacity: 1;
82+
transform: scale(1);
83+
}
84+
}
85+
86+
.card img {
87+
width: 150px;
88+
height: 150px;
89+
}
90+
/* FOOTER */
91+
footer {
92+
text-align: center;
93+
padding: 15px;
94+
background-color: rgba(0, 0, 0, 0.7);
95+
}
96+
</style>
97+
<header>
98+
<h1> Doraemon Gadgets</h1>
99+
<p>Magical tools from the future</p>
100+
</header>
101+
102+
<section class="container">
103+
<div class="card">
104+
<h2>Anywhere Door</h2>
105+
<img src="images/the-anywhere-door.png">
106+
<p>Go anywhere instantly with this door.</p>
107+
</div>
108+
109+
<div class="card">
110+
<h2>Bamboo Copter</h2>
111+
<img src="images/takecopter.jpg">
112+
<p>Fly freely in the sky using this gadget.</p>
113+
</div>
114+
<div class="card">
115+
<h2>Time Machine</h2>
116+
<img src="images/known-for-time-machine.jpg">
117+
<p>Travel to past and future adventures.</p>
118+
</div>
119+
120+
</section>
121+
122+
<footer>
123+
&copy; Naitik Web Development. All rights reserved.
124+
</footer>
125+
126+
</body>
127+
</html>

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@
1010

1111
</style>
1212
<body>
13-
<header>
13+
<header>
1414
<h1 id="title"> doreamonfacts </h1>
1515
<nav>
1616
<ul>
1717
<li><a href="index.html">Home</a></li>
1818
<li><a href="doreamonregister.html">Register</a></li>
1919
<li><a href="doreamonmedia.html">Doreamon Media</a></li>
2020
<li><a href="doreamonmarking.html">Doreamon Form</a></li>
21+
<li><a href="gadgets.html">Doreamon Gadget</a></li>
2122
</ul>
2223

2324
</nav>

‎result.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Doraemon Friendship Results</title>
7+
<header>
8+
<h1 id="title"> doreamonfacts </h1>
9+
<nav>
10+
<ul>
11+
<li><a href="index.html">Home</a></li>
12+
<li><a href="doreamonregister.html">Register</a></li>
13+
<li><a href="doreamonmedia.html">Doreamon Media</a></li>
14+
<li><a href="doreamonmarking.html">Doreamon Form</a></li>
15+
<li><a href="gadgets.html">Doreamon Gadget</a></li>
16+
</ul>
17+
18+
</nav>
19+
</header>
20+
<link rel="stylesheet" href="style.css">
21+
<style>
22+
body { text-align: center; padding: 20px; font-family: "Comic Sans MS", cursive; }
23+
h1 { color: lightblue; text-shadow: 2px 2px skyblue; }
24+
.result { background: white; border: 5px solid lightblue; border-radius: 15px; padding: 20px; display: inline-block; box-shadow: 0 0 15px skyblue; margin-top: 20px; }
25+
.result p { font-size: 1.2em; margin: 10px 0; }
26+
.score { font-size: 1.5em; color: darkblue; font-weight: bold; }
27+
label { display: block; margin: 5px 0; }
28+
button { margin: 5px; padding: 8px 15px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; background: lightblue; color: white; }
29+
button:hover { background: skyblue; }
30+
</style>
31+
</head>
32+
<body>
33+
34+
<h1>🎉 Doraemon Friendship Form 🎉</h1>
35+
36+
<div class="result">
37+
<label>Name: <input type="text" id="name"></label>
38+
39+
<label>Favourite Doraemon Character:
40+
<select id="character">
41+
<option value="Doraemon">Doraemon</option>
42+
<option value="Nobita">Nobita</option>
43+
<option value="Shizuka">Shizuka</option>
44+
<option value="Gian">Gian</option>
45+
<option value="Suneo">Suneo</option>
46+
</select>
47+
</label>
48+
49+
<label>Favourite Gadget:
50+
<select id="gadget">
51+
<option value="Anywhere Door">Anywhere Door</option>
52+
<option value="Time Machine">Time Machine</option>
53+
<option value="Take-Copter">Take-Copter</option>
54+
<option value="Small Light">Small Light</option>
55+
</select>
56+
</label>
57+
58+
<label>Do you like Doraemon?</label>
59+
<label><input type="radio" name="like" value="Yes"> Yes</label>
60+
<label><input type="radio" name="like" value="Very Much"> Very Much</label>
61+
62+
<label>Favourite Episode Type:</label>
63+
<label><input type="checkbox" class="episode" value="Funny"> Funny</label>
64+
<label><input type="checkbox" class="episode" value="Adventure"> Adventure</label>
65+
<label><input type="checkbox" class="episode" value="Emotional"> Emotional</label>
66+
67+
<br><br>
68+
<button onclick="calculateScore()">Submit</button>
69+
<button onclick="setWorst()">Worst Result</button>
70+
<button onclick="setBest()">Best Result</button>
71+
<button onclick="goBack()">Back</button>
72+
</div>
73+
74+
<div class="result" id="output" style="display:none;">
75+
<p><strong>Doraemon Friend Score:</strong> <span id="friendScore" class="score"></span>/100</p>
76+
<p><strong>How much Shizuka likes you:</strong> <span id="shizukaScore" class="score"></span>%</p>
77+
</div>
78+
79+
<script>
80+
function calculateScore() {
81+
let name = document.getElementById('name').value || "Unknown";
82+
let character = document.getElementById('character').value;
83+
let gadget = document.getElementById('gadget').value;
84+
let like = document.querySelector('input[name="like"]:checked')?.value || "No";
85+
86+
let episodes = Array.from(document.querySelectorAll('.episode:checked')).map(e => e.value);
87+
88+
// Calculate score
89+
let score = 0;
90+
if(like === "Yes") score += 20;
91+
if(like === "Very Much") score += 40;
92+
if(character === "Doraemon") score += 20;
93+
if(character === "Shizuka") score += 10;
94+
score += Math.min(episodes.length * 10, 30);
95+
score = Math.min(score, 100);
96+
97+
let shizukaLike = Math.min(Math.round(score * 0.7 + Math.random() * 30), 100);
98+
99+
// Display results
100+
document.getElementById('friendScore').textContent = score;
101+
document.getElementById('shizukaScore').textContent = shizukaLike;
102+
document.getElementById('output').style.display = "block";
103+
}
104+
105+
// Set form to worst possible result
106+
function setWorst() {
107+
document.getElementById('name').value = "";
108+
document.getElementById('character').value = "Nobita";
109+
document.getElementById('gadget').value = "Anywhere Door";
110+
document.querySelectorAll('input[name="like"]').forEach(r => r.checked = false);
111+
document.querySelectorAll('.episode').forEach(c => c.checked = false);
112+
calculateScore();
113+
}
114+
115+
// Set form to best possible result
116+
function setBest() {
117+
document.getElementById('name').value = "Best Friend";
118+
document.getElementById('character').value = "Doraemon";
119+
document.getElementById('gadget').value = "Anywhere Door";
120+
document.querySelector('input[name="like"][value="Very Much"]').checked = true;
121+
document.querySelectorAll('.episode').forEach(c => c.checked = true);
122+
calculateScore();
123+
}
124+
125+
// Go back to index.html
126+
function goBack() {
127+
window.location.href = "index.html";
128+
}
129+
</script>
130+
131+
</body>
132+
</html>

0 commit comments

Comments
 (0)