adding frontpage

albrai · Oct 8, 2020 · 36f0dac · 36f0dac
1 parent 22b2e1c
commit 36f0dac
Show file tree

Hide file tree

Showing 10 changed files with 298 additions and 2 deletions.
diff --git a/frontpage/__init__.py b/frontpage/__init__.py
diff --git a/frontpage/admin.py b/frontpage/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/frontpage/apps.py b/frontpage/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class FrontpageConfig(AppConfig):
+    name = 'frontpage'
diff --git a/frontpage/migrations/__init__.py b/frontpage/migrations/__init__.py
diff --git a/frontpage/models.py b/frontpage/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/frontpage/tests.py b/frontpage/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/frontpage/urls.py b/frontpage/urls.py
@@ -0,0 +1,9 @@
+from django.urls import path
+
+from . import views
+
+
+app_name = "frontpage"
+urlpatterns = [
+    path("", views.index, name="frontpage"),
+]
diff --git a/frontpage/views.py b/frontpage/views.py
@@ -0,0 +1,5 @@
+from django.shortcuts import render
+
+# Create your views here.
+def index(request):
+    return render(request, "index.html", context={})
diff --git a/mysite/urls.py b/mysite/urls.py
@@ -17,6 +17,7 @@
 from django.urls import include, path
 
 urlpatterns = [
-    path('polls/', include('polls.urls')),
-    path('admin/', admin.site.urls),
+    path("polls/", include("polls.urls")),
+    path("admin/", admin.site.urls),
+    path("", include("frontpage.urls")),
 ]
diff --git a/templates/index.html b/templates/index.html
@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Your New Django App</title>
+
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Almarai:wght@800&amp;family=Nunito+Sans&amp;display=swap" />
+</head>
+
+<body>
+  <div class="container">
+    <div class="content">
+      <img src="https://assets.codepen.io/43365/logo.svg" alt="DigitalOcean Logo" width="100" />
+      <h1>Welcome to your new <a href="https://www.djangoproject.com/">Django App</a>!</h1>
+
+      <p>
+        This application is an example of how to deploy a Django Application, specifically the <a
+          href="https://docs.djangoproject.com/en/3.1/intro/tutorial01/">Django Polls App</a> to DigitalOcean's App
+        Platform. Check out their <a href="https://docs.djangoproject.com/en/3.1/intro/tutorial01/">documentation</a> to
+        learn about the app.
+      </p>
+
+      <p>
+        To finish setup, perform the following tasks:
+      <ol>
+        <li>Navigate to the Console tab in your app dashboard</li>
+        <li>In the console, run the command <em>python manage.py migrate</em> to perform the inital database migrations
+        </li>
+        <li>In the console, run the command <em>python manage.py createsuperuser</em> and follow the prompt to create
+          your super user</li>
+      </ol>
+      </p>
+    </div>
+
+    <div class="links">
+      <a href="#" target="_blank" rel="noopener noreferrer"><strong>Django on App Platform Tutorial</strong>
+        <span>Learn how to deploy your Django App to DigitalOcean</span>
+      </a>
+      <a href="https://www.digitalocean.com/docs/app-platform/languages-frameworks/python/" target="_blank"
+        rel="noopener noreferrer"><strong>DigitalOcean App Platform Docs for Django</strong>
+        <span>DigitalOcean's reference documentation for Django</span>
+      </a>
+      <a href="https://www.digitalocean.com/docs/app-platform/" target="_blank" rel="noopener noreferrer"><strong>App
+          Platform Documentation</strong><span>Learn about DigitalOcean's App Platform</span></a>
+      <a href="https://www.digitalocean.com/docs/droplets/how-to/" target="_blank" rel="noopener noreferrer"><strong>App
+          Platform API Documentation</strong>
+        <span>REST API Documentation for App Platform</span>
+      </a>
+    </div>
+  </div>
+
+  <div id="stripes">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+  </div>
+
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      padding: 50px;
+      min-height: 100vh;
+      position: relative;
+      color: #fff;
+      font-family: "Nunito Sans", sans-serif;
+      font-size: 19px;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-family: "Almarai", sans-serif;
+    }
+
+    :root {
+      --background: linear-gradient(150deg,
+          #17acff 15%,
+          #016aff 70%,
+          #68a6ff 94%);
+      --first: #53f;
+      --second: #4553ff;
+      --third: #4f40ff;
+      --fourth: #25ddf5;
+      --fifth: #1fa2ff;
+    }
+
+    #stripes {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100vw;
+      display: grid;
+      background: var(--background);
+      grid-template-columns: repeat(6, 1fr);
+      grid-template-rows: repeat(4, 1fr);
+      transform: skewY(-12deg);
+      transform-origin: 0;
+    }
+
+    #stripes span {
+      /* border: 1px solid #c00c00; */
+    }
+
+    #stripes span:first-child {
+      grid-column: span 1;
+      background: var(--first);
+    }
+
+    #stripes span:nth-child(2) {
+      grid-column: span 2;
+      background: var(--second);
+    }
+
+    #stripes span:nth-child(3) {
+      grid-column: span 2;
+      background: var(--third);
+    }
+
+    #stripes span:nth-child(4) {
+      grid-column: 6;
+      grid-row: 3;
+      background: var(--fourth);
+    }
+
+    #stripes span:nth-child(5) {
+      grid-column: span 2;
+      grid-row: 4;
+      background: var(--fifth);
+    }
+
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 50px 0;
+    }
+
+    .content {
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 2.5rem;
+    }
+
+    h1 a {
+      color: #dbf1f5;
+    }
+
+    h1 a:hover {
+      color: #7decff;
+    }
+
+    p {
+      margin-bottom: 50px;
+    }
+
+    li {
+      text-align: left
+    }
+
+    code {
+      display: inline-block;
+      padding: 3px 6px;
+      margin-left: 3px;
+      margin-right: 3px;
+      border-radius: 5px;
+      font-size: 0.8rem;
+      background: #1a2279;
+      color: #dbf1f5;
+    }
+
+    .links {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+    }
+
+    .links a {
+      position: relative;
+      display: block;
+      background: rgba(255, 255, 255, 0.85);
+      border-radius: 5px;
+      padding: 20px;
+      font-size: 1.1rem;
+      text-decoration: none;
+      color: #222;
+      transition: 0.3s ease all;
+      overflow: hidden;
+    }
+
+    .links a:before,
+    .links a:after {
+      font-size: 40px;
+      display: block;
+      position: absolute;
+    }
+
+    .links a:before {
+      content: "";
+      top: -80%;
+      right: -150px;
+      width: 250px;
+      height: 250px;
+      background: rgba(125, 236, 255, 0.6);
+      pointer-events: none;
+      transform: rotate(-25deg);
+      transition: 0.4s cubic-bezier(0.34, 0.31, 0, 1.81) transform;
+    }
+
+    .links a:after {
+      content: "👉";
+      top: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      right: 30px;
+      transform: translateX(80px);
+      transition: 0.3s cubic-bezier(0.34, 0.31, 0, 1.81) transform;
+    }
+
+    .links a:hover {
+      background: rgba(255, 255, 255, 0.9);
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
+    }
+
+    .links a:hover:before {
+      transform: rotate(-25deg) translateX(60px);
+    }
+
+    .links a:hover:after {
+      transform: none;
+    }
+
+    .links a strong,
+    .links a span {
+      position: relative;
+      z-index: 1;
+    }
+
+    .links a strong {
+      font-weight: bold;
+      display: block;
+      margin-bottom: 5px;
+    }
+
+    .links a span {
+      color: #787878;
+      font-size: 0.9rem;
+    }
+  </style>
+</body>
+
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		from django.contrib import admin

		# Register your models here.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		from django.db import models

		# Create your models here.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		from django.test import TestCase

		# Create your tests here.