Browse Source

Profile page header

Bob Mottram 4 months ago
parent
commit
e2a0e347c8
4 changed files with 150 additions and 11 deletions
  1. 60 0
      epicyon.css
  2. BIN
      img/image.png
  3. 3 1
      person.py
  4. 87 10
      webinterface.py

+ 60 - 0
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;
+}

BIN
img/image.png


+ 3 - 1
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, \

+ 87 - 10
webinterface.py

@@ -10,15 +10,23 @@ import json
 from utils import getNicknameFromActor
 from utils import getDomainFromActor
 
-def htmlHeader(lang='en') -> str:
-    htmlStr= \
-        '<!DOCTYPE html>\n' \
-        '<html lang="'+lang+'">\n' \
-        '  <meta charset="utf-8">\n' \
-        '  <style>\n' \
-        '    @import url("epicyon.css");\n' \
-        '  </style>\n' \
-        '  <body>\n'
+def htmlHeader(css=None,lang='en') -> str:
+    if not css:        
+        htmlStr= \
+            '<!DOCTYPE html>\n' \
+            '<html lang="'+lang+'">\n' \
+            '  <meta charset="utf-8">\n' \
+            '  <style>\n' \
+            '    @import url("epicyon.css");\n'+ \
+            '  </style>\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
 
 def htmlFooter() -> str:
@@ -30,7 +38,76 @@ def htmlFooter() -> str:
 def htmlProfile(profileJson: {}) -> str:
     """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:
     """Show the following collection as html