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

@@ -22,25 +22,28 @@
         </section>
         <section>
             <div id="info-section"class="row">
-                <div class="col-lg info-col p-5">
+              <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?">
-                    </h1>
+                  {# WHAT IS THIS?<br/> AND WHATS YOUR STORY? #}
-                    <p class="info">
+                </h1>
-                    we’re “what’s your story” (hence #WYS) and we want to hear yours! what
+                <p class="info">
-                    kinds of things make you special? what are some of your favorite snacks
+                  inspired by a family tradition of “high, low, buffalo”, a fun exercise
-                    or movies? what is a special talent you mighthave that you don't tell
+                  in sharing the highs, lows, and funny parts of our day, Hi Lo aims 
-                    people about in person? this is the beginning of us (fellow riders,
+                  to encourage people to share about their days and their feelings 
-                    walkers, etc.) getting to know one another throughout our communities
+                  just like “high, low, buffalo does”. this is the beginning of us 
-                    across the US while encouraging people to get out on the trails and
+                  (fellow riders,walkers, etc.) getting to know one another 
-                    exercise. it revolves around the idea that every stranger has a story
+                  throughout our communities across the US while encouraging
-                    to share and we can unify communities using these diverse stories and
+                  people to get out on the trails and exercise. it revolves around 
-                    connect just like trails and maps do. if you are here right now you
+                  the idea that every person has a story to share and we can 
-                    scanned a QR code that was hung up on a nearby trail. we are happy to
+                  unify communities using these diverse stories and connect just
-                    have you here! so, go ahead and share your story and enjoy being
+                  like trails and maps do. if you are here right now you scanned a 
-                    outside. YOU ARE AWESOME!
+                  QR code that was hung up on a nearby trail. we are happy to have
-                  </p>
+                  you here! so, go ahead and share your story and enjoy being 
-                </div>
+                  outside. we’re here with you through your highs and lows! 
+                  HAVE A GREAT DAY
+                </p>
+              </div>
             </div>
             <div id="info-section"class="row">
                 <div class="col-lg banner vh-25"></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);
+});
 });