mirror of https://gitlab.com/bashrc2/epicyon
Profile page header
parent
99828da5ec
commit
e2a0e347c8
60
epicyon.css
60
epicyon.css
|
|
@ -59,3 +59,63 @@ body {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
max-width: 300px;
|
||||||
|
margin: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: grey;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
outline: 0;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px;
|
||||||
|
color: white;
|
||||||
|
background-color: #000;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 22px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover, a:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The hero image */
|
||||||
|
.hero-image {
|
||||||
|
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
|
||||||
|
/*background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");*/
|
||||||
|
|
||||||
|
/* Set a specific height */
|
||||||
|
height: 50%;
|
||||||
|
|
||||||
|
/* Position and center the image to scale nicely on all screens */
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Place text in the middle of the image */
|
||||||
|
.hero-text {
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
|
|
@ -147,7 +147,7 @@ def createPersonBase(baseDir: str,nickname: str,domain: str,port: int, \
|
||||||
'availability': None,
|
'availability': None,
|
||||||
'icon': {'mediaType': 'image/png',
|
'icon': {'mediaType': 'image/png',
|
||||||
'type': 'Image',
|
'type': 'Image',
|
||||||
'url': httpPrefix+'://'+domain+'/users/'+nickname+'/icon.png'},
|
'url': httpPrefix+'://'+domain+'/users/'+nickname+'/avatar.png'},
|
||||||
'id': httpPrefix+'://'+domain+'/users/'+nickname,
|
'id': httpPrefix+'://'+domain+'/users/'+nickname,
|
||||||
'image': {'mediaType': 'image/png',
|
'image': {'mediaType': 'image/png',
|
||||||
'type': 'Image',
|
'type': 'Image',
|
||||||
|
|
@ -234,6 +234,8 @@ def createPerson(baseDir: str,nickname: str,domain: str,port: int, \
|
||||||
setRole(baseDir,nickname,domain,'instance','delegator')
|
setRole(baseDir,nickname,domain,'instance','delegator')
|
||||||
if os.path.isfile(baseDir+'/img/default-avatar.png'):
|
if os.path.isfile(baseDir+'/img/default-avatar.png'):
|
||||||
copyfile(baseDir+'/img/default-avatar.png',baseDir+'/accounts/'+nickname+'@'+domain+'/avatar.png')
|
copyfile(baseDir+'/img/default-avatar.png',baseDir+'/accounts/'+nickname+'@'+domain+'/avatar.png')
|
||||||
|
if os.path.isfile(baseDir+'/img/image.png'):
|
||||||
|
copyfile(baseDir+'/img/image.png',baseDir+'/accounts/'+nickname+'@'+domain+'/image.png')
|
||||||
return privateKeyPem,publicKeyPem,newPerson,webfingerEndpoint
|
return privateKeyPem,publicKeyPem,newPerson,webfingerEndpoint
|
||||||
|
|
||||||
def createSharedInbox(baseDir: str,nickname: str,domain: str,port: int, \
|
def createSharedInbox(baseDir: str,nickname: str,domain: str,port: int, \
|
||||||
|
|
|
||||||
|
|
@ -10,15 +10,23 @@ import json
|
||||||
from utils import getNicknameFromActor
|
from utils import getNicknameFromActor
|
||||||
from utils import getDomainFromActor
|
from utils import getDomainFromActor
|
||||||
|
|
||||||
def htmlHeader(lang='en') -> str:
|
def htmlHeader(css=None,lang='en') -> str:
|
||||||
|
if not css:
|
||||||
htmlStr= \
|
htmlStr= \
|
||||||
'<!DOCTYPE html>\n' \
|
'<!DOCTYPE html>\n' \
|
||||||
'<html lang="'+lang+'">\n' \
|
'<html lang="'+lang+'">\n' \
|
||||||
' <meta charset="utf-8">\n' \
|
' <meta charset="utf-8">\n' \
|
||||||
' <style>\n' \
|
' <style>\n' \
|
||||||
' @import url("epicyon.css");\n' \
|
' @import url("epicyon.css");\n'+ \
|
||||||
' </style>\n' \
|
' </style>\n' \
|
||||||
' <body>\n'
|
' <body>\n'
|
||||||
|
else:
|
||||||
|
htmlStr= \
|
||||||
|
'<!DOCTYPE html>\n' \
|
||||||
|
'<html lang="'+lang+'">\n' \
|
||||||
|
' <meta charset="utf-8">\n' \
|
||||||
|
' <style>\n'+css+'</style>\n' \
|
||||||
|
' <body>\n'
|
||||||
return htmlStr
|
return htmlStr
|
||||||
|
|
||||||
def htmlFooter() -> str:
|
def htmlFooter() -> str:
|
||||||
|
|
@ -30,7 +38,76 @@ def htmlFooter() -> str:
|
||||||
def htmlProfile(profileJson: {}) -> str:
|
def htmlProfile(profileJson: {}) -> str:
|
||||||
"""Show the profile page as html
|
"""Show the profile page as html
|
||||||
"""
|
"""
|
||||||
return htmlHeader()+"<h1>Profile page</h1>"+htmlFooter()
|
nickname=profileJson['name']
|
||||||
|
if not nickname:
|
||||||
|
return ""
|
||||||
|
preferredName=profileJson['preferredUsername']
|
||||||
|
domain,port=getDomainFromActor(profileJson['id'])
|
||||||
|
if not domain:
|
||||||
|
return ""
|
||||||
|
domainFull=domain
|
||||||
|
if port:
|
||||||
|
domainFull=domain+':'+str(port)
|
||||||
|
profileStr= \
|
||||||
|
'<div class="card">' \
|
||||||
|
'<img src="'+profileJson['icon']['url']+'" alt="John" style="width:100%">' \
|
||||||
|
'<h1>'+preferredName+'</h1>' \
|
||||||
|
'<p>@'+nickname+'@'+domainFull+'</p>' \
|
||||||
|
'<p class="title"><i>'+profileJson['publicKey']['summary']+'</i></p>' \
|
||||||
|
'<p><button>Contact</button></p>' \
|
||||||
|
'</div>'
|
||||||
|
profileStr= \
|
||||||
|
' <div class="hero-image">' \
|
||||||
|
' <div class="hero-text">' \
|
||||||
|
' <img src="'+profileJson['icon']['url']+'" alt="'+nickname+'@'+domainFull+'" style="width:100%">' \
|
||||||
|
' <h1>'+preferredName+'</h1>' \
|
||||||
|
' <p><b>@'+nickname+'@'+domainFull+'</b></p>' \
|
||||||
|
' <p>'+profileJson['publicKey']['summary']+'</p>' \
|
||||||
|
' </div>' \
|
||||||
|
'</div>'
|
||||||
|
|
||||||
|
profileStyle= \
|
||||||
|
'body, html {' \
|
||||||
|
' height: 100%;' \
|
||||||
|
' margin: 0;' \
|
||||||
|
' font-family: Arial, Helvetica, sans-serif;' \
|
||||||
|
'}' \
|
||||||
|
'' \
|
||||||
|
'.hero-image {' \
|
||||||
|
' background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("'+profileJson['id']+'/image.png");' \
|
||||||
|
' height: 50%;' \
|
||||||
|
' background-position: center;' \
|
||||||
|
' background-repeat: no-repeat;' \
|
||||||
|
' background-size: cover;' \
|
||||||
|
' position: relative;' \
|
||||||
|
'}' \
|
||||||
|
'' \
|
||||||
|
'.hero-text {' \
|
||||||
|
' text-align: center;' \
|
||||||
|
' position: absolute;' \
|
||||||
|
' top: 50%;' \
|
||||||
|
' left: 50%;' \
|
||||||
|
' transform: translate(-50%, -50%);' \
|
||||||
|
' color: white;' \
|
||||||
|
'}' \
|
||||||
|
'' \
|
||||||
|
'.hero-text button {' \
|
||||||
|
' border: none;' \
|
||||||
|
' outline: 0;' \
|
||||||
|
' display: inline-block;' \
|
||||||
|
' padding: 10px 25px;' \
|
||||||
|
' color: black;' \
|
||||||
|
' background-color: #ddd;' \
|
||||||
|
' text-align: center;' \
|
||||||
|
' cursor: pointer;' \
|
||||||
|
'}' \
|
||||||
|
'' \
|
||||||
|
'.hero-text button:hover {' \
|
||||||
|
' background-color: #555;' \
|
||||||
|
' color: white;' \
|
||||||
|
'}'
|
||||||
|
profileStr=htmlHeader(profileStyle)+profileStr+htmlFooter()
|
||||||
|
return profileStr
|
||||||
|
|
||||||
def htmlFollowing(followingJson: {}) -> str:
|
def htmlFollowing(followingJson: {}) -> str:
|
||||||
"""Show the following collection as html
|
"""Show the following collection as html
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue