feat: bootstrap settings, css and favicons

dashboard/settings.py

@@ -41,8 +41,7 @@ INSTALLED_APPS = [
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
-    "oauth",
-    "oauth.integrations",
+    "accounts",
 ]
 
 MIDDLEWARE = [
@@ -122,6 +121,10 @@ USE_TZ = True
 
 STATIC_URL = "static/"
 
+STATICFILES_DIRS = [
+    BASE_DIR / "static",
+]
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
 
@@ -130,4 +133,7 @@ DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 
 ### Dashbaord specific configuration options
 
-RESTRICT_NEW_INTEGRATION_INSTALLATION = True
+HOSTEA = {
+    "RESTRICT_NEW_INTEGRATION_INSTALLATION": True,
+    "INSTANCE_MAINTAINER_CONTACT": "contact@hostea.example.org",
+}

static/css/main.css

@@ -0,0 +1,446 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  /*
+  font-family: Georgia, "Times New Roman", Times, serif;
+  */
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: #333;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #333;
+}
+
+/*
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+*/
+body {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+a:hover {
+  color: rgb(0, 86, 179);
+  text-decoration: underline;
+}
+
+a {
+  text-decoration: none;
+}
+
+a,
+a:visited {
+  color: rgb(0, 86, 179);
+}
+
+main {
+  flex: 4;
+  width: 100%;
+  margin: auto;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+header {
+  z-index: 5;
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+}
+
+/* nav  starts */
+
+.nav__container {
+  display: flex;
+  flex-direction: row;
+
+  box-sizing: border-box;
+  width: 100%;
+  padding-top: 5px;
+  border-bottom: 1px solid rgb(211, 211, 211);
+}
+
+.nav__home-btn {
+  font-weight: bold;
+  margin: auto;
+  margin-left: -10px;
+}
+
+.nav__hamburger-menu {
+  display: none;
+}
+
+.nav__spacer {
+  flex: 3;
+  margin: auto;
+}
+
+.nav__logo-container {
+  display: inline-flex;
+  text-decoration: none;
+}
+
+.nav__logo-container:hover {
+  color: rgb(0, 86, 179);
+  text-decoration: underline;
+}
+
+.nav__toggle {
+  display: none;
+}
+
+.nav__logo {
+  display: inline-flex;
+  margin: auto;
+  padding: 5px;
+  width: 40px;
+}
+
+.nav__link-group {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: center;
+  margin: auto;
+  text-align: center;
+}
+
+.nav__link-container {
+  display: flex;
+  padding: 10px;
+  height: 100%;
+  margin: auto;
+}
+
+.nav__link {
+  text-decoration: none;
+  color: black !important;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.nav__link:hover {
+  color: rgb(0, 86, 179);
+  text-decoration: underline;
+}
+
+/* nav  ends  */
+
+.auth__main {
+  flex-direction: row;
+}
+
+.main {
+  min-height: 80vh;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 2;
+  align-items: center;
+}
+
+.welcome {
+  max-width: 800px;
+}
+
+.index-banner__features-list {
+  margin: 20px;
+}
+
+.index-banner__features {
+  margin: 10px 0;
+}
+
+.login {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  width: 80%;
+  margin: auto;
+  padding: 0 10px;
+}
+
+.form__label {
+  margin: 5px 0;
+}
+
+.form__input {
+  display: block;
+  width: 100%;
+  margin: 10px 0;
+  padding: 5px 0;
+  height: 25px;
+}
+
+.form__submit {
+  width: 100%;
+  display: block;
+  margin: 10px 0;
+  color: #fff;
+  border: none;
+  font-weight: 400;
+  padding: 15px;
+  cursor: pointer;
+  background-color: rgb(0, 128, 0);
+}
+
+.form__submit:hover {
+  background-color: #329932;
+}
+
+footer {
+  display: block;
+  font-size: 0.7rem;
+  margin-bottom: 5px;
+}
+
+.footer__container {
+  width: 90%;
+  justify-content: space-between;
+  margin: auto;
+  display: flex;
+  flex-direction: row;
+}
+
+.footer__column {
+  list-style: none;
+  display: flex;
+  margin: auto 50px;
+}
+
+.footer__link-container {
+  margin: 5px;
+}
+.license__conatiner {
+  display: flex;
+}
+
+.footer__link {
+  text-decoration: none;
+  padding: 0 10px;
+}
+
+.footer__column-divider,
+.footer__column-divider--mobile-visible {
+  font-weight: 500;
+  opacity: 0.7;
+  margin: 0 5px;
+}
+
+.footer__icon {
+  margin: auto 5px;
+  height: 20px;
+}
+
+.error_container {
+  text-align: center;
+  color: #c00;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.gist__new {
+  width: 80%;
+}
+
+.gist__file-content {
+  display: block;
+  width: 100%;
+  margin: 10px 0;
+  padding: 5px 0;
+  height: 320px;
+}
+
+.gist__button-group {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.gist__button-container {
+  flex: 1;
+  max-width: 200px;
+}
+
+.form__submit--secondary {
+  width: 100%;
+  display: block;
+  margin: 10px 0;
+  border: none;
+  padding: 5px 0;
+  cursor: pointer;
+  background-color: #e9e9ed;
+}
+
+.auth__demo-user__banner {
+  margin: auto;
+  margin-top: 5px;
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.auth__demo-user__cred {
+  font-family: monospace, monospace;
+}
+
+.gist__container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  height: auto;
+}
+
+pre {
+  font-size: 13px;
+  font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace;
+  box-sizing: border-box;
+}
+
+.line {
+  display: block;
+  padding: 0px;
+  cursor: pointer;
+}
+
+.line-number {
+  color: #24292f;
+  margin: 0;
+  margin-right: 20px;
+  min-width: 35px;
+  padding: 0;
+  width: 1%;
+  padding-right: 10px;
+  padding-left: 10px;
+  display: inline-block;
+  text-align: right;
+}
+
+details,
+summary {
+  display: "inline";
+  margin: 0;
+  padding: 0;
+}
+
+summary::marker {
+  content: "";
+  margin: 0;
+  padding: 0 5px;
+}
+
+.line-link {
+  display: block;
+}
+
+pre {
+  box-sizing: border-box;
+}
+
+/* footer  starts */
+
+footer {
+  display: block;
+  color: #333;
+  font-size: 0.7rem;
+  padding: 0;
+  margin: 0;
+}
+
+.footer__container {
+  width: 100%;
+  padding: 0;
+  justify-content: space-between;
+  margin: auto;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.footer__column--center {
+  list-style: none;
+  display: flex;
+  margin: auto 50px;
+  align-items: center;
+  flex: 2.5;
+
+  margin: auto;
+  flex-direction: column;
+  align-items: center;
+  flex: 2;
+}
+
+.footer__column:last-child {
+  justify-content: flex-end;
+}
+
+.footer__column:last-child > a {
+  margin: 10px;
+}
+
+.footer__link-container {
+  margin: 5px;
+}
+
+.footer__link {
+  text-decoration: none;
+}
+
+.license__link {
+  display: inline;
+}
+
+.license__link:hover {
+  color: rgb(0, 86, 179);
+  text-decoration: underline;
+}
+
+.footer__column-divider,
+.footer__column-divider--mobile-visible,
+.footer__column-divider--mobile-only {
+  font-weight: 500;
+  opacity: 0.7;
+  margin: auto;
+}
+
+.footer__column-divider--mobile-only {
+  display: none;
+}
+
+.footer__icon {
+  margin: auto 5px;
+  height: 20px;
+}
+
+/* footer  ends */

static/img/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

static/img/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}