Skip to content

Commit b80d1c1

Browse files
author
atj61275
committed
Wrote impressions
1 parent 3bb85c0 commit b80d1c1

File tree

5 files changed

+270
-1
lines changed

5 files changed

+270
-1
lines changed

‎human-philosophy/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<body>
77
<div id="youtube-comments">Loading comments...</div>
88

9+
<a href="theory-of-impression/articles/impressions.html">World Philosophy</a>
10+
911
<script>
1012
// Function to fetch and display the top 3 comments
1113
async function fetchYouTubeComments() {

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
</head>
6363
<body>
6464
<div class="header">
65-
<h1>Welcome to Hyper Impressed</h1>
65+
<h1>Hyper Impressive Symbols</h1>
6666
</div>
6767
<div class="nav">
6868
<a href="world-philosophy/index.html">World Philosophy</a>

‎theory-of-impression/articles/impressions.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
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>Sample Website with Montserrat Font</title>
7+
<!-- Include Montserrat font from Google Fonts -->
8+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;900&display=swap" rel="stylesheet">
9+
10+
<style>
11+
body {
12+
font-family: 'Montserrat', sans-serif;
13+
font-size: 1.25em;
14+
}
15+
16+
.header {
17+
background-color: #f0f0f0;
18+
padding: 20px;
19+
text-align: center;
20+
}
21+
22+
.content {
23+
padding: 0;
24+
}
25+
26+
.footer {
27+
background-color: #f0f0f0;
28+
padding: 10px;
29+
text-align: center;
30+
}
31+
32+
.para-block {
33+
display: flex;
34+
justify-content: space-between;
35+
align-items: flex-center;
36+
gap: 0px;
37+
padding-left: 15%;
38+
padding-right: 10%;
39+
}
40+
41+
.para-block p {
42+
flex: 1;
43+
}
44+
45+
.inline-buttons {
46+
display: flex;
47+
flex-direction: row;
48+
gap: 15px;
49+
flex-shrink: 0;
50+
align-items: center;
51+
padding-left: 15px;
52+
}
53+
54+
/* Common styles for both buttons */
55+
.inline-buttons button {
56+
width: 40px;
57+
height: 40px;
58+
border-radius: 50%;
59+
border: none;
60+
font-size: 18px;
61+
font-weight: bold;
62+
color: white;
63+
cursor: pointer;
64+
transition: background-color 0.3s;
65+
display: flex;
66+
justify-content: center;
67+
align-items: center;
68+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
69+
}
70+
71+
/* Doubt button styles (❌) */
72+
.doubtBtn {
73+
background-color: #007BFF; /* Bootstrap Blue */
74+
}
75+
76+
/* Agree button styles (✅) */
77+
.agreeBtn {
78+
background-color: #ddd;
79+
color: black;
80+
}
81+
82+
/* When Agree is clicked, turn it green */
83+
.agreeBtn.clicked {
84+
background-color: #28a745; /* Bootstrap Green */
85+
color: white;
86+
}
87+
88+
hr {
89+
padding: 0;
90+
border: none;
91+
border: 1px solid #ccc;
92+
width: 70%;
93+
margin-top: 0.05em; /* reduce space above the line */
94+
margin-bottom: 0.05em; /* reduce space below the line */
95+
margin-left: auto; /* center */
96+
margin-right: auto; /* center */
97+
98+
}
99+
100+
101+
</style>
102+
</head>
103+
104+
105+
106+
<body>
107+
<div class="header">
108+
<h1>The Theory of Impressions</h1>
109+
</div>
110+
111+
<div class="content">
112+
<div class="para-block">
113+
<p> Immediate knowledge comes to <i>you</i>, the consiousness, in the form of the undeniable appearance of an internal experience.
114+
<br> We will call such appearance an <b>internal impression</b>.
115+
</p>
116+
</div>
117+
<hr>
118+
<div class="para-block">
119+
<p> You are able to <b>remember/recall</b> past internal impressions.
120+
<br> This can be done, by connecting the current impression to some memorable <b>symbol</b> and later revisiting the symbol.
121+
<br> <i>&nbsp &oslash Writing a text describing your internal images, e.g. a specific dream, and reading it years later.
122+
<br> &nbsp &oslash Walking past the tree where you had your first kiss. </i>
123+
</p>
124+
</div>
125+
<hr>
126+
<div class="para-block">
127+
<p> Every <b> inter-personal communication</b> is an attempt, to induce a specific internal impression in the other person
128+
<br> by using symbols, which feel best-fitted for this task.
129+
</p>
130+
</div>
131+
132+
</div>
133+
<div class="footer">
134+
<p>hyperimpressed</p>
135+
</div>
136+
137+
<script>
138+
// Automatically inject buttons into every .para-block
139+
document.querySelectorAll('.para-block').forEach(block => {
140+
const btnContainer = document.createElement('div');
141+
btnContainer.className = 'inline-buttons';
142+
143+
const agreeBtn = document.createElement('button');
144+
agreeBtn.className = 'agreeBtn';
145+
agreeBtn.textContent = "";
146+
147+
const doubtBtn = document.createElement('button');
148+
doubtBtn.className = 'doubtBtn';
149+
doubtBtn.textContent = 'X';
150+
151+
btnContainer.appendChild(agreeBtn);
152+
btnContainer.appendChild(doubtBtn);
153+
block.appendChild(btnContainer);
154+
});
155+
156+
// Add behavior
157+
document.addEventListener('click', function (e) {
158+
if (e.target.classList.contains('agreeBtn')) {
159+
e.target.classList.add('clicked');
160+
} else if (e.target.classList.contains('doubtBtn')) {
161+
alert('You can explore more or provide your own reasoning.');
162+
}
163+
});
164+
</script>
165+
</body>
166+
</html>

‎theory-of-impression/articles/knowledge _and_truth.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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>Sample Website with Montserrat Font</title>
7+
<!-- Include Montserrat font from Google Fonts -->
8+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;900&display=swap" rel="stylesheet">
9+
<style>
10+
body {
11+
font-family: 'Montserrat', sans-serif;
12+
}
13+
14+
.header {
15+
background-color: #f0f0f0;
16+
padding: 20px;
17+
text-align: center;
18+
}
19+
20+
.content {
21+
padding: 20px;
22+
}
23+
24+
.footer {
25+
background-color: #f0f0f0;
26+
padding: 10px;
27+
text-align: center;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<div class="header">
33+
<h1>Everything is as it is, because it works. (Functionality)</h1>
34+
</div>
35+
36+
<div class="content">
37+
<p> The concept of evolution must be applied to all things:<br>
38+
Material particles are the way they are, because they have managed to persist over time.<br>
39+
Particles, that dissolve instantly, are non-persistent, therefore not here anymore.<br> This means, that there is a <b>Functionality</b> embedded within our reality. Its rules determine the shape of the world.
40+
</p>
41+
<p>To clarify: We look at reality as the existence of space, waves and matter across time.<br>
42+
We know this one rule beforehand, which states: Everything, which fulfills a function proposed by reality, exists across an amount of time.<br>
43+
Since we observe, that a thing exist, it must mean, that this thing satisfies the function for existance. <br>
44+
It must also mean, that some base noise must have existed, from which something can form, which is able to fulfill the functions requirements.<br>
45+
I imagine conways game of life. A field of noise is given and a set of rules is given. From this, after a short amount of time, structures emerge, which satisfy the function for existance. </p>
46+
<p>This means, there is an initial field of realitypixels, whichs values can flutter over time.
47+
<br> In conways game, it is a two dimensional field with poss values 1 and 0 at any given time. In our reality it is a 3d space with an unknown number of otherdimensional values fixed at each point in space.</p>
48+
<p> Again, there must exist rules that allow the interaction of several spacepoints to merit existance over time.<br>
49+
Such a thing as velocity of an object exists. Therefore in some way two points in spacetime must allow transmission of information across time.<br>
50+
My body exists across time. This means that a collection of spacetime pixels can be called "an object", if they fulfill some requirement.</p>
51+
</div>
52+
53+
<div class="footer">
54+
<p>Contact us at email@example.com</p>
55+
</div>
56+
</body>
57+
</html>

‎theory-of-impression/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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>Sample Website with Montserrat Font</title>
7+
<!-- Include Montserrat font from Google Fonts -->
8+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
9+
<style>
10+
body {
11+
font-family: 'Montserrat', sans-serif;
12+
}
13+
14+
.header {
15+
background-color: #f0f0f0;
16+
padding: 20px;
17+
text-align: center;
18+
}
19+
20+
.content {
21+
padding: 20px;
22+
}
23+
24+
.footer {
25+
background-color: #f0f0f0;
26+
padding: 10px;
27+
text-align: center;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<div class="header">
33+
<h1>Welcome to My Website</h1>
34+
</div>
35+
36+
<div class="content">
37+
<p>This is a sample website that uses the Montserrat font. Montserrat is a geometric style of typeface that's both modern and clean, making it great for web and print design. Feel free to use this template as a starting point for your website.</p>
38+
</div>
39+
40+
<div class="footer">
41+
<p>Contact us at email@example.com</p>
42+
</div>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)