Merge pull request #1 from markmacw/1-static-pages

completing 1 -> static pages

server/djangoapp/urls.py

@@ -1,11 +1,17 @@
 # Uncomment the imports before you add the code
-# from django.urls import path
+from django.urls import path
 from django.conf.urls.static import static
 from django.conf import settings
 # from . import views
+from django.views.generic import TemplateView
 
 app_name = 'djangoapp'
 urlpatterns = [
+
+
+    # path for dealer view
+    # path for dealer details view
+
     # # path for registration
 
     # path for login

server/djangoproj/settings.py

@@ -28,6 +28,12 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
+
+# IF YOU HOST IT DO IT LIKE THIS...
+# ALLOWED_HOSTS=['localhost','<your application URL here>']
+# like -- https://blah-blah-blah.cognitiveclass.ai
+# CSRF_TRUSTED_ORIGINS=['<your application URL here>']
+
 ALLOWED_HOSTS = []
 CSRF_TRUSTED_ORIGINS = []
 
@@ -58,10 +64,15 @@
 
 ROOT_URLCONF = 'djangoproj.urls'
 
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR,'frontend/static')
+]
+
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [os.path.join(BASE_DIR,'templates')],
+
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -134,5 +145,6 @@
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
-STATICFILES_DIRS = []
-
+# This is a Django setting that specifies additional 
+# directories where Django will look for static files
+# in addition to the default static directory in each app.

server/djangoproj/urls.py

@@ -23,4 +23,6 @@
     path('admin/', admin.site.urls),
     path('djangoapp/', include('djangoapp.urls')),
     path('', TemplateView.as_view(template_name="Home.html")),
+    path('about/', TemplateView.as_view(template_name="About.html")),
+    path('contact/', TemplateView.as_view(template_name="Contact.html"))
 ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

server/frontend/static/style.css

@@ -1,81 +1,81 @@
-img{
+img {
   width: 60%;
   align-self: center;
 }
 
-.card{
+.card {
   border: rgb(103, 102, 105) 3px solid;
-  display: flex;  
+  display: flex;
   flex-direction: column;
-  margin-left:5%;
-  margin-right:5%;
+  margin-left: 5%;
+  margin-right: 5%;
   margin-top: 1%;
   margin-bottom: 1%;
 }
 
-.row{
-  display: flex;  
+.row {
+  display: flex;
   flex: 1;
   flex-direction: row;
   margin: auto;
   margin-top: 1%;
   justify-content: center;
-  padding:20px;
+  padding: 20px;
 }
 
-.container{
+.container {
   justify-content: center;
 }
-.details{
+.details {
   font-size: 20px;
   color: rgb(97, 64, 128);
-  padding:20px;
+  padding: 20px;
 }
 
-.title{
+.title {
   font-size: 20px;
   background-color: rgb(97, 64, 128);
   color: white;
   text-align: center;
-  margin:20px;
-  padding:5px;
+  margin: 20px;
+  padding: 5px;
 }
 
-.homepage_links{
-  color:  rgb(97, 64, 128);
+.homepage_links {
+  color: rgb(97, 64, 128);
   padding: 25%;
   font-size: larger;
-  }
+}
 
-.loginlink{
+.loginlink {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
 }
 
-.banner{
+.banner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex:1
+  flex: 1;
 }
 
 .form_panel {
-  padding:2%;
+  padding: 2%;
   display: flex;
   flex-direction: column;
   border-radius: 50px;
-  text-align:center;
+  text-align: center;
   box-shadow: 2px 2px 2px 3px #999;
   margin: auto;
   min-width: 350px;
   width: 80%;
-  margin-top:3%;
+  margin-top: 3%;
   background-color: black;
 }
 
-.navitems{
+.navitems {
   display: flex;
   flex-direction: row;
   padding: 20px;
@@ -84,18 +84,18 @@ img{
   justify-self: center;
 }
 
-.nav_item{
-  margin-left:15px;
+.nav_item {
+  margin-left: 15px;
   font-size: 20px;
   color: black;
   align-self: center;
 }
 
-.username{
+.username {
   font: 30px sans-serif;
-  color:black;
-  justify-content: 'flex-end';
-  align-self:flex-end;
+  color: black;
+  justify-content: "flex-end";
+  align-self: flex-end;
   vertical-align: middle;
 }
 
@@ -104,23 +104,39 @@ img{
   flex-direction: row;
   padding: 20px;
   flex: 1;
-  justify-content:flex-end;
+  justify-content: flex-end;
   align-items: flex-end;
   vertical-align: middle;
 }
 
-.small_header{
+.small_header {
   font: 30px sans-serif;
-  color:black;
-  margin: .5cm;
+  color: black;
+  margin: 0.5cm;
 }
 
 .img_icon {
   align-self: center;
-    width:40px;
-    background-color:#0C9;
-    color:#FFF;
-    border-radius:50px;
-    text-align:center;
-    box-shadow: 2px 2px 3px #999;  
+  width: 40px;
+  background-color: #0c9;
+  color: #fff;
+  border-radius: 50px;
+  text-align: center;
+  box-shadow: 2px 2px 3px #999;
+}
+
+.side-by-side {
+  display: flex;
+  flex-direction: row;
+  margin: auto;
+}
+
+.left-div {
+  flex: 0 0 auto; /* Prevents the div from shrinking or growing */
+  margin-right: 20px;
+}
+
+.right-div {
+  flex: 1; /* Allows the div to take up the remaining space */
+  margin-top: 20px;
 }

server/frontend/static/About.html → server/templates/About.html

@@ -1,6 +1,8 @@
+{% load static %}
 <html>
 <head>
-  <!-- Link the style sheet here -->
+    <link rel="stylesheet" href="{% static 'style.css' %}" />
+    <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}" />
 </head>
 <div>
   <nav class="navbar navbar-expand-lg navbar-light" style="background-color:darkturquoise; height: 1in;">
@@ -27,36 +29,38 @@ <h2 style="padding-right: 5%;">Dealerships</h2>
 
     <div class="card" style="width: 80%;margin: auto; margin-top:5%;">
       <div class="banner" name="about-header">
-      <!-- Insert header information here -->
+        <h1>About Us</h1>
+        <p>  Welcome to Best Cars dealership, home to the best cars in North America. We deal in sale of domestic and imported cars at reasonable prices. Come have a look at our collection and find the car of your dreams.
+        </p>
       </div>
       <div style="display: flex;flex-direction: row; margin:auto">
       <div class="card" style="width: 30%;">
-        <img class="card-img-top" src="/static/person.png" alt="Card image">
+        <img class="card-img-top" src="/static/person1.jpeg" alt="Card image">
         <div class="card-body">
-          <p class="title">Person1</p>
-          <p>Person1 Title</p>
-          <p class="card-text">Some text that explains the person1 in about 2 short sentences</p>
-          <p>person1@example.com</p>
+          <p class="title">Aaron Pearson</p>
+          <p>Sales Manager</p>
+          <p class="card-text">Working at Best Cars for over two decades</p>
+          <p>a.pearson@example.com</p>
         </div>
       </div>
 
       <div class="card" style="width: 30%;">
-        <img class="card-img-top" src="/static/person.png" alt="Card image">
+        <img class="card-img-top" src="/static/person2.jpeg" alt="Card image">
         <div class="card-body">
-          <p class="title">Person2</p>
-          <p>Person2 Title</p>
-          <p class="card-text">Some text that explains the person2 in about 2 short sentences</p>
-          <p>person2@example.com</p>
+          <p class="title">Otto Moe Biel</p>
+          <p>Salesman</p>
+          <p class="card-text">2023 Customer Service Representative of the Year</p>
+          <p>o.biel@example.com</p>
         </div>
       </div>
 
       <div class="card" style="width: 30%;">
-        <img class="card-img-top" src="/static/person.png" alt="Card image">
+        <img class="card-img-top" src="/static/person3.jpeg" alt="Card image">
         <div class="card-body">
-          <p class="title">Person3</p>
-          <p>Person3 Title</p>
-          <p class="card-text">Some text that explains the person3 in about 2 short sentences</p>
-          <p>person3@example.com</p>
+          <p class="title">Carson Mai</p>
+          <p>Salesman</p>
+          <p class="card-text">2023 Top Salesman of the Year</p>
+          <p>c.mai@example.com</p>
         </div>
       </div>
     </div>