Spaces:

nurserf
/

css-prefix-wizard-pro

Running

App Files Files Community

nurserf commited on Sep 28, 2025

Commit

77b9ecd

verified ·

1 Parent(s): c87b416

I have a CSS and HTML layout for an anime website, currently simple. I want you to completely redesign it to be ultra-modern, visually stunning, and interactive. The goals are:

Browse files

1. Add smooth animations and transitions (hover effects, scroll animations, fade-ins, sliding panels, etc.) to make the site feel alive.
2. Make the layout dynamic and responsive for desktop and mobile.
3. Use a bold and stylish color palette inspired by Crunchyroll or premium anime streaming sites.
4. All UI blocks (login form, Google sign-in button, anime news cards, video players) should be visually distinct and animated subtly when hovered or focused.
5. Use modern typography with readable yet stylish fonts.
6. Include small interactive details that impress users on first visit (e.g., animated backgrounds, glowing buttons, sliding overlays, scroll-triggered effects).
7. Keep all current functionality intact (login, search input, video players, etc.), but enhance the design.
8. Output clean, organized, and production-ready HTML/CSS code.

Treat this as a premium anime streaming site interface where visitors are immediately amazed when they open the page.
<!DOCTYPE html>
<html lang="ru">



<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="google-site-verification" content="o6_4-L6HJxJfaZTC2daID_07xicaKGoQZ3lQaH0-tVk" />
<title>Animeditv - Смотреть аниме онлайн</title>
<meta name="description" content="Смотрите самые новые и популярные аниме онлайн на Animeditv Коллекция фильмов и сериалов в русской озвучке и дубляже.">
<meta name="keywords" content="аниме, аниме онлайн, смотреть аниме, аниме русская озвучка, аниме дубляж, Animeditv, Доктор Стоун, Наруто">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style4.css">
<link rel="icon" type="image/webp" href="public img/Animedia.webp" />
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>


<body id="my_id">


<div class="position_div">

<form class="container" id="login-form" method="post" action="/signin.php"
type="sumbit">
<div class="header_menu_header_close red" onclick="OpenForm()">
<ion-icon name="close-outline"></ion-icon>
</div>

<h2>Вход</h2>
<input name="email" type="email" id="login-email" placeholder="Введите email..." required>
<input name="password" type="password" id="login-password" placeholder="Введите пароль..." required>
<button type="submit">Войти</button>
<div id="g_id_onload"
data-client_id="465132351438-k34552q02geis7bn5lprt0jtb02f0bes.apps.googleusercontent.com"
data-context="signin"
data-ux_mode="popup"
data-callback="handleCredentialResponse"
data-auto_prompt="false">
</div>

<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="sign_in_with"
data-size="large"
data-logo_alignment="left">
</div>
<div class="link" onclick="showRegister()">Регистрация</div>
</form>

<form class="container" id="register-form" style="display: none;"
action="/signup.php" method="post">
<h2>Регистрация</h2>
<input type="text" id="register-username" placeholder="Имя пользователя"
required name="name">
<input type="email" id="register-email" placeholder="Email"
required name="email">
<input type="password" id="register-password" placeholder="Пароль"
required name="password">
<button onclick="register()">Зарегистрироваться</button>

<div id="g_id_onload" data-client_id="465132351438-k34552q02geis7bn5lprt0jtb02f0bes.apps.googleusercontent.com"
data-context="signin" data-ux_mode="popup" data-callback="handleCredentialResponse" data-auto_prompt="false">
</div>

<div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline"
data-text="sign_in_with" data-size="large" data-logo_alignment="left">
</div>

<div class="link" onclick="showLogin()">Назад</div>
</form>

</div>



<header class="header">
<div class="logo"><img src="public img/Logo animedia -Photoroom.webp" alt="AnimediTV Logo"></div>
<nav>
<a href="index.html" class="active" id="navHome">Главная</a>
<a href="" id="navCategories">Категории</a>




<div class="lang-inline">
<a href="https://animediatv.kg" class="lang" data-lang="uz">UZ</a>
<span class="divider">|</span>
<a href="https://animediatv.kg/ru/" class="lang active" data-lang="ru">RU</a>
</div>

<span id="auth-area">
<a onclick="OpenForm()" id="login-btn">
Войти
<ion-icon name="log-in-outline"></ion-icon>
</a>
</span>
</nav>

<div class="header_menu">

<div class="header_menu_header">
<div class="header_menu_header_text">
Меню
</div>

<div class="header_menu_header_close" onclick="burger_menu()">
<ion-icon name="close-outline"></ion-icon>
</div>
</div>

<a href="index.html">
Главная
</a>

<a href="#scroll_search" id="navCategories">Категории</a>
</div>

<div class="bline">
<div class="usericon" onclick="OpenForm()">
<ion-icon name="log-in-outline"></ion-icon>
</div>

<div class="burger" id="burger" onclick="burger_menu()">
<div class="open">
<ion-icon name="menu-outline"></ion-icon>
</div>
<div class="close">
<ion-icon name="close-outline"></ion-icon>
</div>
</div>
</div>

</header>



<section class="slider">
<div class="slides">

<div class="chyntemir_btn chyntemir_btns_left" onclick="chyntemir_left()">
<ion-icon name="chevron-back-sharp"></ion-icon>
</div>

<div class="chyntemir_btn chyntemir_btns_right" onclick="chyntemir_right()">
<ion-icon name="chevron-forward-sharp"></ion-icon>
</div>

<div class="slide active" style="background-image: url('https://cdn.animediatv.kg/public/temp/4f7ca464a8a5a3deaebcb2b2b.webp')">
<div class="opacity-banner"></div> 
<div class="slide-content">
<h1>Доктор Стоун 5: Научное будущее [15+]</h1>
<p>Тайное событие привело к тому, что человечество превратилось в камень, и спустя тысячи лет оно снова
пытается воскреснуть.
</p>
<div class="slide-meta">
<span>2024</span>
<a href="doktor Stoun5.html"><button class="watch-btn">Смотреть</button></a>
<link rel="stylesheet" href="style5.css">
</div>
</div>
<img src="https://cdn.animediatv.kg/public/temp/fe4bfaDoktor%20stoun6ee4ed8aa3f003.webp" class="poster-img" alt="Poster 1">
</div>

<div class="slide" style="background-image: url('https://cdn.animediatv.kg/public/temp/62c58bf564e5b5sirlarhukumdori.webp')">
<div class="opacity-banner"></div>
<div class="slide-content">
<h1>Повелитель тайн: Клоун [17+]</h1>
<p>В туманном мире скрыты тайны и страшные шутки...</p>
<div class="slide-meta">
<span>2024</span>
<a href="./sirlarhurmdori.html"><button class="watch-btn">Смотреть</button></a>
<link rel="stylesheet" href="style5.css">
</div>
</div>
<img src="https://cdn.animediatv.kg/public/temp/fcd6b34b0e32cfadcd037b150bd77a80.jpg" class="poster-img" alt="Poster 2">
</div>


<div class="slide" style="background-image: url('https://cdn.animediatv.kg/public/temp/8023745154dfNaruto.webp')">
<div class="opacity-banner"></div> 
<div class="slide-content">
<h1>Наруто: Ураганные хроники [15+]</h1>
<p>Наруто и его друзья сталкиваются с новыми приключениями.</p>
<div class="slide-meta">
<span>2007</span>
<a href="naruto.html"><button class="watch-btn">Смотреть</button></a>
<link rel="stylesheet" href="style5.css">
</div>
</div>
<img src="https://cdn.animediatv.kg/public/temp/Naruto1.webp" class="poster-img" alt="Poster 3">
</div>


<div class="slide" style="background-image: url('https://cdn.animediatv.kg/public/temp/Seven%20sinsback.webp')">
<div class="opacity-banner"></div> 
<div class="slide-content">
<h1>Семь смертных грехов: Узники небес [17+]</h1>
<p>"Элизабета, установив порядок в королевстве, устраивает великий пир в честь своего дня рождения..."
</p>
<div class="slide-meta">
<span>2018</span>
<a href="sevendeadlysins.html"><button class="watch-btn">Смотреть</button></a>
<link rel="stylesheet" href="style5.css">

Files changed (0) hide show