BuggY Code
awdaw
unknown
html
2 years ago
26 kB
4
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.8">
<title>BRUH</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=El+Messiri:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="font/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/iranian-sans" type="text/css"/></head>
</head>
<body>
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style>
.dropbtn {
color: white;
font-size: 16px;
border: none;
cursor: pointer;
transition: 1s;
}
.dropdown {
position: relative;
display: inline-block;
transition: 1s;
}
.dropdown-content {
height: 0;
transition: 1s;
position: absolute;
background-color: #000322;
min-width: 140px;
overflow: auto;
left: -17px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: white;
padding: 12px 16px;
cursor: pointer;
transition: 1s;
text-decoration: none;
display: block;
}
.show {height: 150px;}
@media(max-width: 700px){
.dropdown-content{
background-color: white;
}
.dropdown-content a{
color: #000322;
}
}
</style>
<section id="header" class="header">
<nav>
<br>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<img class="avatar" src=" {{ request.user.avatar.url }}"/>
<p class="username">{{request.user.FirstName }} {{ request.user.LastName }} </p>
<p class="role red-bg" style="color: rgb(228, 228, 228);">ادمین</p>
<br>
<hr>
<br>
<ul>
<li><a href="{% url 'home' %}">خانه</a></li>
<li><a href="{% url 'panel'%}">پنل کاربری</a></li>
<div class="dropdown">
<li><a onclick="myFunction()" class="dropbtn">محصولات</a></li>
<div id="myDropdown" class="dropdown-content">
<a href="{% url 'store' '' %}">کولر</a>
<a href="{% url 'store' '' %}">اسپلیت</a>
<a href="{% url 'store' '' %}"">پکیج</a>
</div>
</div>
</ul>
</div>
<i style="color: white; cursor:pointer;" class="fa fa-bars hamburger" onclick="showMenu()"></i>
</div>
</nav>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
if (document.getElementById("myDropdown").classList.contains('show')) {
openDropdown.classList.remove('show');
}
else{
document.getElementById("myDropdown").classList.add('show');
}
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Lalezar', cursive;
animation-name: 'loading';
animation-duration: 5s;
}
html{
background-color: rgb(255, 255, 255);
}
nav{
display: flex;
padding: 2% 6%;
justify-content: right;
align-items: center;
height: 30px;
background-color: #272727;
}
nav li a{position: relative;
top: -20px;
}
.header{
height: 300px;
}
.nav-img{
width: 90px;
position: relative;
bottom: -5px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.avatar{
width: 60px;
}
.nav-links {
flex: 1;
text-align: right;
}
.red-bg{
background-color: rgb(190, 0, 0);
}
.gray-bg{
background-color: gray;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 1px 20px;
position: relative;
}
.nav-links ul li a{
color: #ffffff;
text-decoration: none;
font-size: 22px;
}
@media(max-width: 1800px) {
.nav-links ul li a{
font-size: 20px;
}
}
.login{
transition: 1s;
}
.login:hover{
cursor: pointer;
}
.login a{
transition: 1s ;
}
.nav-links hr, .avatar, .username, .role{
display: none;
}
/* nav .fa {
display: none;
}*/
.role-2{
display: block;
color: rgb(61, 61, 61);
position: relative;
text-align: center;
border: transparent;
border-radius: 20px;
}
.pf-mode{
top: -60px;
}
@media(max-width: 700px){
nav .fa {
display: flex;
color: rgb(255, 255, 255);
margin: 10px;
font-size: 22px;
cursor: pointer;
text-align: right;
}
.fa-times{
padding-left: 160px;
}
.nav-links ul li a{
color: rgba(255, 255, 255, 0.836);
}
.text-box p{
font-size: 20px;
margin: 10px 0 40px;
font-family: 'El Messiri', sans-serif;
}
.text-box h1{
font-size: 40px;
font-weight: lighter;
}
.text-box a{
text-decoration: none;
font-size: 15px;
font-family: 'El Messiri', sans-serif;
}
.nav-links hr{
font-weight: bold;
border: 2px solid rgba(65, 65, 65, 0.548);
display: block;
}
.user-info{
display: none;
}
.nav-links ul li {
padding-top: 10px;
display: block;
}
.nav-links{
position: absolute;
background: #000322;
height: 100vh;
width: 200px;
opacity: 1;
top: 0;
right: -200px;
text-align: center;
z-index: 2;
transition: 1s;
display: none;
}
.avatar{
display: block;
background-color: white;
border-radius: 300px;
top: -10px;
left: 70px;
position: relative;
}
.username{
display: block;
color: rgb(255, 255, 255);
}
.role{
position: relative;
margin-left: 60px;
color: rgb(61, 61, 61);
top: 5px;
position: relative;
margin-right: 60px;
border: transparent;
border-radius: 20px;
}
.nav-img{
border-radius: 50px;
background-color: transparent;
}
}
a{
color: white;
text-align: center;
text-decoration: none;
}
.fa-check {
color: lime;
}
/*ScrollBar WebKit*/
::-webkit-scrollbar {
width: 0px;
height: 4px;
}
::-webkit-scrollbar-corner {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.377);
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.377);
}
::-webkit-scrollbar-thumb:hover {
transition: 3s;
background: rgba(0, 0, 0, 0.377);
}
@media(max-width:1250px){
.info-member{
display: none;
}
}
</style>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.display = 'block';
navLinks.style.right = "0"
}
function hideMenu(){
navLinks.style.display = 'none';
navLinks.style.right = "-200px"
}
</script>
</div>
<div class="context">
<img src="https://cdn.discordapp.com/attachments/993224965988044893/993324649356214335/colorful_logo.png">
<h1>شاپ اف</h1>
<button>ماینیکرافت</button>
<button>زولا</button>
<button>پابجی</button>
<button>هایپیکسل</button>
<button>فری فایر</button>
<br>
<br>
<button>استیم</button>
<button>فورتنایت</button>
<br>
<br>
<p>میخوای خرید کنی؟ دنبال ارزون ترین شاپی? و یا دنبال بهترین کیفیت؟ </p>
<br>
</div>
<div class="about">
<div class="about-top">
<p>... ویژه ها</p>
<hr>
</div>
<div class="about-container">
<div class="about-column">
<div class="img-name">
<br>
<img width="150px" height="150px" src="https://cdn.discordapp.com/icons/946394291461324830/bd753c868f2a4da45e9ed56a986ffcf9.gif?size=1024">
<p class="icon-fa">Bolt Shop</p>
<hr>
<br>
<h4>یکی از بهترین فروشگاه های</h4>
<h4>ایران برای گیم</h4>
<br>
<br>
</div>
</div>
<div class="about-column">
<div class="img-name">
<br>
<img width="150px" height="150px" src="https://cdn.discordapp.com/icons/909567682729365585/7be938a06edb1af02b90d181ad5d16ce.png?size=1024">
<p class="icon-fa">Fire Shop</p>
<hr>
<br>
<h4>یکی از بهترین فروشگاه های</h4>
<h4>ایران برای گیم</h4>
<br>
<br>
</div>
</div>
<div class="about-column">
<div class="img-name">
<br>
<img width="150px" height="150px" src="https://cdn.discordapp.com/icons/822917858920104006/a_d649a4f46689c1c0dc20072f2abc26b5.gif?size=1024">
<p class="icon-fa">Nairo Shop</p>
<hr>
<br>
<h4>یکی از بهترین فروشگاه های</h4>
<h4>ایران برای گیم</h4>
<br>
<br>
</div>
</div>
</div>
</div>
<div id="footer" class="container-footer" dir="rtl">
<br>
<div class="row-footer">
<div class="column-footer">
<h1> درباره </h1>
<br>
<p>بابات</p>
<p>طراح وبسایت بابات </p>
<p>
توجه : این وبسایت تنها در شهر های صشی و یشص میباشد
و محصول شما از فروشگاه های ما به خانه شما انتقال یافته
و برای شما به خانه شما متصل / ستاپ میشود
</p>
</div>
<br>
<div class="column-footer">
<h1>پشتیبانی</h1>
<br>
<p>برای کمک گرفتن از کسی شما میتوانید به شماره</p>
<p>زنگ بزنید و سوال خود را بپرسید</p>
<p>و یا با باز کردن تیکت ساپورت میتوانید از</p>
<p>کارمندان ما کمک بگیرید</p>
<p><a href="{% url 'panel' %}">برای باز کردن تیکت ساپورت کلیک کنید</a></p>
</div>
<br>
<div class="column-footer">
<h1>فروشگاه ها</h1>
<br>
<p>ادرس</p>
<p>ادرس</p>
<p>ادرس</p>
<p>ادرس</p>
<p>ادرس</p>
</div>
<br>
<div class="column-footer">
<h1>درباره</h1>
<br>
<p></p>
</div>
</div>
<p class="p-footer">کپی رایت © ۱400 شاپ اف . تمامی حقوق محفوظ است.</p>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap');
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@900&display=swap');
*{
margin: 0px;
padding: 0px;
}
body{
font-family: 'Lalezar', cursive;
}
.context {
width: 100%;
position: absolute;
top:20vh;
text-align: center;
}
.area{
background: #272727;
overflow-y:visible;
overflow-x: hidden;
width: 100%;
height:100vh;
}
.about-column{
transition: 1s;
box-shadow: 0 0 6px rgba(33,33,33,.2);
}
.about-column:hover{
transform: translateY(-10px);
box-shadow: 0 0 30px rgba(33,33,33,.2);
}
.about-column img{
border-radius: 10px;
}
.txt-info{
font-size: 20px;
transform: translateY(20px);
}
.icon-fa {
font-size: 25px; color: #ffffff; margin-top: 20px;
}
.about{
background-color: #272727;
}
.about-top p{
color: white;
font-size: 50px;
text-align: right;
margin-right: 30px;
font-weight: 0;
}
.about hr{
background: linear-gradient(345deg, rgba(127,28,255,1) 10%, rgb(91, 106, 241) 100%);
height: 2px;
border: none;
background-size: 400% 400%;
animation: gradient 3s linear infinite;
}
.about-container{
display: grid;
grid-template-columns: 5fr 5fr 5fr;
text-align: center;
justify-content: space-between;
justify-items:center;
column-gap: 20px;
align-items: center;
height: 50vh;
align-content: center;
row-gap: 20px;
position: relative;
overflow-x: hidden;
}
@media screen and (max-width: 1588px){
.about-container{
top: 0;
}
}
@media(max-width: 1400px){
.about-container{
grid-template-columns: 5fr 5fr 5fr;
}
}
@media(max-width: 920px){
.about-container{
grid-template-columns: 1fr 1fr;
height: 130vh;
}
}
@media(max-width: 560px){
.about-container{
grid-template-columns: 1fr;
height: 150vh;
}
}
.about-column {
height: 340px;
width: 250px;
background-color: rgb(51, 51, 51);
border-radius: 10px;
}
.about-column h4{
color: rgb(85, 85, 85);
font-size: 12px;
letter-spacing: -0.5px;
font-family: 'Noto Sans Arabic', sans-serif;
}
.context h1{
text-align: center;
color: #fff;
font-size: 80px;
font-weight: 1;
}
.context p{
text-align: center;
color: #fff;
font-family: 'Noto Sans Arabic', sans-serif;
font-size: 20px;
}
.context button{
padding: 6px;
padding-right: 9px;
padding-left: 9px;
font-family: 'Lalezar', cursive;
font-size: 15px;
border-radius: 5px;
border: none;
text-align: center;
color: rgb(216, 216, 216);
/* background: linear-gradient(132deg,#4568dc 0,#48b1bf 100%);*/
/* background: linear-gradient(132deg,#2849b8 0,#97289b 100%); */
/* background: linear-gradient(132deg,#c33764 0,#9b289b 100%); */
/*background: linear-gradient(132deg,#37bec3 0,#4daf0b 100%); */
/*background: linear-gradient(132deg,#37bec3 0,#4daf0b 100%);*/
background: linear-gradient(345deg, rgba(127,28,255,1) 10%, rgb(91, 106, 241) 100%);
background-size: 100% 100%;
animation: gradient 3s linear infinite;
transition: 3s;
}
.circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.circles li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 10s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
.circles li:nth-child(11){
left: 65%;
width: 100px;
height: 100px;
animation-delay: 0s;
animation-duration: 11s;
}
.circles li:nth-child(12){
left: 5%;
width: 100px;
height: 100px;
bottom: -10px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 10%;
}
100%{
transform: translateY(-1500px) rotate(720deg);
opacity: 0;
border-radius: 40%;
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* FOOTER */
@import url('https://cdn.viraweb123.ir/api/v2/cdn/libs/fonts/IRANSansWeb/font.css');
.container-footer {
font-family: 'IRANSansWeb';
color: white;
height: 410px;
margin: 0;
padding: 0;
background-color: #272727;
text-align: center;
}
.column-footer {
flex-basis: 31%;
border-radius: 10px;
border-radius: 10px;
margin-bottom: 5%;
justify-content: center;
text-align: right;
padding: 20px 12px;
box-sizing: border-box;
}
.container-footer p{
color: rgb(180, 180, 180);
font-size: 12px;
text-align: center;
font-family: 'Noto Sans Arabic', sans-serif;
}
.container-footer h1{
text-align: center;
font-family: 'Noto Sans Arabic', sans-serif;
}
.row-footer {
display: flex;
}
@media(max-width: 1000px){
.column-footer p{
font-size: 9px;
}
.column-footer h1{
font-size: 19px;
}
}
@media(max-width: 1300px){
.container-footer {
height: 440px;
}
}
@media(max-width: 850px){
.row-footer {
flex-direction: column;
display:none;
}
.container-footer {
height: 1200px;
}
}
.ticket-footer{
color: white;
text-decoration: none;
transition: 1s;
}
.ticket-footer:hover{
color: red;
}
</style>
</body>
</html>