{"id":168,"date":"2024-01-06T09:13:21","date_gmt":"2024-01-06T09:13:21","guid":{"rendered":"https:\/\/messing.hopeandsocial.com\/?page_id=168"},"modified":"2024-01-12T19:11:45","modified_gmt":"2024-01-12T19:11:45","slug":"project-1","status":"publish","type":"page","link":"https:\/\/messing.hopeandsocial.com\/index.php\/projects\/project-1\/","title":{"rendered":"Project 1"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; column_structure=&#8221;1_2,1_2&#8243;][et_pb_column _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; type=&#8221;1_2&#8243;][et_pb_text _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p>    <form method=\"post\" action=\"https:\/\/messing.hopeandsocial.com\/wp-admin\/admin-post.php\">\n        <input type=\"hidden\" name=\"action\" value=\"process_project_contribution\">\n\t\t<input type=\"hidden\" name=\"project_credit\" value= \"400\">\n\t\t<input type=\"hidden\" name=\"project_total\" value= \"1000\">\n\t\t<input type=\"hidden\" name=\"project\" value= \"project-1\">\n        <input type=\"hidden\" name=\"username\" value=\"\">\n        <label for=\"contribution\">Your Credits: <\/label>\n\t\t<br>\n        <input type=\"number\" name=\"contribution\" required placeholder=\"Credits to contribute\">\n\t\t<br>\n        <input type=\"submit\" value=\"Contribute to Project\">\n\t\t<br><br>\n    <\/form>\n\n\t<br>\n\t<div class=\"progress-label\">Project Total: 1000 credits<\/div>\n\t<div class=\"progress-label\">User Contributed:  credits<\/div>\n    <div class=\"progress-label greentxt\">Total User Contributed: 400 credits<\/div>\n\t<div class=\"progress-label bluetxt\">HS Contributed: 500 credits<\/div>\n\t<div class=\"progress-label redtxt\">Shortfall: 100 credits<\/div>\n    <style>\n        .progress-bar-container {\n            display: flex;\n        }\n\n        .progress-bar {\n            height: 20px; \/* Adjust the height as needed *\/\n        }\n\n        .green {\n            background-color: green;\n        }\n\t\t.blue {\n            background-color: blue;\n        }\n\t\t.red {\n            background-color: red;\n        }\n        .greentxt {\n        \tcolor: green;\n    \t}\n\t\t.bluetxt {\n        \tcolor: blue;\n    \t}\n\t\t.redtxt {\n        \tcolor: red;\n    \t}\n    <\/style>\n<\/span><\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; type=&#8221;1_2&#8243;][et_pb_text _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n\t<div class=\"HS_container\">\n\t\t<div class=\"vertical-progress-bar-container\">\n\t\t\t<div class=\"vertical-progress-bar green\" style=\"height: 40%\"><\/div>\n \t\t\t<div class=\"HS-vertical-progress-bar blue\" style=\"bottom: 40%\"><\/div>\n\t\t\t<div class=\"vertical-progress-bar red\" style=\"bottom: 90%; height: 10%\"><\/div>\n\t\t<\/div>\n\t<\/div>\n\t\n    <style>\n\t\t.HS_container{\n  \t\twidth: 500px;\n  \t\theight: 200px;\n  \t\toverflow: hidden;\n  \t\tposition: relative;\n  \t\tmargin:50px auto;\n\t\t}\n\t\t\n        .vertical-progress-bar-container {\n\t\t\t\/*display: flex;\n    \t\tflex-direction: column-reverse; \/* Stack bars vertically and reverse order *\/\n    \t\t\/*height: 200px;*\/\n\t\t\tbackground-color: RED;\n\t\t\tposition: relative;\n  \t\t\ttransform: translateY(-50%);\n  \t\t\ttop: 40%;\n  \t\t\tmargin-left: 50px;\n  \t\t\twidth: 20px;\n  \t\t\theight: 80%;\n  \t\t\tfloat: left;\n        }\n\t\t\n\t\t.vertical-progress-bar {\n            \/*height: 20px; \/* Adjust the height as needed *\/\n\t\t\t\/*width: 20px;\n    \t\tmargin-bottom: 5px;*\/\n\t\t\tbackground-color: #9BC9C7;\n\t\t\t  position: absolute;\n\t\t\t  bottom: 0;\n\t\t\t  width: 100%;\n\t\t\t  height: 0;\n\t\t\t  border-top: 0px solid #FFF;\n\t\t\t  box-sizing: border-box;\n\t\t\t  animation: grow 1.5s ease-out forwards;\n\t\t\t  transform-origin: bottom;\n        }\n\t\t@keyframes grow{\n  \t\tfrom{\n    \t\ttransform: scaleY(0);\n  \t\t\t}\n\t\t}\n\n        .HS-vertical-progress-bar {\n            \/*height: 20px; \/* Adjust the height as needed *\/\n\t\t\t\/*width: 20px;\n    \t\tmargin-bottom: 5px;*\/\n\t\t\tbackground-color: #9BC9C7;\n\t\t\t  position: absolute;\n\t\t\t  bottom: 0;\n\t\t\t  width: 100%;\n\t\t\t  height: 0;\n\t\t\t  border-top: 0px solid #FFF;\n\t\t\t  box-sizing: border-box;\n\t\t\t  overflow: hidden;\n\t\t\t  animation: HS_grow 1.5s ease-out forwards;\n\t\t\t  animation-delay: 1.5s;\n\t\t\t  transform-origin: bottom;\n\t\t\t  \n        }\n\t\t@keyframes HS_grow{\n  \t\tto{\n    \t\theight: 50%;\n  \t\t\t}\n\t\t}\n\t\t\n\n        .green {\n            background-color: green;\n        }\n\t\t.blue {\n            background-color: blue;\n        }\n\t\t.red {\n            background-color: red;\n        }\n    <\/style>\n\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>    <form method=\"post\" action=\"https:\/\/messing.hopeandsocial.com\/wp-admin\/admin-post.php\">\n        <input type=\"hidden\" name=\"action\" value=\"process_project_contribution\">\n\t\t<input type=\"hidden\" name=\"project_credit\" value= \"400\">\n\t\t<input type=\"hidden\" name=\"project_total\" value= \"1000\">\n\t\t<input type=\"hidden\" name=\"project\" value= \"project-1\">\n        <input type=\"hidden\" name=\"username\" value=\"\">\n        <label for=\"contribution\">Your Credits: <\/label>\n\t\t<br>\n        <input type=\"number\" name=\"contribution\" required placeholder=\"Credits to contribute\">\n\t\t<br>\n        <input type=\"submit\" value=\"Contribute to Project\">\n\t\t<br><br>\n    <\/form>\n\n\t<br>\n\t<div class=\"progress-label\">Project Total: 1000 credits<\/div>\n\t<div class=\"progress-label\">User Contributed:  credits<\/div>\n    <div class=\"progress-label greentxt\">Total User Contributed: 400 credits<\/div>\n\t<div class=\"progress-label bluetxt\">HS Contributed: 500 credits<\/div>\n\t<div class=\"progress-label redtxt\">Shortfall: 100 credits<\/div>\n    <style>\n        .progress-bar-container {\n            display: flex;\n        }\n\n        .progress-bar {\n            height: 20px; \/* Adjust the height as needed *\/\n        }\n\n        .green {\n            background-color: green;\n        }\n\t\t.blue {\n            background-color: blue;\n        }\n\t\t.red {\n            background-color: red;\n        }\n        .greentxt {\n        \tcolor: green;\n    \t}\n\t\t.bluetxt {\n        \tcolor: blue;\n    \t}\n\t\t.redtxt {\n        \tcolor: red;\n    \t}\n    <\/style>\n\t<div class=\"HS_container\">\n\t\t<div class=\"vertical-progress-bar-container\">\n\t\t\t<div class=\"vertical-progress-bar green\" style=\"height: 40%\"><\/div>\n \t\t\t<div class=\"HS-vertical-progress-bar blue\" style=\"bottom: 40%\"><\/div>\n\t\t\t<div class=\"vertical-progress-bar red\" style=\"bottom: 90%; height: 10%\"><\/div>\n\t\t<\/div>\n\t<\/div>\n\t\n    <style>\n\t\t.HS_container{\n  \t\twidth: 500px;\n  \t\theight: 200px;\n  \t\toverflow: hidden;\n  \t\tposition: relative;\n  \t\tmargin:50px auto;\n\t\t}\n\t\t\n        .vertical-progress-bar-container {\n\t\t\t\/*display: flex;\n    \t\tflex-direction: column-reverse; \/* Stack bars vertically and reverse order *\/\n    \t\t\/*height: 200px;*\/\n\t\t\tbackground-color: RED;\n\t\t\tposition: relative;\n  \t\t\ttransform: translateY(-50%);\n  \t\t\ttop: 40%;\n  \t\t\tmargin-left: 50px;\n  \t\t\twidth: 20px;\n  \t\t\theight: 80%;\n  \t\t\tfloat: left;\n        }\n\t\t\n\t\t.vertical-progress-bar {\n            \/*height: 20px; \/* Adjust the height as needed *\/\n\t\t\t\/*width: 20px;\n    \t\tmargin-bottom: 5px;*\/\n\t\t\tbackground-color: #9BC9C7;\n\t\t\t  position: absolute;\n\t\t\t  bottom: 0;\n\t\t\t  width: 100%;\n\t\t\t  height: 0;\n\t\t\t  border-top: 0px solid #FFF;\n\t\t\t  box-sizing: border-box;\n\t\t\t  animation: grow 1.5s ease-out forwards;\n\t\t\t  transform-origin: bottom;\n        }\n\t\t@keyframes grow{\n  \t\tfrom{\n    \t\ttransform: scaleY(0);\n  \t\t\t}\n\t\t}\n\n        .HS-vertical-progress-bar {\n            \/*height: 20px; \/* Adjust the height as needed *\/\n\t\t\t\/*width: 20px;\n    \t\tmargin-bottom: 5px;*\/\n\t\t\tbackground-color: #9BC9C7;\n\t\t\t  position: absolute;\n\t\t\t  bottom: 0;\n\t\t\t  width: 100%;\n\t\t\t  height: 0;\n\t\t\t  border-top: 0px solid #FFF;\n\t\t\t  box-sizing: border-box;\n\t\t\t  overflow: hidden;\n\t\t\t  animation: HS_grow 1.5s ease-out forwards;\n\t\t\t  animation-delay: 1.5s;\n\t\t\t  transform-origin: bottom;\n\t\t\t  \n        }\n\t\t@keyframes HS_grow{\n  \t\tto{\n    \t\theight: 50%;\n  \t\t\t}\n\t\t}\n\t\t\n\n        .green {\n            background-color: green;\n        }\n\t\t.blue {\n            background-color: blue;\n        }\n\t\t.red {\n            background-color: red;\n        }\n    <\/style>\n<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":185,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/messing.hopeandsocial.com\/index.php\/wp-json\/wp\/v2\/pages\/168"}],"collection":[{"href":"https:\/\/messing.hopeandsocial.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/messing.hopeandsocial.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/messing.hopeandsocial.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/messing.hopeandsocial.com\/index.php\/wp-json\/wp\/v2\/comments?post=168"}],"version-history":[{"count":6,"href":"https:\/\/messing.hopeandsocial.com\/index.php\/wp-json\/wp\/v2\/pages\/168\/revisions"}],"predecessor-version":[{"id":312,"href":"https:\/\/messing.hopeandsocial.com\/index.php\/wp-json\/wp\/v2\/pages\/168\/revisions\/312"}],"up":[{"embeddable":true,"href":"https:\/\/messing.hopeandsocial.com\/index.php\/wp-json\/wp\/v2\/pages\/185"}],"wp:attachment":[{"href":"https:\/\/messing.hopeandsocial.com\/index.php\/wp-json\/wp\/v2\/media?parent=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}