CSS-fu beutifying of the site. No JS
This commit is contained in:
parent
bfd9a843ef
commit
41a91c76d3
7 changed files with 72 additions and 376 deletions
|
@ -16,5 +16,11 @@
|
|||
1650043490.4135377,
|
||||
1650043958.2914546,
|
||||
1650043959.0416543,
|
||||
1650044037.8992538
|
||||
1650044037.8992538,
|
||||
1650046703.1072881,
|
||||
1650046892.2908967,
|
||||
1650046892.7005703,
|
||||
1650046895.821551,
|
||||
1650049035.9363937,
|
||||
1650050029.5476623
|
||||
]
|
31
default.css
31
default.css
|
@ -126,4 +126,35 @@ p {
|
|||
margin-right: 5%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
width: 90%;
|
||||
height: 70;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
margin-top: 1%;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.side_found { margin-top: 100}
|
||||
.footer {}
|
||||
@media screen and (min-width: 1024px) {
|
||||
.recomendations {
|
||||
margin-left: 40%;}
|
||||
|
||||
.searchbar {
|
||||
width: 35%;}
|
||||
.footer {
|
||||
width: 60%;
|
||||
height: 70;
|
||||
position: fixed;
|
||||
bottom: 70;
|
||||
left: 40%;}
|
||||
.side_found {
|
||||
margin-top: 0;
|
||||
width: 35%;
|
||||
position: fixed;
|
||||
top:100;
|
||||
left:5%;} }
|
||||
|
||||
}
|
||||
|
|
16
faq.html
16
faq.html
|
@ -1,3 +1,18 @@
|
|||
<style>
|
||||
|
||||
.test {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
background: #928374;
|
||||
position: fixed;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="test">Some test text</div>
|
||||
|
||||
|
||||
<h1>Frequently Asked Questions:</h1>
|
||||
|
||||
<details>
|
||||
|
@ -118,3 +133,4 @@
|
|||
|
||||
<br><br>
|
||||
Now search for something and get a list of Free Competitors for it.
|
||||
|
||||
|
|
|
@ -1,360 +0,0 @@
|
|||
# THIS SOFTWARE IS A PART OF FREE COMPETITOR PROJECT
|
||||
# THE FOLLOWING SOURCE CODE I UNDER THE GNU
|
||||
# AGPL LICENSE V3 OR ANY LATER VERSION.
|
||||
|
||||
# This project is not for simple users, but for
|
||||
# web-masters and a like, so we are counting on
|
||||
# your ability to set it up and running.
|
||||
|
||||
import os
|
||||
from modules import search
|
||||
|
||||
|
||||
def html(page, json):
|
||||
|
||||
# This function adds a rendering of the json into the page
|
||||
|
||||
free = search.is_free(json)
|
||||
name = json.get("names",["Unknown"])[0]
|
||||
page = page + """
|
||||
|
||||
|
||||
<!-- For each software in the list we do mostly the same things.
|
||||
And here it is. First we show it's name as a link to be able
|
||||
to search Free Competitors to what is found. -->
|
||||
|
||||
"""
|
||||
page = page + "\n <a href=\"/"+name.replace(" ", "+").lower()+"\">"
|
||||
page = page + "\n <h1>"
|
||||
try:
|
||||
page = page + '\n <img src="'+ json["links"]["icon"] + '" alt="[LOGO]" style="height:50px;"> <!-- The logo of the software in question.-->\n'
|
||||
except:
|
||||
pass
|
||||
|
||||
page = page + " "+ name +" <!-- The title of the program -->\n"
|
||||
page = page + " </h1>\n </a>\n\n"
|
||||
|
||||
page = page + """
|
||||
|
||||
<!-- Next there is a short paragraph about the program.
|
||||
( Often Copypasted from some official page about it ).
|
||||
Which means, it may contain the terrible words "Open Source"
|
||||
that hide the fact that Free Software is about User Freedom
|
||||
first of all. So we are trying to link to a special page on
|
||||
GNU.ORG if such a thing is found -->
|
||||
|
||||
"""
|
||||
|
||||
# Few words about it
|
||||
comment = json.get("comment","")
|
||||
not_foss = ['open source', 'open-source']
|
||||
if "open source" or "open-source" in comment.lower():
|
||||
# Well... Here is a thing. Free Software, not open source.
|
||||
where = comment.lower().find("open source")
|
||||
# In case it has a slash in it.
|
||||
if where == -1:
|
||||
where = comment.lower().find("open-source")
|
||||
ops = comment[where:where+11]
|
||||
if ops:
|
||||
comment = comment.replace(ops,
|
||||
"<a href=\"https://www.gnu.org/philosophy/open-source-misses-the-point.en.html\">"+ops+"</a>")
|
||||
page = page + "\n <p>\n "+comment+"\n </p>\n\n"
|
||||
|
||||
# I want to show nothing else from if it's proprietary
|
||||
issues_files = list(os.listdir("data/issues"))
|
||||
if "issues" in json:
|
||||
l = json.get("issues", [])
|
||||
page = page +"<h2>Anti-Features / Problems:</h2>"
|
||||
|
||||
for i in l:
|
||||
if i+".html" not in issues_files:
|
||||
page = page + " "+i+"<br>"
|
||||
else:
|
||||
page = page + '<details title="Read about '+i+'">'
|
||||
page = page + "<summary>  "+i+"</summary>"
|
||||
issuefile = open("data/issues/"+i+".html")
|
||||
page = page + "<span><p>"+issuefile.read()+"</p></span>"
|
||||
page = page + "</details>"
|
||||
if not free:
|
||||
return page
|
||||
|
||||
|
||||
# Links
|
||||
|
||||
page = page + """
|
||||
<!-- To organize the buttons with the main links we are using
|
||||
a table. But since I don't know what CSS file the maintainer
|
||||
will choose. And I want the table to be invisible. I insert here
|
||||
a bit of CSS code. -->
|
||||
|
||||
"""
|
||||
|
||||
page = page + """
|
||||
<style>
|
||||
table, th, td {
|
||||
border-right:none;
|
||||
border-left:none;
|
||||
border-bottom:none;
|
||||
border-top:none
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- And now the table itself. -->
|
||||
|
||||
"""
|
||||
|
||||
page = page + "<table><tr>"
|
||||
linksfilter = {"git":"source"}
|
||||
links = json.get("links", {})
|
||||
for website in links:
|
||||
if website in ["icon"]:
|
||||
continue
|
||||
link = links[website]
|
||||
page = page + """
|
||||
|
||||
<!-- Here's how to do a simple button -->
|
||||
|
||||
<th>
|
||||
<form action=\""""+link+"""\"> <!-- You make a form with a link -->
|
||||
<button title=\""""+link+"""\" type="submit">"""+linksfilter.get(website,website).upper()+"""</button> <!-- And you activare that form with a button -->
|
||||
</form>
|
||||
</th>
|
||||
"""
|
||||
|
||||
page = page + "</tr></table>"
|
||||
|
||||
page = page + """
|
||||
|
||||
<!-- Details are those little collapsable things that I like to
|
||||
use very much. It's very simple really. Just read the code
|
||||
carefully and you will get it -->
|
||||
|
||||
"""
|
||||
|
||||
# Details
|
||||
|
||||
categories = {"generic_name":"Features",
|
||||
"licenses":"License(s)",
|
||||
"platforms":"Platforms",
|
||||
"networks_read":"Accesses Data from",
|
||||
"networks_write":"Interacts / Publishes to",
|
||||
"formats_read":"Opens from File-Formats",
|
||||
"formats_write":"Saves to File-Formats",
|
||||
"interface":"Interface",
|
||||
"languages":"Programming Languages"}
|
||||
|
||||
for c in categories:
|
||||
|
||||
l = json.get(c, [])
|
||||
if not l:
|
||||
continue
|
||||
|
||||
# I want to look whether this category has a list of files
|
||||
alldata = list(os.listdir("data"))
|
||||
allfiles = []
|
||||
for folder in alldata:
|
||||
if c.startswith(folder):
|
||||
try:
|
||||
allfiles = list(os.listdir("data/"+folder))
|
||||
break
|
||||
except:
|
||||
pass
|
||||
# Count matches
|
||||
matches = 0
|
||||
for i in l:
|
||||
if i.startswith("*"):
|
||||
matches += 1
|
||||
if matches:
|
||||
matchtext = "<i>( "+str(matches)+" )</i>"
|
||||
else:
|
||||
matchtext = ""
|
||||
page = page + "\n\n <details>"
|
||||
page = page +"\n <summary>"+categories[c]+": "+matchtext+"</summary>"
|
||||
|
||||
for i in l:
|
||||
matchtext = ""
|
||||
if i.startswith("*"):
|
||||
i = i[1:]
|
||||
matchtext = " <i>( match )</i> "
|
||||
if i+".html" in allfiles:
|
||||
datapage = open("data/"+folder+"/"+i+".html")
|
||||
page = page + """
|
||||
|
||||
<!-- Just so happened that about \""""+i+"""\" we had a file
|
||||
in data/"""+folder+""" folder. So why not make a detail inside a detail,
|
||||
a detail-sception, so to speak. And add the text of explanation into it. -->
|
||||
|
||||
"""
|
||||
page = page + "<details>\n"
|
||||
page = page + " <summary> "+matchtext+i+"</summary>\n"
|
||||
page = page + " <span>\n <p>\n"
|
||||
page = page + " " + datapage.read()+"\n"
|
||||
page = page + " </p>\n </span>\n </details>"
|
||||
else:
|
||||
page = page + "\n <span> "+matchtext+i+"</span>\n <br>\n"
|
||||
page = page + """
|
||||
|
||||
<!-- Just a tiny space after all the spans. So no to feel
|
||||
too crowded, so to speak -->
|
||||
<span><br></span>
|
||||
|
||||
</details>
|
||||
|
||||
"""
|
||||
|
||||
|
||||
return page
|
||||
|
||||
def suggestions(page, json):
|
||||
|
||||
# This function will render suggestions
|
||||
|
||||
page = page + """
|
||||
|
||||
<!-- ===========================================================
|
||||
|
||||
This is where ther actual competitors are starting to show!!!
|
||||
|
||||
============================================================ -->
|
||||
|
||||
<h1>Free Competitors:</h1>
|
||||
|
||||
"""
|
||||
|
||||
found = search.suggest(json)
|
||||
|
||||
biggest = 0
|
||||
for i in found:
|
||||
if i[0] > biggest:
|
||||
biggest = i[0]
|
||||
more = False
|
||||
for i in found:
|
||||
free = search.is_free(i[-1])
|
||||
|
||||
if not i[0] or i[-1]["names"] == json["names"] or not free:
|
||||
continue
|
||||
try:
|
||||
frac = int(i[0]/biggest*100)
|
||||
except:
|
||||
frac = 0
|
||||
|
||||
if frac < 20 and not more: # Below 40% features match
|
||||
page = page + """
|
||||
|
||||
<!-- Sometimes the suggestion is not very good. Below 40%
|
||||
of suggestion score. But it still kind of valid. So we
|
||||
want to put it into the page. Only when the user clicks
|
||||
something. Why not using the same old details? -->
|
||||
|
||||
<hr>
|
||||
<details>
|
||||
<summary><h1 title="Click to show more / less.">Problematic Competitors:</h1></summary>
|
||||
|
||||
"""
|
||||
more = True
|
||||
|
||||
page = page +"""
|
||||
|
||||
<hr>
|
||||
<!-- ================================================================== -->
|
||||
|
||||
"""
|
||||
|
||||
page = page + "<br>Suggestion score: " + str(frac) + "%"
|
||||
page = html(page, i[-1])
|
||||
|
||||
if more:
|
||||
page = page + "</details>"
|
||||
return page
|
||||
|
||||
def search_widget(page, address):
|
||||
|
||||
# Adds a search bar to the page
|
||||
|
||||
page = page + """
|
||||
<!-- Search widget! This widget makes it possible to implement
|
||||
a search feature without using a single line of JavaScript code.
|
||||
In HTML, there is an input field that we can use. If we pare it
|
||||
with a button into a <form>, we can get a button that activates
|
||||
the search. -->
|
||||
|
||||
<form action="""
|
||||
page = page + address
|
||||
page = page + """search method="GET">
|
||||
<input type="text" name="item" class="search" placeholder="Name of Software">
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
|
||||
<!-- And that's it for the search widget -->
|
||||
|
||||
"""
|
||||
#page = page.format(ADDRESS)
|
||||
|
||||
return page
|
||||
|
||||
def source_code_link(page):
|
||||
|
||||
# Adds a source code link
|
||||
|
||||
page = page + """
|
||||
|
||||
<!-- This the the footer of every page -->
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>This website is under the GNU AGPL license.</p>
|
||||
|
||||
<!-- As always I want to add a bit of CSS to make tables
|
||||
invisible -->
|
||||
|
||||
<style>
|
||||
table, th, td {
|
||||
border-right:none;
|
||||
border-left:none;
|
||||
border-bottom:none;
|
||||
border-top:none
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- This is self explanatory ( if you read most of the page ) -->
|
||||
|
||||
<table><tr>
|
||||
|
||||
<th><form action=https://notabug.org/jyamihud/FreeCompetitors>
|
||||
<button title="See the full source code of the software that powers this website." type="submit">SOURCE</button>
|
||||
</form></th>
|
||||
|
||||
<th><form action=/faq>
|
||||
<button title="Frequently Asked Questions" type="submit">FAQ</button>
|
||||
</form></th>
|
||||
|
||||
<th><form action=https://notabug.org/jyamihud/FreeCompetitors/issues>
|
||||
<button title="Report a bug." type="submit">BUG?</button>
|
||||
</form></th>
|
||||
|
||||
<th><form action=https://notabug.org/jyamihud/FreeCompetitors/issues/25>
|
||||
<button title="Report a piece of software that's missing from the catalogue." type="submit">MISSING?</button>
|
||||
</form></th>
|
||||
|
||||
<th><form action=https://notabug.org/jyamihud/FreeCompetitors/issues/24>
|
||||
<button title="Report a mistake in data about software." type="submit">MISTAKE?</button>
|
||||
</form></th></tr>
|
||||
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<!-- And this was the page of Free Competitors. No Javascript.
|
||||
No crap. No trackers. No nothing. And still works. Take that
|
||||
Google!!! -->
|
||||
|
||||
|
||||
"""
|
||||
|
||||
|
||||
|
||||
return page
|
|
@ -1 +0,0 @@
|
|||
vcs@vcs-Lenovo-IdeaPad-S145-15IWL.3286:1650042546
|
|
@ -24,7 +24,6 @@ def html(page, json):
|
|||
to search Free Competitors to what is found. -->
|
||||
|
||||
"""
|
||||
|
||||
page = page + "\n <a href=\"/"+name.replace(" ", "+").lower()+"\">"
|
||||
page = page + "\n <h1>"
|
||||
try:
|
||||
|
@ -301,12 +300,7 @@ def source_code_link(page):
|
|||
|
||||
<!-- This the the footer of every page -->
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>This website is under the GNU AGPL license.</p>
|
||||
This website is under the GNU AGPL license.
|
||||
|
||||
<!-- As always I want to add a bit of CSS to make tables
|
||||
invisible -->
|
||||
|
@ -346,9 +340,6 @@ def source_code_link(page):
|
|||
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<!-- And this was the page of Free Competitors. No Javascript.
|
||||
No crap. No trackers. No nothing. And still works. Take that
|
||||
Google!!! -->
|
||||
|
|
19
server.py
19
server.py
|
@ -97,9 +97,9 @@ class handler(BaseHTTPRequestHandler):
|
|||
csstext = '<link media="all" href="'+CSS+'" type="text/css" rel="stylesheet" />'
|
||||
text = "<!-- Welcome to Free Competitors Page Source!!!--> \n\n"
|
||||
text = text + "<!-- Let's add some CSS, you can edit 'config.json' to change it. -->\n"
|
||||
text = text + '<head>'+csstext+'</head>\n\n'
|
||||
text = text + '<head>'+csstext+'\n\n'
|
||||
text = text + "<!-- Now we want the favicon to be PNG instead of ICO -->\n\n"
|
||||
text = text + '<link rel="icon" href="favicon.png">'
|
||||
text = text + '<link rel="icon" href="favicon.png"></head>\n\n'
|
||||
text = text + "<!-- Now the body. The main part of the page, so to speak. -->\n"
|
||||
text = text + '<body>\n\n'+textin+'\n\n</body>'
|
||||
|
||||
|
@ -212,12 +212,25 @@ class handler(BaseHTTPRequestHandler):
|
|||
|
||||
software_data, match = search.search_app(software)
|
||||
|
||||
page = render.search_widget("", ADDRESS)
|
||||
page = ""
|
||||
page = page + '<div class="searchbar">'
|
||||
page = page + render.search_widget("", ADDRESS)
|
||||
page = page + "</div>"
|
||||
|
||||
page = page + '<div class="side_found">'
|
||||
page = page +"Search match: "+ str(int(match*100))+"%"
|
||||
# Let's add the found software to the page
|
||||
page = render.html(page, software_data)
|
||||
page = page + "</div>"
|
||||
|
||||
page = page + '<div class="recomendations">'
|
||||
page = render.suggestions(page, software_data)
|
||||
page = page + "</div>"
|
||||
|
||||
page = page + '<div class="footer">'
|
||||
page = render.source_code_link(page)
|
||||
page = page + "</div>"
|
||||
|
||||
|
||||
self.send(page)
|
||||
|
||||
|
|
Loading…
Reference in a new issue