From 1e5b44aef1180c7c735ff988bb82930e4ff5dbcc Mon Sep 17 00:00:00 2001
From: Bob Mottram <bob@freedombone.net>
Date: Mon, 22 Jul 2019 18:42:39 +0100
Subject: [PATCH] Add css from file

---
 epicyon-profile.css | 199 ++++++++++++++++++++++++++++++++++++++
 webinterface.py     | 229 ++++----------------------------------------
 2 files changed, 216 insertions(+), 212 deletions(-)
 create mode 100644 epicyon-profile.css

diff --git a/epicyon-profile.css b/epicyon-profile.css
new file mode 100644
index 00000000..750042a8
--- /dev/null
+++ b/epicyon-profile.css
@@ -0,0 +1,199 @@
+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("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;
+}
+
+.roles {
+  text-align: center;
+  left: 35%;
+  background-color: #f1f1f1;
+}
+
+.roles-inner {
+  padding: 10px 25px;
+  background-color: #ffffff;
+}
+
+.hero-text img {
+  border-radius: 10%;
+  width: 50%;
+}
+
+.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;
+}
+
+.button {
+  border-radius: 4px;
+  background-color: #999;
+  border: none;
+  color: #FFFFFF;
+  text-align: center;
+  font-size: 18px;
+  padding: 10px;
+  width: 20%;
+  max-width: 200px;
+  min-width: 100px;
+  transition: all 0.5s;
+  cursor: pointer;
+  margin: 5px;
+}
+
+.button span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+.button span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+.button:hover span {
+  padding-right: 25px;
+}
+
+.button:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+
+.buttonselected {
+  border-radius: 4px;
+  background-color: #666;
+  border: none;
+  color: #FFFFFF;
+  text-align: center;
+  font-size: 18px;
+  padding: 10px;
+  width: 20%;
+  max-width: 200px;
+  min-width: 100px;
+  transition: all 0.5s;
+  cursor: pointer;
+  margin: 5px;
+}
+
+.buttonselected span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+.buttonselected span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+.buttonselected:hover span {
+  padding-right: 25px;
+}
+
+.buttonselected:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+
+.container {
+    border: 2px solid #dedede;
+    background-color: #f1f1f1;
+    border-radius: 5px;
+    padding: 10px;
+    margin: 10px 0;
+}
+
+.container {
+    border: 2px solid #dedede;
+    background-color: #f1f1f1;
+    border-radius: 5px;
+    padding: 10px;
+    margin: 10px 0;
+}
+
+.darker {
+    border-color: #ccc;
+    background-color: #ddd;
+}
+
+.container::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+.container img {
+    float: left;
+    max-width: 60px;
+    width: 100%;
+    margin-right: 20px;
+    border-radius: 10%;
+}
+
+.container img.attachment {
+    max-width: 100%;
+    margin-left: 25%;
+    width: 50%;
+    border-radius: 10%;
+}
+.container img.right {
+    float: right;
+    margin-left: 20px;
+    margin-right:0;
+}
+
+.time-right {
+    float: right;
+    color: #aaa;
+}
+
+.time-left {
+    float: left;
+    color: #999;
+}
+
+.post-title {
+    margin-top: 0px;
+    color: #999;
+}
diff --git a/webinterface.py b/webinterface.py
index 2a66bd41..769f63d8 100644
--- a/webinterface.py
+++ b/webinterface.py
@@ -143,219 +143,24 @@ def htmlProfile(baseDir: str,httpPrefix: str,authorized: bool, \
         '  </center>' \
         '</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("'+actor+'/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;' \
-        '}' \
-        '' \
-        '.roles {' \
-        '  text-align: center;' \
-        '  left: 35%;' \
-        '  background-color: #f1f1f1;' \
-        '}' \
-        '.roles-inner {' \
-        '  padding: 10px 25px;' \
-        '  background-color: #ffffff;' \
-        '}' \
-        '' \
-        '.hero-text img {' \
-        '  border-radius: 10%;' \
-        '  width: 50%;' \
-        '}' \
-        '' \
-        '.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;' \
-        '}' \
-        '' \
-        '.button {' \
-        '  border-radius: 4px;' \
-        '  background-color: #999;' \
-        '  border: none;' \
-        '  color: #FFFFFF;' \
-        '  text-align: center;' \
-        '  font-size: 18px;' \
-        '  padding: 10px;' \
-        '  width: 20%;' \
-        '  max-width: 200px;' \
-        '  min-width: 100px;' \
-        '  transition: all 0.5s;' \
-        '  cursor: pointer;' \
-        '  margin: 5px;' \
-        '}' \
-        '' \
-        '.button span {' \
-        '  cursor: pointer;' \
-        '  display: inline-block;' \
-        '  position: relative;' \
-        '  transition: 0.5s;' \
-        '}' \
-        '' \
-        '.button span:after {' \
-        "  content: '\\00bb';" \
-        '  position: absolute;' \
-        '  opacity: 0;' \
-        '  top: 0;' \
-        '  right: -20px;' \
-        '  transition: 0.5s;' \
-        '}' \
-        '' \
-        '.button:hover span {' \
-        '  padding-right: 25px;' \
-        '}' \
-        '' \
-        '.button:hover span:after {' \
-        '  opacity: 1;' \
-        '  right: 0;' \
-        '}' \
-        '.buttonselected {' \
-        '  border-radius: 4px;' \
-        '  background-color: #666;' \
-        '  border: none;' \
-        '  color: #FFFFFF;' \
-        '  text-align: center;' \
-        '  font-size: 18px;' \
-        '  padding: 10px;' \
-        '  width: 20%;' \
-        '  max-width: 200px;' \
-        '  min-width: 100px;' \
-        '  transition: all 0.5s;' \
-        '  cursor: pointer;' \
-        '  margin: 5px;' \
-        '}' \
-        '' \
-        '.buttonselected span {' \
-        '  cursor: pointer;' \
-        '  display: inline-block;' \
-        '  position: relative;' \
-        '  transition: 0.5s;' \
-        '}' \
-        '' \
-        '.buttonselected span:after {' \
-        "  content: '\\00bb';" \
-        '  position: absolute;' \
-        '  opacity: 0;' \
-        '  top: 0;' \
-        '  right: -20px;' \
-        '  transition: 0.5s;' \
-        '}' \
-        '' \
-        '.buttonselected:hover span {' \
-        '  padding-right: 25px;' \
-        '}' \
-        '' \
-        '.buttonselected:hover span:after {' \
-        '  opacity: 1;' \
-        '  right: 0;' \
-        '}' \
-        '.container {' \
-        '    border: 2px solid #dedede;' \
-        '    background-color: #f1f1f1;' \
-        '    border-radius: 5px;' \
-        '    padding: 10px;' \
-        '    margin: 10px 0;' \
-        '}' \
-        '' \
-        '.container {' \
-        '    border: 2px solid #dedede;' \
-        '    background-color: #f1f1f1;' \
-        '    border-radius: 5px;' \
-        '    padding: 10px;' \
-        '    margin: 10px 0;' \
-        '}' \
-        '' \
-        '.darker {' \
-        '    border-color: #ccc;' \
-        '    background-color: #ddd;' \
-        '}' \
-        '' \
-        '.container::after {' \
-        '    content: "";' \
-        '    clear: both;' \
-        '    display: table;' \
-        '}' \
-        '' \
-        '.container img {' \
-        '    float: left;' \
-        '    max-width: 60px;' \
-        '    width: 100%;' \
-        '    margin-right: 20px;' \
-        '    border-radius: 10%;' \
-        '}' \
-        '' \
-        '.container img.attachment {' \
-        '    max-width: 100%;' \
-        '    margin-left: 25%;' \
-        '    width: 50%;' \
-        '    border-radius: 10%;' \
-        '}' \
-        '.container img.right {' \
-        '    float: right;' \
-        '    margin-left: 20px;' \
-        '    margin-right:0;' \
-        '}' \
-        '' \
-        '.time-right {' \
-        '    float: right;' \
-        '    color: #aaa;' \
-        '}' \
-        '' \
-        '.time-left {' \
-        '    float: left;' \
-        '    color: #999;' \
-        '}' \
-        '' \
-        '.post-title {' \
-        '    margin-top: 0px;' \
-        '    color: #999;' \
-        '}'
+    with open(baseDir+'/epicyon-profile.css', 'r') as cssFile:
+        profileStyle = cssFile.read().replace('image.png',actor+'/image.png')
 
-    if selected=='posts':
-        profileStr+= \
-            htmlProfilePosts(baseDir,httpPrefix,authorized, \
-                             ocapAlways,nickname,domain,port, \
-                             session,wfRequest,personCache)
-    if selected=='following' or selected=='followers':
-        profileStr+= \
-            htmlProfileFollowing(baseDir,httpPrefix, \
-                                 authorized,ocapAlways,nickname, \
-                                 domain,port,session, \
-                                 wfRequest,personCache,extraJson)
-    if selected=='roles':
-        profileStr+= \
-            htmlProfileRoles(nickname,domainFull,extraJson)
-    profileStr=htmlHeader(profileStyle)+profileStr+htmlFooter()
+        if selected=='posts':
+            profileStr+= \
+                htmlProfilePosts(baseDir,httpPrefix,authorized, \
+                                 ocapAlways,nickname,domain,port, \
+                                 session,wfRequest,personCache)
+        if selected=='following' or selected=='followers':
+            profileStr+= \
+                htmlProfileFollowing(baseDir,httpPrefix, \
+                                     authorized,ocapAlways,nickname, \
+                                     domain,port,session, \
+                                     wfRequest,personCache,extraJson)
+        if selected=='roles':
+            profileStr+= \
+                htmlProfileRoles(nickname,domainFull,extraJson)
+        profileStr=htmlHeader(profileStyle)+profileStr+htmlFooter()
     return profileStr
 
 def individualFollowAsHtml(session,wfRequest: {}, \