diff --git a/config/settings.py b/config/settings.py index 0fc1a10..38ee6a4 100644 --- a/config/settings.py +++ b/config/settings.py @@ -29,7 +29,7 @@ SECRET_KEY = env("SECRET_KEY") # SECURITY WARNING: don't run with debug turned on in production! -DEBUG = False +DEBUG = True ALLOWED_HOSTS = ["127.0.0.1", ".zurifordummies.com"] @@ -176,7 +176,7 @@ ACCOUNT_LOGOUT_ON_PASSWORD_CHANGE = True ACCOUNT_EMAIL_CONFIRMATION_AUTHENTICATED_REDIRECTED_URL = None -# email config +# # email config EMAIL_BACKEND = "django.core.mail.backends.smtp.EmailBackend" EMAIL_USE_SSL = True EMAIL_USE_TLS = False diff --git a/pages/admin.py b/pages/admin.py index 8c38f3f..36b748e 100644 --- a/pages/admin.py +++ b/pages/admin.py @@ -1,3 +1,5 @@ from django.contrib import admin - +from .models import * # Register your models here. + +admin.site.register(Template) \ No newline at end of file diff --git a/pages/migrations/0001_initial.py b/pages/migrations/0001_initial.py new file mode 100644 index 0000000..296e090 --- /dev/null +++ b/pages/migrations/0001_initial.py @@ -0,0 +1,22 @@ +# Generated by Django 4.1 on 2022-08-15 12:48 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + initial = True + + dependencies = [ + ] + + operations = [ + migrations.CreateModel( + name='Template', + fields=[ + ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), + ('directory', models.CharField(max_length=20, null=None)), + ('template_index', models.CharField(default='index.html', max_length=20)), + ], + ), + ] diff --git a/pages/models.py b/pages/models.py index 71a8362..5cddd37 100644 --- a/pages/models.py +++ b/pages/models.py @@ -1,3 +1,10 @@ from django.db import models # Create your models here. + +class Template(models.Model): + directory = models.CharField(max_length=20, null=None) + template_index = models.CharField(max_length=20, default="index.html") + + def __str__ (self): + return self.directory \ No newline at end of file diff --git a/pages/urls.py b/pages/urls.py index 914be79..50060b6 100644 --- a/pages/urls.py +++ b/pages/urls.py @@ -1,9 +1,10 @@ from django.urls import path, include -from .views import HomePageView, DashboardView, SelectTemplateView, BloggerUsersView +from .views import HomePageView, DashboardView, selectTemplate, BloggerUsersView,viewTemplate urlpatterns = [ path("", HomePageView.as_view(), name="home"), path("dashboard/", DashboardView.as_view(), name="dashboard"), path("dashboard/users/", BloggerUsersView.as_view(), name="users"), - path("select_template/", SelectTemplateView.as_view(), name="select_template"), + path("select_template/", selectTemplate, name="select_template"), + path("select_template//", viewTemplate, name="viewTemplate"), ] diff --git a/pages/views.py b/pages/views.py index a7c6f34..fd824e7 100644 --- a/pages/views.py +++ b/pages/views.py @@ -1,8 +1,9 @@ +from re import template from django.conf import settings from django.shortcuts import redirect from django.shortcuts import render from django.views.generic import TemplateView - +from .models import * # Create your views here. @@ -14,17 +15,17 @@ class DashboardView(TemplateView): template_name = "dashboard.html" -class SelectTemplateView(TemplateView): - template_name = "select_template.html" - - class BloggerUsersView(TemplateView): template_name = "dashboard_users.html" - def error_404(request, exception): return render(request, "404.html") +def selectTemplate(request): + temp_name = Template.objects.all() + context = {'temp_name':temp_name} + return render(request, 'select_template.html',context) -# def error_500(request): -# return render(request, "404.html") +def viewTemplate(request, pk): + template = Template.objects.get(id=pk) + return render(request, f'{template.directory}/{template.template_index}') diff --git a/static/assets/css/select_template.css b/static/assets/css/select_template.css index fb14679..33f0e1f 100644 --- a/static/assets/css/select_template.css +++ b/static/assets/css/select_template.css @@ -147,7 +147,7 @@ main p { height: 416px; } #col1 { - background-image: url(/static/assets/images/template1.png); + background-image: url(/static/assets/images/huddle-template.png); background-repeat: no-repeat; background-size: 100% 416px; } diff --git a/static/assets/css/template1.css b/static/assets/css/template1.css new file mode 100644 index 0000000..20ac26b --- /dev/null +++ b/static/assets/css/template1.css @@ -0,0 +1,467 @@ +@charset "UTF+8"; + +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@600&display=swap'); + +:root { + --pink: hsl(322, 100%, 66%); + --light-pink: hsl(322, 95%, 76%); + --very-pale-cyan: hsl(193, 100%, 96%); + --very-dark-cyan: hsl(192, 100%, 9%); + --grayish-blue: hsl(208, 11%, 55%); + --gray-shadow: hsla(209, 11%, 55%, 0.1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: white; + max-width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; +} + +h1 { + font-family: 'Poppins', sans-serif; + font-size: 2.5rem; + font-weight: 600; + color: var(--very-dark-cyan); + margin-bottom: 2rem; +} + +h2 { + font-family: 'Poppins', sans-serif; + font-size: 1.5rem; + font-weight: 600; + color: var(--very-dark-cyan); + margin-bottom: 1.5rem; +} + +p { + font-family: 'Open Sans', sans-serif; + font-size: 1.2em; + font-weight: 400; + color: var(--grayish-blue); + margin-bottom: 1.8rem; + line-height: 1.5; +} + +@media screen and (max-width: 992px) { + h1 { + font-size: 2rem; + } + h2 { + font-size: 1.4rem; + } + p { + font-size: 1.2rem; + } +} + +button { + font-family: 'Poppins', sans-serif; + transition: all 0.3s ease-in-out; +} + +button:hover { + transform: scale(1.02); +} + +img { + transition: all 0.3s ease-in-out; +} + +img:hover { + transform: scale(1.02); +} + +header { + padding-bottom: 3rem; + background-color: var(--very-pale-cyan); + background-image: url(images/bg-hero-desktop.svg); +} + +@media screen and (max-width: 992px) { + header { + background-image: url(images/bg-hero-mobile.svg); + } +} + +header .header-top { + display: flex; + justify-content: space-between; + width: 100%; + padding: 2rem 3.5rem; +} + +header img { + width: 15%; + height: 1%; + padding-top: 0.7em; +} + +@media screen and (max-width: 768px) { + header img { + width: 30%; + } +} + +@media screen and (max-width: 480px) { + header img { + width: 35%; + padding-top: 0.5em; + } +} + +header button { + background-color: white; + padding: 0.5rem 3rem; + border: none; + color: var(--very-dark-cyan); + border-radius: 20px; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + cursor: pointer; + font-size: 1em; + max-width: 100%; + height: auto; +} + +.first-section__left .get-started { + background-color: var(--pink); + padding: 12px 50px; + border: none; + color: var(--very-pale-cyan); + border-radius: 20px; + font-size: small; + cursor: pointer; +} + +.first-section__left .get-started:hover, +.ready button:hover { + background-color: var(--light-pink); +} + +@media screen and (max-width: 992px) { + header button { + padding: 0.5rem 2rem; + font-size: 0.9em; + } + + .first-section__left .get-started { + margin-bottom: 3rem; + } +} + +@media screen and (max-width: 480px) { + header button { + padding: 0.5rem 1rem; + font-size: 0.5em; + } +} + +.first-section { + display: flex; + align-items: center; + margin-top: 2%; + width: 100%; +} + +.second-section { + margin-top: 10%; +} + +.third-section, +.fourth-section { + margin-top: 5%; +} + +.second-section, +.third-section, +.fourth-section { + display: flex; + align-items: center; + width: 100%; + padding-bottom: 3rem; + padding-top: 3rem; + border-radius: 20px; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; +} + +.second-section, +.third-section { + margin-bottom: 2rem; +} + +.first-section__left { + width: 65%; + padding-left: 50px; +} + +@media screen and (max-width: 992px) { + .first-section { + flex-direction: column; + text-align: center; + margin-bottom: 1rem; + } + + .second-section { + margin-top: 5rem; + } + + .second-section, + .fourth-section { + flex-direction: column-reverse; + text-align: center; + } + + .third-section { + flex-direction: column; + text-align: center; + } + + .first-section__left { + width: 90%; + padding: 5px; + } + + .second-section, + .third-section, + .fourth-section { + padding-bottom: 0; + padding-top: 3rem; + } +} + +.first-section__right img { + width: 85%; +} + +.second-section__left, +.fourth-section__left { + width: 100%; + padding-left: 5em; + padding-right: 5em; +} + +.second-section__right img, +.fourth-section__right img { + width: 80%; +} + +.third-section__left img { + width: 100%; + padding-left: 5em; + padding-right: 5em; +} + +.third-section__right { + width: 100%; + padding-left: 5em; + padding-right: 5em; +} + +@media screen and (max-width: 992px) { + /* images */ + .second-section__right, + .third-section__left, + .fourth-section__right { + width: 90%; + } + + .second-section__left, + .third-section__right, + .fourth-section__left { + padding: 2em; + } +} + +main { + z-index: 10; + margin-left: 5rem; + margin-right: 5rem; +} + +@media screen and (max-width: 992px) { + main { + margin-left: 1.5rem; + margin-right: 1.5rem; + } +} + +.ready { + display: flex; + flex-direction: column; + align-items: center; + margin: auto; + margin-top: 15%; + background-color: white; + padding: 50px 50px; + width: 60%; + border-radius: 20px; + margin-bottom: -70px; + transition: all 0.3s ease-in-out; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; +} + +.ready button { + background-color: var(--pink); + padding: 1rem 5rem; + border: none; + color: var(--very-pale-cyan); + border-radius: 50px; + font-size: 1em; + cursor: pointer; +} + +@media screen and (max-width: 600px) { + .ready { + margin-top: 7em; + } + + .ready h2 { + font-size: 1rem; + } + + .ready button { + padding: 20px 20px; + font-size: small; + } +} + +@media screen and (max-width: 992px) { + .ready { + width: 95%; + padding: 25px 20px; + } + .ready button { + padding: 20px 60px; + } +} + +footer { + background-color: var(--very-dark-cyan); + width: 100%; + padding-top: 13rem; + padding-bottom: 5rem; + padding-left: 7rem; + padding-right: 7rem; + font-family: 'Open Sans', sans-serif; + color: var(--very-pale-cyan); + bottom: 0; +} + +.footer-contents { + display: flex; + justify-content: space-between; + width: 100%; +} + +@media screen and (max-width: 992px) { + footer { + padding-top: 10rem; + padding-bottom: 1.5rem; + padding-left: 3rem; + padding-right: 3rem; + } + .footer-contents { + flex-direction: column; + } +} + +footer .clovar-logo { + filter: brightness(0) invert(1); + padding-bottom: 2rem; + width: 250px; +} + +@media screen and (max-width: 600px) { + footer .clovar-logo { + width: 50%; + } +} + +.location, +.call, +.email { + display: flex; + margin-bottom: 1rem; +} + +.location img { + padding-top: 5px; + padding-right: 25px; +} + +.call img, +.email img { + padding-right: 25px; + padding-top: 3px; +} + +.details-list, +.social-media { + margin-top: 5rem; +} + +ul { + list-style: none; + padding: 0; +} + +li { + display: flex; + align-items: center; + margin-bottom: 1rem; +} + +li a { + text-decoration: none; + color: var(--very-pale-cyan); + transition: all 0.3s ease-in-out; +} + +li a:hover { + cursor: pointer; + text-decoration: underline; +} + +i { + width: 35px; + height: auto; + border: 1px solid var(--very-pale-cyan); + border-radius: 50%; + padding: 10px; + margin-right: 10px; + transition: all 0.3s ease-in-out; +} + +i:hover { + cursor: pointer; + border: 1px solid var(--pink); + color: var(--pink); + transform: scale(1.05); +} + +.copyright { + margin-top: 2rem; + text-align: right; + font-size: 10px; +} + +@media screen and (max-width: 992px) { + .details-list, + .social-media { + margin-top: 1rem; + } + + .social-media, + .copyright { + text-align: center; + } +} diff --git a/static/assets/images/huddle-template.png b/static/assets/images/huddle-template.png new file mode 100644 index 0000000..85fc5fa Binary files /dev/null and b/static/assets/images/huddle-template.png differ diff --git a/static/assets/images/icon-email.svg b/static/assets/images/icon-email.svg new file mode 100644 index 0000000..7c6a74c --- /dev/null +++ b/static/assets/images/icon-email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/images/icon-location.svg b/static/assets/images/icon-location.svg new file mode 100644 index 0000000..f2fb9f7 --- /dev/null +++ b/static/assets/images/icon-location.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/images/icon-phone.svg b/static/assets/images/icon-phone.svg new file mode 100644 index 0000000..1e91bf7 --- /dev/null +++ b/static/assets/images/icon-phone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/images/illustration-flowing-conversation.svg b/static/assets/images/illustration-flowing-conversation.svg new file mode 100644 index 0000000..646cb63 --- /dev/null +++ b/static/assets/images/illustration-flowing-conversation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/images/illustration-grow-together.svg b/static/assets/images/illustration-grow-together.svg new file mode 100644 index 0000000..cd06efc --- /dev/null +++ b/static/assets/images/illustration-grow-together.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/images/illustration-mockups.svg b/static/assets/images/illustration-mockups.svg new file mode 100644 index 0000000..341b179 --- /dev/null +++ b/static/assets/images/illustration-mockups.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/images/illustration-your-users.svg b/static/assets/images/illustration-your-users.svg new file mode 100644 index 0000000..4bb8a05 --- /dev/null +++ b/static/assets/images/illustration-your-users.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/first_template/index.html b/templates/first_template/index.html new file mode 100644 index 0000000..5495043 --- /dev/null +++ b/templates/first_template/index.html @@ -0,0 +1,153 @@ +{%load static%} + + + + + + + Template | Clovar + + + + + + +
+
+ clovar-logo + +
+ +
+
+

+ Build The Community Your Fans Will Love +

+

+ Clovar re-imagines the way we build communities. You have a voice, + but so does your audience. Create connections with your users as you + engage in genuine discussion. +

+ +
+
+ illustration-mockups +
+
+
+ +
+
+
+

Grow Together

+

+ Generate meaningful discussions with your audience and build a + strong, loyal community. Think of the insightful conversations you + miss out on with a feedback forum. +

+
+
+ illustration-grow-together +
+
+ +
+
+ illustration-engage-community +
+
+

Flowing Conversations

+

+ You wouldn't paginate a conversation in real life, so why do it + online? Our threads just-in-time loading for a more natural flow. +

+
+
+ +
+
+

Your Users

+

+ It takes no time at all to integrate Clovar with your app's + authentication solution. This means, once signed in to your app, + your users can start chatting immediately. +

+
+
+ illustration-get-started +
+
+ +
+

Ready To Build Your Community?

+ +
+
+ + + + \ No newline at end of file diff --git a/templates/select_template.html b/templates/select_template.html index c2c37db..a41fb98 100644 --- a/templates/select_template.html +++ b/templates/select_template.html @@ -235,9 +235,12 @@

Pick a template to start!