From acf667a5a02ac231d704f603623225467b13c678 Mon Sep 17 00:00:00 2001
From: root <root@lovingwomen.online>
Date: Sat, 21 Feb 2026 06:49:36 +0000
Subject: [PATCH] adding comments. hope this works

---
 .gitignore                     |   2 +-
 app/views/posts/show.html.erb  |   3 +
 public/bow-bg.gif              | Bin 0 -> 177 bytes
 public/comment-widget-pink.css | 183 +++++++++++++++++++++++++++++++++
 4 files changed, 187 insertions(+), 1 deletion(-)
 create mode 100644 public/bow-bg.gif
 create mode 100644 public/comment-widget-pink.css

diff --git a/.gitignore b/.gitignore
index c73cc8b..fdb6826 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,7 +9,7 @@
 
 # Ignore all environment files.
 /.env*
-
+/public/comment-widget.js
 # Ignore all logfiles and tempfiles.
 /log/*
 /tmp/*
diff --git a/app/views/posts/show.html.erb b/app/views/posts/show.html.erb
index deefefe..590e4ff 100644
--- a/app/views/posts/show.html.erb
+++ b/app/views/posts/show.html.erb
@@ -8,6 +8,7 @@
 <p>
   <strong></strong>
   <%= @post.text %>
+
 </p>
 <p>
 
@@ -22,6 +23,8 @@
   <%= @post.mood %></p>
     <% end %>
 <hr>
+ <div id="c_widget"></div>
+        <script src="/comment-widget.js"></script>
 </section>
 
 
diff --git a/public/bow-bg.gif b/public/bow-bg.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ec9880917c93d31c4e38ced16b09d98ea6a57883
GIT binary patch
literal 177
zcmZ?wbhEHbRAx|OSj52ad()%aTYo>k`04k}_vdE({ypu+e;~N_QSm1W0|@AV2#{I^
z=CX=ichdDv-Bj3n{gJNefBqK&N1UwWJUE<oZu42i<>+vwKxdX|<?UT_PnKGQw)6(M
zY*W^oD6RIza;e8^N1f2y5A*iA7liHEk#zP}$ifW~&R3fmcMGH|+m<jaSTOy*bWL@3
bRhd&(F?(LUP;0PHM_)?fq>OYWP6lfLi5*U+

literal 0
HcmV?d00001

diff --git a/public/comment-widget-pink.css b/public/comment-widget-pink.css
new file mode 100644
index 0000000..8415ffe
--- /dev/null
+++ b/public/comment-widget-pink.css
@@ -0,0 +1,183 @@
+/*
+    Below you will be able to freely customize every aspect of the comment widget.
+    Most aspects of the widget are 100% able to be customized in CSS, but for strong structural changes,
+    you may have to edit the JavaScript file.
+
+    These are all the classes and IDs at your disposal!
+    Classes have a c- at the start and IDs have a c_
+    You don't need every single one for a good theme, but I tried to give as many options as possible!
+*/
+/*
+    Containers:
+        #c_widget - The container <div> for the entire widget
+        #c_inputArea - The wrapper <div> around the form
+        #c_container - The wrapper <div> around all the comments
+
+    The input form:
+        #c_form - The whole input <form>
+        #c_widgetTitle - The <h2> title at the top of the form
+
+        .c-inputWrapper- All <div> wrappers for each label/input pair
+        .c-label - All <label>s
+        .c-input - All <input>s
+
+        #c_nameWrapper - The wrapper <div> for the name field
+        .c-nameLabel - The <label> for the name field
+        .c-nameInput - The <input> for the name field
+
+        #c_websiteWrapper - The wrapper <div> for the website field
+        .c-websiteLabel - The <label> for the website field
+        .c-websiteInput - The <input> for the website field
+
+        #c_textWrapper - The wrapper <div> for the text field
+        .c-textLabel - The <label> for the text field
+        .c-textInput - The <input> for the text field
+
+        #c_submitButton - The submit button (It's an <input> element with a type of "submit")
+        #c_replyingText - The text <span> that displays when a user is replying to a comment
+
+    The comment section:
+        .c-comment - All comment <div>s
+        .c-reply - All reply <div>s (contained within parent comment <div>s)
+        .c-name - The name of the person submitting the comment/reply (an <h3> element)
+        .c-timestamp - The timestamp of when the comment/reply was made (a <span> element)
+        .c-site - The website linked at the top of the comment/reply (an <a> element)
+        .c-text - The actual text body of the comment/reply (a <p> element)
+        .c-replyButton - All reply <button>s
+        .c-expandButton - The <button>s to reveal/hide replies (These only show if s_collapsedReplies is set to true in the JS)
+        
+        #c_pagination - The <div> wrapper for the pagination at the bottom (Only shows if there's more than one page)
+        .c-paginationButton - Both left and right directional <button>s
+        #c_leftButton - The left <button>
+        #c_rightButton - The right <button>
+*/
+
+/* Main */
+#c_widget {
+    box-sizing: border-box;
+    height: 100%;
+    padding: 15px;
+    overflow: auto;
+background: #ff0040;
+background: radial-gradient(circle, rgba(255, 0, 64, 1) 0%, rgba(48, 255, 100, 1) 50%, rgba(255, 107, 144, 1) 100%); */
+
+    font-family: 'Trebuchet MS';
+    font-size: 14px;
+    color: #211F24;
+}
+
+#c_widget button, #c_widget input[type=submit] {
+    padding: 4px;
+    text-decoration: none;
+	text-transform: lowercase;
+	text-align: center;
+    background-color: white;
+    color: #CE98FB;
+    border: 1px solid #CE98FB;
+    border-radius: 5px;
+}
+#c_widget button:hover, #c_widget input[type=submit]:hover {
+    background-color: #FB96D8;
+    color: white;
+    border: 1px solid #FB96D8;
+}
+#c_widget button:disabled, #c_widget input[type=submit]:disabled {opacity: 60%;}
+#c_widget button:disabled:hover, #c_widget input[type=submit]:disabled:hover {
+    background-color: white;
+    color: #CE98FB;
+    border: 1px solid #CE98FB;
+}
+
+/* Input section */
+#c_inputDiv {
+    padding: 10px;
+    text-transform: lowercase;
+    background-color: rgba(255, 255, 255, .8);
+    border: 1px dashed #CE98FB;
+    border-radius: 5px;
+}
+#c_container {margin-top: 10px;}
+
+#c_widgetTitle {
+    margin: 0;
+    padding: 0;
+    font-style: italic;
+    text-decoration: underline;
+}
+
+.c-inputWrapper {
+    display: block;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+.c-input {
+    padding: 4px;
+    color: #5E2C49;
+    border-radius: 4px;
+    border: 1px solid #CE98FB;
+	outline: none;
+}
+.c-input:focus {border: 1px solid #FB96D8;}
+
+.c-textInput {
+    width: calc(100% - 10px);
+    max-width: 900px;
+    resize: none;
+}
+#c_submitButton {display: block;}
+#c_replyingText {color: #5E2C49;}
+
+/* Comment section */
+.c-comment {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 10px;
+    background-color: rgba(255, 255, 255, .75);
+    border: 1px dashed #CE98FB;
+    border-radius: 4px;
+}
+.c-reply {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 10px;
+    background-color: rgba(255, 255, 255, 1);
+    border: 1px dashed #CE98FB;
+    border-radius: 4px;
+}
+.c-reply:last-child {margin-bottom: 0;}
+
+.c-name {
+    display: inline-block;
+    margin: 0;
+    margin-right: 10px;
+    padding: 0;
+    text-decoration: underline;
+}
+.c-site {
+    text-transform: lowercase;
+    color: #CE98FB;
+}
+.c-site:hover {color: #211F24;}
+.c-timestamp {
+    float: right;
+    opacity: 60%;
+}
+.c-text {
+    margin: 0;
+    margin-top: 10px;
+    padding: 0;
+    text-align: justify;
+    color: #5E2C49;
+}
+
+/* Pagination */
+#c_pagination {text-align: center;}
+.c-replyButton {margin-top: 10px;}
+.c-expandButton {
+    float: right;
+    margin-top: 10px;
+}
+.c-paginationButton {
+    margin-right: 4px;
+    margin-left: 4px;
+}