Prem Shahi Total Order
40,876
Up from yesterday
Total Sales
38,876
Up from yesterday
Total Profit
$12,876
Up from yesterday
Total Return
11,086
Down From Today
Recent Sales
Date
02 Jan 2021
02 Jan 2021
02 Jan 2021
02 Jan 2021
02 Jan 2021
02 Jan 2021
02 Jan 2021
Customer
Alex Doe
David Mart
Roe Parter
Diana Penty
Martin Paw
Doe Alex
Aiana Lexa
Rexel Mags
Tiana Loths
Sales
Delivered
Pending
Returned
Delivered
Pending
Returned
Delivered
Pending
Delivered
Total
$204.98
$24.55
$25.88
$170.66
$56.56
$44.95
$67.33
$23.53
$46.52
See All
Create a file name with style.css on your computer then copy-paste the following codes in your CSS document. Make sure these two HTML and CSS files should be in the same folder.
/* Googlefont Poppins CDN Link */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); * < margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; >.sidebar < position: fixed; height: 100%; width: 240px; background: #0A2558; transition: all 0.5s ease; >.sidebar.active < width: 60px; >.sidebar .logo-details < height: 80px; display: flex; align-items: center; >.sidebar .logo-details i < font-size: 28px; font-weight: 500; color: #fff; min-width: 60px; text-align: center >.sidebar .logo-details .logo_name < color: #fff; font-size: 24px; font-weight: 500; >.sidebar .nav-links < margin-top: 10px; >.sidebar .nav-links li < position: relative; list-style: none; height: 50px; >.sidebar .nav-links li a < height: 100%; width: 100%; display: flex; align-items: center; text-decoration: none; transition: all 0.4s ease; >.sidebar .nav-links li a.active < background: #081D45; >.sidebar .nav-links li a:hover < background: #081D45; >.sidebar .nav-links li i < min-width: 60px; text-align: center; font-size: 18px; color: #fff; >.sidebar .nav-links li a .links_name < color: #fff; font-size: 15px; font-weight: 400; white-space: nowrap; >.sidebar .nav-links .log_out < position: absolute; bottom: 0; width: 100%; >.home-section < position: relative; background: #f5f5f5; min-height: 100vh; width: calc(100% - 240px); left: 240px; transition: all 0.5s ease; >.sidebar.active ~ .home-section < width: calc(100% - 60px); left: 60px; >.home-section nav < display: flex; justify-content: space-between; height: 80px; background: #fff; display: flex; align-items: center; position: fixed; width: calc(100% - 240px); left: 240px; z-index: 100; padding: 0 20px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); transition: all 0.5s ease; >.sidebar.active ~ .home-section nav < left: 60px; width: calc(100% - 60px); >.home-section nav .sidebar-button < display: flex; align-items: center; font-size: 24px; font-weight: 500; >nav .sidebar-button i < font-size: 35px; margin-right: 10px; >.home-section nav .search-box < position: relative; height: 50px; max-width: 550px; width: 100%; margin: 0 20px; >nav .search-box input < height: 100%; width: 100%; outline: none; background: #F5F6FA; border: 2px solid #EFEEF1; border-radius: 6px; font-size: 18px; padding: 0 15px; >nav .search-box .bx-search < position: absolute; height: 40px; width: 40px; background: #2697FF; right: 5px; top: 50%; transform: translateY(-50%); border-radius: 4px; line-height: 40px; text-align: center; color: #fff; font-size: 22px; transition: all 0.4 ease; >.home-section nav .profile-details < display: flex; align-items: center; background: #F5F6FA; border: 2px solid #EFEEF1; border-radius: 6px; height: 50px; min-width: 190px; padding: 0 15px 0 2px; >nav .profile-details img < height: 40px; width: 40px; border-radius: 6px; object-fit: cover; >nav .profile-details .admin_name < font-size: 15px; font-weight: 500; color: #333; margin: 0 10px; white-space: nowrap; >nav .profile-details i < font-size: 25px; color: #333; >.home-section .home-content < position: relative; padding-top: 104px; >.home-content .overview-boxes < display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 20px; margin-bottom: 26px; >.overview-boxes .box < display: flex; align-items: center; justify-content: center; width: calc(100% / 4 - 15px); background: #fff; padding: 15px 14px; border-radius: 12px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); >.overview-boxes .box-topic < font-size: 20px; font-weight: 500; >.home-content .box .number < display: inline-block; font-size: 35px; margin-top: -6px; font-weight: 500; >.home-content .box .indicator < display: flex; align-items: center; >.home-content .box .indicator i < height: 20px; width: 20px; background: #8FDACB; line-height: 20px; text-align: center; border-radius: 50%; color: #fff; font-size: 20px; margin-right: 5px; >.box .indicator i.down < background: #e87d88; >.home-content .box .indicator .text < font-size: 12px; >.home-content .box .cart < display: inline-block; font-size: 32px; height: 50px; width: 50px; background: #cce5ff; line-height: 50px; text-align: center; color: #66b0ff; border-radius: 12px; margin: -15px 0 0 6px; >.home-content .box .cart.two < color: #2BD47D; background: #C0F2D8; >.home-content .box .cart.three < color: #ffc233; background: #ffe8b3; >.home-content .box .cart.four < color: #e05260; background: #f7d4d7; >.home-content .total-order < font-size: 20px; font-weight: 500; >.home-content .sales-boxes < display: flex; justify-content: space-between; /* padding: 0 20px; */ >/* left box */ .home-content .sales-boxes .recent-sales < width: 65%; background: #fff; padding: 20px 30px; margin: 0 20px; border-radius: 12px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); >.home-content .sales-boxes .sales-details < display: flex; align-items: center; justify-content: space-between; >.sales-boxes .box .title < font-size: 24px; font-weight: 500; /* margin-bottom: 10px; */ >.sales-boxes .sales-details li.topic < font-size: 20px; font-weight: 500; >.sales-boxes .sales-details li < list-style: none; margin: 8px 0; >.sales-boxes .sales-details li a < font-size: 18px; color: #333; font-size: 400; text-decoration: none; >.sales-boxes .box .button < width: 100%; display: flex; justify-content: flex-end; >.sales-boxes .box .button a < color: #fff; background: #0A2558; padding: 4px 12px; font-size: 15px; font-weight: 400; border-radius: 4px; text-decoration: none; transition: all 0.3s ease; >.sales-boxes .box .button a:hover < background: #0d3073; >/* Right box */ .home-content .sales-boxes .top-sales < width: 35%; background: #fff; padding: 20px 30px; margin: 0 20px 0 0; border-radius: 12px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); >.sales-boxes .top-sales li < display: flex; align-items: center; justify-content: space-between; margin: 10px 0; >.sales-boxes .top-sales li a img < height: 40px; width: 40px; object-fit: cover; border-radius: 12px; margin-right: 10px; background: #333; >.sales-boxes .top-sales li a < display: flex; align-items: center; text-decoration: none; >.sales-boxes .top-sales li .product, .price < font-size: 17px; font-weight: 400; color: #333; >/* Responsive Media Query */ @media (max-width: 1240px) < .sidebar< width: 60px; >.sidebar.active < width: 220px; >.home-section < width: calc(100% - 60px); left: 60px; >.sidebar.active ~ .home-section < /* width: calc(100% - 220px); */ overflow: hidden; left: 220px; >.home-section nav < width: calc(100% - 60px); left: 60px; >.sidebar.active ~ .home-section nav < width: calc(100% - 220px); left: 220px; >> @media (max-width: 1150px) < .home-content .sales-boxes< flex-direction: column; >.home-content .sales-boxes .box < width: 100%; overflow-x: scroll; margin-bottom: 30px; >.home-content .sales-boxes .top-sales < margin: 0; >> @media (max-width: 1000px) < .overview-boxes .box< width: calc(100% / 2 - 15px); margin-bottom: 15px; >> @media (max-width: 700px) < nav .sidebar-button .dashboard, nav .profile-details .admin_name, nav .profile-details i< display: none; >.home-section nav .profile-details < height: 50px; min-width: 40px; >.home-content .sales-boxes .sales-details < width: 560px; >> @media (max-width: 550px) < .overview-boxes .box< width: 100%; margin-bottom: 15px; >.sidebar.active ~ .home-section nav .profile-details < display: none; >> @media (max-width: 400px) < .sidebar< width: 0; >.sidebar.active < width: 60px; >.home-section < width: 100%; left: 0; >.sidebar.active ~ .home-section < left: 60px; width: calc(100% - 60px); >.home-section nav < width: 100%; left: 0; >.sidebar.active ~ .home-section nav < left: 60px; width: calc(100% - 60px); >> If you face any difficulties while creating your Admin Dashboard or your code is not working as expected, you can download the source code files for this Admin Dashboard Panel for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
TAGS admin dashboard template free download admin template dashboard template bootstrap HTML and CSS HTML CSS JavaScript Side Navigation Bar Sidebar Menu Website Design Website Section Источник
Css верстка админ панели
WordPress 6 с Нуля до Гуру Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS — WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.
Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.
Помимо уроков к курсу идут упражнения для закрепления материала.
И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход . Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail , Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте ! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Какая тема Вас интересует больше?
— Вы получите необходимую базу по Unreal Engine 5
— Вы познакомитесь с множеством инструментов в движке
— Вы научитесь создавать несложные игры
Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!
Чтобы получить Видеокурс,
Как создать профессиональный Интернет-магазин
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
Источник
Админка за 10 минут
Здравствуйте, уважаемое Хабрасообщество!
Я занимаюсь разработкой веб-сайтов. Как правило, это решения под индивидуальные потребности заказчиков. Поэтому я не использую готовые CMS, а предпочитаю складывать кирпичики самостоятельно. Конечно и админскую часть приходиться писать самостоятельно, поскольку она должна выполнять те функции, которые нужны заказчику, но и ничего лишнего не должно быть. И если написать несколько методов для редактирования данных это пол беды, то приходилось ещё и верстать приятный и удобный интерфейс.
Долгое время я использовал Twitter Bootstrap, но он не мог удовлетворить все потребности. Приходилось верстать дополнительные кнопочки и писать скрипты. Но вот однажды, я познакомился с замечательным UI-фреймворком KendoUI от Telerik. Что из этого получилось под катом.
О самом фреймворке уже писалась статья на Хабре. Мы будем использовать библиотеку Web-контролов KendoUI Web. Чтобы понимать, что можно создавать с её помощью можно посетить страничку с демо. Для построения контролов можно использовать как хелперы для ASP.NET, JSP или PHP, так и javascript-виджеты. Последние распространяются по лицензии GPL v3 License, поэтому я использовал именно их. Скачать тот или иной пакет можно здесь. На серверной стороне я использую ASP.NET MVC 4 с пакетом Microsoft ASP.NET Web API OData 4.0.0, уставить который можно с помощью команды PM> Install-Package Microsoft.AspNet.WebApi.OData
Для демонстрации создадим простой класс Article, и добавим ему три свойства разного типа
public class Article < public int ID < get; set; >public string Title < get; set; >public bool Hidden < get; set; >> Далее создадим ApiController для работы с данными. В своем примере я использую Entity Framework, поэтому сразу указываю Scaffolding options
После этого я изменяю только действие GetArticles, так показано в примере ниже. Прежде всего теперь оно возвращает ODataResult. А в качестве параметра принимает ODataQueryOptions, это коллекция сериализованных параметров строки запроса. В самом действии мы получаем коллекцию и общее количество элементов в ней. А после применяем к ней входящие параметры. В результате мы возвращаем коллекцию после применение к ней параметров и общее количество, оно необходимо для пагинации.
public class ArticlesController : ApiController < private Storage db = new Storage(); // GET api/Articles public ODataResultGetArticles(ODataQueryOptions options) < var items = db.Articles; var count = items.Count(); var res = (IEnumerable)options.ApplyTo(items); return new ODataResult(res, null, count); > // GET api/Articles/5 public Article GetArticle(int id) < Article article = db.Articles.Find(id); if (article == null) < throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound)); >return article; > // PUT api/Articles/5 public HttpResponseMessage PutArticle(int id, Article article) < if (ModelState.IsValid && article.ID) < db.Entry(article).State = EntityState.Modified; try < db.SaveChanges(); >catch (DbUpdateConcurrencyException) < return Request.CreateResponse(HttpStatusCode.NotFound); >return Request.CreateResponse(HttpStatusCode.OK); > else < return Request.CreateResponse(HttpStatusCode.BadRequest); >> // POST api/Articles public HttpResponseMessage PostArticle(Article article) < if (ModelState.IsValid) < db.Articles.Add(article); db.SaveChanges(); HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, article); response.Headers.Location = new Uri(Url.Link("DefaultApi", new < >)); return response; > else < return Request.CreateResponse(HttpStatusCode.BadRequest); >> // DELETE api/Articles/5 public HttpResponseMessage DeleteArticle(int id) < Article article = db.Articles.Find(id); if (article == null) < return Request.CreateResponse(HttpStatusCode.NotFound); >db.Articles.Remove(article); try < db.SaveChanges(); >catch (DbUpdateConcurrencyException) < return Request.CreateResponse(HttpStatusCode.NotFound); >return Request.CreateResponse(HttpStatusCode.OK, article); > > Вот и все. Самое время переходить к клиентской части. Для начала подключим KendoUI и JQuery на страницу.
После этого установим и настроим виджет. Подробнее о настройках виджета можно прочитать здесь.
Готово! Теперь можно запускать и проверять. Менее чем за 10 минут мы создали полноценный интерфейс для управления данными, с возможностью пагинации, сортировки и фильтрации. Удобный и приятный. Спасибо KendoUI и формату OData, а Вам за внимание.
Р.S. Кстати есть возможность локализации виджетов. Для этого необходимо подключить соответствующий скрипт из папки js/cultures , который поставляется в архиве с фреймворком.
Источник