moving project to grey design

homepage/models.py

@@ -93,14 +93,14 @@ class Poll (models.Model):
 	ask_lo = models.BooleanField(default=True)
 	lo_text = models.CharField(max_length=100, blank=True, null=True, default='What was the <span class="lo">Lo</span> of this week?')
 	
-	ask_emotion = models.BooleanField(default=True)
+	ask_emotion = models.BooleanField(default=False)
 	emotion_text = models.CharField(max_length=100, blank=True, null=True, default="how are you feeling today?")
 	
-	ask_name = models.BooleanField(default=True)
+	ask_name = models.BooleanField(default=False)
 	name_text = models.CharField(max_length=100, blank=True, null=True, default="what's your name?")
 	
 	ask_place = models.BooleanField(default=True)
-	place_text = models.CharField(max_length=100, blank=True, null=True, default="where are you from?")
+	place_text = models.CharField(max_length=100, blank=True, null=True, default="fill it out by writing #HiLo and finishing it with where you’re from (Ex. #HiLoArlington, #HiLoDC)")
 	
 	ask_question = models.BooleanField(default=False)
 	question_text = models.CharField(max_length=100, blank=True, null=True)
@@ -110,8 +110,25 @@ class Poll (models.Model):
 	def __str__(self):
 		return f"{self.location.name}'s Poll"
 
-	def __save__(self, *args, **kwargs):
+	def save(self, *args, **kwargs):
+		# print("ok....")
 		self.pub_date = timezone.now()
+		# if self.ask_hi != True:
+		# 	self.hi_text = None
+
+		# if self.ask_lo != True:
+		# 	self.lo_text = None
+
+		# print("whatfaskdfjksadkfasd")
+		# if self.ask_name != True:
+		# 	print("bruh thatsakjjktsltjlkslktjlksatlkljkaslk")
+		# 	self.name_text = None
+
+		# if self.ask_place != True:
+		# 	self.place_text = None
+
+		# if self.ask_question != True:
+		# 	self.question_text = None
 		super().save(self, *args, **kwargs)
 
 

homepage/templates/homepage/index.html

@@ -23,22 +23,25 @@
         <section>
             <div id="info-section"class="row">
               <div class="col-lg info-col p-5">
-                    <h1 class="info-header">WHAT IS THIS?<br/>
+                <h1 class="info-header">
-                        AND WHATS YOUR STORY?
+                  <img class="img-fluid" src="{% static 'css/res/info-header.png' %}" alt="WHAT IS THIS? <br /> AND WHAT'S HILO?">
+                  {# WHAT IS THIS?<br/> AND WHATS YOUR STORY? #}
                 </h1>
                 <p class="info">
-                    we’re “what’s your story” (hence #WYS) and we want to hear yours! what
+                  inspired by a family tradition of “high, low, buffalo”, a fun exercise
-                    kinds of things make you special? what are some of your favorite snacks
+                  in sharing the highs, lows, and funny parts of our day, Hi Lo aims 
-                    or movies? what is a special talent you mighthave that you don't tell
+                  to encourage people to share about their days and their feelings 
-                    people about in person? this is the beginning of us (fellow riders,
+                  just like “high, low, buffalo does”. this is the beginning of us 
-                    walkers, etc.) getting to know one another throughout our communities
+                  (fellow riders,walkers, etc.) getting to know one another 
-                    across the US while encouraging people to get out on the trails and
+                  throughout our communities across the US while encouraging
-                    exercise. it revolves around the idea that every stranger has a story
+                  people to get out on the trails and exercise. it revolves around 
-                    to share and we can unify communities using these diverse stories and
+                  the idea that every person has a story to share and we can 
-                    connect just like trails and maps do. if you are here right now you
+                  unify communities using these diverse stories and connect just
-                    scanned a QR code that was hung up on a nearby trail. we are happy to
+                  like trails and maps do. if you are here right now you scanned a 
-                    have you here! so, go ahead and share your story and enjoy being
+                  QR code that was hung up on a nearby trail. we are happy to have
-                    outside. YOU ARE AWESOME!
+                  you here! so, go ahead and share your story and enjoy being 
+                  outside. we’re here with you through your highs and lows! 
+                  HAVE A GREAT DAY
                 </p>
               </div>
             </div>
@@ -48,7 +51,7 @@
         </section>
         <div id="insta-section"class="row">
             <div class="col-lg p-5">
-                <p class="text-light insta-info">These responses are not being used in any negative way
+                <p class="insta-info">These responses are not being used in any negative way
                   , just to hear stories and see how cool people are all over! you do not
                   have to share your name or where you live, it just makes your
                   responses more identifiable if you see them on the instagram.
@@ -59,7 +62,7 @@
                   i hope to publish some stories via instagram and share
                   the journeys taking place all over our country!<br/>
 
-                  <a href="https://instagram.com" target="_blank"><i class="fa fa-instagram center pt-3" style="font-size: 48px; color: white; text-align: center; width: 100%;"></i></a>
+                  <a href="https://instagram.com/{{instagram}}" target="_blank"><i class="fa fa-instagram center pt-3" style="font-size: 48px; color: black; text-align: center; width: 100%;"></i></a>
                 </p>
             </div>
         </div>
@@ -83,17 +86,14 @@
                       {{ hidden }}
                     {% endfor %}
 
-
-                    {{ form.errors }}
-                    {{ form.non_field_errors }}
-                    
                     <div class="row title pb-3 ">
-                      <p for="test" class="mx-auto title">NOW IS YOUR TIME TO SHINE</p>
+                      <img class="mx-auto img-fluid" style="max-width: 80%!important;" src="{% static 'css/res/time-to-shine.png' %}">
+                      {# <p class="mx-auto title">NOW IS YOUR TIME TO SHINE</p> #}
                     </div>
                     {% if hi_text %}
                       <div class="row pb-3 short-answer">
                         <label class="mx-auto" for="{{ form.hi.id_for_label }}">{{ hi_text|safe }}</label>
-                        {{ form.hi|add_class:'w-80 mx-auto rounded' }}
+                        {{ form.hi|add_class:'w-80 mx-auto rounded question' }}
                         {% for error in form.hi.errors %}
                           <span class="help-block">{{ error }}</span>
                         {% endfor %}
@@ -104,7 +104,7 @@
                     {% if lo_text %}
                     <div class="row pb-3 short-answer">
                       <label class="mx-auto" for="{{ form.lo.id_for_label }}">What was the <span class="lo">Lo</span> of this week?</label>
-                      {{ form.lo|add_class:'w-80 mx-auto rounded' }}
+                      {{ form.lo|add_class:'w-80 mx-auto rounded question' }}
                       {% for error in form.lo.errors %}
                         <span class="help-block">{{ error }}</span>
                       {% endfor %}
@@ -112,9 +112,6 @@
                     {% else %}
                       {{ form.lo|add_class:'hidden' }}
                     {% endif %}
-                    <div class="row pb-1 subtitle">
-                      <p class="mx-auto">SOME MORE QUESTIONS FOR THE SOUL</p>
-                    </div>
                     {% if emotion_text %}
                     <div class="row pb-3 short-answer">
                       <label for="test" class="mx-auto">how are you feeling today?</label>
@@ -132,13 +129,13 @@
                     </div>
                     {% else %}
                       {% for radio in form.emotion %}
-                        {{ radio.tag|add_class:'hidden' }}
+                        {{ radio.tag }}
                       {% endfor %}
                     {% endif %}
                     {% if name_text %}
                     <div class="row pb-3 short-answer">
                       <label class="mx-auto" for="{{ form.name.id_for_label }}">{{ name_text|safe }}</label>
-                      {{ form.name|add_class:'w-80 mx-auto rounded' }}
+                      {{ form.name|add_class:'w-80 mx-auto rounded question' }}
                       {% for error in form.name.errors %}
                         <span class="help-block">{{ error }}</span>
                       {% endfor %}
@@ -147,9 +144,12 @@
                       {{ form.name|add_class:'hidden' }}
                     {% endif %}
                     {% if place_text %}
+                    <div class="row title">
+                      <img class="mx-auto img-fluid" style="max-width: 80%!important;" src="{% static 'css/res/hilo-hashtag.png' %}">
+                    </div>
                     <div class="row pb-3 short-answer">
                       <label class="mx-auto" for="{{ form.place.id_for_label }}">{{ place_text|safe }}</label>
-                      {{ form.place|add_class:'w-80 mx-auto rounded' }}
+                      {{ form.place|add_class:'w-80 mx-auto rounded question' }}
                       {% for error in form.place.errors %}
                         <span class="help-block">{{ error }}</span>
                       {% endfor %}
@@ -158,9 +158,14 @@
                       {{ form.place|add_class:'hidden' }}
                     {% endif %}
                     {% if question_text %}         
+                    <div class="row title">
+                      <img class="mx-auto img-fluid" style="max-width: 80%!important;" src="{% static 'css/res/bonus-question.png' %}">
+
+                      {# <p class="mx-auto title">BONUS QUESTION</p> #}
+                    </div>
                     <div class="row pb-3 short-answer">
                       <label class="mx-auto" for="{{ form.question.id_for_label }}">{{ question_text|safe }}</label>
-                      {{ form.question|add_class:'w-80 mx-auto rounded' }}
+                      {{ form.question|add_class:'w-80 mx-auto rounded question' }}
                       {% for error in form.question.errors %}
                         <span class="help-block">{{ error }}</span>
                       {% endfor %}
@@ -170,7 +175,7 @@
                     {% endif %}
                     <div class="row">
                       <button type="submit" class="mx-auto btn text-uppercase">
-                        <img src="{% static 'css/res/submit.png' %}">
+                        <img src="{% static 'css/res/submit-white.png' %}">
                       </button>
                     </div>
                   </form>

homepage/templates/homepage/results.html

@@ -8,16 +8,18 @@
 	}
 
 	.hero {
+		cursor: pointer;
 		background-image: url("{{ location.results.url }}");
 	}
 
     @media (max-width: 768px) {
       .hero {
-        background-image: url("{{ location.results_mobile.url }}");
+        background-image: url("{% static 'css/res/results-mobile-hero.png' %}");
       }
     }
 </style>
-<section class="jumbotron hero jumbotron-fluid m-0"></section>
+<section id="results-hero" class="jumbotron hero jumbotron-fluid m-0"></section>
+<section id="answers">
 {% for answer in answers %}
 	<div class="card text-white bg-dark mb-3">
 		<div class="row">
@@ -44,5 +46,6 @@
 			</div>
 		</div>
 	</div>
+</section>
 {% endfor %}
 {% endblock %}

homepage/views.py

@@ -64,6 +64,7 @@ def homepage (request, slug="arlington"):
 		'form': form,
 		'poll': poll,
 		'location': location,
+		'instagram': location.insta[1:],
 		'hi_text': hi_text,
 		'lo_text': lo_text,
 		'emotion_text': emotion_text,

static/css/styles.css

@@ -17,8 +17,8 @@
   src: url("./fonts/FuturaPTHeavy.otf");
   font-family: "Futura-Heavy"; }
 html {
-  background-color: #222;
+  background-color: #4b4b4b;
-  font-family: "Futura-Heavy", "Arial", sans-serif;
+  font-family: "Hanson-Bold", "Arial", sans-serif;
   overflow-x: none !important; }
 
 body {
@@ -50,7 +50,7 @@ body::-webkit-scrollbar {
 
 .arrow:after {
   content: "";
-  margin-top: 75vh;
+  margin-top: 70vh;
   width: 70px;
   height: 100px;
   position: absolute;
@@ -76,24 +76,24 @@ body::-webkit-scrollbar {
   color: white;
   background-image: url("res/banner.png");
   background-position: center;
-  background-repeat: no-repeat;
+  background-size: contain;
-  background-size: cover;
+  background-attachment: fixed;
-  background-attachment: fixed; }
+  transform: scale(1.2); }
 
 .info-col {
   background-color: #fff; }
 
 .info-header {
-  color: #2b5291;
+  color: #000000;
-  font-family: "Futura-Heavy", "Arial", sans-serif; }
+  font-family: "Hanson-Bold", "Arial", sans-serif; }
   @media (max-width: 768px) {
     .info-header {
       font-size: 1.25em; } }
 
 .info {
   font-size: .8em;
-  color: #2b5291;
+  color: #000000;
-  font-family: "Futura-Heavy", "Arial", sans-serif; }
+  font-family: "Hanson-Bold", "Arial", sans-serif; }
   @media (max-width: 768px) {
     .info {
       font-size: .75em; } }
@@ -101,7 +101,7 @@ body::-webkit-scrollbar {
 #insta-section {
   border-bottom: 2px solid white; }
   #insta-section div {
-    background-color: pink; }
+    background-color: #ffffff; }
 
 .bg-colored:before {
   right: -999em;
@@ -118,12 +118,12 @@ body::-webkit-scrollbar {
 
 .poll {
   color: white;
-  background-color: #222;
+  background-color: #4b4b4b;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
-  font-family: "Futura-Heavy", "Arial", sans-serif;
+  font-family: "Hanson-Bold", "Arial", sans-serif;
   font-weight: lighter;
   font-size: .75em; }
 
@@ -131,15 +131,15 @@ body::-webkit-scrollbar {
   font-size: 1.1em; }
 
 .title {
-  color: #42b8c7;
+  color: #000;
-  font-size: 1.20em;
+  font-size: 1.40em;
   text-align: center; }
   @media (min-width: 768px) {
     .title {
       font-size: 1.45em; } }
 
 .subtitle {
-  color: #42b8c7;
+  color: #000;
   font-size: 1.1em; }
   @media (min-width: 768px) {
     .subtitle {
@@ -149,14 +149,14 @@ label {
   font-size: 1.25em; }
 
 .btn {
-  color: #2b5291;
+  color: #000000;
   border-image-repeat: none; }
 
 .hi {
-  color: #48B93E; }
+  color: #80ea7b; }
 
 .lo {
-  color: #E34848; }
+  color: #f85151; }
 
 [type=radio] {
   position: absolute;
@@ -178,7 +178,7 @@ label {
 
 /* CHECKED STYLES */
 [type=radio]:checked + img {
-  outline: 2px solid #2b5291; }
+  outline: 2px solid #000000; }
 
 .hidden {
   display: none; }
@@ -190,4 +190,7 @@ label {
   width: 150px;
   height: auto; }
 
+.question {
+  font-size: 2em; }
+
 /*# sourceMappingURL=styles.css.map */

static/css/styles.scss

@@ -12,7 +12,7 @@
 }
 
 // fonts
-$font-stack: 'Futura-Heavy','Arial',sans-serif;
+$font-stack: 'Hanson-Bold','Arial',sans-serif;
 
 @font-face {
     src: url("./fonts/Hanson-Bold.ttf");
@@ -56,13 +56,13 @@ $mobile-width: 768px;
 
 // colors
 $dark-grey: #333;
-$darker-grey: #222;
+$darker-grey: #4b4b4b;
-$text: #2b5291;
+$text: #000000;
-$text-light: #42b8c7;
+$text-light: #000;
 $header-stroke: #305899;
 
-$green: #48B93E;
+$green: #80ea7b;
-$red: #E34848;
+$red: #f85151;
 
 html {
   background-color: $darker-grey;
@@ -106,7 +106,7 @@ body::-webkit-scrollbar {
 
 .arrow:after {
      content: "";
-     margin-top: 75vh;
+     margin-top: 70vh;
      width: 70px;
      height: 100px;
      position: absolute;
@@ -145,9 +145,9 @@ body::-webkit-scrollbar {
   color: white;
   background-image: url("res/banner.png");
   background-position: center;
-  background-repeat: no-repeat;
+  background-size: contain;
-  background-size: cover;
   background-attachment: fixed;
+  transform: scale(1.2);
 }
 
 .info-col{
@@ -180,7 +180,7 @@ body::-webkit-scrollbar {
 #insta-section {
   border-bottom: 2px solid white;
   div {
-    background-color: pink;
+    background-color: #ffffff;
   }
 }
 
@@ -221,7 +221,7 @@ body::-webkit-scrollbar {
 
 .title {
   color: $text-light;
-  font-size: 1.20em;
+  font-size: 1.40em;
   text-align: center;
   @include desktop {
     font-size: 1.45em;
@@ -290,3 +290,7 @@ label {
   width: 150px;
   height: auto;
 }
+
+.question {
+  font-size: 2em;
+}

static/js/main.js

@@ -9,4 +9,9 @@ $(document).ready(function(){
   $(window).on("resize", function() {
     $(".jumbotron").css({ height: $(window).height() + "px" });
   });
+  $("#results-hero").click(function() {
+    $('html, body').animate({
+        scrollTop: $("#answers").offset().top
+    }, 2000);
+});
 });