-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathroom4.php
122 lines (115 loc) · 4.11 KB
/
room4.php
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
<?php
// Initialize a session to track clue discovery
session_start();
// Simulate clue discovery (in a real application, this would be more sophisticated)
$_SESSION['library_visited'] = true;
// Array of clues that might be revealed based on user interactions
$clues = [
'Fireplace poker' => [
'title' => 'The Fireplace Poker',
'description' => 'The fireplace poker has blood on it, along with some hair that
seems to belong to Reginald. The poker looks like it has been used to bludgeon
someone, as there are noticeable dents in the metal.',
'is_discovered' => true
]
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library - Murder Mystery</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #2c3e50;
color: #ecf0f1;
font-family: Arial, sans-serif;
}
.room-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: rgba(44, 62, 80, 0.8);
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.room-image {
max-width: 100%;
height: auto;
margin-bottom: 20px;
border-radius: 10px;
}
.clue-list {
background-color: rgba(52, 73, 94, 0.7);
padding: 15px;
border-radius: 8px;
margin-top: 20px;
}
.clue {
margin-bottom: 15px;
padding: 10px;
background-color: rgba(39, 174, 96, 0.2);
border-left: 4px solid #27ae60;
}
.back-button {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #8e44ad;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.back-button:hover {
background-color: #9b59b6;
}
</style>
</head>
<body>
<div class="room-container">
<h1>Library</h1>
<?php if(isset($_SESSION['library_visited'])): ?>
<img src="Libraryy.jpeg" class="room-image">
<div class="room-description">
<p>The Library is filled with books on history and literature, with a large, leather
armchair beside a roaring fire. A fireplace poker leans against the mantel, and the
air smells of old books and wood smoke. There’s a stack of papers near the fireplace,
but they seem out of place.</p>
</div>
<div class="clue-list">
<h2>Discovered Clues</h2>
<?php foreach($clues as $clue): ?>
<?php if($clue['is_discovered']): ?>
<div class="clue">
<h3><?php echo htmlspecialchars($clue['title']); ?></h3>
<p><?php echo htmlspecialchars($clue['description']); ?></p>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php else: ?>
<p>You must explore the room carefully to uncover its secrets.</p>
<?php endif; ?>
<div class="navigation">
<a href="index.php" class="back-button">Back to House</a>
<?php if(isset($_SESSION['library_visited'])): ?>
<a href="room1.php" class="back-button" style="margin-left: 20px;">Explore Next Room</a>
<?php endif; ?>
</div>
</div>
<script>
// Optional: Add some interactive elements with JavaScript
document.addEventListener('DOMContentLoaded', () => {
const clues = document.querySelectorAll('.clue');
clues.forEach(clue => {
clue.addEventListener('click', () => {
clue.classList.toggle('expanded');
});
});
});
</script>
</body>
</html>