first commit

.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
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "python.formatting.provider": "black"
+}

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()

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

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')),
+]

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()

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)

base/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class BaseConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'base'

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)),
+            ],
+        ),
+    ]

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

base/templates/base/activity.html

@@ -0,0 +1,83 @@
+{% load static %}
+<div class="activities">
+  <div class="activities__header">
+    <h2>Audio Bacaan</h2>
+  </div>
+
+  {% for bacaan in bacaans  %}
+  <div class="activities__box">
+    <!-- <div class="activities__boxHeader roomListRoom__header"> -->
+      <!-- <a href="profile.html" class="roomListRoom__author"> -->
+        <!-- <div class="avatar avatar--small"> -->
+          <!-- <img src="https://randomuser.me/api/portraits/women/11.jpg" /> -->
+        <!-- </div> -->
+        <!-- <p> -->
+          <!-- @sulamita_ivy -->
+          <!-- <span>5 days ago</span> -->
+        <!-- </p> -->
+      <!-- </a> -->
+      <!-- <div class="roomListRoom__actions"> -->
+        <!-- <a href="#"> -->
+          <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> -->
+            <!-- <title>remove</title> -->
+            <!-- <path -->
+              <!-- d="M27.314 6.019l-1.333-1.333-9.98 9.981-9.981-9.981-1.333 1.333 9.981 9.981-9.981 9.98 1.333 1.333 9.981-9.98 9.98 9.98 1.333-1.333-9.98-9.98 9.98-9.981z" -->
+            <!-- ></path> -->
+          <!-- </svg> -->
+        <!-- </a> -->
+      <!-- </div> -->
+    <!-- </div> -->
+    <div class="">
+      <!-- <p>replied to post “<a href="room.html">100 Days of code challenge!</a>”</p> -->
+      <!-- <div class="activities__boxRoomContent"> -->
+        <!-- I’ll have to try this sometime. Really like this idea. Wanna talk about it? I ‘m.... -->
+      <!-- </div> -->
+      <img src="{% static 'images/'  %}{{bacaan.image_url}}" style="height: 70px;" >
+      <center><p class="btn rounded-0" onclick="playAudioActivity('{{bacaan.judul_bacaan}}')">Dengarkan <i id="i_activity_{{bacaan.judul_bacaan}}" class="fa fa-play-circle"></i></p></center>
+    </div>
+  </div>
+  {% endfor %}
+  <script>
+    var name_audio = null;
+    function playAudioActivity(id) {
+      if (name_audio == null) {
+        let audio = document.getElementById("myAudio_"+id);
+        audio.play();
+        name_audio = id;
+        document.getElementById("i_activity_"+id).setAttribute("class", "fa fa-pause-circle");
+      }else{
+        let audio_playing = document.getElementById("myAudio_"+name_audio);
+        document.getElementById("i_activity_"+name_audio).setAttribute("class", "fa fa-play-circle");
+        document.getElementById("i_activity_"+id).setAttribute("class", "fa fa-pause-circle");
+        if(audio_playing.ended == false){
+          audio_playing.pause();
+          audio_playing.currentTime = 0;
+          let audio = document.getElementById("myAudio_"+id);
+          audio.play();
+         
+        }else{
+          let audio = document.getElementById("myAudio_"+id);
+          audio.play();
+        }
+        name_audio = id;
+        
+      }
+
+      //sleep 3 second
+       setTimeout(function(){
+        document.getElementById("i_activity_"+name_audio).setAttribute("class", "fa fa-play-circle");
+       }, 5000);
+      // if audio is playing in other audio tag, stop it else play it
+      
+
+      
+
+      
+
+    }
+  </script>
+
+  
+
+  
+</div>

base/templates/base/bacaan.html

@@ -0,0 +1,232 @@
+{% extends 'main.html' %}
+{% block content %}
+{% load static %}
+    <main class="update-account layout">
+      <div class="container">
+        <div class="layout__box">
+          <div class="layout__boxHeader">
+            <div class="layout__boxTitle">
+              <a href="profile.html" style="text-align: left;">
+                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"
+                      viewBox="0 0 32 32">
+                      <title>arrow-left</title>
+                      <path
+                          d="M13.723 2.286l-13.723 13.714 13.719 13.714 1.616-1.611-10.96-10.96h27.625v-2.286h-27.625l10.965-10.965-1.616-1.607z">
+                      </path>
+                  </svg>
+              </a>
+              <h3>Nilai Bacaan Anda</h3>
+            </div>
+          </div>
+          <div class="layout__body">
+            
+            <center><img src="{% static 'images/' %}{{bacaan.image_url}}" style="{{style}}"  alt=""></center>
+
+            <center><p class="btn btn--main">Dengar <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-play-circle"></i></p></center>
+            <br>
+            <center><button class="btn" id="recordButton" style="background-color: green;">Rekam <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-play-circle"></i></button> &nbsp <button id="pauseButton" style="cursor: not-allowed; background-color: grey;" class="btn btn--default" disabled>Pause <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-pause-circle"></i></button> &nbsp <button id="stopButton" style="cursor: not-allowed; background-color: grey;" class="btn btn--default" disabled>Stop <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-stop-circle"></i></button></center>
+            <!-- <br> -->
+            <!-- <center><p class="btn btn--primary" onclick="dengar_rekaman()">Dengar Rekaman <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-play-circle"></i></p></center> -->
+            <br>
+            <div id="formats" style="display: none;">Format: start recording to see sample rate</div>
+            <center><div id="recordingsList"></div></center>
+            <!-- <div id="disini"></div> -->
+          </div>
+        </div>
+      </div>
+    </main>
+    <script src="{% static 'js/recorder.js' %}"></script>
+    <script>
+      URL = window.URL || window.webkitURL;
+
+      var gumStream; 						//stream from getUserMedia()
+      var rec; 							//Recorder.js object
+      var input;  //MediaStreamAudioSourceNode we'll be recording
+
+      // shim for AudioContext when it's not avb. 
+      var AudioContext = window.AudioContext || window.webkitAudioContext;
+      var audioContext //audio context to help us record
+
+      var recordButton = document.getElementById("recordButton");
+      var stopButton = document.getElementById("stopButton");
+      var pauseButton = document.getElementById("pauseButton");
+
+      //add events to those 2 buttons
+      recordButton.addEventListener("click", startRecording);
+      stopButton.addEventListener("click", stopRecording);
+      pauseButton.addEventListener("click", pauseRecording);
+
+      function startRecording() {
+        recordingsList.innerHTML = '';
+        console.log("recordButton clicked");
+
+        setAttributes(recordButton, {
+          "style": "background-color: grey; cursor: not-allowed;",
+          
+        });
+
+        setAttributes(stopButton, {
+          "style": "background-color: red;cursor: pointer;",         
+        });
+
+        setAttributes(pauseButton, {
+          "style": "background-color: yellow;cursor: pointer;color: black;",         
+        });
+      
+        /*
+          Simple constraints object, for more advanced audio features see
+          https://addpipe.com/blog/audio-constraints-getusermedia/
+        */
+          
+          var constraints = { audio: true, video:false }
+      
+         /*
+            Disable the record button until we get a success or fail from getUserMedia() 
+        */
+      
+        recordButton.disabled = true;
+        stopButton.disabled = false;
+        pauseButton.disabled = false
+      
+        /*
+            We're using the standard promise based getUserMedia() 
+            https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+        */
+      
+        navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
+          console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
+      
+          /*
+            create an audio context after getUserMedia is called
+            sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
+            the sampleRate defaults to the one set in your OS for your playback device
+          */
+          audioContext = new AudioContext();
+      
+          //update the format 
+          document.getElementById("formats").innerHTML="Format: 1 channel pcm @ "+audioContext.sampleRate/1000+"kHz"
+      
+          /*  assign to gumStream for later use  */
+          gumStream = stream;
+          
+          /* use the stream */
+          input = audioContext.createMediaStreamSource(stream);
+      
+          /* 
+            Create the Recorder object and configure to record mono sound (1 channel)
+            Recording 2 channels  will double the file size
+          */
+          rec = new Recorder(input,{numChannels:1})
+      
+          //start the recording process
+          rec.record()
+      
+          console.log("Recording started");
+      
+        }).catch(function(err) {
+            //enable the record button if getUserMedia() fails
+            recordButton.disabled = false;
+            stopButton.disabled = true;
+            pauseButton.disabled = true
+        });
+      }
+      
+      function pauseRecording(){
+        console.log("pauseButton clicked rec.recording=",rec.recording );
+        if (rec.recording){
+          //pause
+          rec.stop();
+          pauseButton.innerHTML="Resume";
+        }else{
+          //resume
+          rec.record()
+          pauseButton.innerHTML="Pause";
+      
+        }
+      }
+      
+      function stopRecording() {
+        console.log("stopButton clicked");
+        
+      
+        //disable the stop button, enable the record too allow for new recordings
+        stopButton.disabled = true;
+        recordButton.disabled = false;
+        pauseButton.disabled = true;
+      
+        //reset button just in case the recording is stopped while paused
+        pauseButton.innerHTML="Pause";
+        
+        //tell the recorder to stop the recording
+        rec.stop();
+      
+        //stop microphone access
+        gumStream.getAudioTracks()[0].stop();
+      
+        //create the wav blob and pass it on to createDownloadLink
+        rec.exportWAV(createDownloadLink);
+      }
+      
+      function createDownloadLink(blob) {
+        
+        var url = URL.createObjectURL(blob);
+        var au = document.createElement('audio');
+        var li = document.createElement('li');
+        var link = document.createElement('a');
+      
+        //name of .wav file to use during upload and download (without extendion)
+        var filename = new Date().toISOString();
+      
+        //add controls to the <audio> element
+        au.controls = true;
+        au.src = url;
+        au.id = 'rekamannya'
+
+        /* let disini = document.getElementById('disini')
+        disini.append(au) */
+
+      
+        //save to disk link
+        link.href = url;
+        link.download = filename+".wav"; //download forces the browser to donwload the file using the  filename
+        link.innerHTML = "Save to disk";
+      
+        //add the new audio element to li
+        // li.appendChild(au);
+        
+        //add the filename to the li
+        // li.appendChild(document.createTextNode(filename+".wav "))
+      
+        //add the save to disk link to li
+        // li.appendChild(link);
+        
+        //upload link
+        /* var upload = document.createElement('a');
+        upload.href="#";
+        upload.innerHTML = "Upload";
+        upload.addEventListener("click", function(event){
+            var xhr=new XMLHttpRequest();
+            xhr.onload=function(e) {
+                if(this.readyState === 4) {
+                    console.log("Server returned: ",e.target.responseText);
+                }
+            };
+            var fd=new FormData();
+            fd.append("audio_data",blob, filename);
+            xhr.open("POST","upload.php",true);
+            xhr.send(fd);
+        }) */
+        // li.appendChild(document.createTextNode (" "))//add a space in between
+        // li.appendChild(upload)//add the upload link to li 
+      
+        //add the li element to the ol
+        // recordingsList.appendChild("");
+        recordingsList.appendChild(au);
+      }
+
+      function setAttributes(el, attrs) {
+          Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
+      }
+     
+    </script>
+{% endblock %}

base/templates/base/home.html

@@ -0,0 +1,145 @@
+{% extends 'main.html' %}
+{% block content %}
+{% load static %}
+<main class="layout layout--3">
+  <div class="container">
+    <!-- Topics Start -->
+    {% include 'base/topic.html' %}
+    <!-- Topics End -->
+
+    <!-- Room List Start -->
+    <div class="roomList">
+      <!-- <div class="mobile-menu"> -->
+        <!-- <form class="header__search"> -->
+        <!-- <label> -->
+        <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> -->
+        <!-- <title>search</title> -->
+        <!-- <path -->
+        <!-- d="M32 30.586l-10.845-10.845c1.771-2.092 2.845-4.791 2.845-7.741 0-6.617-5.383-12-12-12s-12 5.383-12 12c0 6.617 5.383 12 12 12 2.949 0 5.649-1.074 7.741-2.845l10.845 10.845 1.414-1.414zM12 22c-5.514 0-10-4.486-10-10s4.486-10 10-10c5.514 0 10 4.486 10 10s-4.486 10-10 10z" -->
+        <!-- ></path> -->
+        <!-- </svg> -->
+        <!-- <input placeholder="Search for posts" /> -->
+        <!-- </label> -->
+        <!-- </form> -->
+        <!-- <div class="mobile-menuItems"> -->
+          <!-- <a class="btn btn--main btn--pill" href="#">Browse Topics</a> -->
+          <!-- <a class="btn btn--main btn--pill" href="#">Recent Activities</a> -->
+        <!-- </div> -->
+      <!-- </div> -->
+      <div class="roomList__header">
+        <div>
+          <h2>Bacaan</h2>
+          <p>{{bacaans.count}} Audio Tersedia</p>
+        </div>
+        <!-- <a class="btn btn--main" href="create-room.html"> -->
+        <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> -->
+        <!-- <title>add</title> -->
+        <!-- <path -->
+        <!-- d="M16.943 0.943h-1.885v14.115h-14.115v1.885h14.115v14.115h1.885v-14.115h14.115v-1.885h-14.115v-14.115z" -->
+        <!-- ></path> -->
+        <!-- </svg> -->
+        <!-- Create Room -->
+        <!-- </a> -->
+      </div>
+
+      {% for bacaan in bacaans %}
+      <div class="roomListRoom">
+        <!-- <div class="roomListRoom__header"> -->
+        <!-- <a href="profile.html" class="roomListRoom__author"> -->
+        <!-- <div class="avatar avatar--small"> -->
+        <!-- <img src="https://randomuser.me/api/portraits/women/11.jpg" /> -->
+        <!-- </div> -->
+        <!-- <span>@sulamita_ivy</span> -->
+        <!-- </a> -->
+        <!-- <div class="roomListRoom__actions"> -->
+        <!-- <span>5 days ago</span> -->
+        <!-- </div> -->
+        <!-- </div> -->
+        <div class="roomListRoom__content">
+          <center><a href="#"><img src="{% static 'images/' %}{{bacaan.image_url}}" alt=""></a></center>
+          <!-- <p> -->
+          <!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ducimus harum dolorem, obcaecati -->
+          <!-- mollitia omnis quasi aut consequuntur enim itaque labore. -->
+          <!-- </p> -->
+        </div>
+        <div class="roomListRoom__meta">
+          <div class="roomListRoom__joined">
+            <audio id="myAudio_{{bacaan.judul_bacaan}}">
+              <source src="{% static 'audio/' %}{{bacaan.audio_url}}" type="audio/wav">
+            </audio>
+            <p class="roomListRoom__topic" onclick="playAudio('{{bacaan.judul_bacaan}}')" style="cursor: pointer;">
+              Dengarkan &nbsp <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-play-circle"></i></p>
+            <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> -->
+            <!-- <title>user-group</title> -->
+            <!-- <path -->
+            <!-- d="M30.539 20.766c-2.69-1.547-5.75-2.427-8.92-2.662 0.649 0.291 1.303 0.575 1.918 0.928 0.715 0.412 1.288 1.005 1.71 1.694 1.507 0.419 2.956 1.003 4.298 1.774 0.281 0.162 0.456 0.487 0.456 0.85v4.65h-4v2h5c0.553 0 1-0.447 1-1v-5.65c0-1.077-0.56-2.067-1.461-2.584z" -->
+            <!-- ></path> -->
+            <!-- <path -->
+            <!-- d="M22.539 20.766c-6.295-3.619-14.783-3.619-21.078 0-0.901 0.519-1.461 1.508-1.461 2.584v5.65c0 0.553 0.447 1 1 1h22c0.553 0 1-0.447 1-1v-5.651c0-1.075-0.56-2.064-1.461-2.583zM22 28h-20v-4.65c0-0.362 0.175-0.688 0.457-0.85 5.691-3.271 13.394-3.271 19.086 0 0.282 0.162 0.457 0.487 0.457 0.849v4.651z" -->
+            <!-- ></path> -->
+            <!-- <path -->
+            <!-- d="M19.502 4.047c0.166-0.017 0.33-0.047 0.498-0.047 2.757 0 5 2.243 5 5s-2.243 5-5 5c-0.168 0-0.332-0.030-0.498-0.047-0.424 0.641-0.944 1.204-1.513 1.716 0.651 0.201 1.323 0.331 2.011 0.331 3.859 0 7-3.141 7-7s-3.141-7-7-7c-0.688 0-1.36 0.131-2.011 0.331 0.57 0.512 1.089 1.075 1.513 1.716z" -->
+            <!-- ></path> -->
+            <!-- <path -->
+            <!-- d="M12 16c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.859 0-7 3.141-7 7s3.141 7 7 7zM12 4c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5c0-2.757 2.243-5 5-5z" -->
+            <!-- ></path> -->
+            <!-- </svg> -->
+          </div>
+          <p class="roomListRoom__topic" style="cursor: pointer;" onclick="to_bacaan('{{bacaan.id}}')">Rekam & Nilai</p>
+        </div>
+      </div>
+      {% endfor %}
+
+      <script>
+        var name_audio = null;
+        function playAudio(id) {
+          if (name_audio == null) {
+            let audio = document.getElementById("myAudio_"+id);
+            audio.play();
+            name_audio = id;
+            document.getElementById("i_"+id).setAttribute("class", "fa fa-pause-circle");
+          }else{
+            let audio_playing = document.getElementById("myAudio_"+name_audio);
+            document.getElementById("i_"+name_audio).setAttribute("class", "fa fa-play-circle");
+            document.getElementById("i_"+id).setAttribute("class", "fa fa-pause-circle");
+            if(audio_playing.ended == false){
+              audio_playing.pause();
+              audio_playing.currentTime = 0;
+              let audio = document.getElementById("myAudio_"+id);
+              audio.play();
+             
+            }else{
+              let audio = document.getElementById("myAudio_"+id);
+              audio.play();
+            }
+            name_audio = id;
+            
+          }
+
+          //sleep 3 second
+           setTimeout(function(){
+            document.getElementById("i_"+name_audio).setAttribute("class", "fa fa-play-circle");
+           }, 5000);
+          // if audio is playing in other audio tag, stop it else play it
+          
+
+          
+
+          
+
+        }
+      
+        function to_bacaan(id){
+          window.location.href = "/bacaan/"+id;
+        }
+      </script>
+
+    </div>
+    <!-- Room List End -->
+
+    <!-- Activities Start -->
+    {% include 'base/activity.html' %}
+    <!-- Activities End -->
+  </div>
+</main>
+{% endblock content %}

base/templates/base/topic.html

@@ -0,0 +1,42 @@
+{% load static %}
+<div class="topics">
+  <div class="topics__header">
+    <h2>Telusuri Bacaan</h2>
+  </div>
+  <ul class="topics__list">
+    <li>
+      <a href="{% url 'home' %}" class="active">Semua <span>22</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=b"><img src="{% static 'images/b/b.png' %}" alt="" style="width:160px; height: 35px;"> <span>1</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=t"><img src="{% static 'images/t/t.png' %}" alt="" style="width:160px; height: 35px;"> <span>1</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=1"><img src="{% static 'images/1/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>6</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=2"><img src="{% static 'images/2/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>2</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=3"><img src="{% static 'images/3/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>3</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=4"><img src="{% static 'images/4/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>3</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=5"><img src="{% static 'images/5/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>3</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=6"><img src="{% static 'images/6/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>3</span></a>
+    </li>
+  </ul>
+  <!-- <a class="btn btn--link" href="topics.html"> -->
+    <!-- More -->
+    <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> -->
+      <!-- <title>chevron-down</title> -->
+      <!-- <path d="M16 21l-13-13h-3l16 16 16-16h-3l-13 13z"></path> -->
+    <!-- </svg> -->
+  <!-- </a> -->
+</div>

base/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

base/urls.py

@@ -0,0 +1,7 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path('', views.home, name='home'),
+    path('bacaan/<str:pk>', views.bacaan, name='bacaan'),
+]

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)

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-----

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-----

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()

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.
+

static/assets/avatar.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 53 53" style="enable-background:new 0 0 53 53;" xml:space="preserve">
+<path style="fill:#E7ECED;" d="M18.613,41.552l-7.907,4.313c-0.464,0.253-0.881,0.564-1.269,0.903C14.047,50.655,19.998,53,26.5,53
+	c6.454,0,12.367-2.31,16.964-6.144c-0.424-0.358-0.884-0.68-1.394-0.934l-8.467-4.233c-1.094-0.547-1.785-1.665-1.785-2.888v-3.322
+	c0.238-0.271,0.51-0.619,0.801-1.03c1.154-1.63,2.027-3.423,2.632-5.304c1.086-0.335,1.886-1.338,1.886-2.53v-3.546
+	c0-0.78-0.347-1.477-0.886-1.965v-5.126c0,0,1.053-7.977-9.75-7.977s-9.75,7.977-9.75,7.977v5.126
+	c-0.54,0.488-0.886,1.185-0.886,1.965v3.546c0,0.934,0.491,1.756,1.226,2.231c0.886,3.857,3.206,6.633,3.206,6.633v3.24
+	C20.296,39.899,19.65,40.986,18.613,41.552z"/>
+<g>
+	<path style="fill:#556080;" d="M26.953,0.004C12.32-0.246,0.254,11.414,0.004,26.047C-0.138,34.344,3.56,41.801,9.448,46.76
+		c0.385-0.336,0.798-0.644,1.257-0.894l7.907-4.313c1.037-0.566,1.683-1.653,1.683-2.835v-3.24c0,0-2.321-2.776-3.206-6.633
+		c-0.734-0.475-1.226-1.296-1.226-2.231v-3.546c0-0.78,0.347-1.477,0.886-1.965v-5.126c0,0-1.053-7.977,9.75-7.977
+		s9.75,7.977,9.75,7.977v5.126c0.54,0.488,0.886,1.185,0.886,1.965v3.546c0,1.192-0.8,2.195-1.886,2.53
+		c-0.605,1.881-1.478,3.674-2.632,5.304c-0.291,0.411-0.563,0.759-0.801,1.03V38.8c0,1.223,0.691,2.342,1.785,2.888l8.467,4.233
+		c0.508,0.254,0.967,0.575,1.39,0.932c5.71-4.762,9.399-11.882,9.536-19.9C53.246,12.32,41.587,0.254,26.953,0.004z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/assets/icons/add.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>add</title>
+<path d="M16.943 0.943h-1.885v14.115h-14.115v1.885h14.115v14.115h1.885v-14.115h14.115v-1.885h-14.115v-14.115z"></path>
+</svg>

static/assets/icons/arrow-left.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-left</title>
+<path d="M13.723 2.286l-13.723 13.714 13.719 13.714 1.616-1.611-10.96-10.96h27.625v-2.286h-27.625l10.965-10.965-1.616-1.607z"></path>
+</svg>

static/assets/icons/chevron-down.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>chevron-down</title>
+<path d="M16 21l-13-13h-3l16 16 16-16h-3l-13 13z"></path>
+</svg>

static/assets/icons/delete.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>delete</title>
+<path d="M30 4h-8v-3c0-0.553-0.447-1-1-1h-10c-0.553 0-1 0.447-1 1v3h-8v2h2v24c0 1.104 0.897 2 2 2h20c1.103 0 2-0.896 2-2v-24h2v-2h-0zM12 2h8v2h-8v-2zM26.002 30l-0.002 1v-1h-20v-24h20v24h0.002z"></path>
+</svg>

static/assets/icons/edit.svg

@@ -0,0 +1 @@
+<svg id="light" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m23.5 22h-15c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h15c.276 0 .5.224.5.5s-.224.5-.5.5z"/></g><g><g><path d="m2.5 22c-.131 0-.259-.052-.354-.146-.123-.123-.173-.3-.133-.468l1.09-4.625c.021-.09.067-.173.133-.239l14.143-14.143c.565-.566 1.554-.566 2.121 0l2.121 2.121c.283.283.439.66.439 1.061s-.156.778-.439 1.061l-14.142 14.141c-.065.066-.148.112-.239.133l-4.625 1.09c-.038.01-.077.014-.115.014zm1.544-4.873-.872 3.7 3.7-.872 14.042-14.041c.095-.095.146-.22.146-.354 0-.133-.052-.259-.146-.354l-2.121-2.121c-.19-.189-.518-.189-.707 0zm3.081 3.283h.01z"/></g><g><path d="m17.889 10.146c-.128 0-.256-.049-.354-.146l-3.535-3.536c-.195-.195-.195-.512 0-.707s.512-.195.707 0l3.536 3.536c.195.195.195.512 0 .707-.098.098-.226.146-.354.146z"/></g></g></svg>

static/assets/icons/ellipsis-horizontal.svg

@@ -0,0 +1,6 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>ellipsis-horizontal</title>
+<path d="M16 7.843c-2.156 0-3.908-1.753-3.908-3.908s1.753-3.908 3.908-3.908c2.156 0 3.908 1.753 3.908 3.908s-1.753 3.908-3.908 3.908zM16 1.98c-1.077 0-1.954 0.877-1.954 1.954s0.877 1.954 1.954 1.954c1.077 0 1.954-0.877 1.954-1.954s-0.877-1.954-1.954-1.954z"></path>
+<path d="M16 19.908c-2.156 0-3.908-1.753-3.908-3.908s1.753-3.908 3.908-3.908c2.156 0 3.908 1.753 3.908 3.908s-1.753 3.908-3.908 3.908zM16 14.046c-1.077 0-1.954 0.877-1.954 1.954s0.877 1.954 1.954 1.954c1.077 0 1.954-0.877 1.954-1.954s-0.877-1.954-1.954-1.954z"></path>
+<path d="M16 31.974c-2.156 0-3.908-1.753-3.908-3.908s1.753-3.908 3.908-3.908c2.156 0 3.908 1.753 3.908 3.908s-1.753 3.908-3.908 3.908zM16 26.111c-1.077 0-1.954 0.877-1.954 1.954s0.877 1.954 1.954 1.954c1.077 0 1.954-0.877 1.954-1.954s-0.877-1.954-1.954-1.954z"></path>
+</svg>

static/assets/icons/ellipsis-vertical.svg

@@ -0,0 +1,6 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32">
+<title>ellipsis-vertical</title>
+<path d="M28.723 20c-2.206 0-4-1.794-4-4s1.794-4 4-4c2.206 0 4 1.794 4 4s-1.794 4-4 4zM28.723 14c-1.103 0-2 0.897-2 2s0.897 2 2 2c1.103 0 2-0.897 2-2s-0.898-2-2-2z"></path>
+<path d="M16.375 20c-2.206 0-4-1.794-4-4s1.794-4 4-4c2.206 0 4 1.794 4 4s-1.794 4-4 4zM16.375 14c-1.103 0-2 0.897-2 2s0.897 2 2 2c1.103 0 2-0.897 2-2s-0.897-2-2-2z"></path>
+<path d="M4.027 20c-2.206 0-4-1.794-4-4s1.794-4 4-4c2.206 0 4 1.794 4 4s-1.794 4-4 4zM4.027 14c-1.103 0-2 0.897-2 2s0.897 2 2 2c1.103 0 2-0.897 2-2s-0.897-2-2-2z"></path>
+</svg>

static/assets/icons/lock.svg

@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>lock</title>
+<path d="M27 12h-1v-2c0-5.514-4.486-10-10-10s-10 4.486-10 10v2h-1c-0.553 0-1 0.447-1 1v18c0 0.553 0.447 1 1 1h22c0.553 0 1-0.447 1-1v-18c0-0.553-0.447-1-1-1zM8 10c0-4.411 3.589-8 8-8s8 3.589 8 8v2h-16v-2zM26 30h-20v-16h20v16z"></path>
+<path d="M15 21.694v4.306h2v-4.306c0.587-0.348 1-0.961 1-1.694 0-1.105-0.895-2-2-2s-2 0.895-2 2c0 0.732 0.413 1.345 1 1.694z"></path>
+</svg>

static/assets/icons/remove.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>remove</title>
+<path d="M27.314 6.019l-1.333-1.333-9.98 9.981-9.981-9.981-1.333 1.333 9.981 9.981-9.981 9.98 1.333 1.333 9.981-9.98 9.98 9.98 1.333-1.333-9.98-9.98 9.98-9.981z"></path>
+</svg>

static/assets/icons/search.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>search</title>
+<path d="M32 30.586l-10.845-10.845c1.771-2.092 2.845-4.791 2.845-7.741 0-6.617-5.383-12-12-12s-12 5.383-12 12c0 6.617 5.383 12 12 12 2.949 0 5.649-1.074 7.741-2.845l10.845 10.845 1.414-1.414zM12 22c-5.514 0-10-4.486-10-10s4.486-10 10-10c5.514 0 10 4.486 10 10s-4.486 10-10 10z"></path>
+</svg>

static/assets/icons/sign-out.svg

@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>sign-out</title>
+<path d="M3 0h22c0.553 0 1 0 1 0.553l-0 3.447h-2v-2h-20v28h20v-2h2l0 3.447c0 0.553-0.447 0.553-1 0.553h-22c-0.553 0-1-0.447-1-1v-30c0-0.553 0.447-1 1-1z"></path>
+<path d="M21.879 21.293l1.414 1.414 6.707-6.707-6.707-6.707-1.414 1.414 4.293 4.293h-14.172v2h14.172l-4.293 4.293z"></path>
+</svg>

static/assets/icons/tools.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tools</title>
+<path d="M27.465 32c-1.211 0-2.35-0.471-3.207-1.328l-9.392-9.391c-2.369 0.898-4.898 0.951-7.355 0.15-3.274-1.074-5.869-3.67-6.943-6.942-0.879-2.682-0.734-5.45 0.419-8.004 0.135-0.299 0.408-0.512 0.731-0.572 0.32-0.051 0.654 0.045 0.887 0.277l5.394 5.395 3.586-3.586-5.394-5.395c-0.232-0.232-0.336-0.564-0.276-0.887s0.272-0.596 0.572-0.732c2.552-1.152 5.318-1.295 8.001-0.418 3.274 1.074 5.869 3.67 6.943 6.942 0.806 2.457 0.752 4.987-0.15 7.358l9.392 9.391c0.844 0.842 1.328 2.012 1.328 3.207-0 2.5-2.034 4.535-4.535 4.535zM15.101 19.102c0.26 0 0.516 0.102 0.707 0.293l9.864 9.863c0.479 0.479 1.116 0.742 1.793 0.742 1.398 0 2.535-1.137 2.535-2.535 0-0.668-0.27-1.322-0.742-1.793l-9.864-9.863c-0.294-0.295-0.376-0.74-0.204-1.119 0.943-2.090 1.061-4.357 0.341-6.555-0.863-2.631-3.034-4.801-5.665-5.666-1.713-0.561-3.468-0.609-5.145-0.164l4.986 4.988c0.391 0.391 0.391 1.023 0 1.414l-5 5c-0.188 0.188-0.441 0.293-0.707 0.293s-0.52-0.105-0.707-0.293l-4.987-4.988c-0.45 1.682-0.397 3.436 0.164 5.146 0.863 2.631 3.034 4.801 5.665 5.666 2.2 0.721 4.466 0.604 6.555-0.342 0.132-0.059 0.271-0.088 0.411-0.088z"></path>
+</svg>

static/assets/icons/user-group.svg

@@ -0,0 +1,7 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user-group</title>
+<path d="M30.539 20.766c-2.69-1.547-5.75-2.427-8.92-2.662 0.649 0.291 1.303 0.575 1.918 0.928 0.715 0.412 1.288 1.005 1.71 1.694 1.507 0.419 2.956 1.003 4.298 1.774 0.281 0.162 0.456 0.487 0.456 0.85v4.65h-4v2h5c0.553 0 1-0.447 1-1v-5.65c0-1.077-0.56-2.067-1.461-2.584z"></path>
+<path d="M22.539 20.766c-6.295-3.619-14.783-3.619-21.078 0-0.901 0.519-1.461 1.508-1.461 2.584v5.65c0 0.553 0.447 1 1 1h22c0.553 0 1-0.447 1-1v-5.651c0-1.075-0.56-2.064-1.461-2.583zM22 28h-20v-4.65c0-0.362 0.175-0.688 0.457-0.85 5.691-3.271 13.394-3.271 19.086 0 0.282 0.162 0.457 0.487 0.457 0.849v4.651z"></path>
+<path d="M19.502 4.047c0.166-0.017 0.33-0.047 0.498-0.047 2.757 0 5 2.243 5 5s-2.243 5-5 5c-0.168 0-0.332-0.030-0.498-0.047-0.424 0.641-0.944 1.204-1.513 1.716 0.651 0.201 1.323 0.331 2.011 0.331 3.859 0 7-3.141 7-7s-3.141-7-7-7c-0.688 0-1.36 0.131-2.011 0.331 0.57 0.512 1.089 1.075 1.513 1.716z"></path>
+<path d="M12 16c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.859 0-7 3.141-7 7s3.141 7 7 7zM12 4c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5c0-2.757 2.243-5 5-5z"></path>
+</svg>

static/assets/icons/user.svg

@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user</title>
+<path d="M16 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8c0 4.411-3.589 8-8 8zM16 2c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6c0-3.309-2.691-6-6-6z"></path>
+<path d="M29 32h-26c-0.553 0-1-0.447-1-1v-6.884c0-1.033 0.528-2.004 1.378-2.535 7.51-4.685 17.741-4.684 25.243-0.001 0.851 0.532 1.379 1.503 1.379 2.536v6.884c0 0.553-0.447 1-1 1zM4 30h24v-5.884c0-0.349-0.168-0.671-0.439-0.84-6.866-4.286-16.252-4.289-23.124 0.001-0.27 0.168-0.438 0.49-0.438 0.839l-0 5.884z"></path>
+</svg>

static/assets/logo.svg

@@ -0,0 +1,12 @@
+<svg width="512" height="481" viewBox="0 0 512 481" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M255.996 90.086C280.873 90.086 301.039 69.9196 301.039 45.043C301.039 20.1664 280.873 0 255.996 0C231.119 0 210.953 20.1664 210.953 45.043C210.953 69.9196 231.119 90.086 255.996 90.086Z" fill="#57BBDD"/>
+<path d="M329.101 61.5769C321.53 95.0169 291.697 120.115 256.001 120.115C220.305 120.115 190.472 95.0169 182.901 61.5769C156.05 67.5599 135.886 91.4829 135.886 120.115V180.173C135.886 196.727 149.361 210.202 165.915 210.202C182.469 210.202 195.944 196.727 195.944 180.173V150.144H316.059V180.173C316.059 196.727 329.534 210.202 346.088 210.202C362.642 210.202 376.117 196.727 376.117 180.173V120.115C376.116 91.4829 355.951 67.5599 329.101 61.5769Z" fill="#57BBDD"/>
+<path d="M488.717 366.953C467.172 354.514 439.625 361.894 427.186 383.439C414.748 404.982 422.129 432.531 443.674 444.968C465.217 457.407 493.767 450.025 506.204 428.482C518.643 406.938 510.26 379.391 488.717 366.953Z" fill="#57BBDD"/>
+<path d="M461.237 264.402L409.227 234.373C394.89 226.096 376.484 231.028 368.207 245.365C359.93 259.702 364.862 278.108 379.199 286.385L405.205 301.399L345.147 405.422L319.141 390.408C304.804 382.131 286.398 387.063 278.121 401.4C269.844 415.737 274.776 434.143 289.113 442.42L341.123 472.449C365.921 486.765 396.721 481.263 415.326 461.001C390.152 437.725 383.332 399.34 401.18 368.425C419.028 337.51 455.68 324.225 488.426 334.387C496.671 308.144 486.035 278.718 461.237 264.402Z" fill="#57BBDD"/>
+<path d="M84.8149 383.44C72.3759 361.895 44.8289 354.514 23.2839 366.954C1.74086 379.392 -6.64314 406.939 5.79686 428.484C18.2339 450.027 46.7839 457.409 68.3269 444.97C89.8719 432.531 97.2529 404.983 84.8149 383.44Z" fill="#57BBDD"/>
+<path d="M233.88 401.4C225.603 387.063 207.196 382.132 192.86 390.408L166.854 405.422L106.796 301.399L132.802 286.385C147.139 278.108 152.07 259.701 143.794 245.365C135.517 231.028 117.11 226.097 102.774 234.373L50.7638 264.402C25.9658 278.718 15.3298 308.144 23.5758 334.388C56.3208 324.225 92.9738 337.511 110.822 368.426C128.67 399.341 121.85 437.725 96.6758 461.002C115.281 481.263 146.081 486.766 170.879 472.45L222.889 442.42C237.225 434.143 242.157 415.736 233.88 401.4Z" fill="#57BBDD"/>
+<path d="M305.286 326.641V240.945L302.016 241.219C288.902 242.303 276.04 245.438 263.898 250.511L258.143 252.9V338.257L262.334 336.515C274.898 331.287 288.201 328.053 301.763 326.927L305.286 326.641Z" fill="#57BBDD"/>
+<path d="M316 253.614H309.571V328.614C309.576 329.731 308.719 330.665 307.604 330.757L302.116 331.207C300.532 331.338 298.952 331.5 297.379 331.693C296.868 331.755 296.361 331.837 295.853 331.908C294.792 332.049 293.733 332.192 292.678 332.36C292.062 332.458 291.451 332.573 290.838 332.681C289.893 332.846 288.946 333.011 288.004 333.197C287.36 333.326 286.718 333.47 286.062 333.609C285.164 333.8 284.266 333.994 283.375 334.207C282.706 334.366 282.04 334.534 281.375 334.704C280.508 334.918 279.645 335.149 278.782 335.39C278.112 335.574 277.441 335.769 276.773 335.965C275.916 336.219 275.071 336.476 274.225 336.746C273.562 336.96 272.899 337.175 272.239 337.388C271.391 337.674 270.548 337.969 269.708 338.274C269.065 338.507 268.422 338.741 267.765 338.987C267.471 339.099 267.179 339.218 266.886 339.332H316V253.614Z" fill="#57BBDD"/>
+<path d="M209.984 241.219L206.714 240.945V326.647L210.517 326.97C224.07 328.103 237.362 331.357 249.905 336.613L253.857 338.257V252.9L248.107 250.513C235.965 245.439 223.1 242.303 209.984 241.219Z" fill="#57BBDD"/>
+<path d="M196 253.614V339.328H245.149C244.885 339.225 244.621 339.114 244.355 339.015C243.742 338.782 243.124 338.559 242.507 338.334C241.636 338.018 240.767 337.711 239.89 337.417C239.256 337.202 238.62 336.994 237.982 336.791C237.113 336.505 236.24 336.236 235.367 335.985C234.723 335.797 234.081 335.608 233.438 335.428C232.557 335.184 231.674 334.953 230.789 334.726C230.146 334.56 229.503 334.395 228.846 334.241C227.948 334.027 227.045 333.83 226.143 333.636C225.501 333.497 224.857 333.356 224.215 333.227C223.28 333.043 222.342 332.878 221.403 332.713C220.788 332.606 220.173 332.499 219.557 332.389C218.521 332.225 217.482 332.086 216.443 331.945C215.918 331.875 215.397 331.792 214.872 331.732C213.301 331.542 211.729 331.379 210.158 331.246L204.389 330.757C203.277 330.662 202.424 329.729 202.428 328.614V253.614H196Z" fill="#57BBDD"/>
+</svg>