-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathparagraph.html
140 lines (117 loc) · 5.42 KB
/
paragraph.html
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
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title data-key="title"></title>
<script>
const script = document.createElement('script');
script.src = "engine/autoloader.js" + '?v=' + new Date().getTime();
script.async = true;
document.head.appendChild(script);
</script>
<style>
html, body {
height: 100%;
margin: 0;
}
.container-fluid {
height: 100%;
display: flex;
flex-direction: column; /* Column direction for small screens */
}
.row {
flex: 1 1 auto;
}
.left-column, .right-column {
height: auto;
}
.text-block {
max-height: 70%;
overflow-y: auto; /* Ensures the text block scrolls if necessary */
}
.text-block p {
font-size: 1rem; /* Default font size */
}
#paragraph-title {
font-weight: bold;
}
#paragraph-description {
line-height: 1.1;
}
#paragraph-description > p {
margin-bottom: 1.0%;
}
@media (min-width: 992px) {
html, body {
overflow: hidden; /* Prevents entire page scrolling for large screens */
}
.container-fluid {
flex-direction: row; /* Row direction for large screens */
}
.left-column, .right-column {
height: 100%;
}
.text-block {
max-height: 70%;
overflow-y: auto;
}
.text-block p {
font-size: 0.8rem; /* Smaller font size for large screens */
}
}
@media (max-width: 991px) {
.left-column, .right-column {
height: auto;
}
.text-block {
max-height: none;
overflow-y: visible;
}
img.img-fluid {
height: auto;
}
.text-block p {
font-size: 1.2rem;
}
#paragraph-description > p {
margin-bottom: 2.1%;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="left-column" class="col-12 col-lg-4 p-0 left-column">
<img id="paragraph-image" src="engine/no-image.jpg" class="img-fluid w-100 p-4 p-lg-2" alt="Paragraph image" style="object-fit: cover;">
</div>
<div id="right-column" class="col-12 col-lg-8 p-0 d-flex flex-column right-column">
<div class="flex-grow-1 p-3 text-block">
<h3><span id="paragraph-title">Oasis Ipsum</span> (<span id="paragraph-number">∞</span>)</h3>
<p id="paragraph-description">
Wandering through the enchanted forest, the explorer stumbled upon a hidden oasis. Mystical creatures danced around the crystal-clear springs, their laughter echoing through the trees. The air was filled with the scent of blooming lotus flowers and the sound of trickling water. Under the ancient willow tree, the wise old sage shared tales of forgotten realms and untold adventures.<br /><br />
Far beyond the horizon, the great castle stood tall, its towers reaching for the heavens. The walls were adorned with ivy and the banners fluttered in the gentle breeze. Knights in shining armor patrolled the battlements, their eyes ever watchful for signs of impending danger. In the grand hall, a feast was laid out, with goblets of golden mead and platters of sumptuous delicacies.<br /><br />
As night fell, the stars began to twinkle, casting a soft glow over the land. The moon, full and bright, bathed the scene in its silvery light. Fireflies danced in the meadows, creating a mesmerizing display of natural beauty. The explorer, filled with wonder and awe, knew that this was a place of magic.
</p>
</div>
<div class="p-3 d-flex flex-column align-items-center" style="flex: 0 1 30%;">
<div id="paragraph-buttons" class="btn-group mb-2 justify-content-between w-100">
<button type="button" class="btn btn-success button-25 w-25 me-2">Run</button>
<button type="button" class="btn btn-success button-25 w-25 me-2">Hide</button>
<button type="button" class="btn btn-success button-25 w-25 me-2">Fight</button>
<button type="button" class="btn btn-success button-25 w-25 me-2">Scream</button>
</div>
<div id="control-buttons" class="btn-group justify-content-between w-50">
<button id="settings-button" type="button" data-text="Options" class="btn btn-info w-25 me-2" data-target="settings"></button>
<button id="menu-button" type="button" data-text="Menu" class="btn btn-warning w-25 me-2" data-target="menu"></button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>