Compare commits

...

1 Commits

Author SHA1 Message Date
a3c06c9065 Adding initial cut of frontend 2025-01-30 02:14:24 +00:00
15 changed files with 2219 additions and 0 deletions

10
frontend/Dockerfile Normal file
View File

@ -0,0 +1,10 @@
# Use a lightweight base image with Lighttpd
FROM nginx:alpine
# Copy website files to the Lighttpd serving directory
COPY ./htdocs /usr/share/nginx/html/
EXPOSE 8080:80
# Start Lighttpd
CMD ["nginx", "-g", "daemon off;"]

View File

@ -0,0 +1,322 @@
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.clear {
clear: both;
}
html, body {
/* To vertically center align */
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
h1, h2, h3, h4, a {
color: #666666;
}
h1, h2, h3, h4 {
margin: 0 0 10px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.homepage .center {
text-align: center;
/* To vertically center align */
display: table-cell;
vertical-align: middle;
}
.section {
margin: 50px auto;
}
.searcharea {
border: 1px solid #b3b3b3;
border-radius: 30px;
max-width: 800px;
}
.searchinput {
width: 75%;
color: #666666;
background: none;
border: none;
font-size: 22px;
float: left;
padding: 10px 25px;
box-sizing: border-box;
outline: none;
}
.searchsubmit {
float: right;
width: 20%;
background: #333333;
color: #f2f2f2;
border: none;
border-radius: 30px;
padding: 10px 20px;
margin: 2px;
font-size: 18px;
cursor: pointer;
}
.links.section li {
display: inline-block;
margin: 0 10px;
color: #666666;
}
.hbmenu {
position: absolute;
top: 0;
right: 0;
background: #ffffff;
/* Remove focus border */
outline: none;
z-index: 100;
}
.hbmenu .hbbtn {
display: block;
padding: 15px 20px;
content: "\2630";
color: #666666;
font-size:24px;
cursor: pointer;
}
.hbmenu:focus {
pointer-events: none;
height: 100%;
border-left: 1px solid #b3b3b3;
padding: 0;
}
.hbmenu .menu {
display: none;
z-index: 1000;
pointer-events: auto;
}
.hbmenu:focus .menu {
display: unset;
}
.hbmenu .menu li {
display: block;
}
.hbmenu .menu li a {
display: inline-block;
width: 160px;
padding: 15px 20px;
}
/* ----- Search result page ----- */
.resultpage .navbar {
padding: 10px 10px;
}
.resultpage .logo {
margin: 20px 0 0 10px;
}
.resultpage .hbbtn {
margin: 20px 0 0;
}
.resultpage .logo img {
width: 150px;
float: left;
}
.resultpage .searcharea {
margin: 20px auto;
max-width: 600px;
}
.resultpage .resultarea {
margin: 0 auto;
max-width: 600px;
padding: 10px 25px;
color: #666666;
}
.resultpage .resultinfo {
font-style: italic;
margin: 0 0 10px 0;
}
.resultarea .result:last-child {
border-bottom: none;
}
.result {
padding: 30px 0;
border-bottom: 1px solid #d6d6d6;
}
.result .useravatar {
border-radius: 100px;
border: 3px solid #4d4d4d;
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
}
.result .useravatar img {
border-radius: 100px;
width: 44px;
height: 44px;
}
.result .resulttop {
height: 54px;
margin: 0 0 10px 0;
}
.result .userdata {
width: 70%;
float:left;
}
.result .userlabel, .result .userident {
display: block;
width: auto;
}
.result .userlabel {
font-weight: bold;
padding-bottom: 2px;
padding: 2px 0;
color: #4d4d4d;
}
.result .userident {
padding: 0 0;
}
.result .actions {
float: right;
padding: 5px 10px;
display: none;
}
.result:hover .actions {
display: unset;
}
.result .actions li {
list-style: none;
display: inline-block;
margin: 0 2px;
}
.result:hover .actions li a {
padding: 2px;
border-radius: 100px;
background: #e6e6e6;
display: inline-block;
width:36px;
height:36px;
}
.result:hover .actions li a:hover {
background: #cccccc;
}
.result:hover .actions li img {
width: 18px;
height: 18px;
margin: 7px 0 0 7px;
}
.pagin {
text-align: center;
margin: 50px 0;
}
.pagin ul {
list-style: none;
}
.pagin ul li {
display: inline-block;
}
.pagin a {
padding: 10px;
display: inline-block;
border-radius: 30px;
min-height: 40px;
min-width: 40px;
}
.pagin a:hover {
background: #e6e6e6;
/* No underline for pagination links */
text-decoration: none;
}
.pagin a.current {
background: #333333;
color: #f2f2f2;
}
.sidebar {
position: absolute;
top: 100px;
width: 300px;
padding: 20px 30px;
}
.left.sidebar {
left: 0;
}
.right.sidebar {
right: 0;
}
.sidebar .list {
list-style: none;
}
.sidebar h4, .sidebar h5 {
margin-top: 10px;
}
.list.checks li a {
/* Create place for checkmark */
padding-left: 20px;
}
.list li.current a {
font-weight: bold;
}
.list.checks li.current {
background: url("../images/checkmark.png") no-repeat;
/* Size of checkmark */
background-size: 15px;
background-position-y: 5px;
}

View File

@ -0,0 +1,322 @@
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.clear {
clear: both;
}
html, body {
/* To vertically center align */
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
h1, h2, h3, h4, a {
color: #666666;
}
h1, h2, h3, h4 {
margin: 0 0 10px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.homepage .center {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.section {
margin: 50px auto;
}
.searcharea {
border: 1px solid #b3b3b3;
border-radius: 30px;
max-width: 800px;
}
.searchinput {
color: #666666;
background: none;
border: none;
font-size: 22px;
float: left;
display: inline-block;
margin-right: 100px;
padding: 10px 25px;
box-sizing: border-box;
outline: none;
}
.searchsubmit {
display: inline-block;
float: right;
width: 100px;
background: #333333;
color: #f2f2f2;
border: none;
border-radius: 30px;
padding: 10px 20px;
margin: 2px;
font-size: 18px;
cursor: pointer;
}
.links.section li {
display: inline-block;
margin: 0 10px;
color: #666666;
}
.hbmenu {
position: absolute;
top: 0;
right: 0;
background: #ffffff;
/* Remove focus border */
outline: none;
z-index: 100;
}
.hbmenu .hbbtn {
display: block;
padding: 15px 20px;
content: "\2630";
color: #666666;
font-size:24px;
cursor: pointer;
}
.hbmenu:focus {
pointer-events: none;
height: 100%;
border-left: 1px solid #b3b3b3;
padding: 0;
}
.hbmenu .menu {
display: none;
z-index: 1000;
pointer-events: auto;
}
.hbmenu:focus .menu {
display: unset;
}
.hbmenu .menu li {
display: block;
}
.hbmenu .menu li a {
display: inline-block;
width: 160px;
padding: 15px 20px;
}
/* Search result page */
.resultpage .navbar {
padding: 10px 10px;
}
.resultpage .logo {
margin: 20px 0 0 10px;
}
.resultpage .hbbtn {
margin: 20px 0 0;
}
.resultpage .logo img {
width: 150px;
float: left;
}
.resultpage .searcharea {
margin: 20px auto;
max-width: 600px;
}
.resultpage .resultarea {
margin: 0 auto;
max-width: 600px;
padding: 10px 25px;
color: #666666;
}
.resultpage .resultinfo {
font-style: italic;
margin: 0 0 10px 0;
}
.resultarea .result:last-child {
border-bottom: none;
}
.result {
padding: 30px 0;
border-bottom: 1px solid #d6d6d6;
}
.result .useravatar {
border-radius: 100px;
border: 3px solid #4d4d4d;
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
}
.result .useravatar img {
border-radius: 100px;
width: 44px;
height: 44px;
}
.result .resulttop {
height: 54px;
margin: 0 0 10px 0;
}
.result .userdata {
width: 70%;
float:left;
}
.result .userlabel, .result .userident {
display: block;
width: auto;
}
.result .userlabel {
font-weight: bold;
padding-bottom: 2px;
padding: 2px 0;
color: #4d4d4d;
}
.result .userident {
padding: 0 0;
}
.result .actions {
float: right;
padding: 5px 10px;
display: none;
}
.result:hover .actions {
display: unset;
}
.result .actions li {
list-style: none;
display: inline-block;
margin: 0 2px;
}
.result:hover .actions li a {
padding: 2px;
border-radius: 100px;
background: #e6e6e6;
display: inline-block;
width:36px;
height:36px;
}
.result:hover .actions li a:hover {
background: #cccccc;
}
.result:hover .actions li img {
width: 18px;
height: 18px;
margin: 7px 0 0 7px;
}
.pagin {
text-align: center;
margin: 50px 0;
}
.pagin ul {
list-style: none;
}
.pagin ul li {
display: inline-block;
}
.pagin a {
padding: 10px;
display: inline-block;
border-radius: 30px;
min-height: 40px;
min-width: 40px;
}
.pagin a:hover {
background: #e6e6e6;
/* No underline for pagination links */
text-decoration: none;
}
.pagin a.current {
background: #333333;
color: #f2f2f2;
}
.sidebar {
position: absolute;
top: 100px;
width: 300px;
padding: 20px 30px;
}
.left.sidebar {
left: 0;
}
.right.sidebar {
right: 0;
}
.sidebar .list {
list-style: none;
}
.sidebar h4, .sidebar h5 {
margin-top: 10px;
}
.list.checks li a {
/* place for checkmark */
padding-left: 20px;
}
.list li.current a {
font-weight: bold;
}
.list.checks li.current {
background: url("../images/checkmark.png") no-repeat;
/* size of checkmark */
background-size: 15px;
background-position-y: 5px;
}

View File

@ -0,0 +1,188 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1920"
height="1080"
viewBox="0 0 1920 1080"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
sodipodi:docname="website-01.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="0.15648011"
inkscape:cx="1156.6965"
inkscape:cy="354.67766"
inkscape:window-width="1280"
inkscape:window-height="729"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="g25642"
showguides="false"
inkscape:guide-bbox="true">
<sodipodi:guide
position="925.83652,691.37233"
orientation="0,-1"
id="guide12736" />
<sodipodi:guide
position="928.23299,749.28704"
orientation="0,-1"
id="guide12738" />
</sodipodi:namedview>
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g25642"
transform="matrix(1.5476036,0,0,1.5476036,-332.87488,-194.2829)"
inkscape:export-filename="images/logo.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:70.5342px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none;stroke-width:1.76336"
x="703.68182"
y="376.75885"
id="text1838"
inkscape:export-filename="/home/user/Codes/fedilogue_fe/images/logo.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"><tspan
sodipodi:role="line"
id="tspan1836"
x="703.68182"
y="376.75885"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:ultra-condensed;font-family:'Fira Sans Compressed';-inkscape-font-specification:'Fira Sans Compressed Bold Ultra-Condensed';fill:#666666;stroke-width:1.76336">Fedi</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:69.1868px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none;stroke-width:1.72967"
x="816.16357"
y="376.09122"
id="text3330"
inkscape:export-filename="/home/user/Codes/fedilogue_fe/images/logo.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"><tspan
sodipodi:role="line"
id="tspan3328"
x="816.16357"
y="376.09122"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Fira Sans Compressed';-inkscape-font-specification:'Fira Sans Compressed';fill:#666666;stroke-width:1.72967">logue</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:33.9048px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none;stroke-width:0.847622"
x="1396.351"
y="170.29684"
id="text5546"><tspan
sodipodi:role="line"
id="tspan5544"
style="fill:#666666;fill-opacity:1;stroke-width:0.847622"
x="1396.351"
y="170.29684">☰</tspan></text>
</g>
<rect
style="fill:#ffffff;stroke:#b3b3b3;stroke-width:2.01012;stroke-miterlimit:4;stroke-dasharray:none"
id="rect25484"
width="1063.5865"
height="82.989876"
x="428.20673"
y="524.83313"
rx="41.077236"
ry="41.494938" />
<rect
style="fill:#333333;stroke:none;stroke-width:0.984461;stroke-miterlimit:4;stroke-dasharray:none"
id="rect25644"
width="186.50233"
height="74.015541"
x="1300.9961"
y="529.32025"
rx="38.191616"
ry="37.007771" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:35.8154px;line-height:1.25;font-family:sans-serif;fill:#f2f2f2;fill-opacity:1;stroke:none;stroke-width:0.895386"
x="1340.4105"
y="579.75879"
id="text27275"><tspan
sodipodi:role="line"
id="tspan27273"
x="1340.4105"
y="579.75879"
style="stroke-width:0.895386;fill:#f2f2f2">Search</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="747.23029"
y="787.40198"
id="text31239"><tspan
sodipodi:role="line"
id="tspan31237"
x="747.23029"
y="787.40198">About</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="901.51971"
y="787.40198"
id="text32067"><tspan
sodipodi:role="line"
id="tspan32065"
x="901.51971"
y="787.40198">How it works</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="1179.2467"
y="787.40198"
id="text34761"><tspan
sodipodi:role="line"
id="tspan34759"
x="1179.2467"
y="787.40198">FAQ</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="1297.7744"
y="787.40198"
id="text35791"><tspan
sodipodi:role="line"
id="tspan35789"
x="1297.7744"
y="787.40198">Contact</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="484.97955"
y="787.40198"
id="text10093"><tspan
sodipodi:role="line"
id="tspan10091"
x="484.97955"
y="787.40198">Trending</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="683.76117"
y="787.40198"
id="text12155"><tspan
sodipodi:role="line"
id="tspan12153"
x="683.76117"
y="787.40198">|</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 627 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 654 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 850 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fedilogue</title>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body class="homepage">
<div tabindex="0" class="hbmenu">
<span class="hbbtn">&#9776;</span>
<div class="menu">
<li><a href="#">About</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Trending</a></li>
</div>
</div>
<div class="center">
<div class="logo section">
<a class="logolink" href="#" title="Fedilogue logo">
<img src="images/logo.svg" alt="Fedilogue logo image"/>
</a>
</div>
<div class="searcharea section">
<form name="search" method="get" action="search.html">
<input class="searchinput" type="text" name="q" value="" />
<input class="searchsubmit" type="submit" name="" value="Search" />
<div class="clear"></div>
</form>
</div>
<div class="links section">
<ul>
<li><a href="#">Trending</a></li>
<li>|</li>
<li><a href="#">About</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,52 @@
$(window).on("load", function() {
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var qValue = urlParams.get('q');
var myElement = $('#searchinput');
myElement.val(qValue);
var strongElement = $('#searchtextstrong');
strongElement.text(qValue);
$.ajax({
url: 'http://192.168.1.219:6431/api/v1/search', // The URL to send the request to
type: 'GET', // HTTP method (GET, POST, etc.)
dataType: 'json', // Expected data format from the server
success: function(response) {
// This function is called if the request is successful
console.log('Data received:', response);
$.each(response['activities'], function(key, value) {
console.error(key, value);
var resultHTML = `
<div class="result">
<div class="resulttop">
<div class="userdata">
<a href="#" title="User Avatar" target="_blank" class="useravatar"><img src="` + value['actor']['icon']['url'] + `" /></a>
<a href="#" title="User Label" target="_blank" class="userlabel">` + value['actor']['name'] + `</a>
<a href="` + value['actor']['url'] + `" title="User ID" target="_blank" class="userident">@` + value['actor']['preferredUsername'] + `@` + value['instance'] + `</a>
</div>
<div class="actions">
<ul>
<li><a href="` + value['id'] +`" title="Post URL"><img src="images/icon-link.png" /></a></li>
<li><a href="#" title="Expand post"><img src="images/icon-expand.png" /></a></li>
</ul>
</div>
</div>
<div class="resultbody">
` + value['content'] + `
</div>
<div class="resultbody">` + value['published'] +`</div>
</div>
`;
$(resultHTML).appendTo('#result_container');
});
},
error: function(xhr, status, error) {
// This function is called if the request fails
console.error('Error:', error);
}
});
});

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 67 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 74 KiB

101
frontend/htdocs/search.html Normal file
View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fedilogue</title>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body class="resultpage">
<div class="navbar">
<div tabindex="0" class="hbmenu">
<span class="hbbtn">&#9776;</span>
<div class="menu">
<li><a href="#">About</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Trending</a></li>
</div>
</div>
<div class="logo">
<a class="logolink" href="index.html" title="Fedilogue logo">
<img src="images/logo.svg" alt="Fedilogue logo image"/>
</a>
</div>
<div class="searcharea">
<form name="search" method="get">
<input class="searchinput" type="text" name="q" value="" id="searchinput" />
<input class="searchsubmit" type="submit" name="" value="Search" />
<div class="clear"></div>
</form>
</div>
</div>
<div class="resultarea">
<div class="resultinfo">Search for <strong id="searchtextstrong"></strong> returned <strong>0000</strong> results.</div>
<div id="result_container">
</div>
<div class="pagin">
<ul>
<li><a href="#" class="current">Load More</a></li>
</ul>
</div>
</div>
<div class="sidebar left">
<h3>Finetune</h3>
<h4>Post time within:</h4>
<ul class="list checks">
<li class="current"><a href="#">all</a></li>
<li><a href="#">24 hours</a></li>
<li><a href="#">1 week</a></li>
<li><a href="#">1 month</a></li>
<li><a href="#">6 months</a></li>
<li><a href="#">1 year</a></li>
</ul>
<h4>Post length:</h4>
<ul class="list checks">
<li class="current"><a href="#">all</a></li>
<li><a href="#">small (150 chars)</a></li>
<li><a href="#">toot (500 chars)</a></li>
<li><a href="#">longer (1000 chars)</a></li>
<li><a href="#">very long (>1000 chars)</a></li>
</ul>
<h4>Other</h4>
<h4>Attachment:</h4>
<ul class="list checks">
<li class="current"><a href="#">all</a></li>
<li><a href="#">with attachments</a></li>
<li><a href="#">without attachments</a></li>
</ul>
<h4>Mentions:</h4>
<ul class="list checks">
<li class="current"><a href="#">all</a></li>
<li><a href="#">with mentions</a></li>
<li><a href="#">without mentions</a></li>
</ul>
</div>
<div class="sidebar right">
<h3>Trending</h3>
<ul class="list trending">
<li><a href="#">#onehashtag</a></li>
<li><a href="#">#somethingelse</a></li>
<li><a href="#">#anothertag</a></li>
<li><a href="#">#exampletrending</a></li>
<li><a href="#">#exampletag</a></li>
</ul>
</div>
</body>
</html>