diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 0000000..1100e2d --- /dev/null +++ b/frontend/Dockerfile @@ -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;"] diff --git a/frontend/htdocs/css/main.css b/frontend/htdocs/css/main.css new file mode 100644 index 0000000..819ed4c --- /dev/null +++ b/frontend/htdocs/css/main.css @@ -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; +} diff --git a/frontend/htdocs/css/main.css.bak b/frontend/htdocs/css/main.css.bak new file mode 100644 index 0000000..f6b8f40 --- /dev/null +++ b/frontend/htdocs/css/main.css.bak @@ -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; +} diff --git a/frontend/htdocs/homepage-01.svg b/frontend/htdocs/homepage-01.svg new file mode 100644 index 0000000..b0836d8 --- /dev/null +++ b/frontend/htdocs/homepage-01.svg @@ -0,0 +1,188 @@ + + + + + + + + + + + + Fedi + logue + ☰ + + + + Search + About + How it works + FAQ + Contact + Trending + | + + diff --git a/frontend/htdocs/images/checkmark.png b/frontend/htdocs/images/checkmark.png new file mode 100644 index 0000000..77ab650 Binary files /dev/null and b/frontend/htdocs/images/checkmark.png differ diff --git a/frontend/htdocs/images/icon-avatar.png b/frontend/htdocs/images/icon-avatar.png new file mode 100644 index 0000000..407fbcd Binary files /dev/null and b/frontend/htdocs/images/icon-avatar.png differ diff --git a/frontend/htdocs/images/icon-expand.png b/frontend/htdocs/images/icon-expand.png new file mode 100644 index 0000000..de6ccaa Binary files /dev/null and b/frontend/htdocs/images/icon-expand.png differ diff --git a/frontend/htdocs/images/icon-link.png b/frontend/htdocs/images/icon-link.png new file mode 100644 index 0000000..0a2ed88 Binary files /dev/null and b/frontend/htdocs/images/icon-link.png differ diff --git a/frontend/htdocs/images/logo.png b/frontend/htdocs/images/logo.png new file mode 100644 index 0000000..b1e2585 Binary files /dev/null and b/frontend/htdocs/images/logo.png differ diff --git a/frontend/htdocs/images/logo.svg b/frontend/htdocs/images/logo.svg new file mode 100644 index 0000000..c82abc5 --- /dev/null +++ b/frontend/htdocs/images/logo.svg @@ -0,0 +1,61 @@ + + + + + + + + + + diff --git a/frontend/htdocs/index.html b/frontend/htdocs/index.html new file mode 100644 index 0000000..c55825f --- /dev/null +++ b/frontend/htdocs/index.html @@ -0,0 +1,53 @@ + + + + + + Fedilogue + + + + + +
+ ☰ +
+
  • About
    • +
  • How it works
    • +
  • FAQ
    • +
  • Contact
    • +
  • Trending
    • +
    +
    + +
    + + + +
    +
    + + +
    +
    +
    + +
    + +
    + +
    + + + diff --git a/frontend/htdocs/js/main.js b/frontend/htdocs/js/main.js new file mode 100644 index 0000000..6113322 --- /dev/null +++ b/frontend/htdocs/js/main.js @@ -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 = ` +
    +
    +
    + + ` + value['actor']['name'] + ` + @` + value['actor']['preferredUsername'] + `@` + value['instance'] + ` +
    +
    +
      +
      • +
      • +
    +
    +
    +
    + ` + value['content'] + ` +
    +
    ` + value['published'] +`
    +
    + `; + $(resultHTML).appendTo('#result_container'); + }); + }, + error: function(xhr, status, error) { + // This function is called if the request fails + console.error('Error:', error); + } + }); +}); diff --git a/frontend/htdocs/result-01.svg b/frontend/htdocs/result-01.svg new file mode 100644 index 0000000..b2d33de --- /dev/null +++ b/frontend/htdocs/result-01.svg @@ -0,0 +1,489 @@ + + + + + + + + + + + + + + + + + + + + + + + + ☰ + + + + + Search + + Search results for "test" returned 3409 results. + + User One + @userone@instance.tld + + Lorem ipsum dolor sit amet, est ne nibh noster. No altera probatus gloriatur eam, vim ut postea ornatus meliore, alterum elaboraret nec ex. His summo detraxit menandri eu. Quas commune appellantur duo ad, his an vero ceteros accusam, eu latine eligendi pri. + + + User Two + @usertwo@instance.tld + + Eum in admodum recusabo referrentur. Legere placerat per no, his regione aperiam at. Cum tota vituperatoribus ne. Pri modus facilisis democritum ex, veritus minimum delicatissimi no est. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/htdocs/result-02.svg b/frontend/htdocs/result-02.svg new file mode 100644 index 0000000..b48b574 --- /dev/null +++ b/frontend/htdocs/result-02.svg @@ -0,0 +1,621 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + ☰ + + + + + Search + + Search results for "test" returned 3409 results. + + User One + @userone@instance.tld + + Lorem ipsum dolor sit amet, est ne nibh noster. No altera probatus gloriatur eam, vim ut postea ornatus meliore, alterum elaboraret nec ex. His summo detraxit menandri eu. Quas commune appellantur duo ad, his an vero ceteros accusam, eu latine eligendi pri. + + + User Two + @usertwo@instance.tld + + Eum in admodum recusabo referrentur. Legere placerat per no, his regione aperiam at. Cum tota vituperatoribus ne. Pri modus facilisis democritum ex, veritus minimum delicatissimi no est. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Finetune + Post time within: + all24 hours1 week1 month6 months1 year + + Trending + #test#exampletag#justexample + + diff --git a/frontend/htdocs/search.html b/frontend/htdocs/search.html new file mode 100644 index 0000000..5f35ff2 --- /dev/null +++ b/frontend/htdocs/search.html @@ -0,0 +1,101 @@ + + + + + + Fedilogue + + + + + + +
    + +
    + ☰ +
    +
  • About
    • +
  • How it works
    • +
  • FAQ
    • +
  • Contact
    • +
  • Trending
    • +
    +
    + + + +
    +
    + + +
    +
    +
    +
    + +
    +
    Search for returned 0000 results.
    + +
    + +
    + +
    + +
    +
    + +
    +

    Finetune

    +

    Post time within:

    + +

    Post length:

    + +

    Other

    +

    Attachment:

    + +

    Mentions:

    + +
    + +
    +

    Trending

    + +
    + + +