From 04eac6a5f163d96c349ae2ee27712f2b3d989c1b Mon Sep 17 00:00:00 2001 From: samarsajad <142666229+samarsajad@users.noreply.github.com> Date: Wed, 5 Jun 2024 15:23:24 +0530 Subject: [PATCH] News displayed on home page --- newsaggregator/core/decorators.py | 13 + newsaggregator/core/urls.py | 3 + newsaggregator/core/views.py | 218 +- newsaggregator/static/assets/css/base.css | 2787 +++++++++++++++++ newsaggregator/static/assets/css/style.css | 2 +- newsaggregator/templates/core/about.html | 2 +- .../templates/{partials => core}/base.html | 0 newsaggregator/templates/core/bookmarks.html | 2 +- newsaggregator/templates/core/contact.html | 2 +- newsaggregator/templates/core/index.html | 18 +- .../templates/userauths/sign-in.html | 2 +- .../templates/userauths/sign-up.html | 2 +- 12 files changed, 2892 insertions(+), 159 deletions(-) create mode 100644 newsaggregator/core/decorators.py create mode 100644 newsaggregator/static/assets/css/base.css rename newsaggregator/templates/{partials => core}/base.html (100%) diff --git a/newsaggregator/core/decorators.py b/newsaggregator/core/decorators.py new file mode 100644 index 0000000..2e8a1c1 --- /dev/null +++ b/newsaggregator/core/decorators.py @@ -0,0 +1,13 @@ + + +from functools import wraps +from django.shortcuts import redirect +from django.urls import reverse + +def custom_login_required(view_func): + @wraps(view_func) + def _wrapped_view(request, *args, **kwargs): + if not request.user.is_authenticated: + return redirect(reverse('core:index')) + return view_func(request, *args, **kwargs) + return _wrapped_view diff --git a/newsaggregator/core/urls.py b/newsaggregator/core/urls.py index 4205fc7..d6dd3d2 100644 --- a/newsaggregator/core/urls.py +++ b/newsaggregator/core/urls.py @@ -1,12 +1,15 @@ from django.urls import path from core import views from .views import submit_contact +# from .views import base_view +from .views import news_list app_name='core' urlpatterns=[ + # path('base/', base_view, name='base'), path('',views.news_list,name='index'), path('about/', views.about, name='about'), path('contact.html/',views.submit_contact,name='contact'), diff --git a/newsaggregator/core/views.py b/newsaggregator/core/views.py index 26a41e4..59eb046 100644 --- a/newsaggregator/core/views.py +++ b/newsaggregator/core/views.py @@ -1,97 +1,90 @@ -from django.contrib import messages -from django.contrib.auth.decorators import login_required -from django.http import HttpResponse, JsonResponse -from django.shortcuts import render - -from django.shortcuts import render -import requests -from django.shortcuts import render, redirect -from bs4 import BeautifulSoup as BSoup -from core.models import Headline - -from datetime import datetime - -from core.models import Contact -from django.template.loader import render_to_string -from django.core.mail import send_mail +# your_app/views.py - -from django.contrib.auth.decorators import login_required from django.shortcuts import render, redirect, get_object_or_404 -from core.models import Headline, Bookmark, Rating +from django.http import JsonResponse +from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage +from .models import Headline, Bookmark, Rating, Contact from django.contrib import messages +from .decorators import custom_login_required # Import the custom decorator +import requests +from bs4 import BeautifulSoup as BSoup from django.views.decorators.csrf import csrf_exempt +import json +# def base_view(request): +# return render(request, 'core/base.html') -from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage -#view for scraping new - +@custom_login_required def scrape(request, name): - Headline.objects.all().delete() #remove all existing records from table + Headline.objects.all().delete() session = requests.Session() - #useragent helps server to identify origin of request - #we are imitating request as google bot session.headers = {"User-Agent": "Googlebot/2.1 (+http://www.google.com/bot.html)"} - #google bot is crawler program - #session.headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"} url = f"https://www.theonion.com/{name}" content = session.get(url).content - #print(content)#raw content soup = BSoup(content, "html.parser") - #print(soup) - # finding all new div using common class News = soup.find_all("div", {"class": "sc-cw4lnv-13 hHSpAQ"}) - print(News) for article in News: - #extracting news link,img url,title for each news main = article.find_all("a", href=True) linkx = article.find("a", {"class": "sc-1out364-0 dPMosf js_link"}) link = linkx["href"] titlex = article.find("h2", {"class": "sc-759qgu-0 cvZkKd sc-cw4lnv-6 TLSoz"}) title = titlex.text imgx = article.find("img")["data-src"] - #storing extracted data to model new_headline = Headline() new_headline.title = title new_headline.url = link new_headline.image = imgx new_headline.save() - #saving details to table return redirect("../") -@login_required(login_url='userauths:sign-in') +# @custom_login_required +# def news_list(request): +# headlines = Headline.objects.all().order_by('-id') +# swiper = Headline.objects.all()[:4] +# user_bookmarked_headline_ids = [] +# if request.user.is_authenticated: +# user_bookmarked_headline_ids = request.user.bookmark_set.values_list('headline_id', flat=True) +# page = request.GET.get('page', 1) +# num_of_items = 9 +# paginator = Paginator(headlines, num_of_items) +# try: +# headlines_obj = paginator.page(page) +# except PageNotAnInteger: +# headlines_obj = paginator.page(1) +# except EmptyPage: +# headlines_obj = paginator.page(paginator.num_pages) +# context = { +# "object_list": headlines_obj, +# "paginator": paginator, +# 'swiper': swiper, +# 'user_bookmarked_headline_ids': user_bookmarked_headline_ids, +# } +# return render(request, "core/index.html", context) +from django.shortcuts import render +from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger +from .models import Headline + def news_list(request): - # Fetch all headlines in reverse order headlines = Headline.objects.all().order_by('-id') swiper = Headline.objects.all()[:4] - - - # Get the list of bookmarked headline IDs for the current user - user_bookmarked_headline_ids = [] - if request.user.is_authenticated: - user_bookmarked_headline_ids = request.user.bookmark_set.values_list('headline_id', flat=True) - - # Pagination logic page = request.GET.get('page', 1) num_of_items = 9 paginator = Paginator(headlines, num_of_items) - try: headlines_obj = paginator.page(page) except PageNotAnInteger: headlines_obj = paginator.page(1) except EmptyPage: headlines_obj = paginator.page(paginator.num_pages) - context = { "object_list": headlines_obj, "paginator": paginator, 'swiper': swiper, - 'user_bookmarked_headline_ids': user_bookmarked_headline_ids, } return render(request, "core/index.html", context) -@login_required(login_url='userauths:sign-in') + +# @custom_login_required def index(request): Headline.objects.all().delete() session = requests.Session() @@ -99,103 +92,71 @@ def index(request): url = f"https://www.theonion.com/latest" content = session.get(url).content soup = BSoup(content, "html.parser") - News = soup.find_all("div", {"class": "sc-cw4lnv-13 hHSpAQ"}) - count=0 + count = 0 for article in News: - count=count+1 - - if count<=8: + count += 1 + if count <= 8: main = article.find_all("a", href=True) - linkx = article.find("a", {"class": "sc-1out364-0 dPMosf js_link"}) link = linkx["href"] - titlex = article.find("h2", {"class": "sc-759qgu-0 cvZkKd sc-cw4lnv-6 TLSoz"}) title = titlex.text - imgx = article.find("img")["data-src"] - new_headline = Headline() new_headline.title = title new_headline.url = link new_headline.image = imgx - new_headline.save() ##saving each record to news_headline - + new_headline.save() headlines = Headline.objects.all()[::-1] context = { "object_list": headlines, } return render(request, "core/index.html", context) -@login_required(login_url='userauths:sign-in') +# @custom_login_required def about(request): - context={ - - } + context = {} return render(request, "core/about.html", context) -@login_required(login_url='userauths:sign-in') +# @custom_login_required def submit_contact(request): if request.method == 'POST': name = request.POST.get('name') email = request.POST.get('email') - phone= request.POST.get('phone') + phone = request.POST.get('phone') message = request.POST.get('message') - contact=Contact() - contact.name=name - contact.email=email - contact.phone=phone - contact.message=message + contact = Contact() + contact.name = name + contact.email = email + contact.phone = phone + contact.message = message contact.save() - messages.success(request,"Thanks for contacting us") + messages.success(request, "Thanks for contacting us") return redirect("/contact.html") return render(request, "core/contact.html") - -@login_required(login_url='userauths:sign-in') +# @custom_login_required def advertise(request): - context={ - - } + context = {} return render(request, "core/advertise.html", context) -@login_required(login_url='userauths:sign-in') +# @custom_login_required def privacy(request): - context={ - - } + context = {} return render(request, "core/privacy.html", context) - -@login_required(login_url='userauths:sign-in') +# @custom_login_required def view_bookmarks(request): - # Get the list of bookmarked headlines for the current user - bookmarks = Bookmark.objects.filter(user=request.user).select_related('headline') - - if bookmarks.exists(): - context = {'bookmarks': bookmarks} - else: - context = {'message': 'You have no bookmarks yet.'} - - - return render(request, 'core/bookmarks.html', context) -def view_bookmarks(request): - if request.user.is_authenticated: - # Get the list of bookmarked headlines for the current user - bookmarks = Bookmark.objects.filter(user=request.user).select_related('headline') - - if bookmarks.exists(): - context = {'bookmarks': bookmarks} - else: - context = {'message': 'You have no bookmarks yet.'} - - return render(request, 'core/bookmarks.html', context) + bookmarks = Bookmark.objects.filter(user=request.user).select_related('headline') + if bookmarks.exists(): + context = {'bookmarks': bookmarks} else: - message = 'Sign in to view bookmarks.' - return render(request, 'core/index.html', {'message': message}) + context = {'message': 'You have no bookmarks yet.'} + return render(request, 'core/bookmarks.html', context) + @csrf_exempt -@login_required(login_url='userauths:sign-in') +# @custom_login_required def bookmark_article(request, headline_id): if request.method == 'POST': headline = get_object_or_404(Headline, id=headline_id) @@ -204,27 +165,24 @@ def bookmark_article(request, headline_id): return JsonResponse({'status': 'error', 'message': 'Invalid request'}, status=400) @csrf_exempt -@login_required(login_url='userauths:sign-in') +# @custom_login_required def remove_bookmark(request, headline_id): if request.method == 'POST': Bookmark.objects.filter(user=request.user, headline_id=headline_id).delete() return JsonResponse({'status': 'success'}) return JsonResponse({'status': 'error', 'message': 'Invalid request'}, status=400) + import json -@login_required +# @custom_login_required @csrf_exempt def rate_headline(request, headline_id): if request.method == 'POST': headline = get_object_or_404(Headline, id=headline_id) - try: data = json.loads(request.body) - print("Received data:", data) # Print the entire JSON payload for debugging rating_value_str = data.get('rating') - # print("rating_value_str:", rating_value_str) # Add this line for debugging except json.JSONDecodeError: return JsonResponse({'status': 'fail', 'message': 'Invalid JSON'}, status=400) - if rating_value_str is not None: try: rating_value = int(rating_value_str) @@ -232,46 +190,18 @@ def rate_headline(request, headline_id): return JsonResponse({'status': 'fail', 'message': 'Invalid rating value'}, status=400) else: return JsonResponse({'status': 'fail', 'message': 'Rating value is missing'}, status=400) - - # Check if the user has already rated this headline rating, created = Rating.objects.get_or_create(user=request.user, headline=headline) rating.rating = rating_value rating.save() - - # Update headline average rating and rating count ratings = Rating.objects.filter(headline=headline).exclude(rating__isnull=True) headline.rating_count = ratings.count() headline.average_rating = sum(r.rating for r in ratings) / headline.rating_count if headline.rating_count > 0 else 0 headline.save() - return JsonResponse({'status': 'success', 'average_rating': headline.average_rating, 'rating_count': headline.rating_count}) return JsonResponse({'status': 'fail'}, status=400) -from django.shortcuts import render -from .models import Headline +# @custom_login_required def top_rated_articles(request): - if request.user.is_authenticated: - top_rated_articles = Headline.objects.filter(average_rating__gte=3.5).order_by('-average_rating') - else: - top_rated_articles = Headline.objects.none() - - paginator = Paginator(top_rated_articles, 9) # 9 items per page - - page = request.GET.get('page') - try: - top_rated_articles_obj = paginator.page(page) - except PageNotAnInteger: - top_rated_articles_obj = paginator.page(1) - except EmptyPage: - top_rated_articles_obj = paginator.page(paginator.num_pages) - - context = { - 'object_list': top_rated_articles_obj, - 'paginator': paginator - } - return render(request, 'core/index.html', context) -from django.shortcuts import render - -def about(request): - return render(request, 'core/about.html') - + top_rated_articles = Headline.objects.filter(average_rating__gte=3.5).order_by('-average_rating') + paginator = Paginator(top_rated_articles, 9) + page = request diff --git a/newsaggregator/static/assets/css/base.css b/newsaggregator/static/assets/css/base.css new file mode 100644 index 0000000..eb809d9 --- /dev/null +++ b/newsaggregator/static/assets/css/base.css @@ -0,0 +1,2787 @@ +.container1 { + padding: 70px 100px; + background-color: var(--seashell); + border: 2px solid hsl(20, 43%, 93%); + box-shadow: var(--shadow-2); + max-width: 1000px; + margin: 0 auto; + border-radius: 10px; + display: flex; + flex-direction: column; + justify-content: center; + height: 750px; + gap: 2rem; + } + .formform-label, + .form-label { + color: var(--charcoal); + } + .input-field { + margin-top: 5px; + } + .circle { + height: 24px; + width: 24px; + border-radius: 24px; + background-color: black; + position: fixed; + top: 0; + left: 0; + pointer-events: none; + z-index: 99999999; /* so that it stays on top of all other elements */ + } + + .navbar-list{ + text-align: center; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + .navbar-item { + cursor: pointer; + padding: none; + font-size: 15px; + display: flex; + align-items: center; + } + + .form-label { + color: var(--charcoal); + } + + .exchange-form { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + padding-left: 30px; + padding-right: 30px; + } + + .form-fields { + width: 100%; + } + + :root { + /** + * colors + */ + + --chinese-violet_30: hsla(304, 14%, 46%, 0.3); + --chinese-violet: hsl(304, 14%, 46%); + --sonic-silver: hsl(208, 7%, 46%); + --old-rose_30: hsla(357, 37%, 62%, 0.3); + --ghost-white: hsl(233, 33%, 95%); + --light-pink: hsl(357, 93%, 84%); + --light-gray: hsl(0, 0%, 80%); + --old-rose: hsl(357, 82%, 35%); + --seashell: hsl(20, 43%, 93%); + --charcoal: hsl(203, 30%, 26%); + --white: hsl(0, 0%, 100%); + + /** + * typography + */ + + --ff-philosopher: "Philosopher", sans-serif; + --ff-poppins: "Poppins", sans-serif; + + --fs-1: 4rem; + --fs-2: 3.2rem; + --fs-3: 2.7rem; + --fs-4: 2.4rem; + --fs-5: 2.2rem; + --fs-6: 2rem; + --fs-7: 1.8rem; + + --fw-500: 500; + --fw-700: 700; + + /** + * spacing + */ + + --section-padding: 60px; + + /** + * shadow + */ + + --shadow-1: 4px 6px 10px hsla(231, 94%, 7%, 0.06); + /* --shadow-2: 2px 0px 15px 5px hsla(231, 94%, 7%, 0.06); */ + --shadow-2: 0px 1px 7px 5px hsla(231, 94%, 7%, 0.06); + --shadow-3: 3px 3px var(--chinese-violet); + --shadow-4: 5px 5px var(--chinese-violet); + + /** + * radius + */ + + --radius-5: 5px; + --radius-10: 10px; + + /** + * clip path + */ + + --polygon: polygon(100% 29%, 100% 100%, 19% 99%, 0 56%); + + /** + * transition + */ + + --transition-1: all 0.15s ease; + --transition-2: 0s ease; + --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); + } + + /* Define the animation */ + @keyframes float { + 0% { + transform: translateY(0); + } + + 50% { + transform: translateY(-10px); + } + + 100% { + transform: translateY(0); + } + } + + /* Apply animation to the hero-banner */ + .hero-banner { + position: relative; + overflow: hidden; + } + + .hero-banner img { + width: 100%; + height: auto; + display: block; + animation: float 1.5s ease-in-out infinite; + } + + /*-----------------------------------*\ + #RESET + \*-----------------------------------*/ + + *, + *::before, + *::after { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + li { + list-style: none; + } + + a, + img, + span, + data, + input, + button, + textarea, + ion-icon { + display: block; + } + + a { + color: saddlebrown; + text-decoration: none; + } + + img { + height: auto; + } + + input, + button, + textarea { + background: none; + border: none; + font: inherit; + } + + input, + textarea { + width: 100%; + } + + button { + cursor: pointer; + } + + address { + font-style: normal; + } + + ion-icon { + pointer-events: none; + } + + html { + font-family: var(--ff-poppins); + font-size: 10px; + } + + body { + /* background-color: var(--white); */ + background-color: #FFB2A8; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); + background-attachment: fixed; + background-size: cover; + color: var(--sonic-silver); + /* font-size: 1.6rem; */ + font-size: 1.55rem; + line-height: 1.8; + } + + :focus-visible { + outline-offset: 4px; + } + + ::selection { + background-color: var(--old-rose); + color: var(--white); + } + + ::-webkit-scrollbar { + width: 10px; + } + + ::-webkit-scrollbar-track { + background: var(--grey-white); + } + + ::-webkit-scrollbar-thumb { + background: linear-gradient( + to bottom, + hsl(357, 37%, 62%), + hsl(304, 14%, 46%) + ); + border-radius: 10px; + } + + ::-webkit-scrollbar-thumb:hover { + background: hsl(357, 60%, 45%); + } + + /*-----------------------------------*\ + #REUSED STYLE + \*-----------------------------------*/ + + .section { + padding-block: var(--section-padding); + + } + + .section:nth-child(odd) { + background-color: var(--seashell); + } + .section:nth-child(4) { + background-color: var(--seashell); + } + .section:nth-child(5) { + background-color:var(--seashell); + } + .section-subtitle { + color: var(--old-rose); + text-transform: uppercase; + font-weight: var(--fw-700); + letter-spacing: 4px; + text-align: center; + margin-bottom: 20px; + font-size: 2.5rem; + } + + .h1, + .h2, + .h3, + .tab-text { + color: var(--charcoal); + font-family: var(--ff-philosopher); + line-height: 1.2; + } + + .h1 { + font-size: var(--fs-2); + } + + .h2 { + font-size: var(--fs-3); + } + + .h3 { + font-size: var(--fs-5); + } + + .section-text { + font-size: var(--fs-7); + padding-left: 30px; + padding-right: 30px; + } + + .w-100 { + width: 100%; + } + + .has-before, + .has-after { + position: relative; + z-index: 1; + } + + .has-before::before, + .has-after::after { + content: ""; + position: absolute; + } + + .section-title { + text-align: center; + } + + .grid-list { + display: grid; + gap: 25px; + } + + .btn-link { + color: var(--old-rose); + font-weight: var(--fw-500); + display: flex; + align-items: center; + gap: 5px; + transition: var(--transition-1); + } + + .btn-link:is(:hover, :focus) { + color: var(--chinese-violet); + } + + .has-underline { + position: relative; + margin-block-end: 60px; + } + + .has-underline .span { + height: 2px; + background-color: var(--old-rose_30); + width: 200px; + margin-inline: auto; + margin-block-start: 30px; + } + + .has-underline .has-before::before { + width: 18px; + height: 18px; + top: 2px; + left: 45%; + transform: translateY(-50%) rotate(45deg); + background-color: var(--old-rose_30); + box-shadow: 7px -7px var(--old-rose_30); + } + + .btn { + padding: 12px 30px; + transition: var(--transition-1); + } + + .btn-primary { + background-color: var(--old-rose); + color: var(--white); + border-radius: var(--radius-5); + margin-left: 325px; + margin-top: 30px; + text-align: center; + } + + .btn-primary:is(:hover, :focus) { + background-color: var(--chinese-violet); + } + + .btn-secondary { + border: 1px solid var(--old-rose); + color: white; + background-color: var(--old-rose); + border-radius: var(--radius-5); + } + + .btn-secondary:is(:hover, :focus) { + background-color: var(--chinese-violet); + color: var(--white); + } + + .img-holder { + aspect-ratio: var(--width) / var(--height); + background-color: var(--light-gray); + } + + .img-cover { + width: 100%; + height: 100%; + object-fit: cover; + } + + /*-----------------------------------*\ + #HEADER + \*-----------------------------------*/ + + .header { + background-color: var(--white); + + position: absolute; + top: 10px; + right: 10px; + left: 10px; + padding-block: 12px; + z-index: 4; + transition: var(--transition-2); + } + + .header.active { + position:sticky; + top: 0; + right: 0; + left: 0; + filter: drop-shadow(var(--shadow-1)); + transform: translateY(-100%); + transition: none; + animation: slideIn 0.5s ease forwards; + } + + @keyframes slideIn { + 0% { + transform: translateY(-100%); + } + + 100% { + transform: translateY(0); + } + } + + .header .container { + display: flex; + justify-content: space-between; + align-items: center; + } + + .logo { + font-family: var(--ff-philosopher); + font-size: 4rem; + color: var(--charcoal); + line-height: 1; + } + + .dark-mode .logopic { + content: url("./../images/new_logo_banner_light.png"); + } + + .nav-toggle-btn { + font-size: 40px; + color: var(--charcoal); + } + + .nav-toggle-btn ion-icon { + --ionicon-stroke-width: 20px; + } + + .nav-toggle-btn.active .open, + .nav-toggle-btn .close { + display: none; + } + + .nav-toggle-btn .open, + .nav-toggle-btn.active .close { + display: block; + } + + .navbar { + border: 1px solid #000; + display: inline-block; + position: relative; + top: 100%; + left: 0; + width: 100%; + background-color: var(--white); + padding-inline: 15px; + max-height: 0; + overflow: hidden; + visibility: hidden; + transition: 0.25s var(--cubic-out); + } + + .navbar.active { + max-height: 387px; + visibility: visible; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + transition-duration: 0.5s; + overflow-y: scroll; + } + + + /* .navbar-item:nth-child(9) .navbar-link { + margin-right: 35px; + } */ + /* .navbar-item:nth-child(9) .navbar-link { + margin-right: 5px; + }*/ + + /* @media (min-width:641px) { + .navbar-list{ + flex-direction: column; + } + .navbar.active{ + max-height: 330px; + } + } */ + + .navbar-list{ + display: flex; + justify-content: center; /* Center align the navbar items */ + align-items: center; /* Vertically center the navbar items */ + margin: 0; /* Remove default margin */ + padding: 0; /* Remove default padding */ + } + + .navbar-item { + margin: 0 5px; /* Adjust the horizontal margin to increase spacing */ + padding: 0; /* Remove default padding */ + } + + .navbar-link { + display: flex; + justify-content: center; + align-items: center; + position: relative; + color: var(--charcoal); + padding: 8px 12px; /* Adjust padding as needed */ + line-height: 2; + transition: var(--transition-1); + } + + .navbar-link:is(:hover, :focus) { + color: var(--old-rose); + } + + .dropdown-menu { + /* display: none; + position: absolute; + top: calc(100% + 5px); + left: 0; + background-color: var(--white); + padding: 10px; + border-radius: 5px; */ + display: none; + position: relative; + background-color: #fff; + box-shadow: 0 8px 16px rgba(0,0,0,0.2); + z-index: 1; + transition: all 0.3s ease; + top: 100%; + text-align: center; + } + .dropdown-menu-list { + list-style: none; + margin: 0; + padding: 0; + } + + .dropdown-menu-item { + padding: 12px 16px; + } + + .dropdown-menu-item a { + text-decoration: none; + color: #000; + } + + .dropdown-item:first-child { + margin-top: 0; + } + + .dropdown-menu.active { + display: block; + } + + .navbar-item.dropdown { + position: relative; /* Ensure the dropdown menu is positioned relative to the navbar item */ + } + .dropdown-menu-item .navbar-link { + display: inline-block; /* Ensure links are inline-block to center them */ + } + .navbar-item.dropdown:hover .dropdown-menu { + display: block; + } + .dropdown-arrow { + transition: transform 0.3s ease; /* Smooth transition for rotation */ + } + + .navbar-item.dropdown:hover .dropdown-arrow { + transform: rotate(180deg); + } + + + .nav-toggle-btn { + font-size: 40px; + color: var(--charcoal); + } + + .nav-toggle-btn ion-icon { + --ionicon-stroke-width: 20px; + } + + .nav-toggle-btn.active .open, + .nav-toggle-btn .close { + display: none; + } + + .nav-toggle-btn .open, + .nav-toggle-btn.active .close { + display: block; + } + + .navbar { + border: 1px solid #000; + display: inline-block; + position: absolute; + top: 100%; + left: 0; + width: 100%; + background-color: var(--white); + padding-inline: 15px; + max-height: 0; + overflow: hidden; + visibility: hidden; + transition: 0.25s var(--cubic-out); + } + + .navbar.active { + max-height: 387px; + visibility: visible; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + transition-duration: 0.5s; + overflow-y: scroll; + } + + .navbar-list { + display: flex; + justify-content: center; + align-items: center; + margin: 0; + padding: 0; + } + + .navbar-item { + margin: 10 10px; + padding: 0; + } + + .navbar-link { + position: relative; + color: var(--charcoal); + padding: 8px 12px; + line-height: 2; + transition: var(--transition-1); + } + + .navbar-link:is(:hover, :focus) { + color: var(--old-rose); + } + + .dropdown-menu { + display: none; + position: absolute; + background-color: #fff; + box-shadow: 0 8px 16px rgba(0,0,0,0.2); + z-index: 1; + transition: all 0.3s ease; + top: 100%; + } + + .dropdown-menu-list { + list-style: none; + margin: 0; + padding: 0; + } + + .dropdown-menu-item { + padding: 12px 16px; + } + + .dropdown-menu-item a { + text-decoration: none; + color: #000; + } + + .dropdown-menu.active { + display: block; + } + + .navbar-item.dropdown { + position: relative; + } + + /*-----------------------------------*\ + #HERO + \*-----------------------------------*/ + + .hero { + /* border: 1px solid black; */ + padding-block-start: calc(var(--section-padding) + 60px); + text-align: center; + } + + .hero .container { + /* border: 1px solid black; */ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 2rem; + } + .hero-content { + /* border: 1px solid black; */ + + width: 55%; + + } + + .hero .hero-title { + margin-block: 10px 25px; + font-size: 5rem; + } + .hero .section-text { + font-size: 1.5rem; + margin-top: 0; + } + + .hero-banner { + width: 40%; + + padding-inline-start: 20px; + padding-block-end: 30px; + max-width: 400px; + height: 450px; + + /* border: 2px solid red; */ + } + + .hero-banner .w-100 { + border-radius: 10px; + height: 100%; + margin: 2rem 0.5rem; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; + } + + .hero-banner::before { + top: 30px; + right: 30px; + bottom: 0; + left: 0; + background-color: var(--light-pink); + border-radius: var(--radius-10); + z-index: -1; + } + + .play-btn { + display: flex; + justify-content: center; + align-items: center; + background-color: hsl(0, 0%, 100%); + color: var(--chinese-violet); + font-size: 2rem; + margin-top: 1.5rem; + padding: 10px 15px; + border-radius: 10px; + transition: all 2s ease; + animation: pulse 3s ease infinite; + box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, + rgba(0, 0, 0, 0.22) 0px 10px 10px; + } + .play-btn h2 { + font-size: 1.5rem; + } + + .play-btn:is(:hover, :focus) { + color: #fff; + background-color: var(--old-rose); + } + + @keyframes pulse { + 0%, + 50% { + box-shadow: 0 0 0 0 hsla(0, 0%, 100%, 0.5); + } + + 100% { + box-shadow: 0 0 0 10px transparent; + } + } + + /*-----------------------------------*\ + #BENEFITS + \*-----------------------------------*/ + + .benefits .section-text { + text-align: center; + margin-block: 8px 25px; + } + + .benefits-card { + padding: 25px; + background-color: #FFD6CE 0.9px; + height:500px; + box-shadow: var(--shadow-2); + border-radius: var(--radius-5); + overflow: hidden; + transition: var(--transition-2); + height: 500px; + width: 260px; + } + + .benefits-card::before, + .benefits-card::after { + bottom: 0; + right: 0; + clip-path: var(--polygon); + transition: all .5s var(--cubic-out); + } + + .benefits-card::before { + width: 80px; + height: 80px; + background-color: var(--old-rose_30); + transform: translateY(60px); + } + + .benefits-card::after { + width: 70px; + height: 70px; + background-color: var(--chinese-violet_30); + transform: translateY(65px); + } + + .benefits-card:is(:hover, :focus-within) { + transform: translateY(-10px); + } + + .benefits-card:is(:hover, :focus-within)::before, + .benefits-card:is(:hover, :focus-within)::after { + transform: translateY(0); + } + + .benefits-card:is(:hover, :focus-within)::after { + transition-delay: 0.1s; + } + + .benefits-card .card-icon { + background-color: var(--old-rose); + max-width: max-content; + padding: 10px; + box-shadow: var(--shadow-3); + transition: all .4s var(--cubic-out); + border-radius: var(--radius-5); + } + + .benefits-card:is(:hover, :focus) .card-icon { + box-shadow: none; + } + + .benefits-card .card-title { + margin-block: 20px 15px; + } + + .benefits-card .btn-link { + margin-block-start: 15px; + } + + /*-----------------------------------*\ + #CHAPTERS + \*-----------------------------------*/ + .chapter-card { + height: 100%; + background-color: var(--white); + padding: 25px; + border-radius: var(--radius-5); + box-shadow: var(--shadow-2); + position: relative; + /* Add position relative to .chapter-card */ + transition: transform 0.4s ease, box-shadow 0.3s ease; /* Add transition for smooth effect */ + cursor: pointer;/* add cursor for good for viewer*/ + overflow: hidden; + } + + .chapter-card::before { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 0%; + height: 3px; + background-color: pink; /* Pink line color */ + transition: width 0.3s ease; /* Transition width property */ + + } + + .chapter-card:hover { + transform: scale(20); /* Increase scale on hover */ + box-shadow: var(--shadow-3); /* Add shadow effect on hover */ + } + + /* .chapter-card:hover::before { + width: 100%; + } */ + /* Expand line width on hover */ + + .chapter-card .card-title { + margin-block-end: 15px; + } + + /*-----------------------------------*\ + #PREVIEW + \*-----------------------------------*/ + + .tab-list { + display: flex; + flex-direction: column; + gap: 10px; + } + + .tab-card { + position: relative; + height: 60px; + background-color: var(--seashell); + border-radius: var(--radius-10); + box-shadow: var(--shadow-3); + display: grid; + place-content: center; + overflow: hidden; + cursor: pointer; + transition: var(--transition-1); + } + + .tab-card .w-100 { + pointer-events: none; + opacity: 0; + transition: var(--transition-2); + } + + .tab-card.active .w-100 { + opacity: 1; + } + + .tab-card.active { + height: 40vh; + box-shadow: none; + } + + .tab-text { + font-size: var(--fs-4); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .tab-card.active .tab-text { + display: none; + } + + + /*-----------------------------------*\ + #PRICING + \*-----------------------------------*/ + + .pricing-card { + padding: 40px 50px; + background-color: var(--white); + text-align: center; + transition: var(--transition-2); + border-radius: var(--radius-5); + box-shadow: var(--shadow-2); + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + } + + .pricing-card:is(:hover, :focus-within), + .pricing-card.bundle { + box-shadow: var(--shadow-4); + } + + .pricing-card:is(:hover, :focus-within) { + transform: translateY(-10px); + } + + .pricing-card .price { + font-family: var(--ff-philosopher); + font-size: var(--fs-1); + color: var(--charcoal); + font-weight: var(--fw-700); + margin-block-start: 10px; + } + + .pricing-card-list { + margin-block: 20px 40px; + flex-grow: 1; + } + + .pricing-card-list .card-item:not(:last-child) { + border-block-end: 1px solid var(--ghost-white); + } + + .pricing-card .card-text { + padding-block: 10px; + } + + .pricing-card .btn { + margin-inline: auto; + align-self: center; + margin-top: auto; + } + + /*-----------------------------------*\ + #AUTHOR + \*-----------------------------------*/ + + .author { + background-color: var(--seashell); + } + + .author .container { + display: grid; + gap: 40px; + } + + .author :is(.section-subtitle, .section-title) { + text-align: left; + } + + .author-content { + background-color: var(--white); + padding: 30px; + } + + .author-name { + font-size: var(--fs-6); + margin-block-end: 30px; + } + + .author .section-text { + font-size: unset; + } + + /*-----------------------------------*\ + #ACHIEVEMENT + \*-----------------------------------*/ + + .section.achievement { + background-color: var(--white); + } + + .achievement-card { + background-color: var(--seashell); + box-shadow: var(--shadow-4); + overflow: hidden; + transition: var(--transition-2); + } + + .achievement-card:is(:hover, :focus-within) { + transform: translateY(-10px); + } + + .achievement-card .card-content { + position: relative; + padding: 15px; + } + + .small + { + color: black; + } + .lithead + { + color: black; + } + .achievement-card .abs-img { + position: absolute; + top: 0; + right: -5px; + opacity: 0.3; + } + + /*-----------------------------------*\ + #CONTACT + \*-----------------------------------*/ + + .contact .wrapper { + display: grid; + gap: 25px; + } + + .contact .container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + + .contact iframe { + width: 800px; + height: 450px; + border-radius: 5px; + } + + .contact-form { + background-color: var(--seashell); + padding: 20px; + border-radius: var(--radius-5); + } + + .input-field { + background-color: hsl(0, 0%, 100%); + padding: 7px; + margin-block-end: 15px; + outline: none; + border-radius: var(--radius-5); + border-block-end: 2px solid transparent; + } + + .input-field:focus { + border-color: black; + border-color: var(--old-rose); + } + + textarea.input-field { + resize: vertical; + min-height: 120px; + height: 120px; + max-height: 200px; + } + + .character-count { + font-size: 0.7em; + /* Make the character count slightly smaller */ + color: hsl(20, 43%, 93%); + /* Set the color */ + position: relative; + /* Enable positioning */ + float: right; + /* Move the character count indicators to the right */ + margin-top: -10px; + /* Adjust the vertical position */ + } + + .input-field, + .input-field.select { + background-color: hsl(0, 0%, 100%); + padding: 7px; + margin-block-end: 15px; + outline: none; + border-radius: var(--radius-5); + border: 2px solid transparent; + transition: border-color 0.3s; + } + + .input-field:focus, + .input-field.select:focus { + border-color: var(--old-rose); + } + + .contact-form .btn { + margin-inline: auto; + } + + .contact-card { + background-color: var(--seashell); + border-radius: var(--radius-5); + padding: 30px; + } + + .contact-card .card-title { + font-family: var(--ff-philosopher); + text-transform: uppercase; + font-weight: var(--fw-700); + } + + .contact-card > li:not(:last-child) { + margin-block-end: 30px; + } + + .contact-card .card-link { + color: var(--chinese-violet); + transition: var(--transition-1); + } + + .contact-card .card-link:is(:hover, :focus) { + color: var(--old-rose); + } + + .social-list-title { + font-size: var(--fs-6); + font-weight: var(--fw-700); + margin-block-end: 15px; + } + + .social-list { + display: flex; + gap: 10px; + } + + .social-link { + background-color: var(--old-rose); + color: var(--white); + font-size: 20px; + padding: 5px; + box-shadow: var(--shadow-3); + border-radius: var(--radius-5); + transition: var(--transition-1); + } + + .social-link:is(:hover, :focus) { + background-color: var(--chinese-violet); + box-shadow: none; + } + + /*-----------------------------------*\ + #Rate-Us-Modal + \*-----------------------------------*/ + + .rate-us-modal-wrapper { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 101; + } + + .rate-us-modal-open { + overflow: hidden; + position: fixed; + } + + .rate-us-modal { + display: flex; + flex-direction: column; + align-items: center; + width: 20%; + } + + .rating_heading { + color: white; + animation: scale-up 1s ease; + } + + @keyframes scale-up { + 0% { + opacity: 0; + transform: scale(0.5); + } + + 100% { + opacity: 1; + transform: scale(1); + } + } + + .star_rating { + width: 100%; + user-select: none; + background-color: white; + padding: 1.4rem 2.5rem; + margin-bottom: 2rem; + border-radius: 0.4rem; + text-align: center; + animation: slide-up 1s ease; + } + + @keyframes slide-up { + 0% { + opacity: 0; + transform: translateY(50px); + } + + 100% { + opacity: 1; + transform: translateY(0px); + } + } + + .star { + font-size: 3rem; + color: #ff9800; + background-color: unset; + border: none; + display: inline; + } + + .star:hover { + cursor: pointer; + } + + .home_button { + align-self: start; + padding: 0 0.7em; + background-color: #fff; + color: var(--old-rose); + border: none; + border-radius: 5px; + cursor: pointer; + text-decoration: none; + /* To remove the default underline */ + } + + .home_button::before { + content: "\f00d"; + font-size: 2.5rem; + font-weight: 800; + font-family: FontAwesome; + } + + .submit_button { + margin-top: 5px; + padding: 10px 20px; + background-color: #fff; + color: var(--old-rose); + border: none; + border-radius: 5px; + cursor: pointer; + display: none; + /* Initially hide the submit button */ + } + + .thank_you_message { + background-color: white; + padding: 0.5em 1em; + margin-top: 2rem; + animation: scale-up 1s ease; + font-size: 2rem; + border-radius: 5px; + display: none; + } + + /* Media Query for Responsive Design */ + + @media only screen and (max-width: 900px) { + .rate-us-modal { + width: 50%; + } + + .contact iframe { + width: 350px; + height: 300px; + + } + + .circle-container{ + display:none; + } + } + + @media only screen and (max-width: 600px) { + /* Adjustments for smaller screens */ + .navbar-list { + display: flex; + flex-direction: column; + } + .navbar { + display: flex; + justify-content: center; + } + + .star { + font-size: 2rem; + } + + .rate-us-modal { + width: 90%; + } + } + + /*-----------------------------------*\ + #FOOTER + \*-----------------------------------*/ + + footer { + background-color: var(--seashell); + padding: 20px 30px; + } + + .foot-top { + display: flex; + justify-content: space-evenly; + align-items: flex-start; /* Adjusted alignment */ + border-bottom: 1px solid black; + padding-bottom: 20px; + } + + .description { + color: var(--sonic-silver); + text-align: justify; + max-width: 600px; + margin: 0 auto; + } + + .foot-middle { + font-size: 1.6rem; + text-align: center; + } + + .foot-quick :hover { + color: rgb(201, 168, 168); + } + + .foot-middle ul { + padding: 0; + margin: 0; + list-style: none; + } + + .foot-middle ul li, + .foot-middle h2 { + text-align: center; + } + + .nav-links { + margin: 0; + } + + .nav-links ul { + padding: 0; + list-style: none; + /* Remove bullet points */ + } + + .nav-links ul li { + margin-bottom: 10px; + /* Add some spacing between list items */ + } + + .nav-links ul li a { + color: rgb(55, 54, 54); + text-decoration: none; + /* Remove underline */ + } + + .nav-links ul li a:hover { + color: rgb(167, 95, 107); + } + + .foot-middle h5 { + color: rgb(57, 57, 57); + font-size: 2rem; + font-weight: 500; + text-align: center; + } + + /* .social-icons { + display: flex; + flex-direction: column; + justify-content: center; + align-items: top; + gap: 10px; + } */ + + .row-flex { + display: flex; + flex-direction: row; + } + + form[type="newsletter"]:before { + content: ""; + /* background: rgba(255, 255, 0, 0.8); */ + display: flex; + flex-direction: row; + width: 200px; + height: 100px; + position: absolute; + z-index: -1; + transform: rotate(45deg); + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + top: -500px; + left: -60px; + } + form[type="newsletter"] { + display: flex; + flex-direction: column; + align-items: center; + max-width: 400px; + margin: 0 auto; /* Adjusted margin */ + padding: 20px; /* Adjusted padding */ + } + label[for="email"] { + display: block; + font-size: 16px; /* Increased font size */ + font-weight: 700; + letter-spacing: 1px; /* Decreased letter spacing */ + text-transform: uppercase; + margin-bottom: 10px; + } + + input:focus { + outline: 0; + } + input[type="news"] { + width: 100%; /* Adjusted width */ + max-width: 300px; + background: #fff; + height: 40px; /* Increased height */ + padding: 10px; /* Adjusted padding */ + margin-bottom: 10px; /* Increased margin */ + font-size: 14px; + font-weight: 400; + border-radius: var(--radius-1); + + transition: border-color 0.3s; + text-transform: uppercase; + } + input[type="news"]:focus{ + border: 2px solid #c27a7e;} + + input[type="submit"] { + width: 100%; /* Adjusted width */ + max-width: 300px; + background: rgb(167, 95, 107); + border: 0; + height: 40px; /* Increased height */ + line-height: 40px; /* Adjusted line height */ + padding: 0; /* Removed padding */ + font-size: 14px; + font-weight: 400; + letter-spacing: 2px; + text-transform: uppercase; + cursor: pointer; + } + input[type="submit"]:hover { + background: linear-gradient(to right, #000 50%, #36363b 50%); + background-size: 200% 100%; + color: white; + + background-position: right bottom; + -webkit-transition: all 200ms ease; + -moz-transition: all 200ms ease; + -ms-transition: all 200ms ease; + -o-transition: all 200ms ease; + transition: all 200ms ease; + } + + .gen-hover:hover { + color: rgb(167, 95, 107); + } + + .social-icons h5 { + color: rgb(57, 57, 57); + padding-top: 35px; + font-size: 2rem; + font-weight: 500; + text-align: center; + margin: 20px; + } + + .in-css { + background-color: white; + border-radius: 4px; + padding: 3px; + } + + .btn-signup { + padding: 4px; + color: white; + background-color: var(--old-rose); + border-radius: 5px; + } + + .btn-signup:hover { + color: white; + background-color: var(--chinese-violet); + } + + .icons { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; /* Increased gap for larger icons */ + } + + .icon-set { + height: 40px; /* Increased icon size */ + width: 40px; /* Increased icon size */ + } + + .icon-set:hover { + transform: scale(1.1); /* Added scale effect */ + filter: grayscale(0%) hue-rotate(0deg) saturate(150%); /* Adjusted hover effect */ + } + + .icon-set:active { + filter: hue-rotate(50%); + } + .social-list { + display: flex; + /* flex-direction: column; */ + overflow: hidden; + } + + /* .footer-top { + padding-block: 50px; + border-block-end: 1px solid var(--chinese-violet_30); + } */ + + .footer .logo { + margin-block-end: 15px; + } + + /* .footer-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + column-gap: 20px; + } */ + + /* .footer-link { + color: var(--charcoal); + transition: var(--transition-1); + } */ + + .footer-link:is(:hover, :focus) { + color: var(--old-rose); + } + + .footer-bottom { + text-align: center; + margin-top: 20px; + } + + /*-----------------------------------*\ + #MEDIA QUERIES + \*-----------------------------------*/ + + @media (max-width: 768px) { + .foot-left, + .foot-right { + margin-bottom: 30px; + flex: 1 100%; + } + } + + @media (max-width: 480px) { + } + + /** + * responsive for large than 575px screen + */ + @media (max-width: 575px) { + .container1 { + max-width: 350px; + width: 100%; + margin-inline: auto; + border-radius: var(--radius-5); + padding: 30px; + } + + .container { + padding-inline: 37px; + padding-bottom: 1rem; + padding-top: 1rem; + } + } + + @media (min-width: 575px) { + /** + * CUSTOM PROPERTY + */ + + :root { + /** + * typography + */ + + --fs-2: 4.5rem; + --fs-3: 3.5rem; + --fs-5: 2.5rem; + } + + /** + * REUSED STYLE + */ + + .container, + .container1, + .header, + .navbar { + max-width: 540px; + width: 100%; + margin-inline: auto; + /* border-radius: var(--radius-5); */ + padding: 1rem; + } + + .section-text { + --fs-7: 2rem; + } + + /** + * HEADER + */ + + .header { + top: 30px; + } + + .header.active { + max-width: unset; + border-radius: 0px; + } + + .navbar { + left: 50%; + transform: translateX(-50%); + } + + /** + * PREVIEW + */ + + .tab-card.active { + height: 50vh; + } + + /** + * ACHIEVEMENT + */ + + .achievement-card { + display: flex; + } + + .achievement-card > * { + width: 50%; + } + + .achievement-card .card-content { + padding-block: 30px; + } + + .achievement-card .card-title { + margin-block-end: 20px; + } + + /** + * CONTACT + */ + + .social-list-title { + --fs-6: 2.2rem; + } + + .social-link { + font-size: 25px; + padding: 8px; + } + } + + /** + * responsive for large than 768px screen + */ + + @media (min-width: 768px) { + /** + * CUSTOM PROPERTY + */ + + :root { + /** + * typography + */ + + --fs-2: 4.8rem; + } + + /** + * REUSED STYLE + */ + + .container, + .container1, + .header, + .navbar { + max-width: 720px; + /* border-radius:61px; */ + } + + .grid-list { + grid-template-columns: 1fr 1fr; + } + + /** + * HERO + */ + + .hero { + padding-block-start: calc(var(--section-padding) + 100px); + text-align: left; + } + + .hero .container { + grid-template-columns: 1fr 0.8fr; + align-items: center; + } + + .hero .section-subtitle { + text-align: left; + } + + /** + * BENEFITS + */ + + .benefits :is(.section-title, .section-text) { + text-align: left; + } + + .benefits-content { + grid-column: 1 / 3; + } + + /** + * CHAPTERS, PRICING + */ + + :is(.chapters, .pricing) .grid-list li:last-child { + grid-column: 1 / 3; + max-width: calc(50% - 12.5px); + width: 100%; + margin-inline: auto; + } + + /** + * PREVIEW + */ + + .tab-card.active { + height: 70vh; + } + + /** + * AUTHOR + */ + + .author .h2 { + --fs-3: 4.2rem; + } + + /** + * ACHIEVEMENT + */ + + .achievement-card { + flex-direction: column; + } + + .achievement-card > * { + width: 100%; + } + + /** + * CONTACT + */ + + .contact .wrapper { + grid-template-columns: 1fr 1fr; + } + } + @media (max-width:400px) { + .hero .container{ + line-break: anywhere; + } + } + @media (max-width: 992px) { + .switch-container { + /* right: -20px; */ + bottom: 20px; + /* right: 20px; */ + } + .hero .container{ + gap: 3rem; + justify-content: center; + } + .hero .container .hero-content,.hero .container .hero-banner{ + flex: 1 0 25rem; + } + .benefits .container, .container,.chapters .container,.pricing .container{ + flex-direction: column; + align-items: center; + } + } + + /** + * responsive for large than 992px screen + */ + + @media (min-width: 992px) { + /** + * CUSTOM PROPERTY + */ + + :root { + /** + * typography + */ + + --fs-2: 5.4rem; + --fs-3: 4rem; + } + + /** + * REUSED STYLE + */ + + .container, + .container1, + .header, + .navbar { + max-width: 987px; + border-radius: 10px; + } + + .grid-list { + grid-template-columns: repeat(3, 1fr); + } + + /** + * HEADER + */ + + .header .container { + padding-inline: 0px 30px; + } + + .nav-toggle-btn { + display: none; + } + + .navbar, + .navbar.active { + all: unset; + } + + .navbar-list { + margin-block-end: 0; + display: flex; + gap: 12px; + align-items: center; + text-align: center; + gap: 12px; + + } + + /* .switch-container { + right: 0.2rem; + } */ + + /** + * BENEFITS + */ + + .benefits .grid-list { + grid-template-columns: repeat(4, 1fr); + align-items: center; + } + + .benefits-content { + max-width: 80%; + } + + /** + * CHAPTER, PRICING + */ + + :is(.chapters, .pricing) .grid-list li:last-child { + all: unset; + } + + /** + * PREVIEW + */ + + .tab-list { + flex-direction: row; + gap: 20px; + } + + .tab-text { + text-orientation: upright; + white-space: nowrap; + writing-mode: vertical-lr; + } + + .tab-card { + height: 70vh; + max-width: 60px; + } + + .tab-card.active { + max-width: 650px; + } + + /** + * AUTHOR + */ + + .author .container { + grid-template-columns: 0.6fr 1fr; + gap: 0; + } + + .author-content { + margin-block-start: 40px; + margin-inline-start: -30px; + padding-block-end: 70px; + } + + /** + * ACHIEVEMENT + */ + + .achievement .grid-list { + grid-template-columns: 1fr 1fr; + } + + .achievement-card { + flex-direction: row; + } + + .achievement-card > * { + width: 50%; + } + + /** + * CONTACT + */ + + .contact .wrapper { + grid-template-columns: 1fr 0.5fr; + } + + .contact-form { + padding: 40px; + } + } + + /** + * responsive for large than 1200px screen + */ + + @media (min-width: 1200px) { + /** + * CUSTOM PROPERTY + */ + + :root { + /** + * typography + */ + + --fs-2: 6rem; + --fs-3: 4.5rem; + --fs-4: 3rem; + --fs-5: 3rem; + } + + /** + * REUSED STYLE + */ + + .container, + .header, + .navbar { + max-width: 1209px; + border-radius: 10px; + padding: 1rem; + } + .navbar-list { + gap: 30px; /* Increase gap between navbar items */ + justify-content: center; /* Center align navbar items */ + } + + /** + * PREVIEW + */ + + .tab-card { + max-width: 75px; + } + + .tab-card.active { + max-width: 750px; + } + + /** + * AUTHOR + */ + + .author-content { + padding: 85px 60px 115px; + } + + /** + * FOOTER + */ + + .footer-top { + display: flex; + justify-content: space-between; + align-items: center; + } + + .footer .logo { + margin-block-end: 0; + } + } + .social_media_icons{ + font-size:30px; + } + /*Adding Transitions*/ + + .navbar-link { + transition: all 0.3s ease; + padding-left: 4px; + padding-right: 4px; + } + + .navbar-link:hover { + /* transform: scale(1.1); + border-radius: 15px; + background-color: blanchedalmond; */ + text-shadow: 2px 2px 10px #f39d127e, -2px -2px 4px rgba(175, 142, 25, 0.5); + } + + .navbar-link.active, + .navbar-link:hover { + /* font-size: 1.1em; */ + /* border-bottom: 2px solid darkred; */ + color: #fcb0b480; + } + + .navbar-link::after { + content: ""; + position: absolute; + bottom: 1px; + left: 0px; + height: 3px; + background-color: #fcb0b480; + width: 0; + height: 3px; + box-shadow: 0 0 10px #f39d127e; + transition: all 0.6s; + } + .navbar-link:hover::after { + width: 100%; + } + + /* Faq Section */ + .faq-section { + padding: 20px; + background-color: var(--seashell); + display: flex; + flex-direction: column; + align-items: center; + } + + .faq { + font-weight: 700; + color: var(--sonic-silver); + text-align: center; + font-family: var(--ff-philosopher); + } + + .icon { + margin-right: 16px; + transition: transform 0.5s ease-in-out; + } + + .icon.active { + transform: rotate(-180deg); + } + + .answers { + color: var(--sonic-silver); + max-height: 0; + overflow: hidden; + transition: max-height 0.5s ease-in-out; + } + /* body{ + background-color: #f39c12; + } */ + + .dark-mode { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg%3E%3Cpath fill='%232f2f2f' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%233a3a3a' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23454545' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23505050' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%235b5b5b' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23666666' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23707070' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%237b7b7b' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23858585' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23909090' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E" + ); + color: #fff; + } + .dark-mode .form{ + background-color: #333; + color: #fff; + } + .dark-mode .navbar { + /* background-color: #333; */ + color: #fff; + max-width: 1209px; + border-radius: 10px; + padding: 1rem; + } + + .dark-mode .note { + color: #fff; + } + + .dark-mode .container { + /* background-color: #333; */ + padding: 1rem; + color: #fff; + } + + .dark-mode .footer { + background-color: #333; + color: #fff; + } + + + /* + .answers.active { + max-height: fit-content; + } */ + + .question { + color: var(--sonic-silver); + display: flex; + align-items: center; + font-weight: bold; + justify-content: space-between; + } + + .faq-container { + background-color: var(--white); + margin-bottom: 2rem; + border-radius: 4px; + box-shadow: 1px 1px 5px #efecea; + padding: 4px 16px; + line-height: 4rem; + cursor: pointer; + width: 60%; + } + + .faq-container:hover { + background-color: var(--old-rose_30); + } + + /* Dark Mode Switch */ + + /** + * Dark Mode + */ + + .dark-mode { + --sonic-silver: #fff; + --ghost-white: #1e1c1c; + --seashell: hsl(20deg 4.72% 15.44%); + --seashell: hsl(20deg 2.94% 14.18%); + /* --seashell: #1E1C1C; */ + --charcoal: #fff; + --white: #1e1c1c; + --black: #fff; + --grey-white: #1e1c1c; + + + /* shadow */ + + --shadow-1: 4px 6px 10px hsla(240, 2%, 53%, 0.484); + /* --shadow-2: 2px 5px 8px hsla(240, 5%, 62%, 0.545); */ + --shadow-2: 0px 0px 7px hsla(240, 5%, 62%, 0.545); + --shadow-3: 3px 3px var(--seashell); + --shadow-4: 5px 5px var(--old-rose); + } + body.dark-mode .navbar-link:hover, + body.dark-mode .navbar-link.active { + color: hsl(357, 93%, 84%); + } + body.dark-mode .navbar-link::after { + content: ""; + background-color: var(--old-rose); + box-shadow: 0 0 10px #fcb0b480; + } + + body.dark-mode .navbar-link:hover::after { + box-shadow: 0 0 20px hsl(357, 93%, 84%, 0.7); + } + + footer { + position: relative; + } + #back-to-top-container { + position: fixed; + top: 78%; + right: 2.8%; /* Changed left to right */ + cursor: pointer; + z-index: 1000; + } + + .circle1 { + background-color: white; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + transition: background-color 0.3s; + } + + #back-to-top { + width: 51px; + height: 51px; + fill: #d26d6d; + transition: fill 0.3s; + } + + .circle1:hover { + background-color: black; + } + + #back-to-top:hover { + fill: hsl(357, 93%, 84%); + } + + /* Switch Container */ + .switch-container { + position: absolute; + transform: translate(-50%, -50%); + display: flex; + align-items: center; + justify-content: center; + margin-top: 40px; + right:-4px; + top: 35px; + } + + /* Hidden Checkbox */ + .switch-checkbox { + display: none; + } + + /* Switch Label */ + .switch-label { + position: relative; + width: 45px; + height: 30px; + background-color: #ccc; + border-radius: 20px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 0 5px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: background-color 0.5s ease; + } + + .switch-label .sun-icon, + .switch-label .moon-icon { + font-size: 19px; + position: absolute; + cursor: pointer; + top: 50%; + transform: translateY(-50%); + transition: opacity 0.5s ease, color 0.5s ease; + } + + .switch-label .sun-icon { + color: #f39c12; + left: 2px; + } + + .switch-label .moon-icon { + color: #bdc3c7; + opacity: 0; + left: 5px; + } + + /* Switch Button */ + .switch-button { + position: absolute; + top: 3px; + left: 3px; + width: 25px; + height: 25px; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + transition: transform 0.5s ease, background-color 0.5s ease; + } + + /* Checkbox Checked State */ + .switch-checkbox:checked + .switch-label { + background-color: #34495e; + } + + .switch-checkbox:checked + .switch-label .sun-icon { + opacity: 0; + } + + .switch-checkbox:checked + .switch-label .moon-icon { + opacity: 1; + } + + .switch-checkbox:checked + .switch-label .switch-button { + transform: translateX(13px); + /* background-color: #34495e; */ + } + + @media screen and (max-width: 900px) { + .faq-container { + width: 100%; + } + } + @media (min-width: 320px) { + .navbar-list { + flex-direction: column; + } + } + @media (min-width: 481px) { + .navbar-list { + flex-direction: column; + } + } + + @media (min-width: 641px) { + .navbar-list { + flex-direction: column; + } + } + @media (min-width: 961px) { + .navbar-list { + flex-direction: row; + } + #back-to-top-container { + position: fixed; + top: 78%; + right: 3.5%; /* Changed left to right */ + } + } + @media (min-width: 1025px) { + .navbar-list { + flex-direction: row; + } + #back-to-top-container { + position: fixed; + top: 78%; + right: 2.8%; /* Changed left to right */ + } + } + @media (min-width: 1281px) { + .navbar-list { + flex-direction: row; + } + } + + /* genre */ + #genre .chapter-card { + background-color: var(--seashell); + } + + + .subscribe-btn { + background-color: var(--old-rose); + color: var(--white); + } + + .subscribe-btn:is(:hover, :focus) { + background-color: var(--chinese-violet); + } + + /* Medium devices (large tablets and small laptops, 768px to 1060px) */ + @media (min-width: 768px) and (max-width: 1060px) { + .foot-top { + flex-direction: row; + justify-content: space-between; + } + + .foot-left { + max-width: 50%; + } + .foot-middle, + .social-icons { + flex: 1; + max-width: 25%; + text-align: left; + } + + .foot-left .desc a.logo { + font-size: 24px; + font-weight: bold; + text-decoration: none; + } + + .foot-left .desc p { + text-align: justify; + max-width: 100%; + } + + .foot-middle h2, + .social-icons h5 { + font-size: 18px; + } + + .foot-middle ul { + list-style-type: none; + padding: 0; + } + + .foot-middle ul li { + margin-bottom: 10px; + } + + .foot-middle ul li a { + text-decoration: none; + } + } + + @media (max-width: 768px) { + .foot-top { + flex-direction: column; + align-items: center; + } + + .foot-left, + .foot-middle, + .social-icons, + .description { + max-width: 100%; + text-align: center; + } + + .foot-left .desc a.logo { + display: block; + margin-bottom: 10px; + } + + .social-icons .input-newsletter { + flex-direction: column; + } + + .social-icons .input-newsletter input, + .social-icons .input-newsletter button, + .description { + width: 100%; + margin: 5px 0; + } + + #back-to-top-container { + position: fixed; + top: 76%; + right: 4.95%; /* Changed left to right */ + } + + } + /* recommendation system */ + .container00 { + max-width: 900px; + max-height: 800px; + margin: 20px auto; + padding: 80px; + border: 1px solid #ccc; + /* border-radius: 5px; */ + background-color: var(--seashell); + border-radius: var(--radius-5); + margin-bottom: 50px; + } + .container01{ + background-color: var(--seashell); + border-radius: var(--radius-5); + margin-bottom: 50px; + margin-left: 310px; + margin-right: 310px; + padding: 80px; + border: 2px solid #b49393; + color: black; + } + .preference-bar { + display: flex; + justify-content: space-around; + align-items: center; + } + .preference-bar label { + font-weight: bold; + font-size: 20px; + color: #474646; + } + + select { + /* Remove default blue background color */ + background-color: transparent; + /* Optional: Remove default blue text color */ + color: black; /* or whatever color you want */ + } + .preference-bar button { + padding: 10px 16px; + font-size: 16px; + border-radius: 5px; + /* background-color: #007bff; */ + /* color: #fff; */ + border: none; + cursor: pointer; + } + /* .preference-bar button:hover { */ + /* background-color: #0056b3; */ + /* } */ + + .preference-bar select { + padding: 8px; + font-size: 20px; + border-radius: 5px; + border: 2px solid #444242; + outline: none; + background-color: rgb(234, 224, 221); + color: #333; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + } + .preference-bar select option { + background-color: rgb(242, 227, 227); + color: #333; + padding: 8px; + } + .container00 h2{ + color: rgb(62, 60, 60) ; + margin-bottom: 50px; + margin-left: 230px; + font-size: 30px; + } + .preference-bar select:hover { + background-color: var(--old-rose_30); + }.preference-bar select:focus { + border-color: #1e1e1f; /* Border color when the select element is focused */ + box-shadow: 0 0 5px rgb(232, 167, 137); /* Adding a shadow for better focus indication */ + } + + .dark-mode .preference-bar label, + .dark-mode .preference-bar select:hover, + .dark-mode .container00 h2 { + color: white; /* Color for dark mode */ + } + + #heading{ + margin-top: 50px; + } + + + .book { + display: flex; + margin-bottom: 20px; + border: 3px double #7c7b7a; + border-radius: 5px; + overflow: hidden; + } + + .book .book-info { + flex: 1; + padding: 20px; + background-color: #f9f9f9; + } + + .book .book-info h2 { + margin-top: 0; + margin-bottom: 10px; + } + + .book .book-info p { + margin: 5px 0; + } + + .book .book-info img { + width: 120px; /* Adjust the width as needed */ + height: auto; + float: right; + margin-left: 20px; + } + + .book .book-info h2 { + margin-top: 0; + margin-bottom: 10px; + margin-left: 10px; + } + + .recommendationTitle{ + font-size: larger; + margin-left: 200px; + margin-bottom: 20px; + } + + body.dark-mode { + background-color: #121212; + color: #ffffff; + } + + .container00.dark-mode, .container01.dark-mode { + background-color: #1e1e1e; + color: #ffffff; + } + + .section-subtitle.dark-mode, .h2.section-title.has-underline.dark-mode { + color: #ffffff; + } + + .btn-primary.dark-mode { + background-color: #333333; + color: #ffffff; + border: 1px solid #ffffff; + } + + .book-info.dark-mode { + background-color: #2c2c2c; + color: #ffffff; + } + + .book-image.dark-mode { + border: 1px solid #ffffff; + } + + .cards{ + height: 28rem; + } + .pricing-card{ + height :70rem + } + .card-title{ + padding: 2px; + } + + @media(max-width:300px){ + .cards{ + height: fit-content; + } + } + @media(max-width:770px){ + .pricing-card{ + height: fit-content; + } + } + + + + \ No newline at end of file diff --git a/newsaggregator/static/assets/css/style.css b/newsaggregator/static/assets/css/style.css index 91fe047..63cac60 100644 --- a/newsaggregator/static/assets/css/style.css +++ b/newsaggregator/static/assets/css/style.css @@ -1140,4 +1140,4 @@ footer .wrapper { text-align: center; } } .hr-container{ background-color: blue; -} \ No newline at end of file +} diff --git a/newsaggregator/templates/core/about.html b/newsaggregator/templates/core/about.html index d11fae6..cb5bedd 100644 --- a/newsaggregator/templates/core/about.html +++ b/newsaggregator/templates/core/about.html @@ -1,4 +1,4 @@ -{% extends 'partials/base.html' %} +{% extends 'core/base.html' %} {% load static %} {% block index %} diff --git a/newsaggregator/templates/partials/base.html b/newsaggregator/templates/core/base.html similarity index 100% rename from newsaggregator/templates/partials/base.html rename to newsaggregator/templates/core/base.html diff --git a/newsaggregator/templates/core/bookmarks.html b/newsaggregator/templates/core/bookmarks.html index 8e01c33..a799430 100644 --- a/newsaggregator/templates/core/bookmarks.html +++ b/newsaggregator/templates/core/bookmarks.html @@ -1,4 +1,4 @@ -{% extends 'partials/base.html' %} +{% extends 'core/base.html' %} {% load static %} {% block index %} diff --git a/newsaggregator/templates/core/contact.html b/newsaggregator/templates/core/contact.html index dad674a..9fab885 100644 --- a/newsaggregator/templates/core/contact.html +++ b/newsaggregator/templates/core/contact.html @@ -1,4 +1,4 @@ -{% extends 'partials/base.html' %} +{% extends 'core/base.html' %} {% load static %} {% block index %} diff --git a/newsaggregator/templates/core/index.html b/newsaggregator/templates/core/index.html index fa655ab..2f1aaf3 100644 --- a/newsaggregator/templates/core/index.html +++ b/newsaggregator/templates/core/index.html @@ -1,5 +1,5 @@ -{% extends 'partials/base.html' %} +{% extends 'core/base.html' %} {% load static %} @@ -14,10 +14,10 @@ {% include 'components/news.html' %} - - {% if not request.user.is_authenticated %} + {% comment %} + {% if not request.user.is_authenticated %} {% endcomment %} - {% endcomment %} + {% comment %} {% else %} {% endcomment %} - {% endcomment %} + {% comment %} {% endif %} {% endcomment %} {% endblock index %} diff --git a/newsaggregator/templates/userauths/sign-in.html b/newsaggregator/templates/userauths/sign-in.html index 70e8526..8702333 100644 --- a/newsaggregator/templates/userauths/sign-in.html +++ b/newsaggregator/templates/userauths/sign-in.html @@ -1,4 +1,4 @@ -{% extends 'partials/base.html' %} +{% extends '/base.html' %} {% load static %} {% block authentication %} diff --git a/newsaggregator/templates/userauths/sign-up.html b/newsaggregator/templates/userauths/sign-up.html index 643f89d..a3670c4 100644 --- a/newsaggregator/templates/userauths/sign-up.html +++ b/newsaggregator/templates/userauths/sign-up.html @@ -1,4 +1,4 @@ -{% extends 'partials/base.html' %} +{% extends 'core/base.html' %} {% load static %} {% block authentication %}