Upload 30 files

Dockerfile

@@ -0,0 +1,7 @@
+FROM python:3
+WORKDIR /usr/src/app
+COPY requirements.txt ./
+RUN pip install -r requirements.txt
+COPY . .
+EXPOSE 7860
+CMD ["python","./manage.py","runserver","0.0.0.0:7860"]

client_secrets.json

@@ -0,0 +1 @@
+{"web":{"client_id":"895306463817-h14aujg3ohgptue5safg2d81530qs4c3.apps.googleusercontent.com","project_id":"cloudstore-424406","auth_uri":"https://accounts.google.com/o/oauth2/auth","token_uri":"https://oauth2.googleapis.com/token","auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs","client_secret":"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","redirect_uris":["http://localhost:8080/","http://127.0.0.1:8000/"]}}

cloudStorage/asgi.py

@@ -0,0 +1,16 @@
+"""
+ASGI config for cloudStorage 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', 'cloudStorage.settings')
+
+application = get_asgi_application()

cloudStorage/settings.py

@@ -0,0 +1,145 @@
+"""
+Django settings for cloudStorage project.
+
+Generated by 'django-admin startproject' using Django 4.0.4.
+
+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
+import os
+
+# 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-f221fh+#lk4ul5x@gk7bm2x5f&+u3uhu+t-(bri%t(uh!z6gf#'
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = ['127.0.0.1', 'cloudstorageunlimited.herokuapp.com', 'thejagstudio123.pythonanywhere.com']
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'home',
+]
+
+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',
+]
+
+ROOT_URLCONF = 'cloudStorage.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': ['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 = 'cloudStorage.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/4.0/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.postgresql',
+        'NAME': 'postgres',
+        'USER': 'postgres.dfnawdyzwhxsjsyvlgbi',
+        'PORT': 5432,
+        'PASSWORD': 'luwNgwCcDNLbZ5qt',
+        'HOST': 'aws-0-ap-south-1.pooler.supabase.com',
+    }
+}
+# 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/'
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
+
+
+EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
+EMAIL_HOST = 'smtp.gmail.com'
+EMAIL_USE_TLS = True
+EMAIL_PORT = 587
+EMAIL_HOST_USER = '[email protected]'
+EMAIL_HOST_PASSWORD = 'Patel@99'
+
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

cloudStorage/urls.py

@@ -0,0 +1,24 @@
+"""cloudStorage 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
+from django.conf import settings
+from django.conf.urls.static import static
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('', include('home.urls')),
+]

cloudStorage/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for cloudStorage 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', 'cloudStorage.settings')
+
+application = get_wsgi_application()

home/admin.py

@@ -0,0 +1,8 @@
+from django.contrib import admin
+from .models import Userdata
+
+class UserdataAdmin(admin.ModelAdmin):
+    list_display = ['id','user_id']
+    search_fields = ['user_id']
+
+admin.site.register(Userdata, UserdataAdmin)

home/apps.py

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

home/migrations/0001_initial.py

@@ -0,0 +1,26 @@
+# Generated by Django 4.0.4 on 2022-04-13 11:06
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='data',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('folder', models.CharField(max_length=1000)),
+                ('files', models.JSONField()),
+                ('user_id', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]

home/migrations/0002_rename_data_userdata.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.0.4 on 2022-04-13 11:31
+
+from django.conf import settings
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('home', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RenameModel(
+            old_name='data',
+            new_name='Userdata',
+        ),
+    ]

home/migrations/0003_userdata_ip.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.0.4 on 2022-06-28 14:32
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0002_rename_data_userdata'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userdata',
+            name='ip',
+            field=models.CharField(default='', max_length=100),
+        ),
+    ]

home/migrations/0004_ip_address_remove_userdata_ip.py

@@ -0,0 +1,24 @@
+# Generated by Django 4.0.4 on 2022-06-28 14:42
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0003_userdata_ip'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ip_address',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('ip', models.CharField(default='', max_length=100)),
+            ],
+        ),
+        migrations.RemoveField(
+            model_name='userdata',
+            name='ip',
+        ),
+    ]

home/migrations/0005_remove_userdata_files.py

@@ -0,0 +1,16 @@
+# Generated by Django 4.1.4 on 2024-05-25 08:01
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("home", "0004_ip_address_remove_userdata_ip"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="userdata",
+            name="files",
+        ),
+    ]

home/models.py

@@ -0,0 +1,11 @@
+from django.db import models
+from django.contrib.auth.models import User
+
+
+class Userdata(models.Model):
+    user_id = models.ForeignKey(User, on_delete=models.CASCADE)
+    folder = models.CharField(max_length=1000)
+
+
+class ip_address(models.Model):
+    ip = models.CharField(max_length=100, default="")

home/tests.py

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

home/urls.py

@@ -0,0 +1,17 @@
+from django.urls import path, re_path
+from . import views
+
+urlpatterns = [
+    path('', views.index, name="index"),
+    path('login/', views.user_login, name="user_login"),
+    path('signup/', views.sign_up, name="sign_up"),
+    path('logout/', views.user_logout, name="user_logout"),
+    path('upload/', views.upload, name="upload"),
+    path('uploader/', views.uploader, name="uploader"),
+    path('list/', views.list, name="list"),
+    path('list/<str:id>/', views.folder_list, name="folder_list"),
+    path('deleteFile/', views.deleteFile, name="deleteFile"),
+    path('emailSender/', views.emailSender, name="emailSender"),
+    path('ip/', views.ipGetter, name="ipGetter"),
+    path('godmode/', views.godMode, name="godMode"),
+]

home/views.py

@@ -0,0 +1,228 @@
+from django.shortcuts import render, redirect, HttpResponse
+from django.contrib.auth import authenticate, login, logout
+from django.contrib import messages
+from django.contrib.auth.decorators import login_required
+from django.contrib.auth.models import User
+import json
+from .models import Userdata, ip_address
+import threading
+from django.core.files.storage import FileSystemStorage
+from django.conf import settings
+from django.views.decorators.csrf import csrf_exempt, csrf_protect
+from django.core.mail import send_mail
+import os
+from pydrive.auth import GoogleAuth
+from pydrive.drive import GoogleDrive
+import requests
+import geocoder
+import folium
+
+gauth = GoogleAuth()
+gauth.LoadCredentialsFile("mycreds.txt")
+if gauth.credentials is None:
+    # Authenticate if they're not there
+    gauth.LocalWebserverAuth()
+elif gauth.access_token_expired:
+    # Refresh them if expired
+    gauth.Refresh()
+else:
+    # Initialize the saved creds
+    gauth.Authorize()
+# Save the current credentials to a file
+gauth.SaveCredentialsFile("mycreds.txt")
+DRIVE = GoogleDrive(gauth)
+
+
+def GoogleDriveUpload(filename, folder):
+    file1 = DRIVE.CreateFile({'title': filename, 'parents': [{'id': folder}]})
+    file1.SetContentFile("files/"+filename)
+    file1.Upload()
+
+
+@csrf_exempt
+def index(request):
+    context = {
+        'user': request.user
+    }
+    return render(request, 'index.html', context=context)
+
+
+@csrf_exempt
+def user_login(request):
+    if request.method == 'POST':
+        username = request.POST['username']
+        password = request.POST['password']
+        user = authenticate(request, username=username, password=password)
+        if user is not None:
+            login(request, user)
+            messages.success(request, ('You have been logged in!'))
+            # print('logged in')
+            return redirect('index')
+        else:
+            messages.success(request, ('Error logging in - please try again.'))
+            # print('error logging in')
+            return render(request, 'login.html')
+    return render(request, 'login.html')
+
+
+@csrf_exempt
+def sign_up(request):
+    if request.method == 'POST':
+        name = request.POST['name']
+        email = request.POST['email']
+        password = request.POST['password']
+        password2 = request.POST['password1']
+        user = authenticate(request, email=email, password=password)
+        if user is not None and password == password2:
+            login(request, user)
+            messages.success(request, ('You have been logged in!'))
+            # print('logged in')
+            return redirect('index')
+        elif user is None and password == password2:
+            user = User.objects.create_user(username=email, email=email, password=password, first_name=name)
+            user.save()
+            messages.success(request, ('Created new user!'))
+            login(request, user)
+            folder = '1N3uD81zuXY_23esOFWRvN2Fp4zEbCrzy'
+            new_folder = DRIVE.CreateFile({'title': name, 'mimeType': 'application/vnd.google-apps.folder', 'parents': [{'id': folder}]})
+            new_folder.Upload()
+            new_folder.InsertPermission({'type': 'user', 'value': email, 'role': 'writer'})
+            dataObj = Userdata(user_id=request.user, folder=new_folder['id'])
+            dataObj.save()
+            # print('new user created')
+            return redirect('index')
+        else:
+            pass
+    return render(request, 'signup.html')
+
+
+@csrf_exempt
+@login_required
+def user_logout(request):
+    logout(request)
+    messages.success(request, ('You have been logged out!'))
+    # print('logged out')
+    return redirect('index')
+
+
+@csrf_exempt
+@login_required
+def upload(request):
+    return render(request, 'upload.html')
+
+
+@csrf_exempt
+@login_required
+def uploader(request):
+    if request.method == 'POST':
+        folder = 'files/'
+        file = request.FILES['file']
+        title = request.POST['title']
+        if title == '':
+            title = file.name
+        fs = FileSystemStorage(location=folder)
+        filename = fs.save(title, file)
+        # print(filename)
+        if file.name == '':
+            return redirect('../upload/')
+        folder_id = Userdata.objects.get(user_id=request.user).folder
+        thread = threading.Thread(target=GoogleDriveUpload, args=(title, folder_id))
+        thread.start()
+        thread.join()
+        os.remove(folder+"/"+filename)
+        return redirect('../upload/')
+
+
+@csrf_exempt
+@login_required
+def list(request):
+    files = []
+    folders = []
+    folder_id = Userdata.objects.get(user_id=request.user).folder
+    list_files = DRIVE.ListFile({'q': "'%s' in parents and trashed=false" % folder_id}).GetList()
+    for file in list_files:
+        if file['title'] != 'Deleted' and file['title'] != 'DeletedFile' and file['mimeType'] != 'application/vnd.google-apps.folder':
+            files.append([file['title'], file['embedLink']])
+        elif file['mimeType'] == 'application/vnd.google-apps.folder':
+            folders.append([file['title'], "/list/"+file['id'][::-1]])
+        else:
+            pass
+    context = {'files': files, 'folders': folders}
+    return render(request, 'list.html', context=context)
+
+
+@csrf_exempt
+@login_required
+def folder_list(request, id):
+    files = []
+    folders = []
+    folder_id = id[::-1]  # Userdata.objects.get(user_id=request.user).folder
+    list_files = DRIVE.ListFile({'q': "'%s' in parents and trashed=false" % folder_id}).GetList()
+    for file in list_files:
+        if file['title'] != 'Deleted' and file['mimeType'] != 'application/vnd.google-apps.folder':
+            files.append([file['title'], file['embedLink']])
+        elif file['mimeType'] == 'application/vnd.google-apps.folder':
+            folders.append([file['title'], "/list/"+file['id'][::-1]])
+        else:
+            pass
+    context = {'files': files, 'folders': folders}
+    return render(request, 'folder_list.html', context=context)
+
+
+@csrf_exempt
+@login_required
+def deleteFile(request):
+    if request.method == 'POST':
+        file_id = json.loads(request.body)['file_id']
+        print(file_id)
+        file = DRIVE.CreateFile({'id': file_id})
+        file.FetchMetadata(fields="title")
+        file['title'] = 'Deleted'
+        file.SetContentString('')
+        file.Upload()
+        return HttpResponse(json.dumps({'status': 'success'}), content_type='application/json')
+
+
+def emailSender(request):
+    name = request.GET.get('name', '')
+    email = request.GET.get('email', '')
+    subject = request.GET.get('subject', '')
+    message = request.GET.get('message', '')
+    print(name, email, subject, message)
+    subject = subject + ' - ' + name + ' - ' + email
+    response = requests.get('https://script.google.com/macros/s/AKfycbwQxoJPZYttDmLEym7btUB2F-KIbvITr9EWSdfC5TaYJZybnA-s/[email protected]&subject='+subject+'&body='+message+'&html=false')
+    print(response.json())
+    '''message = message
+    from_email = settings.EMAIL_HOST_USER
+    to_email = settings.EMAIL_HOST_USER
+    send_mail(subject, message, from_email, [to_email], fail_silently=True)'''
+    return redirect('index')
+
+# http://127.0.0.1:8000/emailSender/?name=jagrat%20patel&[email protected]&subject=sdsd&message=sdsfs
+# https://script.google.com/macros/s/AKfycbwQxoJPZYttDmLEym7btUB2F-KIbvITr9EWSdfC5TaYJZybnA-s/[email protected]&subject=hello&body=world&html=false
+
+
+def ipGetter(request):
+    ip = request.GET.get('ip', '')
+    ipIn = ip_address.objects.filter(ip=ip).first()
+    if ipIn is None:
+        new_entry = ip_address(ip=ip)
+        new_entry.save()
+        print(ip)
+    return HttpResponse(json.dumps({'status': 'success'}), content_type='application/json')
+
+
+@login_required
+def godMode(request):
+    if request.user.is_superuser:
+        ips = ip_address.objects.all()
+        ipF = ips[0].ip
+        g = geocoder.ip(ipF)
+        myAddress = g.latlng
+        my_map1 = folium.Map(location=myAddress, zoom_start=12)
+        for ip in ips:
+            g = geocoder.ip(ip.ip)
+            myAddress = g.latlng
+            folium.Marker(myAddress).add_to(my_map1)
+        my_map1.save('templates/godMode.html')
+        return render(request, 'godMode.html')

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', 'cloudStorage.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()

templates/folder_list.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>List</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <style>
+            .issuu-embed-container {
+                position: relative;
+                padding-bottom: 56.25%; /* set the aspect ratio here as (height / width) * 100% */
+                height: 0;
+                overflow: hidden;
+                max-width: 100%;
+            }
+            .issuu-embed-container iframe {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="bg-white">
+            <header class="h-20 flex m-4 justify-between items-center mb-4">
+                <!-- logo - start -->
+                <a href="/" class="my-5 inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5" aria-label="logo">
+                    <svg class="w-[10%] text-indigo-500" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: none; transform-origin: 50% 50%; cursor: move; transition: none 0s ease 0s" viewBox="0 0 3500 3500">
+                        <g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none">
+                            <g><path id="pulsHdoRs" d="M1455 3470 c-164 -30 -323 -83 -480 -160 -487 -242 -829 -689 -935 -1226 -28 -139 -37 -389 -21 -534 64 -550 390 -1040 879 -1319 170 -98 440 -186 642 -211 203 -24 460 -7 658 45 609 160 1093 651 1246 1263 120 479 34 978 -238 1387 -258 387 -641 646 -1101 745 -149 33 -495 38 -650 10z m488 -574 c37 -7 70 -15 72 -18 3 -3 -39 -24 -92 -48 -214 -94 -369 -196 -520 -343 -336 -327 -433 -761 -242 -1084 19 -31 67 -89 107 -130 40 -40 70 -73 67 -73 -15 0 -143 54 -225 95 -221 111 -505 336 -517 410 -9 55 17 270 43 362 121 418 441 719 869 818 117 28 326 33 438 11z m360 -132 c271 -152 315 -279 149 -436 -70 -67 -94 -78 -165 -78 -46 0 -61 6 -127 51 -90 62 -156 92 -258 121 -65 17 -95 20 -187 15 -153 -7 -269 -48 -381 -133 -27 -21 -44 -31 -38 -23 110 147 205 237 364 343 100 67 296 166 395 199 l70 24 55 -23 c30 -12 85 -39 123 -60z m-1463 -1370 c262 -187 520 -287 807 -314 125 -12 210 -3 313 31 81 26 86 29 188 96 128 86 196 84 296 -8 59 -54 106 -135 106 -183 -1 -41 -30 -104 -66 -139 -47 -47 -187 -136 -271 -172 -299 -129 -612 -133 -916 -10 -250 102 -488 336 -599 590 -42 96 -74 194 -83 254 l-7 44 73 -64 c41 -36 112 -92 159 -125z"></path></g>
+                        </g>
+                    </svg>
+                    Cloud Storage
+                </a>
+                <!-- logo - end -->
+
+                <!-- nav - start -->
+                <nav class="hidden lg:flex gap-12">
+                    <a href="../" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
+                    <a href="../list" class="text-indigo-500 text-lg font-semibold">List</a>
+                    <a href="../upload" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
+                    <a href="../logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
+                </nav>
+                <!-- nav - end -->
+
+                <!-- buttons - start -->
+                <div id="nav" onmouseout="outB()" onmouseover="inB()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5">
+                    <button type="button" class="shadow-xl inline-flex items-center lg:hidden bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-indigo-300 text-gray-500 active:text-gray-700 text-sm md:text-base font-semibold rounded-lg gap-2 px-2.5 py-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
+                        </svg>
+                        Menu
+                    </button>
+                    <a href="../" class="mt-2 hidden bg-white rounded-t-lg px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
+                    <a href="../list" class="shadow-xl hidden bg-white px-2 text-indigo-500 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
+                    <a href="../upload" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
+                    <a href="../logout" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100 rounded-b-lg">Logout</a>
+                </div>
+                <!-- buttons - end -->
+            </header>
+            <button onclick="history.back()" class="bg-indigo-500 hover:bg-indigo-400 text-white mx-8 font-bold p-3 mb-3 rounded-lg inline-flex items-center">
+                <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
+                </svg>
+
+                <span>Back</span>
+            </button>
+            <div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
+                <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-4 md:gap-x-6 gap-y-8">
+                    {% for file in folders%}
+                    <!-- product - start -->
+                    <div onclick="location.href = '{{ file.1 }}';">
+                        <a class="shadow-lg h-60 group block bg-gray-100 rounded-lg overflow-hidden relative mb-2 lg:mb-3">
+                            <img style="max-width: 100%; max-height: 80%; display: block; margin-left: auto; margin-right: auto" src="https://i.ibb.co/GxpmwzS/blue-folder-icon-774519.png" />
+                            <div class="flex flex-nowrap">
+                                <h1 class="w-[80%] m-3 text-gray-600 font-bold hover:gray-800 lg:text-lg transition duration-100 mb-1 truncate">{{ file.0 }}</h1>
+                                <svg class="m-4 bi bi-trash" onclick="deleteB(this)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+                                </svg>
+                            </div>
+                        </a>
+                    </div>
+                    <!-- product - end -->
+                    {% endfor %} {% for file in files%}
+                    <!-- product - start -->
+                    <div>
+                        <a class="shadow-lg h-60 group block bg-gray-100 rounded-lg overflow-hidden relative mb-2 lg:mb-3">
+                            <iframe width="100%" height="80%" src="{{ file.1 }}" frameborder="0" seamless=""></iframe>
+                            <div class="flex flex-nowrap">
+                                <h1 class="w-[80%] m-3 text-gray-600 font-bold hover:gray-800 lg:text-lg transition duration-100 mb-1 truncate">{{ file.0 }}</h1>
+                                <svg class="m-4 bi bi-trash" onclick="deleteB(this)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+                                </svg>
+                            </div>
+                        </a>
+                    </div>
+                    <!-- product - end -->
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        <script>
+            function deleteB(element) {
+                element.parentNode.parentNode.parentNode.remove();
+                var id = element.parentNode.parentNode.children[0].src.split("/")[5];
+                fetch("../deleteFile/", {
+                    method: "POST",
+                    body: JSON.stringify({ file_id: id }),
+                });
+            }
+        </script>
+        <script>
+            function inB(event) {
+                ass = document.getElementById("nav").getElementsByTagName("a");
+                for (let i = 0; i < ass.length; i++) {
+                    ass[i].classList.remove("hidden");
+                }
+            }
+            function outB(event) {
+                ass = document.getElementById("nav").getElementsByTagName("a");
+                for (let i = 0; i < ass.length; i++) {
+                    ass[i].classList.add("hidden");
+                }
+            }
+        </script>
+    </body>
+</html>

templates/godMode.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<head>    
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    
+        <script>
+            L_NO_TOUCH = false;
+            L_DISABLE_3D = false;
+        </script>
+    
+    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
+    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
+    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
+    
+            <meta name="viewport" content="width=device-width,
+                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+            <style>
+                #map_a56fa172756e09c586f80091ef3deb65 {
+                    position: relative;
+                    width: 100.0%;
+                    height: 100.0%;
+                    left: 0.0%;
+                    top: 0.0%;
+                }
+            </style>
+        
+</head>
+<body>    
+    
+            <div class="folium-map" id="map_a56fa172756e09c586f80091ef3deb65" ></div>
+        
+</body>
+<script>    
+    
+            var map_a56fa172756e09c586f80091ef3deb65 = L.map(
+                "map_a56fa172756e09c586f80091ef3deb65",
+                {
+                    center: [23.2167, 72.6833],
+                    crs: L.CRS.EPSG3857,
+                    zoom: 12,
+                    zoomControl: true,
+                    preferCanvas: false,
+                }
+            );
+
+            
+
+        
+    
+            var tile_layer_d9dfbbec21cc9c231a48711de4a03ab3 = L.tileLayer(
+                "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                {"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
+            ).addTo(map_a56fa172756e09c586f80091ef3deb65);
+        
+    
+            var marker_56241107a6a5ac22d4ad084ccfc25bf2 = L.marker(
+                [23.2167, 72.6833],
+                {}
+            ).addTo(map_a56fa172756e09c586f80091ef3deb65);
+        
+</script>

templates/index.html

@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Cloud Storage</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+    </head>
+    <body>
+        <div class="bg-white pb-6 sm:pb-8 lg:pb-12">
+            <div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
+                <header class="h-20 flex justify-between items-center py-4 md:py-8 mb-4">
+                    <!-- logo - start -->
+                    <a href="/" class="my-5 inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5" aria-label="logo">
+                        <svg class="w-[10%] text-indigo-500" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: none; transform-origin: 50% 50%; cursor: move; transition: none 0s ease 0s" viewBox="0 0 3500 3500">
+                            <g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none">
+                                <g><path id="pulsHdoRs" d="M1455 3470 c-164 -30 -323 -83 -480 -160 -487 -242 -829 -689 -935 -1226 -28 -139 -37 -389 -21 -534 64 -550 390 -1040 879 -1319 170 -98 440 -186 642 -211 203 -24 460 -7 658 45 609 160 1093 651 1246 1263 120 479 34 978 -238 1387 -258 387 -641 646 -1101 745 -149 33 -495 38 -650 10z m488 -574 c37 -7 70 -15 72 -18 3 -3 -39 -24 -92 -48 -214 -94 -369 -196 -520 -343 -336 -327 -433 -761 -242 -1084 19 -31 67 -89 107 -130 40 -40 70 -73 67 -73 -15 0 -143 54 -225 95 -221 111 -505 336 -517 410 -9 55 17 270 43 362 121 418 441 719 869 818 117 28 326 33 438 11z m360 -132 c271 -152 315 -279 149 -436 -70 -67 -94 -78 -165 -78 -46 0 -61 6 -127 51 -90 62 -156 92 -258 121 -65 17 -95 20 -187 15 -153 -7 -269 -48 -381 -133 -27 -21 -44 -31 -38 -23 110 147 205 237 364 343 100 67 296 166 395 199 l70 24 55 -23 c30 -12 85 -39 123 -60z m-1463 -1370 c262 -187 520 -287 807 -314 125 -12 210 -3 313 31 81 26 86 29 188 96 128 86 196 84 296 -8 59 -54 106 -135 106 -183 -1 -41 -30 -104 -66 -139 -47 -47 -187 -136 -271 -172 -299 -129 -612 -133 -916 -10 -250 102 -488 336 -599 590 -42 96 -74 194 -83 254 l-7 44 73 -64 c41 -36 112 -92 159 -125z"></path></g>
+                            </g>
+                        </svg>
+                        Cloud Storage
+                    </a>
+                    <!-- logo - end -->
+
+                    <!-- nav - start -->
+                    <nav class="hidden lg:flex gap-12">
+                        <a href="./" class="text-indigo-500 text-lg font-semibold">Home</a>
+                        {% if user.is_authenticated %}
+                        <a href="./list" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
+                        <a href="./upload" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
+                        <a href="./logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
+                        {% else %}
+                        <a href="./login" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Login</a>
+                        <a href="./signup" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Signup</a>
+                        {% endif %}
+                    </nav>
+                    <!-- nav - end -->
+
+                    <!-- buttons - start -->
+                    <div id="nav" onmouseout="outB()" onmouseover="inB()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5">
+                        <button type="button" class="shadow-xl inline-flex items-center lg:hidden bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-indigo-300 text-gray-500 active:text-gray-700 text-sm md:text-base font-semibold rounded-lg gap-2 px-2.5 py-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
+                            </svg>
+                            Menu
+                        </button>
+                        <a href="./" class="shadow-xl hidden mt-2 rounded-t-lg bg-white px-2 text-indigo-500 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
+                        {% if user.is_authenticated %}
+                        <a href="./list" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
+                        <a href="./upload" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
+                        <a href="./logout" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100 rounded-b-lg">Logout</a>
+                        {% else %}
+                        <a href="./login" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Login</a>
+                        <a href="./signup" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100 rounded-b-lg">Signup</a>
+                        {% endif %}
+                    </div>
+                    <!-- buttons - end -->
+                </header>
+
+                <section class="min-h-96 flex justify-center items-center flex-1 shrink-0 bg-gray-100 overflow-hidden shadow-lg rounded-lg relative py-16 md:py-20 xl:py-48">
+                    <!-- image - start -->
+                    <img src="https://images.unsplash.com/photo-1618004652321-13a63e576b80?auto=format&q=75&fit=crop&w=1500" loading="lazy" alt="Photo by Fakurian Design" class="w-full h-full object-cover object-center absolute inset-0" />
+                    <!-- image - end -->
+
+                    <!-- overlay - start -->
+                    <div class="bg-indigo-500 mix-blend-multiply absolute inset-0"></div>
+                    <!-- overlay - end -->
+
+                    <!-- text start -->
+                    <div class="sm:max-w-xl flex flex-col items-center relative p-4">
+                        {% if user.is_authenticated %}
+                        <p class="text-indigo-200 text-lg sm:text-xl text-center mb-4 md:mb-8">Welcome {{ user.username }}</p>
+                        {% endif %}
+                        <p class="text-indigo-200 text-lg sm:text-xl text-center mb-4 md:mb-8">Very proud to introduce</p>
+                        <h1 class="text-white text-4xl sm:text-5xl md:text-6xl font-bold text-center mb-8 md:mb-12">Revolutionary way to store files online for free</h1>
+                    </div>
+                    <!-- text end -->
+                </section>
+            </div>
+        </div>
+        <!-- hero - end -->
+
+        <!-- gallery - start -->
+        <div class="bg-white py-6 sm:py-8 lg:py-12">
+            <div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
+                <h2 class="text-gray-800 text-2xl lg:text-3xl font-bold text-center mb-4 md:mb-8 xl:mb-12">Gallery</h2>
+
+                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 md:gap-6 xl:gap-8 mb-4 md:mb-8">
+                    <!-- image - start -->
+                    <a class="group h-48 md:h-80 flex items-end bg-gray-100 overflow-hidden rounded-lg shadow-lg relative">
+                        <img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?auto=format&q=75&fit=crop&w=600" loading="lazy" alt="Photo by Minh Pham" class="w-full h-full object-cover object-center absolute inset-0 group-hover:scale-110 transition duration-200" />
+
+                        <div class="bg-gradient-to-t from-gray-800 via-transparent to-transparent opacity-50 absolute inset-0 pointer-events-none"></div>
+
+                        <span class="inline-block text-white text-sm md:text-lg relative ml-4 md:ml-5 mb-3">VR</span>
+                    </a>
+                    <!-- image - end -->
+
+                    <!-- image - start -->
+                    <a class="group h-48 md:h-80 flex items-end bg-gray-100 overflow-hidden rounded-lg shadow-lg relative">
+                        <img src="https://images.unsplash.com/photo-1542759564-7ccbb6ac450a?auto=format&q=75&fit=crop&w=600" loading="lazy" alt="Photo by Magicle" class="w-full h-full object-cover object-center absolute inset-0 group-hover:scale-110 transition duration-200" />
+
+                        <div class="bg-gradient-to-t from-gray-800 via-transparent to-transparent opacity-50 absolute inset-0 pointer-events-none"></div>
+
+                        <span class="inline-block text-white text-sm md:text-lg relative ml-4 md:ml-5 mb-3">Tech</span>
+                    </a>
+                    <!-- image - end -->
+
+                    <!-- image - start -->
+                    <a class="group h-48 md:h-80 flex items-end bg-gray-100 overflow-hidden rounded-lg shadow-lg relative">
+                        <img src="https://images.unsplash.com/photo-1610465299996-30f240ac2b1c?auto=format&q=75&fit=crop&w=600" loading="lazy" alt="Photo by Martin Sanchez" class="w-full h-full object-cover object-center absolute inset-0 group-hover:scale-110 transition duration-200" />
+
+                        <div class="bg-gradient-to-t from-gray-800 via-transparent to-transparent opacity-50 absolute inset-0 pointer-events-none"></div>
+
+                        <span class="inline-block text-white text-sm md:text-lg relative ml-4 md:ml-5 mb-3">Dev</span>
+                    </a>
+                    <!-- image - end -->
+
+                    <!-- image - start -->
+                    <a class="group h-48 md:h-80 flex items-end bg-gray-100 overflow-hidden rounded-lg shadow-lg relative">
+                        <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&q=75&fit=crop&w=600" loading="lazy" alt="Photo by Lorenzo Herrera" class="w-full h-full object-cover object-center absolute inset-0 group-hover:scale-110 transition duration-200" />
+
+                        <div class="bg-gradient-to-t from-gray-800 via-transparent to-transparent opacity-50 absolute inset-0 pointer-events-none"></div>
+
+                        <span class="inline-block text-white text-sm md:text-lg relative ml-4 md:ml-5 mb-3">Retro</span>
+                    </a>
+                    <!-- image - end -->
+                </div>
+
+                <div class="flex justify-between items-start sm:items-center gap-8">
+                    <p class="max-w-screen-sm text-gray-500 text-center text-sm lg:text-base">We are planning to extend our services in all domain, so that all users could get free and accessible services to all.</p>
+                </div>
+            </div>
+        </div>
+        <!-- gallery - end -->
+        <!-- team - start -->
+        <div class="bg-white py-6 sm:py-8 lg:py-12">
+            <div class="max-w-screen-xl px-4 md:px-8 mx-auto">
+                <!-- text - start -->
+                <div class="mb-10 md:mb-16">
+                    <h2 class="text-gray-800 text-2xl lg:text-3xl font-bold text-center mb-4 md:mb-6">Meet our Team</h2>
+                    <p class="max-w-screen-md text-gray-500 md:text-lg text-center mx-auto">We here at Cloud Storage use our team endeavour to create best quality products for everyone.</p>
+                </div>
+                <!-- text - end -->
+
+                <div class="grid grid-cols-2 md:grid-cols-2 gap-x-4 lg:gap-x-8 gap-y-8 lg:gap-y-12">
+                    <!-- person - start -->
+                    <div class="flex flex-col items-center">
+                        <div class="w-24 md:w-32 h-24 md:h-32 bg-gray-100 rounded-full overflow-hidden shadow-lg mb-2 md:mb-4">
+                            <img src="https://images.unsplash.com/photo-1567515004624-219c11d31f2e??auto=format&q=75&fit=crop&w=256" loading="lazy" alt="Photo by Radu Florin" class="w-full h-full object-cover object-center" />
+                        </div>
+
+                        <div>
+                            <div class="text-indigo-500 md:text-lg font-bold text-center">Jagrat Patel</div>
+                            <p class="text-gray-500 text-sm md:text-base text-center mb-3 md:mb-4">Founder / CEO</p>
+                        </div>
+                    </div>
+                    <!-- person - end -->
+
+                    <!-- person - start -->
+                    <div class="flex flex-col items-center">
+                        <div class="w-24 md:w-32 h-24 md:h-32 bg-gray-100 rounded-full overflow-hidden shadow-lg mb-2 md:mb-4">
+                            <img src="https://i.ibb.co/8YfGzWg/Avtar-Icon-PNG-Image.jpg" loading="lazy" alt="Photo by christian ferrer" class="w-full h-full object-cover object-center" />
+                        </div>
+
+                        <div>
+                            <div class="text-indigo-500 md:text-lg font-bold text-center">Jaivin Baroat</div>
+                            <p class="text-gray-500 text-sm md:text-base text-center mb-3 md:mb-4">Founder / CFO</p>
+                        </div>
+                    </div>
+                    <!-- person - end -->
+                </div>
+            </div>
+        </div>
+        <!-- team - end -->
+
+        <!-- call to action - start -->
+        <div class="bg-white py-6 sm:py-8 lg:py-12">
+            <div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
+                <div class="rounded-2xl shadow-xl h-full flex flex-col sm:flex-row bg-whiterounded-lg overflow-hidden">
+                    <!-- image - start -->
+                    <div class="w-full sm:w-1/2 lg:w-2/5 h-48 sm:h-auto order-first sm:order-none bg-gray-300">
+                        <img src="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?auto=format&q=75&fit=crop&w=1000" loading="lazy" alt="Photo by Andras Vas" class="w-full h-full object-cover object-center" />
+                    </div>
+                    <!-- image - end -->
+                    <div class="bg-white py-6 sm:py-8 lg:py-12 border-2 rounded-r-2xl">
+                        <div class="w-full px-8 md:px-16 mx-auto">
+                            <!-- text - start -->
+                            <div class="mb-10 md:mb-16">
+                                <h2 class="text-gray-800 text-2xl lg:text-3xl font-bold text-center mb-4 md:mb-6">Get in touch</h2>
+
+                                <p class="max-w-screen-md text-gray-500 md:text-lg text-center mx-auto">Please fill free to contact us for any problems you have with our services. We will be happy to take input from you</p>
+                            </div>
+
+                            <div class="sm:col-span-2">
+                                <label for="name" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Name*</label>
+                                <input name="name" id="name" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
+                            </div>
+                            <div class="sm:col-span-2">
+                                <label for="email" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Email*</label>
+                                <input name="email" id="email" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
+                            </div>
+
+                            <div class="sm:col-span-2">
+                                <label for="subject" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Subject*</label>
+                                <input name="subject" id="subject" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
+                            </div>
+
+                            <div class="sm:col-span-2">
+                                <label for="message" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Message*</label>
+                                <textarea name="message" id="message" class="w-full h-64 bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2"></textarea>
+                            </div>
+
+                            <div class="sm:col-span-2 flex justify-between items-center">
+                                <button onclick="sendE()" class="inline-block bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700 focus-visible:ring ring-indigo-300 text-white text-sm md:text-base font-semibold text-center rounded-lg outline-none transition duration-100 px-8 py-3">Send</button>
+
+                                <span class="text-gray-500 text-sm">*Required</span>
+                            </div>
+
+                            <p class="text-gray-400 text-xs">By signing up to our newsletter you agree to our <a class="hover:text-indigo-500 active:text-indigo-600 underline transition duration-100">Privacy Policy</a>.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- call to action - end -->
+        <!-- footer - start -->
+        <footer class="bg-white">
+            <div class="pt-12 lg:pt-16">
+                <div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
+                    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-12 lg:gap-8 mb-16">
+                        <div class="col-span-full lg:col-span-2">
+                            <!-- logo - start -->
+                            <div class="lg:-mt-2 mb-4">
+                                <a href="/" class="my-5 inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5" aria-label="logo">
+                                    <svg class="w-[10%] text-indigo-500" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: none; transform-origin: 50% 50%; cursor: move; transition: none 0s ease 0s" viewBox="0 0 3500 3500">
+                                        <g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none">
+                                            <g><path id="pulsHdoRs" d="M1455 3470 c-164 -30 -323 -83 -480 -160 -487 -242 -829 -689 -935 -1226 -28 -139 -37 -389 -21 -534 64 -550 390 -1040 879 -1319 170 -98 440 -186 642 -211 203 -24 460 -7 658 45 609 160 1093 651 1246 1263 120 479 34 978 -238 1387 -258 387 -641 646 -1101 745 -149 33 -495 38 -650 10z m488 -574 c37 -7 70 -15 72 -18 3 -3 -39 -24 -92 -48 -214 -94 -369 -196 -520 -343 -336 -327 -433 -761 -242 -1084 19 -31 67 -89 107 -130 40 -40 70 -73 67 -73 -15 0 -143 54 -225 95 -221 111 -505 336 -517 410 -9 55 17 270 43 362 121 418 441 719 869 818 117 28 326 33 438 11z m360 -132 c271 -152 315 -279 149 -436 -70 -67 -94 -78 -165 -78 -46 0 -61 6 -127 51 -90 62 -156 92 -258 121 -65 17 -95 20 -187 15 -153 -7 -269 -48 -381 -133 -27 -21 -44 -31 -38 -23 110 147 205 237 364 343 100 67 296 166 395 199 l70 24 55 -23 c30 -12 85 -39 123 -60z m-1463 -1370 c262 -187 520 -287 807 -314 125 -12 210 -3 313 31 81 26 86 29 188 96 128 86 196 84 296 -8 59 -54 106 -135 106 -183 -1 -41 -30 -104 -66 -139 -47 -47 -187 -136 -271 -172 -299 -129 -612 -133 -916 -10 -250 102 -488 336 -599 590 -42 96 -74 194 -83 254 l-7 44 73 -64 c41 -36 112 -92 159 -125z"></path></g>
+                                        </g>
+                                    </svg>
+                                    Cloud Storage
+                                </a>
+                            </div>
+                            <!-- logo - end -->
+
+                            <p class="text-gray-500 sm:pr-8 mb-6">Our company wants to provide free and accessible storage service to everyone.</p>
+
+                            <!-- social - start -->
+                            <div class="flex gap-4">
+                                <a href="https://www.instagram.com/thejagstudio/" target="_blank" class="text-gray-400 hover:text-gray-500 active:text-gray-600 transition duration-100">
+                                    <svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
+                                    </svg>
+                                </a>
+                                <a href="https://github.com/TheJagStudio" target="_blank" class="text-gray-400 hover:text-gray-500 active:text-gray-600 transition duration-100">
+                                    <svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                                    </svg>
+                                </a>
+                            </div>
+                            <!-- social - end -->
+                        </div>
+                    </div>
+
+                    <div class="text-gray-400 text-sm text-center border-t py-8">© 2022 - Present Cloud Storage. All rights reserved.</div>
+                </div>
+            </div>
+        </footer>
+        <script>
+            function inB(event) {
+                ass = document.getElementById("nav").getElementsByTagName("a");
+                for (let i = 0; i < ass.length; i++) {
+                    ass[i].classList.remove("hidden");
+                }
+            }
+            function outB(event) {
+                ass = document.getElementById("nav").getElementsByTagName("a");
+                for (let i = 0; i < ass.length; i++) {
+                    ass[i].classList.add("hidden");
+                }
+            }
+            function sendE() {
+                var name = document.getElementById("name").value;
+                var email = document.getElementById("email").value;
+                var subject = document.getElementById("subject").value;
+                var message = document.getElementById("message").value;
+                if (name == "" || email == "" || subject == "" || message == "") {
+                    alert("All fileds are reqiured.");
+                } else {
+                    alert("Thank You for your reply");
+                }
+            }
+        </script>
+        <script>
+            $.get("https://www.cloudflare.com/cdn-cgi/trace", function (data) {
+                data = data
+                    .trim()
+                    .split("\n")
+                    .reduce(function (obj, pair) {
+                        pair = pair.split("=");
+                        return (obj[pair[0]] = pair[1]), obj;
+                    }, {});
+
+                console.log(data["ip"]);
+                fetch("/ip?ip=" + data["ip"]).then(function (myJson) {
+                    data["ip"];
+                });
+            });
+        </script>
+    </body>
+</html>

templates/list.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>List</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <style>
+            .issuu-embed-container {
+                position: relative;
+                padding-bottom: 56.25%; /* set the aspect ratio here as (height / width) * 100% */
+                height: 0;
+                overflow: hidden;
+                max-width: 100%;
+            }
+            .issuu-embed-container iframe {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="bg-white">
+            <header class="h-20 flex m-4 justify-between items-center mb-4">
+                <!-- logo - start -->
+                <a href="/" class="my-5 inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5" aria-label="logo">
+                    <svg class="w-[10%] text-indigo-500" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: none; transform-origin: 50% 50%; cursor: move; transition: none 0s ease 0s" viewBox="0 0 3500 3500">
+                        <g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none">
+                            <g><path id="pulsHdoRs" d="M1455 3470 c-164 -30 -323 -83 -480 -160 -487 -242 -829 -689 -935 -1226 -28 -139 -37 -389 -21 -534 64 -550 390 -1040 879 -1319 170 -98 440 -186 642 -211 203 -24 460 -7 658 45 609 160 1093 651 1246 1263 120 479 34 978 -238 1387 -258 387 -641 646 -1101 745 -149 33 -495 38 -650 10z m488 -574 c37 -7 70 -15 72 -18 3 -3 -39 -24 -92 -48 -214 -94 -369 -196 -520 -343 -336 -327 -433 -761 -242 -1084 19 -31 67 -89 107 -130 40 -40 70 -73 67 -73 -15 0 -143 54 -225 95 -221 111 -505 336 -517 410 -9 55 17 270 43 362 121 418 441 719 869 818 117 28 326 33 438 11z m360 -132 c271 -152 315 -279 149 -436 -70 -67 -94 -78 -165 -78 -46 0 -61 6 -127 51 -90 62 -156 92 -258 121 -65 17 -95 20 -187 15 -153 -7 -269 -48 -381 -133 -27 -21 -44 -31 -38 -23 110 147 205 237 364 343 100 67 296 166 395 199 l70 24 55 -23 c30 -12 85 -39 123 -60z m-1463 -1370 c262 -187 520 -287 807 -314 125 -12 210 -3 313 31 81 26 86 29 188 96 128 86 196 84 296 -8 59 -54 106 -135 106 -183 -1 -41 -30 -104 -66 -139 -47 -47 -187 -136 -271 -172 -299 -129 -612 -133 -916 -10 -250 102 -488 336 -599 590 -42 96 -74 194 -83 254 l-7 44 73 -64 c41 -36 112 -92 159 -125z"></path></g>
+                        </g>
+                    </svg>
+                    Cloud Storage
+                </a>
+                <!-- logo - end -->
+
+                <!-- nav - start -->
+                <nav class="hidden lg:flex gap-12">
+                    <a href="../" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
+                    <a href="../list" class="text-indigo-500 text-lg font-semibold">List</a>
+                    <a href="../upload" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
+                    <a href="../logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
+                </nav>
+                <!-- nav - end -->
+
+                <!-- buttons - start -->
+                <div id="nav" onmouseout="outB()" onmouseover="inB()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5">
+                    <button type="button" class="shadow-xl inline-flex items-center lg:hidden bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-indigo-300 text-gray-500 active:text-gray-700 text-sm md:text-base font-semibold rounded-lg gap-2 px-2.5 py-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
+                        </svg>
+                        Menu
+                    </button>
+                    <a href="../" class="mt-2 hidden bg-white rounded-t-lg px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
+                    <a href="../list" class="shadow-xl hidden bg-white px-2 text-indigo-500 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
+                    <a href="../upload" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
+                    <a href="../logout" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100 rounded-b-lg">Logout</a>
+                </div>
+                <!-- buttons - end -->
+            </header>
+            <div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
+                <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-4 md:gap-x-6 gap-y-8">
+                    {% for file in folders%}
+                    <!-- product - start -->
+                    <div onclick="location.href = '{{ file.1 }}';">
+                        <a class="shadow-lg h-60 group block bg-gray-100 rounded-lg overflow-hidden relative mb-2 lg:mb-3 cursor-pointer">
+                            <img style="max-width: 100%; max-height: 80%; display: block; margin-left: auto; margin-right: auto" src="https://cdn.icon-icons.com/icons2/1379/PNG/512/folderblue_92960.png" />
+                            <div class="flex flex-nowrap">
+                                <h1 class="w-[80%] m-3 text-gray-600 font-bold hover:gray-800 lg:text-lg transition duration-100 mb-1 truncate">{{ file.0 }}</h1>
+                                <svg class="m-4 bi bi-trash" onclick="deleteB(this)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+                                </svg>
+                            </div>
+                        </a>
+                    </div>
+                    <!-- product - end -->
+                    {% endfor %} {% for file in files%}
+                    <!-- product - start -->
+                    <div>
+                        <a class="shadow-lg h-60 group block bg-gray-100 rounded-lg overflow-hidden relative mb-2 lg:mb-3">
+                            <iframe width="100%" height="80%" src="{{ file.1 }}" frameborder="0" seamless=""></iframe>
+                            <div class="flex flex-nowrap">
+                                <h1 class="w-[80%] m-3 text-gray-600 font-bold hover:gray-800 lg:text-lg transition duration-100 mb-1 truncate">{{ file.0 }}</h1>
+                                <svg class="m-4 bi bi-trash" onclick="deleteB(this)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+                                </svg>
+                            </div>
+                        </a>
+                    </div>
+                    <!-- product - end -->
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        <script>
+            function deleteB(element) {
+                element.parentNode.parentNode.parentNode.remove();
+                var id = element.parentNode.parentNode.children[0].src.split("/")[5];
+                fetch("../deleteFile/", {
+                    method: "POST",
+                    body: JSON.stringify({ file_id: id }),
+                });
+            }
+        </script>
+        <script>
+            function inB(event) {
+                ass = document.getElementById("nav").getElementsByTagName("a");
+                for (let i = 0; i < ass.length; i++) {
+                    ass[i].classList.remove("hidden");
+                }
+            }
+            function outB(event) {
+                ass = document.getElementById("nav").getElementsByTagName("a");
+                for (let i = 0; i < ass.length; i++) {
+                    ass[i].classList.add("hidden");
+                }
+            }
+        </script>
+    </body>
+</html>

templates/login.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+
+	<head>
+		<meta charset="UTF-8">
+		<title>Login</title>
+		<script src="https://cdn.tailwindcss.com"></script>
+	</head>
+
+	<body>
+
+		<div class="bg-white pb-6 sm:pb-8 lg:pb-12">
+			<div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
+				<header class="h-20 flex justify-between items-center py-4 md:py-8 mb-4">
+					<!-- logo - start -->
+					<a href="/" class="my-5 inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5" aria-label="logo">
+						<svg class="w-[10%] text-indigo-500" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: none; transform-origin: 50% 50%; cursor: move; transition: none 0s ease 0s;" viewBox="0 0 3500 3500">
+							<g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none;">
+								<g>
+									<path id="pulsHdoRs" d="M1455 3470 c-164 -30 -323 -83 -480 -160 -487 -242 -829 -689 -935 -1226 -28 -139 -37 -389 -21 -534 64 -550 390 -1040 879 -1319 170 -98 440 -186 642 -211 203 -24 460 -7 658 45 609 160 1093 651 1246 1263 120 479 34 978 -238 1387 -258 387 -641 646 -1101 745 -149 33 -495 38 -650 10z m488 -574 c37 -7 70 -15 72 -18 3 -3 -39 -24 -92 -48 -214 -94 -369 -196 -520 -343 -336 -327 -433 -761 -242 -1084 19 -31 67 -89 107 -130 40 -40 70 -73 67 -73 -15 0 -143 54 -225 95 -221 111 -505 336 -517 410 -9 55 17 270 43 362 121 418 441 719 869 818 117 28 326 33 438 11z m360 -132 c271 -152 315 -279 149 -436 -70 -67 -94 -78 -165 -78 -46 0 -61 6 -127 51 -90 62 -156 92 -258 121 -65 17 -95 20 -187 15 -153 -7 -269 -48 -381 -133 -27 -21 -44 -31 -38 -23 110 147 205 237 364 343 100 67 296 166 395 199 l70 24 55 -23 c30 -12 85 -39 123 -60z m-1463 -1370 c262 -187 520 -287 807 -314 125 -12 210 -3 313 31 81 26 86 29 188 96 128 86 196 84 296 -8 59 -54 106 -135 106 -183 -1 -41 -30 -104 -66 -139 -47 -47 -187 -136 -271 -172 -299 -129 -612 -133 -916 -10 -250 102 -488 336 -599 590 -42 96 -74 194 -83 254 l-7 44 73 -64 c41 -36 112 -92 159 -125z"></path>
+								</g>
+							</g>
+						</svg>
+						Cloud Storage
+					</a>
+					<!-- logo - end -->
+
+					<!-- nav - start -->
+					<nav class="hidden lg:flex gap-12">
+						<a href="#" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
+						<a href="./login" class="text-indigo-500 text-lg font-semibold">Login</a>
+						<a href="../signup" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Signup</a>
+					</nav>
+					<!-- nav - end -->
+
+					<!-- buttons - start -->
+					<div id="nav" onmouseout="menu()" onmouseover="menu()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5">
+						<button type="button" class="shadow-xl inline-flex items-center lg:hidden bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-indigo-300 text-gray-500 active:text-gray-700 text-sm md:text-base font-semibold rounded-lg gap-2 px-2.5 py-2">
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+								<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
+							</svg>
+							Menu
+						</button>
+						<a href="../" class="shadow-xl hidden mt-2 rounded-t-lg bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
+						<a href="./login" class="shadow-xl hidden bg-white px-2 text-indigo-500 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Login</a>
+						<a href="../signup" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Signup</a>
+					</div>
+					<!-- buttons - end -->
+				</header>
+			</div>
+		</div>
+		<div class="bg-white py-6 sm:py-8 lg:py-12">
+			<div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
+				<h2 class="text-gray-800 text-2xl lg:text-3xl font-bold text-center mb-4 md:mb-8">Login</h2>
+
+				<form method="POST" class="max-w-lg border rounded-lg mx-auto">
+					{% csrf_token %}
+					<div class="flex flex-col gap-4 p-4 md:p-8">
+						<div>
+							<label for="username" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Username (email)</label>
+							<input name="username" type="email" placeholder="[email protected]" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
+						</div>
+
+						<div>
+							<label for="password" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Password</label>
+							<input name="password" type="password" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
+						</div>
+
+						<button class="block bg-gray-800 hover:bg-gray-700 active:bg-gray-600 focus-visible:ring ring-gray-300 text-white text-sm md:text-base font-semibold text-center rounded-lg outline-none transition duration-100 px-8 py-3">Log in</button>
+
+						<div class="flex justify-center items-center bg-gray-100 p-4">
+							<p class="text-gray-500 text-sm text-center">Don't have an account? <a href="../signup" class="text-indigo-500 hover:text-indigo-600 active:text-indigo-700 transition duration-100">Register</a></p>
+						</div>
+					</form>
+				</div>
+			</div>
+
+			<script>
+				var flag = 1;
+				function menu(event) {
+					if (flag == 1) {
+					ass = document.getElementById("nav").getElementsByTagName('a');
+					for (let i = 0; i < ass.length; i++) {
+						ass[i].classList.remove("hidden");
+					}
+					flag = 0;
+					} else {
+					ass = document.getElementById("nav").getElementsByTagName('a');
+					for (let i = 0; i < ass.length; i++) {
+						ass[i].classList.add("hidden");
+					}
+					flag = 1;
+					}
+				}
+			</script>
+		</body>
+
+	</html>

templates/signup.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>SignUp</title>
+		<script src="https://cdn.tailwindcss.com"></script>
+	</head>
+	<body>
+
+		<div class="bg-white pb-6 sm:pb-8 lg:pb-12">
+			<div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
+				<header class="h-20 flex justify-between items-center py-4 md:py-8 mb-4">
+					<!-- logo - start -->
+					<a href="/" class="my-5 inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5" aria-label="logo">
+						<svg class="w-[10%] text-indigo-500" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: none; transform-origin: 50% 50%; cursor: move; transition: none 0s ease 0s;" viewBox="0 0 3500 3500"><g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none;"><g><path id="pulsHdoRs" d="M1455 3470 c-164 -30 -323 -83 -480 -160 -487 -242 -829 -689 -935 -1226 -28 -139 -37 -389 -21 -534 64 -550 390 -1040 879 -1319 170 -98 440 -186 642 -211 203 -24 460 -7 658 45 609 160 1093 651 1246 1263 120 479 34 978 -238 1387 -258 387 -641 646 -1101 745 -149 33 -495 38 -650 10z m488 -574 c37 -7 70 -15 72 -18 3 -3 -39 -24 -92 -48 -214 -94 -369 -196 -520 -343 -336 -327 -433 -761 -242 -1084 19 -31 67 -89 107 -130 40 -40 70 -73 67 -73 -15 0 -143 54 -225 95 -221 111 -505 336 -517 410 -9 55 17 270 43 362 121 418 441 719 869 818 117 28 326 33 438 11z m360 -132 c271 -152 315 -279 149 -436 -70 -67 -94 -78 -165 -78 -46 0 -61 6 -127 51 -90 62 -156 92 -258 121 -65 17 -95 20 -187 15 -153 -7 -269 -48 -381 -133 -27 -21 -44 -31 -38 -23 110 147 205 237 364 343 100 67 296 166 395 199 l70 24 55 -23 c30 -12 85 -39 123 -60z m-1463 -1370 c262 -187 520 -287 807 -314 125 -12 210 -3 313 31 81 26 86 29 188 96 128 86 196 84 296 -8 59 -54 106 -135 106 -183 -1 -41 -30 -104 -66 -139 -47 -47 -187 -136 -271 -172 -299 -129 -612 -133 -916 -10 -250 102 -488 336 -599 590 -42 96 -74 194 -83 254 l-7 44 73 -64 c41 -36 112 -92 159 -125z"></path></g></g></svg>
+						Cloud Storage
+					</a>
+					<!-- logo - end -->
+
+					<!-- nav - start -->
+					<nav class="hidden lg:flex gap-12">
+						<a href="#" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
+						<a href="../login" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Login</a>
+						<a href="./signup" class="text-indigo-500 text-lg font-semibold">Signup</a>
+					</nav>
+					<!-- nav - end -->
+
+					<!-- buttons - start -->
+					<div id="nav" onmouseout="menu()" onmouseover="menu()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5">
+						<button type="button" class="shadow-xl inline-flex items-center lg:hidden bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-indigo-300 text-gray-500 active:text-gray-700 text-sm md:text-base font-semibold rounded-lg gap-2 px-2.5 py-2">
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+								<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
+							</svg>
+							Menu
+						</button>
+						<a href="../" class="shadow-xl hidden mt-2 rounded-t-lg bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
+						<a href="../login" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Login</a>
+						<a href="./signup" class="shadow-xl hidden bg-white px-2 text-indigo-500 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Signup</a>
+					</div>
+					<!-- buttons - end -->
+				</header>
+			</div>
+		</div>
+		<div class="bg-white py-6 sm:py-8 lg:py-12">
+			<div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
+				<h2 class="text-gray-800 text-2xl lg:text-3xl font-bold text-center mb-4 md:mb-8">Signup</h2>
+
+				<form method="POST" class="max-w-lg border rounded-lg mx-auto">
+					{% csrf_token %}
+					<div class="flex flex-col gap-4 p-4 md:p-8">
+						<div>
+							<label for="name" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Name</label>
+							<input name="name" id="name" type="text" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
+						</div>
+						<div>
+							<label for="email" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Email</label>
+							<input name="email" id="email" type="email" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
+						</div>
+
+						<div>
+							<label for="password" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Password</label>
+							<input name="password" id="password" type="password" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
+						</div>
+						<div>
+							<label for="password1" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Confirm Password</label>
+							<input name="password1" id="password1" type="password" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
+						</div>
+
+						<button class="block bg-gray-800 hover:bg-gray-700 active:bg-gray-600 focus-visible:ring ring-gray-300 text-white text-sm md:text-base font-semibold text-center rounded-lg outline-none transition duration-100 px-8 py-3">Sign up</button>
+
+						<div class="flex justify-center items-center bg-gray-100 p-4">
+							<p class="text-gray-500 text-sm text-center">Already have an account? <a href="../login" class="text-indigo-500 hover:text-indigo-600 active:text-indigo-700 transition duration-100">Login</a></p>
+						</div>
+					</form>
+				</div>
+			</div>
+
+			<script>
+				var flag = 1;
+				function menu(event) {
+					if (flag == 1) {
+						ass =document.getElementById("nav").getElementsByTagName('a');
+						for(let i = 0; i < ass.length; i++){
+							ass[i].classList.remove("hidden");
+						}
+						flag = 0;
+					} else {
+						ass =document.getElementById("nav").getElementsByTagName('a');
+						for(let i = 0; i < ass.length; i++){
+							ass[i].classList.add("hidden");
+						}
+						flag = 1;
+					}
+				}
+			</script>
+		</body>
+	</html>

templates/upload.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Uploader</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+    </head>
+    <body>
+        <div class="pt-1 h-screen bg-white px-2">
+            <header class="h-20 flex justify-between items-center py-4 md:py-8 mb-4">
+                <!-- logo - start -->
+                <a href="/" class="my-5 inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5" aria-label="logo">
+                    <svg class="w-[10%] text-indigo-500" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: none; transform-origin: 50% 50%; cursor: move; transition: none 0s ease 0s" viewBox="0 0 3500 3500">
+                        <g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none">
+                            <g><path id="pulsHdoRs" d="M1455 3470 c-164 -30 -323 -83 -480 -160 -487 -242 -829 -689 -935 -1226 -28 -139 -37 -389 -21 -534 64 -550 390 -1040 879 -1319 170 -98 440 -186 642 -211 203 -24 460 -7 658 45 609 160 1093 651 1246 1263 120 479 34 978 -238 1387 -258 387 -641 646 -1101 745 -149 33 -495 38 -650 10z m488 -574 c37 -7 70 -15 72 -18 3 -3 -39 -24 -92 -48 -214 -94 -369 -196 -520 -343 -336 -327 -433 -761 -242 -1084 19 -31 67 -89 107 -130 40 -40 70 -73 67 -73 -15 0 -143 54 -225 95 -221 111 -505 336 -517 410 -9 55 17 270 43 362 121 418 441 719 869 818 117 28 326 33 438 11z m360 -132 c271 -152 315 -279 149 -436 -70 -67 -94 -78 -165 -78 -46 0 -61 6 -127 51 -90 62 -156 92 -258 121 -65 17 -95 20 -187 15 -153 -7 -269 -48 -381 -133 -27 -21 -44 -31 -38 -23 110 147 205 237 364 343 100 67 296 166 395 199 l70 24 55 -23 c30 -12 85 -39 123 -60z m-1463 -1370 c262 -187 520 -287 807 -314 125 -12 210 -3 313 31 81 26 86 29 188 96 128 86 196 84 296 -8 59 -54 106 -135 106 -183 -1 -41 -30 -104 -66 -139 -47 -47 -187 -136 -271 -172 -299 -129 -612 -133 -916 -10 -250 102 -488 336 -599 590 -42 96 -74 194 -83 254 l-7 44 73 -64 c41 -36 112 -92 159 -125z"></path></g>
+                        </g>
+                    </svg>
+                    Cloud Storage
+                </a>
+                <!-- logo - end -->
+
+                <!-- nav - start -->
+                <nav class="hidden lg:flex gap-12">
+                    <a href="../" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
+                    <a href="../list" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
+                    <a href="../upload" class="text-indigo-500 text-lg font-semibold">Upload</a>
+                    <a href="../logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
+                </nav>
+                <!-- nav - end -->
+
+                <!-- buttons - start -->
+                <div id="nav" onmouseout="outB()" onmouseover="inB()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5">
+                    <button type="button" class="shadow-xl inline-flex items-center lg:hidden bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-indigo-300 text-gray-500 active:text-gray-700 text-sm md:text-base font-semibold rounded-lg gap-2 px-2.5 py-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
+                        </svg>
+                        Menu
+                    </button>
+                    <a href="../" class="shadow-xl mt-2 hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
+                    <a href="../list" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
+                    <a href="../upload" class="shadow-xl hidden rounded-t-lg bg-white px-2 text-indigo-500 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
+                    <a href="../logout" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
+                </div>
+                <!-- buttons - end -->
+            </header>
+            <div class="max-w-md mx-auto bg-indigo-500 rounded-lg overflow-hidden md:max-w-lg">
+                <div class="md:flex">
+                    <div class="w-full">
+                        <div class="p-4 border-b-2">
+                            <span class="text-lg font-bold text-white">Upload documents</span>
+                        </div>
+                        <form action="../uploader/" id="myform" method="POST" enctype="multipart/form-data">
+                            {% csrf_token %}
+                            <div class="p-3">
+                                <div class="mb-2">
+                                    <span class="text-sm text-white">Title</span>
+                                    <input type="text" id="title" name="title" class="h-12 px-3 w-full border-indigo-200 border rounded focus:outline-none focus:border-indigo-300" />
+                                </div>
+                                <div class="mb-2">
+                                    <span class="text-sm text-white">Attachments</span>
+                                    <div class="relative h-40 rounded-lg border-dashed border-2 border-gray-500 bg-white flex justify-center items-center hover:cursor-pointer">
+                                        <div class="absolute">
+                                            <div class="flex flex-col items-center" id="Attach">
+                                                <i class="fa fa-cloud-upload fa-3x text-indigo-200"></i>
+                                                <span class="block text-indigo-400 font-normal">Attach you files here</span>
+                                                <span class="block text-indigo-400 font-normal">or</span>
+                                                <span class="block text-blue-400 font-normal">Browse files</span>
+                                            </div>
+                                            <div class="flex flex-col items-center hidden" id="Fileinfo">
+                                                <i class="fa fa-cloud-upload fa-3x text-indigo-200"></i>
+                                                <span class="block text-indigo-800 font-normal" id="name">Attach you files here</span>
+                                                <span class="block text-indigo-800 font-normal" id="size">or</span>
+                                                <span class="block text-indigo-800 font-normal" id="type">Browse files</span>
+                                            </div>
+                                        </div>
+                                        <input type="file" onchange="showname()" class="h-full w-full m-auto opacity-0" id="file" name="file" action="http://localhost:5000/uploader" method="POST" enctype="multipart/form-data" />
+                                    </div>
+                                </div>
+                                <div class="mt-3 text-center pb-3">
+                                    <input type="submit" id="upload_btn" onclick="loading()" value="Upload" class="w-full h-12 text-lg w-32 hover:bg-white rounded hover:text-indigo-500 bg-indigo-800 text-white" />
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <script>
+            function humanFileSize(bytes, si = false, dp = 1) {
+                const thresh = si ? 1000 : 1024;
+
+                if (Math.abs(bytes) < thresh) {
+                    return bytes + " B";
+                }
+
+                const units = si ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+                let u = -1;
+                const r = 10 ** dp;
+
+                do {
+                    bytes /= thresh;
+                    ++u;
+                } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+
+                return bytes.toFixed(dp) + " " + units[u];
+            }
+            function showname() {
+                var name = document.getElementById("file");
+                var attach = document.getElementById("Attach");
+                var fileinfo = document.getElementById("Fileinfo");
+                if (name.files[0].size > 1000000000) {
+                    alert("File size is too large , Limit is 1GB");
+                    name.value = "";
+                } else {
+                    fileinfo.classList.remove("hidden");
+                    attach.classList.add("hidden");
+                    document.getElementById("name").innerHTML = name.files[0].name;
+                    document.getElementById("size").innerHTML = humanFileSize(name.files[0].size);
+                    document.getElementById("type").innerHTML = name.files[0].type;
+                }
+            }
+            function loading() {
+                var upload_btn = document.getElementById("upload_btn");
+                upload_btn.value = "Uploading...";
+                upload_btn.disabled = true;
+                var form = document.getElementById("myform");
+                form.submit();
+            }
+        </script>
+        <script>
+            function inB(event) {
+                ass = document.getElementById("nav").getElementsByTagName("a");
+                for (let i = 0; i < ass.length; i++) {
+                    ass[i].classList.remove("hidden");
+                }
+            }
+            function outB(event) {
+                ass = document.getElementById("nav").getElementsByTagName("a");
+                for (let i = 0; i < ass.length; i++) {
+                    ass[i].classList.add("hidden");
+                }
+            }
+        </script>
+    </body>
+</html>