commit 638f0a9aee14d1664094edb9d3011904a32f7546 Author: kicap1992 Date: Tue Mar 15 05:13:36 2022 +0800 first commit diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..19eb0b1 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,19 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Python: Django", + "type": "python", + "request": "launch", + "program": "${workspaceFolder}\\manage.py", + "args": [ + "runserver", + "9000" + ], + "django": true + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..44aef9f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "python.formatting.provider": "black" +} \ No newline at end of file diff --git a/bacaan/__init__.py b/bacaan/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/bacaan/__pycache__/__init__.cpython-39.pyc b/bacaan/__pycache__/__init__.cpython-39.pyc new file mode 100644 index 0000000..9a89dd2 Binary files /dev/null and b/bacaan/__pycache__/__init__.cpython-39.pyc differ diff --git a/bacaan/__pycache__/settings.cpython-39.pyc b/bacaan/__pycache__/settings.cpython-39.pyc new file mode 100644 index 0000000..e657de2 Binary files /dev/null and b/bacaan/__pycache__/settings.cpython-39.pyc differ diff --git a/bacaan/__pycache__/urls.cpython-39.pyc b/bacaan/__pycache__/urls.cpython-39.pyc new file mode 100644 index 0000000..e4e9cca Binary files /dev/null and b/bacaan/__pycache__/urls.cpython-39.pyc differ diff --git a/bacaan/__pycache__/wsgi.cpython-39.pyc b/bacaan/__pycache__/wsgi.cpython-39.pyc new file mode 100644 index 0000000..0b3d26a Binary files /dev/null and b/bacaan/__pycache__/wsgi.cpython-39.pyc differ diff --git a/bacaan/asgi.py b/bacaan/asgi.py new file mode 100644 index 0000000..938010b --- /dev/null +++ b/bacaan/asgi.py @@ -0,0 +1,16 @@ +""" +ASGI config for bacaan project. + +It exposes the ASGI callable as a module-level variable named ``application``. + +For more information on this file, see +https://docs.djangoproject.com/en/4.0/howto/deployment/asgi/ +""" + +import os + +from django.core.asgi import get_asgi_application + +os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'bacaan.settings') + +application = get_asgi_application() diff --git a/bacaan/settings.py b/bacaan/settings.py new file mode 100644 index 0000000..612d7b7 --- /dev/null +++ b/bacaan/settings.py @@ -0,0 +1,179 @@ +""" +Django settings for bacaan project. + +Generated by 'django-admin startproject' using Django 4.0.3. + +For more information on this file, see +https://docs.djangoproject.com/en/4.0/topics/settings/ + +For the full list of settings and their values, see +https://docs.djangoproject.com/en/4.0/ref/settings/ +""" + +from pathlib import Path + +# Build paths inside the project like this: BASE_DIR / 'subdir'. +BASE_DIR = Path(__file__).resolve().parent.parent + + +# Quick-start development settings - unsuitable for production +# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/ + +# SECURITY WARNING: keep the secret key used in production secret! +SECRET_KEY = "django-insecure-p0-6#1!f_66i_#hfq-(vq(=2=x88yhuz_(v7ge-ss&8*k-wyyt" + +# SECURITY WARNING: don't run with debug turned on in production! +DEBUG = True + +ALLOWED_HOSTS = ["192.168.43.125", "127.0.0.1"] + + +# Application definition + +INSTALLED_APPS = [ + "django.contrib.admin", + "django.contrib.auth", + "django.contrib.contenttypes", + "django.contrib.sessions", + "django.contrib.messages", + "django.contrib.staticfiles", + "base.apps.BaseConfig", + "corsheaders", + + "django_extensions", +] + +MIDDLEWARE = [ + "django.middleware.security.SecurityMiddleware", + "django.contrib.sessions.middleware.SessionMiddleware", + "django.middleware.common.CommonMiddleware", + "django.middleware.csrf.CsrfViewMiddleware", + "django.contrib.auth.middleware.AuthenticationMiddleware", + "django.contrib.messages.middleware.MessageMiddleware", + "django.middleware.clickjacking.XFrameOptionsMiddleware", + "corsheaders.middleware.CorsMiddleware", + "django.middleware.common.CommonMiddleware", +] + +ROOT_URLCONF = "bacaan.urls" + +TEMPLATES = [ + { + "BACKEND": "django.template.backends.django.DjangoTemplates", + "DIRS": [ + BASE_DIR / "templates", + ], + "APP_DIRS": True, + "OPTIONS": { + "context_processors": [ + "django.template.context_processors.debug", + "django.template.context_processors.request", + "django.contrib.auth.context_processors.auth", + "django.contrib.messages.context_processors.messages", + ], + }, + }, +] + +WSGI_APPLICATION = "bacaan.wsgi.application" + + +# Database +# https://docs.djangoproject.com/en/4.0/ref/settings/#databases + +DATABASES = { + "default": { + "ENGINE": "django.db.backends.sqlite3", + "NAME": BASE_DIR / "db.sqlite3", + } +} + + +# Password validation +# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators + +AUTH_PASSWORD_VALIDATORS = [ + { + "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator", + }, + { + "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator", + }, + { + "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator", + }, + { + "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator", + }, +] + + +# Internationalization +# https://docs.djangoproject.com/en/4.0/topics/i18n/ + +LANGUAGE_CODE = "en-us" + +TIME_ZONE = "UTC" + +USE_I18N = True + +USE_TZ = True + + +# Static files (CSS, JavaScript, Images) +# https://docs.djangoproject.com/en/4.0/howto/static-files/ + +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 + +DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField" + +CORS_ALLOWED_ORIGINS = [ + "https://domain.com", + "https://api.domain.com", + "http://localhost:9000", + "http://127.0.0.1:9000", + "http://192.168.43.125:8000", +] +CORS_ORIGIN_WHITELIST = [ + "https://domain.com", + "https://api.domain.com", + "http://localhost:9000", + "http://127.0.0.1:9000", + "http://192.168.43.125:8000", +] + +CORS_ALLOWED_ORIGIN_REGEXES = [ + r"^https://\w+\.domain\.com$", +] + +CORS_ALLOW_METHODS = [ + "DELETE", + "GET", + "OPTIONS", + "PATCH", + "POST", + "PUT", +] + +CORS_ALLOW_HEADERS = [ + "accept", + "accept-encoding", + "authorization", + "content-type", + "dnt", + "origin", + "user-agent", + "x-csrftoken", + "x-requested-with", +] + +CORS_ORIGIN_ALLOW_ALL = True + +DEVELOPMENT = True \ No newline at end of file diff --git a/bacaan/urls.py b/bacaan/urls.py new file mode 100644 index 0000000..d08cbb5 --- /dev/null +++ b/bacaan/urls.py @@ -0,0 +1,22 @@ +"""bacaan URL Configuration + +The `urlpatterns` list routes URLs to views. For more information please see: + https://docs.djangoproject.com/en/4.0/topics/http/urls/ +Examples: +Function views + 1. Add an import: from my_app import views + 2. Add a URL to urlpatterns: path('', views.home, name='home') +Class-based views + 1. Add an import: from other_app.views import Home + 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') +Including another URLconf + 1. Import the include() function: from django.urls import include, path + 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) +""" +from django.contrib import admin +from django.urls import path , include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('base.urls')), +] diff --git a/bacaan/wsgi.py b/bacaan/wsgi.py new file mode 100644 index 0000000..bb3cef9 --- /dev/null +++ b/bacaan/wsgi.py @@ -0,0 +1,16 @@ +""" +WSGI config for bacaan project. + +It exposes the WSGI callable as a module-level variable named ``application``. + +For more information on this file, see +https://docs.djangoproject.com/en/4.0/howto/deployment/wsgi/ +""" + +import os + +from django.core.wsgi import get_wsgi_application + +os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'bacaan.settings') + +application = get_wsgi_application() diff --git a/base/__init__.py b/base/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/base/__pycache__/__init__.cpython-39.pyc b/base/__pycache__/__init__.cpython-39.pyc new file mode 100644 index 0000000..1a2b108 Binary files /dev/null and b/base/__pycache__/__init__.cpython-39.pyc differ diff --git a/base/__pycache__/admin.cpython-39.pyc b/base/__pycache__/admin.cpython-39.pyc new file mode 100644 index 0000000..5481ba7 Binary files /dev/null and b/base/__pycache__/admin.cpython-39.pyc differ diff --git a/base/__pycache__/apps.cpython-39.pyc b/base/__pycache__/apps.cpython-39.pyc new file mode 100644 index 0000000..6658ea2 Binary files /dev/null and b/base/__pycache__/apps.cpython-39.pyc differ diff --git a/base/__pycache__/models.cpython-39.pyc b/base/__pycache__/models.cpython-39.pyc new file mode 100644 index 0000000..42021d1 Binary files /dev/null and b/base/__pycache__/models.cpython-39.pyc differ diff --git a/base/__pycache__/urls.cpython-39.pyc b/base/__pycache__/urls.cpython-39.pyc new file mode 100644 index 0000000..a4013d7 Binary files /dev/null and b/base/__pycache__/urls.cpython-39.pyc differ diff --git a/base/__pycache__/views.cpython-39.pyc b/base/__pycache__/views.cpython-39.pyc new file mode 100644 index 0000000..83903c3 Binary files /dev/null and b/base/__pycache__/views.cpython-39.pyc differ diff --git a/base/admin.py b/base/admin.py new file mode 100644 index 0000000..a23d95a --- /dev/null +++ b/base/admin.py @@ -0,0 +1,11 @@ +from django.contrib import admin + +# Register your models here. + +from .models import tb_bacaan + +class Filter_Bacaan(admin.ModelAdmin): + list_display = ('judul_bacaan', 'kategori', 'image_url', 'audio_url') + list_per_page = 10 + +admin.site.register(tb_bacaan, Filter_Bacaan) diff --git a/base/apps.py b/base/apps.py new file mode 100644 index 0000000..05011e8 --- /dev/null +++ b/base/apps.py @@ -0,0 +1,6 @@ +from django.apps import AppConfig + + +class BaseConfig(AppConfig): + default_auto_field = 'django.db.models.BigAutoField' + name = 'base' diff --git a/base/migrations/0001_initial.py b/base/migrations/0001_initial.py new file mode 100644 index 0000000..d188dba --- /dev/null +++ b/base/migrations/0001_initial.py @@ -0,0 +1,24 @@ +# Generated by Django 4.0.3 on 2022-03-14 12:43 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + initial = True + + dependencies = [ + ] + + operations = [ + migrations.CreateModel( + name='tb_bacaan', + fields=[ + ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), + ('judul_bacaan', models.CharField(max_length=100)), + ('kategori', models.CharField(max_length=1)), + ('image_url', models.TextField(blank=True, null=True)), + ('audio_url', models.TextField(blank=True, null=True)), + ], + ), + ] diff --git a/base/migrations/__init__.py b/base/migrations/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/base/migrations/__pycache__/0001_initial.cpython-39.pyc b/base/migrations/__pycache__/0001_initial.cpython-39.pyc new file mode 100644 index 0000000..368a03c Binary files /dev/null and b/base/migrations/__pycache__/0001_initial.cpython-39.pyc differ diff --git a/base/migrations/__pycache__/__init__.cpython-39.pyc b/base/migrations/__pycache__/__init__.cpython-39.pyc new file mode 100644 index 0000000..a36a6c0 Binary files /dev/null and b/base/migrations/__pycache__/__init__.cpython-39.pyc differ diff --git a/base/models.py b/base/models.py new file mode 100644 index 0000000..16cfe61 --- /dev/null +++ b/base/models.py @@ -0,0 +1,12 @@ +from django.db import models + +# Create your models here. +class tb_bacaan(models.Model): + # id_bacaan = models.AutoField(primary_key=True) + judul_bacaan = models.CharField(max_length=100) + kategori = models.CharField(max_length=1) + image_url = models.TextField(null=True, blank=True) + audio_url = models.TextField(null=True, blank=True) + list_per_page = 10 + def __str__(self): + return self.judul_bacaan \ No newline at end of file diff --git a/base/templates/base/activity.html b/base/templates/base/activity.html new file mode 100644 index 0000000..fb82a26 --- /dev/null +++ b/base/templates/base/activity.html @@ -0,0 +1,83 @@ +{% load static %} +
+
+

Audio Bacaan

+
+ + {% for bacaan in bacaans %} +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + + + +

Dengarkan

+
+
+ {% endfor %} + + + + + +
\ No newline at end of file diff --git a/base/templates/base/bacaan.html b/base/templates/base/bacaan.html new file mode 100644 index 0000000..8fadc76 --- /dev/null +++ b/base/templates/base/bacaan.html @@ -0,0 +1,232 @@ +{% extends 'main.html' %} +{% block content %} +{% load static %} +
+
+
+
+
+ + + arrow-left + + + + +

Nilai Bacaan Anda

+
+
+
+ +
+ +

Dengar

+
+
   
+ + +
+ +
+ +
+
+
+
+ + +{% endblock %} \ No newline at end of file diff --git a/base/templates/base/home.html b/base/templates/base/home.html new file mode 100644 index 0000000..c7afd34 --- /dev/null +++ b/base/templates/base/home.html @@ -0,0 +1,145 @@ +{% extends 'main.html' %} +{% block content %} +{% load static %} +
+
+ + {% include 'base/topic.html' %} + + + +
+ + + + + + + + + + + + + + + + + +
+
+

Bacaan

+

{{bacaans.count}} Audio Tersedia

+
+ + + + + + + + + +
+ + {% for bacaan in bacaans %} +
+ + + + + + + + + + + +
+
+ + + + +
+
+
+ +

+ Dengarkan  

+ + + + + + + + + + + + + + + +
+

Rekam & Nilai

+
+
+ {% endfor %} + + + +
+ + + + {% include 'base/activity.html' %} + +
+
+{% endblock content %} \ No newline at end of file diff --git a/base/templates/base/topic.html b/base/templates/base/topic.html new file mode 100644 index 0000000..459d8cb --- /dev/null +++ b/base/templates/base/topic.html @@ -0,0 +1,42 @@ +{% load static %} +
+
+

Telusuri Bacaan

+
+ + + + + + + + +
\ No newline at end of file diff --git a/base/tests.py b/base/tests.py new file mode 100644 index 0000000..7ce503c --- /dev/null +++ b/base/tests.py @@ -0,0 +1,3 @@ +from django.test import TestCase + +# Create your tests here. diff --git a/base/urls.py b/base/urls.py new file mode 100644 index 0000000..e3a41e8 --- /dev/null +++ b/base/urls.py @@ -0,0 +1,7 @@ +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.home, name='home'), + path('bacaan/', views.bacaan, name='bacaan'), +] diff --git a/base/views.py b/base/views.py new file mode 100644 index 0000000..3767256 --- /dev/null +++ b/base/views.py @@ -0,0 +1,29 @@ +from django.shortcuts import render ,redirect +from django.http import HttpResponse +from django.db.models import Q +from .models import tb_bacaan + +# Create your views here. + +def home(request): + q = request.GET.get('q') if request.GET.get('q') else '' + bacaans = tb_bacaan.objects.filter(Q(kategori__icontains=q)) + context = {'bacaans':bacaans} + return render(request,'base/home.html',context) + +def bacaan(request,pk): + check = tb_bacaan.objects.filter(id=pk).exists() + if check == False: + return redirect('home') + + bacaannya = tb_bacaan.objects.get(id=pk) + print(bacaannya.id) + if(bacaannya.id != 1 and bacaannya.id != 2): + style = "width:30%; height: 30%;" + else: + style = '' + + + + context = {'bacaan':bacaannya, 'style': str(style)} + return render(request,'base/bacaan.html',context) diff --git a/cert.crt b/cert.crt new file mode 100644 index 0000000..a43e5c1 --- /dev/null +++ b/cert.crt @@ -0,0 +1,20 @@ +-----BEGIN CERTIFICATE----- +MIIDSDCCAjCgAwIBAgIUMogEnKaW0GKA5Y+xnAKVJ0kvAd0wDQYJKoZIhvcNAQEL +BQAwPzEaMBgGA1UECgwRRHVtbXkgQ2VydGlmaWNhdGUxITAfBgNVBAMMGCoubG9j +YWxob3N0L0NOPWxvY2FsaG9zdDAeFw0yMjAzMTQyMDE2MjZaFw0yMzAzMTQyMDE2 +MjZaMD8xGjAYBgNVBAoMEUR1bW15IENlcnRpZmljYXRlMSEwHwYDVQQDDBgqLmxv +Y2FsaG9zdC9DTj1sb2NhbGhvc3QwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK +AoIBAQDNQe7ua91GQNzG9DUqeAUzD8oG9d5e/aiHt3OMqZ/TlkCv5QMzbHQhAd7k +rWC77zCFS0L+Kr93vBXul1zN5xMvbRagdOuxwzhZFkxduO+nAFQHSywTJyTSNXKD +MLvQiaUmHXxROKRZaKvI27pT+KtTCas1CAX4QlWoM49n3bgc9QFl2NyDUmjIOI9i +foM4bqbc1z9EOpRANruvS27Yr3NJo/7IE24Z4h81VvJet60aFhjIB2D4qHCxvVrR +8RjbL/IM2RG40gdR5h/jHxwOhTHiVcpVeQVeo5gV4dBkHm0u7gxRSArDFI1y870g +hy2Pf2+aYXkDKXrI929KJM4qqRU/AgMBAAGjPDA6MBMGA1UdJQQMMAoGCCsGAQUF +BwMBMCMGA1UdEQQcMBqCGCoubG9jYWxob3N0L0NOPWxvY2FsaG9zdDANBgkqhkiG +9w0BAQsFAAOCAQEAxdh6mZsyrE20uIP6gFpx6VLHsfJLIyEIepR46mcpVBXMr2pb +De04y5WpVHWvHmSIDBbSXEhtz+GVVrEdkE4HnQDc5PL525tbL/OfB8wQ2vA37RGF +e2HfjHeJ6zB0G71AQYQBmxzQiBDNv1AzN2wNA0jolHK2Z9sjn+E4fSefqSoKAZEf +QX6TDzvx9Dhb1n2DXmbSvcaHfe/8VgAgjY/R2sFadOsEuD6dkNrnaoKB+mS0lq7o +ZlvIA9Taa2eg+IsoaDEJ7ZQ9SGodfgYlIjL9zDeHHoF/OiT0Des2wqXI1EC94wck +fzV5l6RMZbShDhBm2yLQuLk968AWjeYyAjuq8g== +-----END CERTIFICATE----- diff --git a/cert.key b/cert.key new file mode 100644 index 0000000..2ad8880 --- /dev/null +++ b/cert.key @@ -0,0 +1,27 @@ +-----BEGIN RSA PRIVATE KEY----- +MIIEogIBAAKCAQEAzUHu7mvdRkDcxvQ1KngFMw/KBvXeXv2oh7dzjKmf05ZAr+UD +M2x0IQHe5K1gu+8whUtC/iq/d7wV7pdczecTL20WoHTrscM4WRZMXbjvpwBUB0ss +Eyck0jVygzC70ImlJh18UTikWWiryNu6U/irUwmrNQgF+EJVqDOPZ924HPUBZdjc +g1JoyDiPYn6DOG6m3Nc/RDqUQDa7r0tu2K9zSaP+yBNuGeIfNVbyXretGhYYyAdg ++Khwsb1a0fEY2y/yDNkRuNIHUeYf4x8cDoUx4lXKVXkFXqOYFeHQZB5tLu4MUUgK +wxSNcvO9IIctj39vmmF5Ayl6yPdvSiTOKqkVPwIDAQABAoIBAEe2PnUcSG3QIZJ9 +JcoVrrNdU9dEtZF4jBYGmR9O8CErgKQznf+sZ5JUpfw9OuvOMKSRW/GTG9wIYZ0/ +UtQ5ZHGQanRbBTHRI/G0IbAo+cneCn2V3OtAJNQwijadozDDtmhvqsxxvrHiKQp/ +AkVuPuU/Horjp7pJ6sVeZj8Crt2mdti/4cbG2toY2f9YFodaQ2Sr274iMMVv0h+m +wJlQ8PUt/a0zo61/kVxAHO/N0qyXRDVMLRN23qoBbYOfd6v6oJJ1DYCFOHzDTpI2 +1UW+aIl6qvvEC3oxQZNh+hKTfQNDQtWevv2pJ++e8sZc/K1hepKCAs8/OI/3g8Bj +OUYrZ7kCgYEA/7uncKplcHWDRomHWo4yTHv7Xw88Xt3u9luzPFUDa+0tcQFfLlAE +BrY0QiqKSxVNJaY8+r6eqQJ/8+N0wtbC9I5IgIuEQkGAbkx6gPY0++RY2SVJ1ZXe +p1GDWGJW4ff7P/YlFw24xYNPVAY8nkebd0L+/JPTh5paiuAtXe7s9k0CgYEAzXjK +GKsRPmRPQA61jZYislYLZkXDtpQsHXrC3tmQ1a9SiCZ2KklyD2AX11NIvHm703lD +OQzheQ2uN/7JfUc51U+LMJItac8YHqBGrEi9WhKolH867GhrL53hKe1kIaD1ewIL +NX1ul1NlXtXkPxcTHmk+oGwMX4e+M72ejqPRV7sCgYBEBI5RahDW63qCDVxB2qZI +L4W5T90XwmGnhtZSSq5BS3EVqG6/a6rWeinGG3hy5fSB+ggoDQE4JKERpkLM+8AY +uatQ/UqtMKzPKWo/2LxY7vAuuTs9IsJ4sDaGEInZSlK6PWa6Df1CE13LFGmVE6im +/NvDJDJT09sXKu8GF+FQ1QKBgAdK4DFb8PK78KwfWYY66+RUdXcdxsJ2I9KwBraO +FjvfSxiV9N+vV6MAEBiOViiKUYZB6Ybe1CnNuH84RcJygrT1a8U/iukUdpCvs5Jt +ynql6uHKWjcFxbgc7F7mlAU1h0DkY610VDZ+uTxSbxVmJkGQDq725sGFOdTwR+5c +FhP9AoGAVV4qlkdaQ3TxuJUPrkWZTwzs87Yg5fAAERFQiviHEUwty2G/kJpcbM3+ +k1N3Z0UKIeGd1Gr+szby6KdKZRF4nyUUe9shVNymDnp0W9X0WYFgNwnAjZmot1x1 +b0Zqg4+FtaRt7yrSMzUZu/oh9dhMTEtTZiiUSk1K+SOXpOTL+tA= +-----END RSA PRIVATE KEY----- diff --git a/db.sqlite3 b/db.sqlite3 new file mode 100644 index 0000000..a405194 Binary files /dev/null and b/db.sqlite3 differ diff --git a/manage.py b/manage.py new file mode 100644 index 0000000..7f47cab --- /dev/null +++ b/manage.py @@ -0,0 +1,22 @@ +#!/usr/bin/env python +"""Django's command-line utility for administrative tasks.""" +import os +import sys + + +def main(): + """Run administrative tasks.""" + os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'bacaan.settings') + try: + from django.core.management import execute_from_command_line + except ImportError as exc: + raise ImportError( + "Couldn't import Django. Are you sure it's installed and " + "available on your PYTHONPATH environment variable? Did you " + "forget to activate a virtual environment?" + ) from exc + execute_from_command_line(sys.argv) + + +if __name__ == '__main__': + main() diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..7b634fa --- /dev/null +++ b/readme.md @@ -0,0 +1,10 @@ +Aplikasi Bacaan Basmalah, taawudz dan persamaan kata pada bahasa arab + +Language: Python, Javascript, HTML, CSS + +Framework: Django + +Permintaan maaf jika ada tersilap dalam pembuatan aplikasi karena saya adalah seorang Kristen dan hanya membuat aplikasi ini untuk memenuhi projek tertentu. + +Aplikasi ini dibuat untuk memeriksa persamaan kata / sebutan kalimat pada bahasa arab tertentu dimana pengguna akan merekam suara berdasarkan dari bahasa arab yang ditampilkan dan akan diperiksa hasil persamaan antara suara rekaman pengguna dan suara rekaman Ustazah yang telah direkam sebelumnya. + diff --git a/static/assets/avatar.svg b/static/assets/avatar.svg new file mode 100644 index 0000000..097458a --- /dev/null +++ b/static/assets/avatar.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/assets/favicon.ico b/static/assets/favicon.ico new file mode 100644 index 0000000..1707a6d Binary files /dev/null and b/static/assets/favicon.ico differ diff --git a/static/assets/icons/add.svg b/static/assets/icons/add.svg new file mode 100644 index 0000000..ba9996e --- /dev/null +++ b/static/assets/icons/add.svg @@ -0,0 +1,4 @@ + +add + + diff --git a/static/assets/icons/arrow-left.svg b/static/assets/icons/arrow-left.svg new file mode 100644 index 0000000..10d2a55 --- /dev/null +++ b/static/assets/icons/arrow-left.svg @@ -0,0 +1,4 @@ + +arrow-left + + diff --git a/static/assets/icons/chevron-down.svg b/static/assets/icons/chevron-down.svg new file mode 100644 index 0000000..a12779a --- /dev/null +++ b/static/assets/icons/chevron-down.svg @@ -0,0 +1,4 @@ + +chevron-down + + diff --git a/static/assets/icons/delete.svg b/static/assets/icons/delete.svg new file mode 100644 index 0000000..32eac05 --- /dev/null +++ b/static/assets/icons/delete.svg @@ -0,0 +1,4 @@ + +delete + + diff --git a/static/assets/icons/edit.svg b/static/assets/icons/edit.svg new file mode 100644 index 0000000..a0c2531 --- /dev/null +++ b/static/assets/icons/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/icons/ellipsis-horizontal.svg b/static/assets/icons/ellipsis-horizontal.svg new file mode 100644 index 0000000..a26f016 --- /dev/null +++ b/static/assets/icons/ellipsis-horizontal.svg @@ -0,0 +1,6 @@ + +ellipsis-horizontal + + + + diff --git a/static/assets/icons/ellipsis-vertical.svg b/static/assets/icons/ellipsis-vertical.svg new file mode 100644 index 0000000..b91ce93 --- /dev/null +++ b/static/assets/icons/ellipsis-vertical.svg @@ -0,0 +1,6 @@ + +ellipsis-vertical + + + + diff --git a/static/assets/icons/lock.svg b/static/assets/icons/lock.svg new file mode 100644 index 0000000..3119aa3 --- /dev/null +++ b/static/assets/icons/lock.svg @@ -0,0 +1,5 @@ + +lock + + + diff --git a/static/assets/icons/remove.svg b/static/assets/icons/remove.svg new file mode 100644 index 0000000..7be188e --- /dev/null +++ b/static/assets/icons/remove.svg @@ -0,0 +1,4 @@ + +remove + + diff --git a/static/assets/icons/search.svg b/static/assets/icons/search.svg new file mode 100644 index 0000000..a47f611 --- /dev/null +++ b/static/assets/icons/search.svg @@ -0,0 +1,4 @@ + +search + + diff --git a/static/assets/icons/sign-out.svg b/static/assets/icons/sign-out.svg new file mode 100644 index 0000000..7dadd40 --- /dev/null +++ b/static/assets/icons/sign-out.svg @@ -0,0 +1,5 @@ + +sign-out + + + diff --git a/static/assets/icons/tools.svg b/static/assets/icons/tools.svg new file mode 100644 index 0000000..f81e3e4 --- /dev/null +++ b/static/assets/icons/tools.svg @@ -0,0 +1,4 @@ + +tools + + diff --git a/static/assets/icons/user-group.svg b/static/assets/icons/user-group.svg new file mode 100644 index 0000000..dde9985 --- /dev/null +++ b/static/assets/icons/user-group.svg @@ -0,0 +1,7 @@ + +user-group + + + + + diff --git a/static/assets/icons/user.svg b/static/assets/icons/user.svg new file mode 100644 index 0000000..a6bdfd7 --- /dev/null +++ b/static/assets/icons/user.svg @@ -0,0 +1,5 @@ + +user + + + diff --git a/static/assets/logo.svg b/static/assets/logo.svg new file mode 100644 index 0000000..3762ca0 --- /dev/null +++ b/static/assets/logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/static/audio/1/ustazah/1.wav b/static/audio/1/ustazah/1.wav new file mode 100644 index 0000000..15748f7 Binary files /dev/null and b/static/audio/1/ustazah/1.wav differ diff --git a/static/audio/1/ustazah/2.wav b/static/audio/1/ustazah/2.wav new file mode 100644 index 0000000..d0df880 Binary files /dev/null and b/static/audio/1/ustazah/2.wav differ diff --git a/static/audio/1/ustazah/3.wav b/static/audio/1/ustazah/3.wav new file mode 100644 index 0000000..5e8c314 Binary files /dev/null and b/static/audio/1/ustazah/3.wav differ diff --git a/static/audio/1/ustazah/4.wav b/static/audio/1/ustazah/4.wav new file mode 100644 index 0000000..d6df2b4 Binary files /dev/null and b/static/audio/1/ustazah/4.wav differ diff --git a/static/audio/1/ustazah/5.wav b/static/audio/1/ustazah/5.wav new file mode 100644 index 0000000..27ee259 Binary files /dev/null and b/static/audio/1/ustazah/5.wav differ diff --git a/static/audio/1/ustazah/6.wav b/static/audio/1/ustazah/6.wav new file mode 100644 index 0000000..8ba10b9 Binary files /dev/null and b/static/audio/1/ustazah/6.wav differ diff --git a/static/audio/2/ustazah/1.wav b/static/audio/2/ustazah/1.wav new file mode 100644 index 0000000..55fd2ea Binary files /dev/null and b/static/audio/2/ustazah/1.wav differ diff --git a/static/audio/2/ustazah/2.wav b/static/audio/2/ustazah/2.wav new file mode 100644 index 0000000..baf8b9b Binary files /dev/null and b/static/audio/2/ustazah/2.wav differ diff --git a/static/audio/3/ustazah/1.wav b/static/audio/3/ustazah/1.wav new file mode 100644 index 0000000..c154a2d Binary files /dev/null and b/static/audio/3/ustazah/1.wav differ diff --git a/static/audio/3/ustazah/2.wav b/static/audio/3/ustazah/2.wav new file mode 100644 index 0000000..b86df35 Binary files /dev/null and b/static/audio/3/ustazah/2.wav differ diff --git a/static/audio/3/ustazah/3.wav b/static/audio/3/ustazah/3.wav new file mode 100644 index 0000000..ea8f68d Binary files /dev/null and b/static/audio/3/ustazah/3.wav differ diff --git a/static/audio/4/ustazah/1.wav b/static/audio/4/ustazah/1.wav new file mode 100644 index 0000000..f0af1ab Binary files /dev/null and b/static/audio/4/ustazah/1.wav differ diff --git a/static/audio/4/ustazah/2.wav b/static/audio/4/ustazah/2.wav new file mode 100644 index 0000000..f32f499 Binary files /dev/null and b/static/audio/4/ustazah/2.wav differ diff --git a/static/audio/4/ustazah/3.wav b/static/audio/4/ustazah/3.wav new file mode 100644 index 0000000..6c8abea Binary files /dev/null and b/static/audio/4/ustazah/3.wav differ diff --git a/static/audio/5/ustazah/1.wav b/static/audio/5/ustazah/1.wav new file mode 100644 index 0000000..52188e1 Binary files /dev/null and b/static/audio/5/ustazah/1.wav differ diff --git a/static/audio/5/ustazah/2.wav b/static/audio/5/ustazah/2.wav new file mode 100644 index 0000000..b7608d8 Binary files /dev/null and b/static/audio/5/ustazah/2.wav differ diff --git a/static/audio/5/ustazah/3.wav b/static/audio/5/ustazah/3.wav new file mode 100644 index 0000000..28e0270 Binary files /dev/null and b/static/audio/5/ustazah/3.wav differ diff --git a/static/audio/6/ustazah/1.wav b/static/audio/6/ustazah/1.wav new file mode 100644 index 0000000..da69a9f Binary files /dev/null and b/static/audio/6/ustazah/1.wav differ diff --git a/static/audio/6/ustazah/2.wav b/static/audio/6/ustazah/2.wav new file mode 100644 index 0000000..038ab29 Binary files /dev/null and b/static/audio/6/ustazah/2.wav differ diff --git a/static/audio/6/ustazah/3.wav b/static/audio/6/ustazah/3.wav new file mode 100644 index 0000000..d7af80e Binary files /dev/null and b/static/audio/6/ustazah/3.wav differ diff --git a/static/audio/b/ustazah/b.wav b/static/audio/b/ustazah/b.wav new file mode 100644 index 0000000..6cef733 Binary files /dev/null and b/static/audio/b/ustazah/b.wav differ diff --git a/static/audio/t/ustazah/t.wav b/static/audio/t/ustazah/t.wav new file mode 100644 index 0000000..0b8b9ec Binary files /dev/null and b/static/audio/t/ustazah/t.wav differ diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..f4afd69 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,1166 @@ +@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"); + +:root { + --color-main: #71c6dd; + --color-main-light: #e1f6fb; + --color-dark: #3f4156; + --color-dark-medium: #51546e; + --color-dark-light: #696d97; + --color-light: #e5e5e5; + --color-gray: #8b8b8b; + --color-light-gray: #b2bdbd; + --color-bg: #2d2d39; + --color-success: #5dd693; + --color-error: #fc4b0b; +} + +/*========== base styles ==========*/ + +* { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue", sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + text-rendering: optimizeLegibility; + /* color: inherit; */ + font-size: inherit; +} + +html { + font-size: 56.25%; +} + +@media only screen and (min-width: 1200px) { + html { + font-size: 62.5%; + } +} + +@media only screen and (min-width: 2100px) { + html { + font-size: 75%; + } +} + +body { + line-height: 1.6; + font-weight: 400; + font-size: 1.5rem; + color: var(--color-light-gray); + background-color: var(--color-bg); + min-height: 100vh; +} + +img { + width: 100%; +} + +a { + display: inline-block; + color: var(--color-main); + text-decoration: none; +} + +/*========== components ==========*/ +.container { + max-width: 120rem; + width: 90%; + margin: auto; +} + +.btn { + background-color: var(--color-dark-medium); + color: rgb(241, 237, 237); + border: none; + display: inline-flex; + align-items: center; + gap: 1rem; + cursor: pointer; + transition: all ease-in-out 0.3s; + padding: 1rem 2rem; + border-radius: 5px; + box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15); + font-weight: 500; +} + +.btn--link { + border-radius: 0; + padding: 0; + color: var(--color-main); + box-shadow: none; +} + +.btn--link:hover { + text-decoration: underline; +} + +.btn--main { + background-color: var(--color-main); + color: var(--color-dark); +} + +.btn:hover { + opacity: 0.9; +} + +.btn--dark { + background-color: var(--color-dark-light); + color: var(--color-light); +} + +.btn > svg { + fill: currentColor; + width: 1.6rem; + height: 1.6rem; +} + +.btn--pill { + border-radius: 10rem; + font-size: 1.4rem; + font-weight: 700; + padding: 6px 2.5rem; + color: var(--color-main); + background: transparent; + border: 2px solid var(--color-main); +} + +.action-button { + background: transparent; + border: none; + outline: none; + cursor: pointer; +} + +.avatar { + position: relative; + display: inline-block; + border-radius: 50%; + border: 2px solid var(--color-main); +} + +.avatar img { + display: block; + border-radius: 50%; + object-fit: cover; + object-position: center; +} + +.avatar::after { + content: ""; + display: block; + position: absolute; + background-color: var(--color-gray); + z-index: 111; + border-radius: 50%; + border: 0.3rem solid var(--color-dark); +} + +.avatar.active::after { + background-color: var(--color-success); +} + +.avatar.avatar--small img { + width: 2.8rem; + height: 2.8rem; +} + +.avatar.avatar--small:after { + width: 0.7rem; + height: 0.7rem; + bottom: 0px; + right: -6px; +} + +.avatar.avatar--medium img { + width: 3.6rem; + height: 3.6rem; + border-radius: 50%; +} + +.avatar.avatar--medium:after { + width: 0.7rem; + height: 0.7rem; + bottom: 0px; + right: -6px; +} + +.avatar.avatar--large img { + display: block; + width: 8rem; + height: 8rem; + border-radius: 50%; +} + +.avatar.avatar--large:after { + width: 1rem; + height: 1rem; + bottom: 2px; + right: 3.5px; +} + +.scroll::-webkit-scrollbar { + width: 0.6rem; + background-color: rgb(41, 41, 46); +} + +.scroll::-webkit-scrollbar-thumb { + border-radius: 1rem; + background-color: var(--color-gray); +} + +.dropdown-menu { + z-index: 111; + position: absolute; + top: 5rem; + right: 0.5rem; + background: var(--color-dark-light); + border-radius: 5px; + box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15); + overflow: hidden; + display: none; +} + +.dropdown-menu.show { + display: block; +} + +.dropdown-menu a { + padding: 1.2rem 4rem; + display: block; + color: var(--color-light) !important; + font-weight: 500; + font-size: 1.4rem; +} + +.dropdown-menu a:hover { + background-color: var(--color-dark-medium); +} + +.dropdown-menu > a:not(:last-child) { + border-bottom: 1px solid var(--color-dark-medium); +} + +.dropdown-menu a svg { + fill: var(--color-light); +} + +.mobile-menu { + margin-bottom: 3rem; +} + +.mobile-menuItems { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} + +@media screen and (min-width: 500px) { + .mobile-menu { + display: none; + } +} + +/*============================== +=> Header Section +================================*/ + +.header { + padding: 1.5rem; + background-color: var(--color-dark); +} + +.header > .container { + display: flex; + gap: 9.5rem; +} + +.header__logo, +.header__user { + display: flex; + gap: 2rem; + align-items: center; +} + +.header__logo > img { + height: 3.2rem; + width: 3.2rem; +} + +.header__logo > h1 { + font-weight: 700; + font-size: 2rem; + color: var(--color-light); +} + +.header__search > label { + background-color: var(--color-dark-medium); + padding: 1.3rem 1rem; + display: flex; + align-items: center; + gap: 1rem; + border-radius: 4px; +} + +.header__search svg { + fill: var(--color-gray); + width: 2rem; + height: 2rem; + margin-left: 1rem; +} + +.header__search input { + width: 30rem; + background: transparent; + border: none; + outline: none; + color: var(--color-light); +} + +@media screen and (max-width: 800px) { + .header__search input { + width: 20rem; + } + + .header > .container { + gap: 3rem; + } +} + +@media screen and (max-width: 700px) { + .header__logo h1 { + display: none; + } +} + +@media screen and (max-width: 500px) { + .header__search { + display: none; + } +} + +.header__menu { + margin-left: auto; + position: relative; +} + +.header__menu a { + display: flex; + gap: 1.5rem; + align-items: center; + font-weight: 500; + text-decoration: none; + color: var(--color-gray); +} + +.header__menu img { + height: 3.6rem; +} + +.header__menu p { + line-height: 1.2; +} + +.header__menu span { + color: var(--color-main); + font-weight: 500; + font-size: 1.4rem; + display: block; +} + +.header__menu svg { + width: 1.6rem; + height: 1.6rem; + fill: var(--color-dark-light); +} + +.dropdown-button { + background: transparent; + border: 0; + outline: 0; + cursor: pointer; +} + +.dropdown-button:hover svg { + fill: var(--color-main); +} + +/*============================== +=> Layout +================================*/ + +.layout { + margin-top: 2.4rem; +} + +.layout > .container { + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.layout--3 > .container > div:first-child { + flex-basis: 18%; + max-width: 22.5rem; +} + +.layout--3 > .container > div:nth-child(2) { + flex-basis: 50%; +} + +.layout--3 > .container > div:last-child { + flex-basis: 25%; +} + +.layout--2 > .container > div:first-child { + flex-basis: 72%; +} + +.layout--2 > .container > div:last-child { + flex-basis: 25%; +} +/*========== Layout Box ==========*/ + +.layout__box { + width: 90%; + max-width: 48rem; + min-height: 40rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -46%); + background-color: var(--color-dark); + border-radius: 1rem; + box-shadow: 1px 1px 6px 3px rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +.layout__boxHeader { + display: flex; + padding: 1.5rem; + background-color: var(--color-dark-light); +} + +.layout__boxTitle { + display: flex; + gap: 1.5rem; + align-items: center; +} + +.layout__boxTitle h3 { + text-transform: uppercase; + font-weight: 500; + color: var(--color-light); +} + +.layout__boxTitle svg { + width: 1.6rem; + height: 1.6rem; + fill: var(--color-main); +} + +.layout__body { + margin: 3rem; +} + +@media screen and (max-width: 900px) { + .activities, + .topics { + display: none; + } + + .layout--3 > .container > div:nth-child(2) { + flex-basis: 100%; + } +} + +/*============================== +=> Topics +================================*/ + +.form__group { + margin-bottom: 2rem; + width: 100%; +} + +.form__split { + display: flex; + gap: 1.5rem; +} + +.form__group label { + display: block; + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.form__group input, +.form__group textarea, +.form__group select { + background: transparent; + border: 1px solid var(--color-dark-light); + padding: 1rem; + border-radius: 3px; + width: 100%; + color: var(--color-light); + font-weight: 500; + outline: none; +} + +.form__group input:focus, +.form__group textarea:focus { + border-color: var(--color-main); +} + +.form__group textarea { + background: transparent; + height: 10rem; + resize: none; +} + +.form__group select { + color: var(--color-gray); + font-weight: 400; +} + +.form__group select option { + background-color: var(--color-dark-light); + color: var(--color-light); + padding: 0 10rem; +} + +.form__action { + display: flex; + justify-content: flex-end; + gap: 3rem; +} + +.form__hide { + position: absolute; + left: -9999px; +} + +.form__avatar label { + text-align: center; + font-size: 1.8rem; + font-weight: 500; + color: var(--color-main); + cursor: pointer; +} + +.form__avatar label:hover { + text-decoration: underline; +} + +/*============================== +=> Topics +================================*/ + +.topics__header { + margin-bottom: 2rem; +} + +.topics__header h2 { + text-transform: uppercase; + font-weight: 500; + color: var(--color-dark-light); +} + +.topics__list { + list-style: none; +} + +.topics__list li a { + display: flex; + justify-content: space-between; + margin-bottom: 3rem; + font-weight: 500; + color: var(--color-light-gray); + transition: all 0.3s ease-in-out; +} + +.topics__list li a.active, +.topics__list li a:hover { + color: var(--color-main); +} + +.topics__list li a span { + padding: 0.5rem 1rem; + background-color: var(--color-dark); + border-radius: 3px; + font-size: 1.3rem; + font-weight: 700; + letter-spacing: 1px; +} + +.topics-page a:hover { + text-decoration: underline; +} + +.topics-page .topics__list li:not(:last-child) a { + margin: 2rem 0; + padding-bottom: 1rem; + text-decoration: none; + border-bottom: 1px solid var(--color-dark-medium); +} + +.topics-page .header__search { + display: block; +} + +@media screen and (max-width: 500px) { + .mobile-menu .header__search { + display: block; + margin-bottom: 2.4rem; + } +} + +/*============================== +=> Room List +================================*/ + +.roomList__header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2.4rem; +} + +.roomList__header h2 { + text-transform: uppercase; + font-weight: 500; + color: var(--color-light); + letter-spacing: 1px; +} + +.roomList__header p { + font-weight: 500; + color: var(--color-dark-light); +} + +/*========== Room List Room ==========*/ + +.roomListRoom { + margin-bottom: 2.4rem; + background-color: var(--color-dark); + border-radius: 1rem; + padding: 2rem; +} + +.roomListRoom__header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.roomListRoom__author { + font-weight: 500; + display: flex; + align-items: center; + gap: 1rem; +} + +.roomListRoom__actions { + display: flex; + align-items: flex-start; + gap: 1rem; + position: relative; +} + +.roomListRoom__actions span { + font-size: 1.4rem; + font-weight: 500; +} + +.roomListRoom__actions svg { + fill: var(--color-main); + + width: 1.6rem; + height: 1.6rem; +} + +.roomListRoom__content { + margin: 1rem 0; +} + +.roomListRoom__content a { + font-size: 2rem; + font-weight: 500; + margin-bottom: 1.5rem; + color: var(--color-light); + transition: all 0.3s ease-in-out; +} + +.roomListRoom__content a:hover { + color: var(--color-main); +} + +.roomListRoom__meta { + border-top: 1px solid var(--color-dark-medium); + padding-top: 1rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.roomListRoom__joined { + color: var(--color-light-gray); + display: flex; + align-items: center; + gap: 1rem; + font-size: 1.4rem; + font-weight: 500; +} + +.roomListRoom__joined svg { + fill: var(--color-main); + width: 1.6rem; + height: 1.6rem; +} + +.roomListRoom__topic { + padding: 5px 1.5rem; + background-color: var(--color-dark-medium); + border-radius: 5rem; + font-weight: 500; + font-size: 1.3rem; +} + +/*============================== +=> Activities +================================*/ + +.activities { + background: var(--color-dark); + border-radius: 5px; + overflow: hidden; +} + +.activities__header h2 { + background-color: var(--color-dark-light); + text-transform: uppercase; + font-weight: 500; + padding: 1rem 1.5rem; + color: var(--color-light); + letter-spacing: 1px; + font-size: 1.4rem; +} + +.activities__box { + margin: 1.5rem; + padding: 1.5rem; + border: 2px solid var(--color-dark-medium); + border-radius: 5px; +} + +.activities__boxHeader p { + font-size: 1.4rem; + line-height: 1.3; +} + +.activities__boxHeader p span { + color: var(--color-gray); + font-size: 1.2rem; + display: block; +} + +.activities__boxContent { + margin-left: 4.2rem; +} + +.activities__boxContent { + font-size: 1.4rem; +} + +.activities__boxContent a:hover { + text-decoration: underline; +} + +.activities__boxRoomContent { + background: var(--color-bg); + padding: 1rem; + border-radius: 5px; + margin-top: 1rem; + margin-left: -4.2rem; +} + +.roomListRoom__actions svg { + fill: var(--color-light-gray); +} + +/*============================== +=> Create Room +================================*/ + +.create-room.layout .layout__box { + max-width: 68rem; +} + +/*============================== +=> Update Account +================================*/ + +.update-account.layout .layout__box { + max-width: 68rem; +} + +/*============================== +=> Delete Item +================================*/ + +.delete-item.layout .layout__box { + max-width: 68rem; +} + +/*============================== +=> Auth +================================*/ + +.auth__tagline { + text-align: center; + margin-bottom: 3rem; + color: var(--color-main); + font-weight: 500; + font-size: 1.8rem; +} +.auth .layout__boxHeader { + text-align: center; + justify-content: center; +} + +.auth__action { + margin-top: 3rem; + text-align: center; +} + +/*============================== +=> Settings +================================*/ + +.settings__avatar { + margin-bottom: 3rem; + text-align: center; + margin: 0 auto; + display: flex; + justify-content: center; +} + +.settings__avatar .avatar { + margin: 1rem; +} + +/*============================== +=> Profile +================================*/ +.profile { + margin-bottom: 3rem; +} + +.profile__avatar { + text-align: center; +} + +.profile__info { + text-align: center; +} + +.profile__info h3 { + font-size: 2rem; + color: var(--color-light); + font-weight: 400; +} + +.profile__info p { + color: var(--color-main); + font-weight: 500; + margin-bottom: 1rem; +} + +.profile__about { + margin-top: 2rem; +} + +.profile__about h3 { + text-transform: uppercase; + color: var(--color-dark-light); + margin-bottom: 0.5rem; +} + +.profile-page .roomList__header { + margin-bottom: 1.5rem; +} + +.profile-page .roomList__header h2 { + color: var(--color-dark-light); +} + +/*============================== +=> Room +================================*/ + +.room, +.participants { + background: var(--color-dark); + max-height: 87.5vh; + border-radius: 0.7rem; + overflow: hidden; + position: relative; +} + +@media screen and (max-width: 900px) { + .participants { + display: none; + } + + .layout--2 > .container > div:first-child { + flex-basis: 100%; + } +} + +.room__top, +.participants__top { + background: var(--color-dark-light); + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + position: relative; +} + +.room__top svg, +.thread__top svg { + width: 1.6rem; + height: 1.6rem; + fill: var(--color-light); + cursor: pointer; +} + +.room__topLeft { + display: flex; + align-items: flex-end; + gap: 1rem; +} + +.room__topLeft h3, +.participants__top { + text-transform: uppercase; + font-weight: 500; + color: var(--color-light); +} + +.room__topLeft svg { + width: 1.6rem; + height: 1.6rem; + fill: var(--color-light); +} + +.room__topRight { + display: flex; + column-gap: 1em; +} + +.room__topRight svg { + fill: var(--color-main-light); +} + +.room__header { + max-height: 30vh; + overflow-y: auto; + position: absolute; + width: 95%; + background: var(--color-dark); + z-index: 999; + top: 4.4rem; + padding-top: 2rem; + padding-bottom: 1rem; +} + +@media screen and (max-width: 500px) { + .room__header { + top: 4.3rem; + padding-right: 2rem; + } +} + +.room__box { + padding-left: 2rem; + padding-right: 2rem; + height: 80.5vh; + /* overflow-y: auto; */ + padding-bottom: 0; +} + +@media screen and (max-width: 500px) { + .room__box { + padding-left: 2.5rem; + padding-right: 2rem; + height: 80.5vh; + overflow-y: auto; + padding-bottom: 0; + } +} + +.room__info { + display: flex; + justify-content: space-between; +} + +.room__info h3 { + font-size: 2.4rem; + font-weight: 500; + color: var(--color-main); +} + +.room__hosted p { + text-transform: uppercase; + color: var(--color-gray); + font-size: 1.2rem; + font-weight: 700; + line-height: 2; +} + +.room__author { + display: flex; + gap: 1rem; + align-items: center; + margin-bottom: 1rem; + transition: all 0.3s ease-in-out; +} + +.room__author:hover { + text-decoration: underline; +} + +.room__topics { + padding: 0.5rem 1.5rem; + background: var(--color-dark-light); + color: var(--color-light); + display: inline-block; + font-size: 1.4rem; + border-radius: 1.5rem; + margin: 1rem 0; +} + +.room__conversation { + margin-top: 1rem; + margin-bottom: 4rem; + height: 64%; +} + +.threads h3 { + text-transform: uppercase; + font-weight: 500; + color: var(--color-gray); +} + +.threads { + background: var(--color-bg); + border-radius: 0.7rem; + overflow-y: auto; + height: 100%; + margin-top: 28vh; + padding: 0 2rem 4rem 2rem; +} + +.thread { + border-left: 2px solid var(--color-dark); + padding-left: 1rem; + margin: 2rem 0; + padding: 2rem; +} + +.thread__top { + display: flex; + align-items: center; + justify-content: space-between; +} + +.thread__top svg { + fill: var(--color-dark-light); +} + +.thread__author { + display: flex; + align-items: center; + gap: 1.5rem; + font-size: 1.4rem; +} + +.thread__authorInfo { + display: flex; + align-items: center; + gap: 1rem; +} + +.thread__details { + font-size: 1.4rem; + margin-top: 0.5rem; +} + +.room__message { + padding: 2rem; + position: absolute; + z-index: 111; + bottom: 0; + left: 0; + right: 0; + background: transparent; +} + +.room__message > form > input { + resize: none; + background-color: var(--color-dark-light); + color: var(--color-light); + border: none; + outline: none; + border-radius: 0.7rem; + height: 4.5rem; + width: 100%; + margin-top: -1rem; + padding: 1.2rem; + font-size: 1.4rem; + font-weight: 500; + position: relative; +} + +.room__message > form > input::placeholder { + color: var(--color-light-gray); +} + +.participants__top span { + color: var(--color-main); + font-size: 1.3rem; + text-transform: none; +} + +.participants__top { + justify-content: flex-start; + gap: 0.5rem; +} + +.participants__list { + padding: 2rem; + height: 82.5vh; + overflow-y: scroll; + padding-bottom: 0; +} + +.participant { + display: flex; + align-items: center; + gap: 1.5rem; + margin-bottom: 2rem; +} + +.participant p { + color: var(--color-light-gray); + line-height: 1.2; +} + +.participant span { + display: block; + font-weight: 500; + color: var(--color-main); + font-weight: 1.4rem; +} diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000..1707a6d Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/images/1/1.png b/static/images/1/1.png new file mode 100644 index 0000000..40a2429 Binary files /dev/null and b/static/images/1/1.png differ diff --git a/static/images/1/2.png b/static/images/1/2.png new file mode 100644 index 0000000..e6b4830 Binary files /dev/null and b/static/images/1/2.png differ diff --git a/static/images/1/3.png b/static/images/1/3.png new file mode 100644 index 0000000..a78b860 Binary files /dev/null and b/static/images/1/3.png differ diff --git a/static/images/1/4.png b/static/images/1/4.png new file mode 100644 index 0000000..3d0eb16 Binary files /dev/null and b/static/images/1/4.png differ diff --git a/static/images/1/5.png b/static/images/1/5.png new file mode 100644 index 0000000..5401989 Binary files /dev/null and b/static/images/1/5.png differ diff --git a/static/images/1/6.png b/static/images/1/6.png new file mode 100644 index 0000000..51f2d68 Binary files /dev/null and b/static/images/1/6.png differ diff --git a/static/images/2/1.png b/static/images/2/1.png new file mode 100644 index 0000000..8e3d012 Binary files /dev/null and b/static/images/2/1.png differ diff --git a/static/images/2/2.png b/static/images/2/2.png new file mode 100644 index 0000000..2e47d23 Binary files /dev/null and b/static/images/2/2.png differ diff --git a/static/images/3/1.png b/static/images/3/1.png new file mode 100644 index 0000000..fb3e2d2 Binary files /dev/null and b/static/images/3/1.png differ diff --git a/static/images/3/2.png b/static/images/3/2.png new file mode 100644 index 0000000..a12e538 Binary files /dev/null and b/static/images/3/2.png differ diff --git a/static/images/3/3.png b/static/images/3/3.png new file mode 100644 index 0000000..bcfda84 Binary files /dev/null and b/static/images/3/3.png differ diff --git a/static/images/4/1.png b/static/images/4/1.png new file mode 100644 index 0000000..2757a07 Binary files /dev/null and b/static/images/4/1.png differ diff --git a/static/images/4/2.png b/static/images/4/2.png new file mode 100644 index 0000000..bee8530 Binary files /dev/null and b/static/images/4/2.png differ diff --git a/static/images/4/3.png b/static/images/4/3.png new file mode 100644 index 0000000..53045d4 Binary files /dev/null and b/static/images/4/3.png differ diff --git a/static/images/5/1.png b/static/images/5/1.png new file mode 100644 index 0000000..6c9c51f Binary files /dev/null and b/static/images/5/1.png differ diff --git a/static/images/5/2.png b/static/images/5/2.png new file mode 100644 index 0000000..5571101 Binary files /dev/null and b/static/images/5/2.png differ diff --git a/static/images/5/3.png b/static/images/5/3.png new file mode 100644 index 0000000..428518a Binary files /dev/null and b/static/images/5/3.png differ diff --git a/static/images/6/1.png b/static/images/6/1.png new file mode 100644 index 0000000..e401b67 Binary files /dev/null and b/static/images/6/1.png differ diff --git a/static/images/6/2.png b/static/images/6/2.png new file mode 100644 index 0000000..5e06ffa Binary files /dev/null and b/static/images/6/2.png differ diff --git a/static/images/6/3.png b/static/images/6/3.png new file mode 100644 index 0000000..2c6fdfc Binary files /dev/null and b/static/images/6/3.png differ diff --git a/static/images/b/b.png b/static/images/b/b.png new file mode 100644 index 0000000..86f5714 Binary files /dev/null and b/static/images/b/b.png differ diff --git a/static/images/t/t.png b/static/images/t/t.png new file mode 100644 index 0000000..1df3795 Binary files /dev/null and b/static/images/t/t.png differ diff --git a/static/js/recorder.js b/static/js/recorder.js new file mode 100644 index 0000000..6011bef --- /dev/null +++ b/static/js/recorder.js @@ -0,0 +1,357 @@ +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Recorder = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o +// remove +// +// +// `; +// const menuButton = ` +// ellipsis-horizontal +// +// +// +// +// `; + +// const actionButtons = document.querySelectorAll('.action-button'); + +// if (actionButtons) { +// actionButtons.forEach(button => { +// button.addEventListener('click', () => { +// const buttonId = button.dataset.id; +// let popup = document.querySelector(`.popup-${buttonId}`); +// console.log(popup); +// if (popup) { +// button.innerHTML = menuButton; +// return popup.remove(); +// } + +// const deleteUrl = button.dataset.deleteUrl; +// const editUrl = button.dataset.editUrl; +// button.innerHTML = closeButton; + +// popup = document.createElement('div'); +// popup.classList.add('popup'); +// popup.classList.add(`popup-${buttonId}`); +// popup.innerHTML = `Edit +//
+// +//
`; +// button.insertAdjacentElement('afterend', popup); +// }); +// }); +// } + +// Menu + +const dropdownMenu = document.querySelector(".dropdown-menu"); +const dropdownButton = document.querySelector(".dropdown-button"); + +if (dropdownButton) { + dropdownButton.addEventListener("click", () => { + dropdownMenu.classList.toggle("show"); + }); +} + +// Upload Image +const photoInput = document.querySelector("#avatar"); +const photoPreview = document.querySelector("#preview-avatar"); +if (photoInput) + photoInput.onchange = () => { + const [file] = photoInput.files; + if (file) { + photoPreview.src = URL.createObjectURL(file); + } + }; + +// Scroll to Bottom +const conversationThread = document.querySelector(".room__box"); +if (conversationThread) conversationThread.scrollTop = conversationThread.scrollHeight; diff --git a/templates/main.html b/templates/main.html new file mode 100644 index 0000000..732c17a --- /dev/null +++ b/templates/main.html @@ -0,0 +1,21 @@ + + + + {% load static %} + + + + + + + Bacaan + + + + {% include "navbar.html" %} + {% block content %} + {% comment %} sini content {% endcomment %} + {% endblock content %} + + + \ No newline at end of file diff --git a/templates/navbar.html b/templates/navbar.html new file mode 100644 index 0000000..598a2c0 --- /dev/null +++ b/templates/navbar.html @@ -0,0 +1,68 @@ +{% load static %} +
+
+ + + + + + + + + + + + + +
+
\ No newline at end of file