Hugging Face's logo

Spaces:
habulaj
/
connect
Paused

App Files Community
habulaj commited on
Commit
072627b
·
verified ·
1 Parent(s): 3e521d8

Update routes/emails.py

Browse files
Files changed (1) hide show
  1. routes/emails.py +118 -64
routes/emails.py CHANGED
@@ -843,44 +843,38 @@ def generate_email_html(email_type: str, to: str) -> str:
843
  <head>
844
  <meta charset="UTF-8">
845
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
846
- <title>New Subscriber! - ClosetCoach</title>
847
  <style>
848
  * {
849
  margin: 0;
850
  padding: 0;
851
  box-sizing: border-box;
852
  }
853
-
854
  body {
855
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
856
  background-color: #ffffff;
857
  color: #1d1d1f;
858
  line-height: 1.6;
859
  }
860
-
861
  .email-container {
862
  max-width: 600px;
863
  margin: 0 auto;
864
  background-color: #ffffff;
865
  }
866
-
867
  .header {
868
  text-align: center;
869
  padding: 60px 40px 40px;
870
  }
871
-
872
  .logo {
873
  font-size: 28px;
874
  font-weight: 700;
875
  color: #6b46c1;
876
  letter-spacing: -0.5px;
877
  }
878
-
879
  .hero-section {
880
  text-align: center;
881
  padding: 0 40px 60px;
882
  }
883
-
884
  .hero-image {
885
  width: 100%;
886
  max-width: 280px;
@@ -890,7 +884,18 @@ def generate_email_html(email_type: str, to: str) -> str:
890
  border-radius: 20px;
891
  box-shadow: 0 20px 40px rgba(107, 70, 193, 0.1);
892
  }
893
-
 
 
 
 
 
 
 
 
 
 
 
894
  .headline {
895
  font-size: 36px;
896
  font-weight: 700;
@@ -899,7 +904,6 @@ def generate_email_html(email_type: str, to: str) -> str:
899
  line-height: 1.2;
900
  letter-spacing: -0.8px;
901
  }
902
-
903
  .subheadline {
904
  font-size: 20px;
905
  font-weight: 400;
@@ -910,42 +914,24 @@ def generate_email_html(email_type: str, to: str) -> str:
910
  margin-left: auto;
911
  margin-right: auto;
912
  }
913
-
914
- .status-box {
915
- background-color: #f0f9ff;
916
- border: 1px solid #3b82f6;
917
- border-radius: 12px;
918
- padding: 20px;
919
- margin: 30px 0;
920
- max-width: 480px;
921
- margin-left: auto;
922
- margin-right: auto;
923
  }
924
-
925
- .status-title {
926
  font-size: 18px;
927
  font-weight: 600;
928
- color: #1e40af;
929
- margin-bottom: 8px;
930
  }
931
-
932
- .status-text {
933
  font-size: 16px;
934
- color: #1e40af;
935
  line-height: 1.5;
936
  }
937
-
938
- .next-steps {
939
- font-size: 18px;
940
- font-weight: 400;
941
- color: #6e6e73;
942
- margin: 30px 0;
943
- line-height: 1.4;
944
- max-width: 480px;
945
- margin-left: auto;
946
- margin-right: auto;
947
- }
948
-
949
  .cta-button {
950
  display: inline-block;
951
  background: linear-gradient(135deg, #6b46c1 0%, #8b5cf6 100%);
@@ -958,44 +944,81 @@ def generate_email_html(email_type: str, to: str) -> str:
958
  letter-spacing: 0.2px;
959
  transition: all 0.3s ease;
960
  box-shadow: 0 8px 24px rgba(107, 70, 193, 0.3);
961
- margin-bottom: 60px;
962
  }
963
-
964
  .cta-button:hover {
965
  transform: translateY(-2px);
966
  box-shadow: 0 12px 32px rgba(107, 70, 193, 0.4);
967
  }
968
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
969
  .footer {
970
  text-align: center;
971
  padding: 40px;
972
  border-top: 1px solid #f5f5f7;
973
  margin-top: 40px;
974
  }
975
-
976
  .footer-text {
977
  font-size: 14px;
978
  color: #86868b;
979
  margin-bottom: 16px;
980
  }
981
-
982
  @media (max-width: 480px) {
983
  .header {
984
  padding: 40px 20px 20px;
985
  }
986
-
987
  .hero-section {
988
  padding: 0 20px 40px;
989
  }
990
-
991
  .headline {
992
  font-size: 28px;
993
  }
994
-
995
  .subheadline {
996
  font-size: 18px;
997
  }
998
-
 
 
 
999
  .footer {
1000
  padding: 30px 20px;
1001
  }
@@ -1008,36 +1031,67 @@ def generate_email_html(email_type: str, to: str) -> str:
1008
  <div class="header">
1009
  <div class="logo">ClosetCoach</div>
1010
  </div>
1011
-
1012
  <!-- Hero Section -->
1013
  <div class="hero-section">
1014
- <img src="https://huggingface.co/spaces/habulaj/connect/resolve/main/subscriber.png" alt="New subscriber illustration" class="hero-image">
1015
 
1016
- <h1 class="headline">You have a new subscriber!</h1>
 
 
1017
 
1018
  <p class="subheadline">
1019
- Great news! Someone just subscribed to your styling services. Your expertise is in demand and your styling journey continues to grow.
1020
  </p>
1021
-
1022
- <div class="status-box">
1023
- <div class="status-title">🎉 New Subscriber Alert</div>
1024
- <div class="status-text">
1025
- A new client has subscribed to your styling services and is ready to work with you. Time to showcase your styling skills!
1026
  </div>
1027
  </div>
1028
-
1029
- <p class="next-steps">
1030
- Open the ClosetCoach app to view your new subscriber's profile, preferences, and start planning their perfect styling experience.
1031
- </p>
1032
 
1033
- <a href="https://ameddes.com/onboarding/search" class="cta-button">Open App to See Details</a>
1034
  </div>
1035
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1036
  <!-- Footer -->
1037
  <div class="footer">
1038
  <p class="footer-text">
1039
- You're receiving this notification because you have a new subscriber on ClosetCoach.<br>
1040
- Keep up the great work building your styling business!
1041
  </p>
1042
 
1043
  <p class="footer-text" style="margin-top: 24px;">
 
843
  <head>
844
  <meta charset="UTF-8">
845
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
846
+ <title>New Subscriber - ClosetCoach</title>
847
  <style>
848
  * {
849
  margin: 0;
850
  padding: 0;
851
  box-sizing: border-box;
852
  }
 
853
  body {
854
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
855
  background-color: #ffffff;
856
  color: #1d1d1f;
857
  line-height: 1.6;
858
  }
 
859
  .email-container {
860
  max-width: 600px;
861
  margin: 0 auto;
862
  background-color: #ffffff;
863
  }
 
864
  .header {
865
  text-align: center;
866
  padding: 60px 40px 40px;
867
  }
 
868
  .logo {
869
  font-size: 28px;
870
  font-weight: 700;
871
  color: #6b46c1;
872
  letter-spacing: -0.5px;
873
  }
 
874
  .hero-section {
875
  text-align: center;
876
  padding: 0 40px 60px;
877
  }
 
878
  .hero-image {
879
  width: 100%;
880
  max-width: 280px;
 
884
  border-radius: 20px;
885
  box-shadow: 0 20px 40px rgba(107, 70, 193, 0.1);
886
  }
887
+ .celebration-badge {
888
+ display: inline-block;
889
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
890
+ color: #ffffff;
891
+ padding: 8px 20px;
892
+ border-radius: 25px;
893
+ font-size: 14px;
894
+ font-weight: 600;
895
+ text-transform: uppercase;
896
+ letter-spacing: 0.5px;
897
+ margin-bottom: 30px;
898
+ }
899
  .headline {
900
  font-size: 36px;
901
  font-weight: 700;
 
904
  line-height: 1.2;
905
  letter-spacing: -0.8px;
906
  }
 
907
  .subheadline {
908
  font-size: 20px;
909
  font-weight: 400;
 
914
  margin-left: auto;
915
  margin-right: auto;
916
  }
917
+ .highlight-box {
918
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
919
+ border-radius: 16px;
920
+ padding: 32px;
921
+ margin: 40px 0;
922
+ border-left: 4px solid #6b46c1;
 
 
 
 
923
  }
924
+ .highlight-text {
 
925
  font-size: 18px;
926
  font-weight: 600;
927
+ color: #1d1d1f;
928
+ margin-bottom: 12px;
929
  }
930
+ .highlight-subtext {
 
931
  font-size: 16px;
932
+ color: #64748b;
933
  line-height: 1.5;
934
  }
 
 
 
 
 
 
 
 
 
 
 
 
935
  .cta-button {
936
  display: inline-block;
937
  background: linear-gradient(135deg, #6b46c1 0%, #8b5cf6 100%);
 
944
  letter-spacing: 0.2px;
945
  transition: all 0.3s ease;
946
  box-shadow: 0 8px 24px rgba(107, 70, 193, 0.3);
947
+ margin-bottom: 40px;
948
  }
 
949
  .cta-button:hover {
950
  transform: translateY(-2px);
951
  box-shadow: 0 12px 32px rgba(107, 70, 193, 0.4);
952
  }
953
+ .tips-section {
954
+ background-color: #fafafa;
955
+ border-radius: 20px;
956
+ padding: 32px;
957
+ margin: 40px 0;
958
+ }
959
+ .tips-title {
960
+ font-size: 20px;
961
+ font-weight: 700;
962
+ color: #1d1d1f;
963
+ margin-bottom: 20px;
964
+ text-align: center;
965
+ }
966
+ .tip-item {
967
+ display: flex;
968
+ align-items: flex-start;
969
+ margin-bottom: 16px;
970
+ padding: 16px;
971
+ background-color: #ffffff;
972
+ border-radius: 12px;
973
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
974
+ }
975
+ .tip-icon {
976
+ width: 24px;
977
+ height: 24px;
978
+ background: linear-gradient(135deg, #6b46c1 0%, #8b5cf6 100%);
979
+ border-radius: 50%;
980
+ display: flex;
981
+ align-items: center;
982
+ justify-content: center;
983
+ margin-right: 16px;
984
+ flex-shrink: 0;
985
+ color: #ffffff;
986
+ font-weight: 600;
987
+ font-size: 12px;
988
+ }
989
+ .tip-text {
990
+ font-size: 16px;
991
+ color: #374151;
992
+ line-height: 1.5;
993
+ }
994
  .footer {
995
  text-align: center;
996
  padding: 40px;
997
  border-top: 1px solid #f5f5f7;
998
  margin-top: 40px;
999
  }
 
1000
  .footer-text {
1001
  font-size: 14px;
1002
  color: #86868b;
1003
  margin-bottom: 16px;
1004
  }
 
1005
  @media (max-width: 480px) {
1006
  .header {
1007
  padding: 40px 20px 20px;
1008
  }
 
1009
  .hero-section {
1010
  padding: 0 20px 40px;
1011
  }
 
1012
  .headline {
1013
  font-size: 28px;
1014
  }
 
1015
  .subheadline {
1016
  font-size: 18px;
1017
  }
1018
+ .highlight-box, .tips-section {
1019
+ padding: 24px;
1020
+ margin: 30px 0;
1021
+ }
1022
  .footer {
1023
  padding: 30px 20px;
1024
  }
 
1031
  <div class="header">
1032
  <div class="logo">ClosetCoach</div>
1033
  </div>
1034
+
1035
  <!-- Hero Section -->
1036
  <div class="hero-section">
1037
+ <div class="celebration-badge">🎉 New Subscriber</div>
1038
 
1039
+ <img src="https://huggingface.co/spaces/habulaj/connect/resolve/main/subscriber.png" alt="New subscriber celebration" class="hero-image">
1040
+
1041
+ <h1 class="headline">Congratulations! You have a new subscriber</h1>
1042
 
1043
  <p class="subheadline">
1044
+ Someone just discovered your amazing style expertise and decided to follow your fashion journey. Your influence is growing!
1045
  </p>
1046
+
1047
+ <div class="highlight-box">
1048
+ <div class="highlight-text">Your Style Community is Expanding</div>
1049
+ <div class="highlight-subtext">
1050
+ This new subscriber will receive notifications about your latest style tips, outfit recommendations, and exclusive content. Keep creating amazing content to engage your growing audience!
1051
  </div>
1052
  </div>
 
 
 
 
1053
 
1054
+ <a href="https://ameddes.com/stylist/dashboard" class="cta-button">Open ClosetCoach App</a>
1055
  </div>
1056
+
1057
+ <!-- Tips Section -->
1058
+ <div class="tips-section">
1059
+ <div class="tips-title">💡 Pro Tips to Engage Your New Subscriber</div>
1060
+
1061
+ <div class="tip-item">
1062
+ <div class="tip-icon">1</div>
1063
+ <div class="tip-text">
1064
+ <strong>Welcome them personally:</strong> Send a personalized style tip or greeting to make them feel valued from day one.
1065
+ </div>
1066
+ </div>
1067
+
1068
+ <div class="tip-item">
1069
+ <div class="tip-icon">2</div>
1070
+ <div class="tip-text">
1071
+ <strong>Share your signature style:</strong> Post content that showcases your unique aesthetic and styling philosophy.
1072
+ </div>
1073
+ </div>
1074
+
1075
+ <div class="tip-item">
1076
+ <div class="tip-icon">3</div>
1077
+ <div class="tip-text">
1078
+ <strong>Create interactive content:</strong> Ask for their style preferences or favorite trends to boost engagement.
1079
+ </div>
1080
+ </div>
1081
+
1082
+ <div class="tip-item">
1083
+ <div class="tip-icon">4</div>
1084
+ <div class="tip-text">
1085
+ <strong>Offer exclusive insights:</strong> Share behind-the-scenes content or styling secrets that only your subscribers see.
1086
+ </div>
1087
+ </div>
1088
+ </div>
1089
+
1090
  <!-- Footer -->
1091
  <div class="footer">
1092
  <p class="footer-text">
1093
+ Keep inspiring and building your style community!<br>
1094
+ Your expertise is making a difference in someone's fashion journey.
1095
  </p>
1096
 
1097
  <p class="footer-text" style="margin-top: 24px;">