diff --git a/epicyon.css b/epicyon.css index 1de1defc..a4398247 100644 --- a/epicyon.css +++ b/epicyon.css @@ -59,3 +59,63 @@ body { margin-top: 0px; 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; +} diff --git a/img/image.png b/img/image.png new file mode 100644 index 00000000..5da5d7c0 Binary files /dev/null and b/img/image.png differ diff --git a/person.py b/person.py index b8af9e08..80f467b6 100644 --- a/person.py +++ b/person.py @@ -147,7 +147,7 @@ def createPersonBase(baseDir: str,nickname: str,domain: str,port: int, \ 'availability': None, 'icon': {'mediaType': 'image/png', 'type': 'Image', - 'url': httpPrefix+'://'+domain+'/users/'+nickname+'/icon.png'}, + 'url': httpPrefix+'://'+domain+'/users/'+nickname+'/avatar.png'}, 'id': httpPrefix+'://'+domain+'/users/'+nickname, 'image': {'mediaType': 'image/png', 'type': 'Image', @@ -234,6 +234,8 @@ def createPerson(baseDir: str,nickname: str,domain: str,port: int, \ setRole(baseDir,nickname,domain,'instance','delegator') if os.path.isfile(baseDir+'/img/default-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 def createSharedInbox(baseDir: str,nickname: str,domain: str,port: int, \ diff --git a/webinterface.py b/webinterface.py index dd8af7a1..8d669634 100644 --- a/webinterface.py +++ b/webinterface.py @@ -10,15 +10,23 @@ import json from utils import getNicknameFromActor from utils import getDomainFromActor -def htmlHeader(lang='en') -> str: - htmlStr= \ - '\n' \ - '\n' \ - ' \n' \ - ' \n' \ - ' \n' +def htmlHeader(css=None,lang='en') -> str: + if not css: + htmlStr= \ + '\n' \ + '\n' \ + ' \n' \ + ' \n' \ + ' \n' + else: + htmlStr= \ + '\n' \ + '\n' \ + ' \n' \ + ' \n' \ + ' \n' return htmlStr def htmlFooter() -> str: @@ -30,7 +38,76 @@ def htmlFooter() -> str: def htmlProfile(profileJson: {}) -> str: """Show the profile page as html """ - return htmlHeader()+"

Profile page

"+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= \ + '
' \ + 'John' \ + '

'+preferredName+'

' \ + '

@'+nickname+'@'+domainFull+'

' \ + '

'+profileJson['publicKey']['summary']+'

' \ + '

' \ + '
' + profileStr= \ + '
' \ + '
' \ + ' '+nickname+'@'+domainFull+'' \ + '

'+preferredName+'

' \ + '

@'+nickname+'@'+domainFull+'

' \ + '

'+profileJson['publicKey']['summary']+'

' \ + '
' \ + '
' + + 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: """Show the following collection as html