Add skeleton.css and add some body stuff.
j3s j3s@c3f.net
Wed, 10 Jun 2020 00:31:01 -0500
3 files changed,
479 insertions(+),
13 deletions(-)
M
main.go
→
main.go
@@ -20,9 +20,16 @@ switch r.Method {
case "GET": render(w, "templates/form.html", nil) case "POST": - // message := r.info or whatever - sendMessage() - // re-route to /confirmation + body := "> If you're a medic, did you or your medic buddy do something that made you uncomfortable?\r\n\r\n" + r.PostFormValue("question1") + + "\r\n\r\n> Are there things you would like to see Northstar do differently to better care for, and support our communities?\r\n\r\n" + r.PostFormValue("question2") + + "\r\n\r\n> Have you had an encounter with a medic that made you feel uncomfortable or disrespected?\r\n\r\n" + r.PostFormValue("question3") + + "\r\n\r\n> Do you want us to follow up with a specific person re: accountability?\r\n\r\n" + r.PostFormValue("question4") + + "\r\n\r\n> Are there any other comments you would like to share with us?\r\n\r\n" + r.PostFormValue("question5") + + "\r\n\r\n> Would you like us to follow up with you? If yes, please leave your phone number or email here.\r\n\r\n" + r.PostFormValue("question6") + + "\r\n\r\n> Anything else you'd like us to know or specific requests?\r\n\r\n" + r.PostFormValue("question7") + + "\r\n\r\n\r\ndelivered securely by Cyberia" + sendMessage(body) + http.Redirect(w, r, "/confirmation", http.StatusSeeOther) } }@@ -44,16 +51,17 @@ http.Error(w, "Sorry, something went wrong", http.StatusInternalServerError)
} } -func sendMessage() { +func sendMessage(message string) { auth := smtp.PlainAuth("", os.Getenv("SMTP_FROM"), os.Getenv("SMTP_PASS"), os.Getenv("SMTP_SERVER")) to := []string{os.Getenv("SMTP_TO")} msg := []byte("From: " + os.Getenv("SMTP_FROM") + "\r\n" + - "To: " + os.Getenv("SMTP_TO") + "\r\n" + + "To: " + os.Getenv("SMTP_TO") + "\r\n" + + "Content-Type: text/plain\r\n" + "Subject: Form completion\r\n" + "\r\n" + - "Body.\r\n") - err := smtp.SendMail(os.Getenv("SMTP_SERVER") + ":" + os.Getenv("SMTP_PORT"), auth, os.Getenv("SMTP_FROM"), to, msg) + message + "\r\n") + err := smtp.SendMail(os.Getenv("SMTP_SERVER")+":"+os.Getenv("SMTP_PORT"), auth, os.Getenv("SMTP_FROM"), to, msg) if err != nil { log.Fatal(err) }
M
templates/confirmation.html
→
templates/confirmation.html
@@ -1,2 +1,2 @@
<h1>Confirmation</h1> -<p>Your message has been sent!</p> +<p>Thanks for contacting us! We’ll get back to you as soon as possible.</p>
M
templates/form.html
→
templates/form.html
@@ -1,14 +1,472 @@
-<h1>Contact</h1> + <!DOCTYPE html> +<html> +<head> + <style> + /* + * Skeleton V2.0.4 + * Copyright 2014, Dave Gamache + * www.getskeleton.com + * Free to use under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * 12/29/2014 + */ + + + /* Table of contents + –––––––––––––––––––––––––––––––––––––––––––––––––– + - Grid + - Base Styles + - Typography + - Links + - Buttons + - Forms + - Lists + - Code + - Tables + - Spacing + - Utilities + - Clearing + - Media Queries + */ + + + /* Grid + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + .container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; } + .column, + .columns { + width: 100%; + float: left; + box-sizing: border-box; } + + /* For devices larger than 400px */ + @media (min-width: 400px) { + .container { + width: 85%; + padding: 0; } + } + + /* For devices larger than 550px */ + @media (min-width: 550px) { + .container { + width: 80%; } + .column, + .columns { + margin-left: 4%; } + .column:first-child, + .columns:first-child { + margin-left: 0; } + + .one.column, + .one.columns { width: 4.66666666667%; } + .two.columns { width: 13.3333333333%; } + .three.columns { width: 22%; } + .four.columns { width: 30.6666666667%; } + .five.columns { width: 39.3333333333%; } + .six.columns { width: 48%; } + .seven.columns { width: 56.6666666667%; } + .eight.columns { width: 65.3333333333%; } + .nine.columns { width: 74.0%; } + .ten.columns { width: 82.6666666667%; } + .eleven.columns { width: 91.3333333333%; } + .twelve.columns { width: 100%; margin-left: 0; } + + .one-third.column { width: 30.6666666667%; } + .two-thirds.column { width: 65.3333333333%; } + + .one-half.column { width: 48%; } + + /* Offsets */ + .offset-by-one.column, + .offset-by-one.columns { margin-left: 8.66666666667%; } + .offset-by-two.column, + .offset-by-two.columns { margin-left: 17.3333333333%; } + .offset-by-three.column, + .offset-by-three.columns { margin-left: 26%; } + .offset-by-four.column, + .offset-by-four.columns { margin-left: 34.6666666667%; } + .offset-by-five.column, + .offset-by-five.columns { margin-left: 43.3333333333%; } + .offset-by-six.column, + .offset-by-six.columns { margin-left: 52%; } + .offset-by-seven.column, + .offset-by-seven.columns { margin-left: 60.6666666667%; } + .offset-by-eight.column, + .offset-by-eight.columns { margin-left: 69.3333333333%; } + .offset-by-nine.column, + .offset-by-nine.columns { margin-left: 78.0%; } + .offset-by-ten.column, + .offset-by-ten.columns { margin-left: 86.6666666667%; } + .offset-by-eleven.column, + .offset-by-eleven.columns { margin-left: 95.3333333333%; } + + .offset-by-one-third.column, + .offset-by-one-third.columns { margin-left: 34.6666666667%; } + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } + + .offset-by-one-half.column, + .offset-by-one-half.columns { margin-left: 52%; } + + } + + + /* Base Styles + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + /* NOTE + html is set to 62.5% so that all the REM measurements throughout Skeleton + are based on 10px sizing. So basically 1.5rem = 15px :) */ + html { + font-size: 62.5%; } + body { + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222; } + + + /* Typography + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 2rem; + font-weight: 300; } + h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} + h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } + h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } + h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } + h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } + h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } + + /* Larger than phablet */ + @media (min-width: 550px) { + h1 { font-size: 5.0rem; } + h2 { font-size: 4.2rem; } + h3 { font-size: 3.6rem; } + h4 { font-size: 3.0rem; } + h5 { font-size: 2.4rem; } + h6 { font-size: 1.5rem; } + } + + p { + margin-top: 0; } + + + /* Links + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + a { + color: #1EAEDB; } + a:hover { + color: #0FA0CE; } + + + /* Buttons + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + .button, + button, + input[type="submit"], + input[type="reset"], + input[type="button"] { + display: inline-block; + height: 38px; + padding: 0 30px; + color: #555; + text-align: center; + font-size: 11px; + font-weight: 600; + line-height: 38px; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border-radius: 4px; + border: 1px solid #bbb; + cursor: pointer; + box-sizing: border-box; } + .button:hover, + button:hover, + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + .button:focus, + button:focus, + input[type="submit"]:focus, + input[type="reset"]:focus, + input[type="button"]:focus { + color: #333; + border-color: #888; + outline: 0; } + .button.button-primary, + button.button-primary, + input[type="submit"].button-primary, + input[type="reset"].button-primary, + input[type="button"].button-primary { + color: #FFF; + background-color: #33C3F0; + border-color: #33C3F0; } + .button.button-primary:hover, + button.button-primary:hover, + input[type="submit"].button-primary:hover, + input[type="reset"].button-primary:hover, + input[type="button"].button-primary:hover, + .button.button-primary:focus, + button.button-primary:focus, + input[type="submit"].button-primary:focus, + input[type="reset"].button-primary:focus, + input[type="button"].button-primary:focus { + color: #FFF; + background-color: #1EAEDB; + border-color: #1EAEDB; } + + + /* Forms + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + input[type="email"], + input[type="number"], + input[type="search"], + input[type="text"], + input[type="tel"], + input[type="url"], + input[type="password"], + textarea, + select { + height: 38px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid #D1D1D1; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; } + /* Removes awkward default styles on some inputs for iOS */ + input[type="email"], + input[type="number"], + input[type="search"], + input[type="text"], + input[type="tel"], + input[type="url"], + input[type="password"], + textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + textarea { + min-height: 65px; + min-width: 400px; + padding-top: 6px; + padding-bottom: 6px; } + input[type="email"]:focus, + input[type="number"]:focus, + input[type="search"]:focus, + input[type="text"]:focus, + input[type="tel"]:focus, + input[type="url"]:focus, + input[type="password"]:focus, + textarea:focus, + select:focus { + border: 1px solid #33C3F0; + outline: 0; } + label, + legend { + display: block; + margin-bottom: .5rem; + font-weight: 600; } + fieldset { + padding: 0; + border-width: 0; } + input[type="checkbox"], + input[type="radio"] { + display: inline; } + label > .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } + + + /* Lists + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + ul { + list-style: circle inside; } + ol { + list-style: decimal inside; } + ol, ul { + padding-left: 0; + margin-top: 0; } + ul ul, + ul ol, + ol ol, + ol ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } + li { + margin-bottom: 1rem; } + + + /* Code + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; } + pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; } + + + /* Tables + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + th, + td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; } + th:first-child, + td:first-child { + padding-left: 0; } + th:last-child, + td:last-child { + padding-right: 0; } + + + /* Spacing + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + button, + .button { + margin-bottom: 1rem; } + input, + textarea, + select, + fieldset { + margin-bottom: 1.5rem; } + pre, + blockquote, + dl, + figure, + table, + p, + ul, + ol, + form { + margin-bottom: 2.5rem; } + + + /* Utilities + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + .u-full-width { + width: 100%; + box-sizing: border-box; } + .u-max-full-width { + max-width: 100%; + box-sizing: border-box; } + .u-pull-right { + float: right; } + .u-pull-left { + float: left; } + + + /* Misc + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #E1E1E1; } + + + /* Clearing + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + + /* Self Clearing Goodness */ + .container:after, + .row:after, + .u-cf { + content: ""; + display: table; + clear: both; } + + + /* Media Queries + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + /* + Note: The best way to structure the use of media queries is to create the queries + near the relevant code. For example, if you wanted to change the styles for buttons + on small devices, paste the mobile query code up in the buttons section and style it + there. + */ + + + /* Larger than mobile */ + @media (min-width: 400px) {} + + /* Larger than phablet (also point when grid becomes active) */ + @media (min-width: 550px) {} + + /* Larger than tablet */ + @media (min-width: 750px) {} + + /* Larger than desktop */ + @media (min-width: 1000px) {} + + /* Larger than Desktop HD */ + @media (min-width: 1200px) {} + </style> +</head> + +<h1>Accountability For Medics</h1> +<p>Have you had an encounter with a medic that made you feel uncomfortable? We know that we are in the work of building community care for the long-haul. We know that racism and oppression exist in all levels of our society, and that our revolutionary work is to continue to disrupt them everywhere - including in our own bodies. Are there things we should know? We are open to hearing about about negative, uncomfortable, or hurtful experiences with medics you've encountered so we can continue to build a movement that is grounded in healing, not continuing to replicate systemic violence.</p> +<p>North Star Health Collective is one of many groups using the name ‘medic’ in the Twin Cities in the last week. We endeavor to be accountable to our community. This information will be used to start conversations with the persons involved if we are able to identify them and to hold medics operating as part of NSHC to the agreements and protocols discussed in the vetting process.</p> +<p>This form is anonymous and you do not have to leave us any identifying information. If you would like us to follow up with you, please feel free to leave contact information. If you don't want to do that, please leave it blank.</p> <form action="/" method="POST" novalidate> <div> - <p><label>Your email:</label></p> - <p><input type="email" name="email"></p> + <p><label>If you're a medic, did you or your medic buddy do something that made you uncomfortable?</label></p> + <p>Please describe to the best of your ability. Our goal is not to repeat the work of the carceral state, but to help hold each other accountability and support deep reflection and change in all the medics we are working with in the field.</p> + <p><textarea name="question1"></textarea></p> </div> <div> - <p><label>Your message:</label></p> - <p><textarea name="content"></textarea></p> + <p><label>Are there things you would like to see Northstar do differently to better care for, and support our communities?</label></p> + <p><textarea name="question2"></textarea></p> + </div> + <div> + <p><label>Have you had an encounter with a medic that made you feel uncomfortable or disrespected?</label></p> + <p>Please tell us about the interaction. What happened? Where and when did this occur? Please be as specific as you are comfortable being</p> + <p><textarea name="question3"></textarea></p> + </div> + <div> + <p><label>Do you want us to follow up with a specific person re: accountability?</label></p> + <p>We are thinking critically about people's safety and the use of identifying information. If you do not feel comfortable calling us directly (which would mean we'd have have your phone or email), please leave as little information as we would need here. Perhaps a phone number or a first name or the site they were located at. We want to balance, as best we can, protecting the security of all who we work with.</p> + <p><textarea name="question4"></textarea></p> + </div> + <div> + <p><label>Are there any other comments you would like to share with us?</label></p> + <p><textarea name="question5"></textarea></p> + </div> + <div> + <p><label>Would you like us to follow up with you? If yes, please leave your phone number or email here:</label></p> + <p><textarea name="question6"></textarea></p> + </div> + <div> + <p><label>Anything else you'd like us to know or specific requests?</label></p> + <p><textarea name="question7"></textarea></p> </div> <div> <input type="submit" value="Send message"> </div> </form> + +<footer> + <p>warrant canary: 🐦</p> +</footer> + +</html>