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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
@extends('template')
@section('head')
<script type = "module" src = "/js/main.js"></script>
@endsection
@section('body')
<canvas id = "bg">
</canvas>
<main>
<header>
<h1>A friendly webserver</h1>
<h2></h2>
<p>
Welcome
</p>
<div id = "site-status">
<h6>Current Status</h6>
<p></p>
<p>Number of friends connected: <b id = "numFriendsConnected"></b></p> <!-- show number of other connections to webserver -->
<br>
<h6>Who am I?</h6>
<div class = "embed-hover-container">
<a href = "#" class = "embed-hover" style="position: relative;">I am a man.</a>
<iframe class="embed-hover-iframe" width="460" height="240"
src = "https://www.youtube.com/embed/6JE0Hfvjgsw?enablejsapi=1&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p>A human young adult male, citizen of the United States, software engineer, enjoyer of a variety of different forms of art. But the more important matter right now is this website. What is its purpose? What can it do for you?
Well, it provides a few different services. Read more below.</p>
</div>
<p>Who are you?</p><input type = "text" id = "input_who" />
<br>
</div>
<br>
</header>
<!-- currently retired but will reopen after sort out next phase of services
<section id = "services">
<h4>Services</h4>
<ul>
<li><a href = "http://belthelziquor.com:8000">Focalboard (non-SSL)</a></li>
<li><a href = "http://belthelziquor.com:8334">Filestash (non-SSL)</a></li>
<a href = "/focalboard">Focalboard (non-SSL)</a><br>
<a href = "/filestash">Filestash (non-SSL)</a><br>
<li><a href = "http://belthelziquor.com:7070">Boogis Dialogue System (non-SSL)</a></li>
<li><a href = "http://belthelziquor.com:7000">Drawing Board (non-SSL)</a></li>
</ul>
</section> -->
<!--<noscript>-->
<section id = "fileupload-nojs">
<h4>File Upload</h4>
<h6><a href = "/f">Browse Uploaded Files</a></h6>
<form action="/f" method="POST" enctype="multipart/form-data">
@csrf
@error('f') {{ $message }} @enderror
<input multiple name="f[]" type="file">
<input hidden name = "response_format" value = "html" />
<button type = "submit">Upload</button>
</form>
</section>
<!--</noscript>-->
<section id = "fileupload" hidden="true">
<h4>File Upload</h4>
<h6><a href = "/f">Browse Uploaded Files</a></h6>
<!--<form action="/f" method="POST" enctype="multipart/form-data">-->
@error('f') {{ $message }} @enderror
<input id = "f" multiple name="f[]" type="file" >
<br>
<button id = "button_fileupload" enabled="false" type = "submit">Upload</button>
<!--</form>-->
<div id = "fileupload_result"></div>
</section>
<section>
<h4><a href = "w">Writings</a></h4>
<small>Basically a blog. Focused on interesting things I've discovered or made, but also some opinions, thoughts, and ideas.</small>
</section>
<section id = "dunechapterexcerpts" hx-get = "/dq" hx-trigger = "load,click" hx-swap = "innerHTML">
<h4>random dune pre-chapter quote goes here (under construction)</h4>
</section>
<section id = "links">
<h4><a href = "/l">Some useful/interesting links</a></h4>
<!--<h5>Add a new link to the collection</h5>
<input id = "input-link" type = "text" />
<button hx-post = "/htmx/links" onclick = "addLink()">Add</button> -->
<!--<div id="links-list" hx-get="/htmx/links" hx-trigger="load, every 30s">-->
</div>
</section>
<section id = "calendar">
</section>
<section id = "random-thought">
<!-- here is a random excerpt, grabbed from the database of random thoughts from my writings -->
</section>
<section id = "pingtest" hidden>
<p hx-get = "ping" hx-swap = "innerHTML">Checking connection to API server...</p>
</section>
<section id = "infolog" >
</section>
</main>
{{--
<?php
$files = Storage::disk('public')->files('homeimages');
if (count($files) > 0){
$homeImgSrc = $files[array_rand($files)];
}
?>
<section id="home_img_container" style="position: absolute; top: 20%; right: 10%; width: 200px; height: auto;" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="{{ $homeImgSrc }}" id = "img_home" style="max-width: 100%; height: auto;">
</section> --}}
<style>
.embed-hover-container {
display: flex;
flex-direction: column;
align-items: left;
position: relative;
}
.embed-hover:hover {
display: block;
}
.embed-hover-iframe {
display: none;
position: absolute;
top: 2%;
left: 45%;
transform: translateX(-50%);
z-index: 10;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
</style>
<script type = "text/javascript">
//on mouse hover, show/hide and play the video
let hoverTimeout = null;
const link = document.querySelector('.embed-hover');
const iframe = document.querySelector('.embed-hover-iframe');
let ytPlayer = null;
// Load YouTube IFrame API
function loadYTAPI() {
if (window.YT && window.YT.Player) {
onYouTubeIframeAPIReady();
} else {
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
document.body.appendChild(tag);
window.onYouTubeIframeAPIReady = function() {
ytPlayer = new YT.Player(iframe, {});
};
}
}
loadYTAPI();
link.addEventListener('mouseenter', () => {
hoverTimeout = setTimeout(() => {
iframe.style.display = 'block';
setTimeout(() => {
if (ytPlayer && ytPlayer.playVideo) {
ytPlayer.playVideo();
}
}, 100);
}, 1000);
});
link.addEventListener('mouseleave', () => {
setTimeout(()=>{
clearTimeout(hoverTimeout);
iframe.style.display = 'none';
if (ytPlayer && ytPlayer.pauseVideo) {
ytPlayer.pauseVideo();
}
}, 2500);
});
</script>
@endsection
|
