Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
a3c06c9065 |
10
frontend/Dockerfile
Normal 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;"]
|
322
frontend/htdocs/css/main.css
Normal 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;
|
||||
}
|
322
frontend/htdocs/css/main.css.bak
Normal 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;
|
||||
}
|
188
frontend/htdocs/homepage-01.svg
Normal 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 |
BIN
frontend/htdocs/images/checkmark.png
Normal file
After Width: | Height: | Size: 627 B |
BIN
frontend/htdocs/images/icon-avatar.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
frontend/htdocs/images/icon-expand.png
Normal file
After Width: | Height: | Size: 654 B |
BIN
frontend/htdocs/images/icon-link.png
Normal file
After Width: | Height: | Size: 850 B |
BIN
frontend/htdocs/images/logo.png
Normal file
After Width: | Height: | Size: 10 KiB |
61
frontend/htdocs/images/logo.svg
Normal file
After Width: | Height: | Size: 19 KiB |
53
frontend/htdocs/index.html
Normal 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">☰</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>
|
52
frontend/htdocs/js/main.js
Normal 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);
|
||||
}
|
||||
});
|
||||
});
|
489
frontend/htdocs/result-01.svg
Normal file
After Width: | Height: | Size: 67 KiB |
621
frontend/htdocs/result-02.svg
Normal file
After Width: | Height: | Size: 74 KiB |
101
frontend/htdocs/search.html
Normal 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">☰</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>
|