короче, я врубил html в сообщениях

Share12025-09-28 23:08:14

Posted by: Zetro
Администратор
Registered: 2025-09-27
Invites: 0
Posts: 14
Respect: [+0/-0]
Positive: [+1/-0]
Total time:
6 hours 45 minutes
Last visit:
2025-10-11 23:00:58

включив эту настройку все смогут писать код прямо внутри поста, прописывая такой тег:
[ html][/ html ] (пишите без пробелов внутри)
сам по себе html не язык программирования, но внутри него можно использовать js
наслаждайтесь

Author signature: гений, миллиардер, плейбой, филантроп, а вообще, обычный чел

0

Quote Post 1

Share22025-09-30 13:37:54

Posted by: greek
Модератор
Registered: 2025-09-28
Invites: 0
Posts: 1
Respect: [+0/-0]
Positive: [+0/-0]
Total time:
14 minutes
Last visit:
2025-09-30 13:42:45

[html]
<head>
<script>
$('.form').find('input, textarea').on('keyup blur focus', function (e) {

var $this = $(this),
label = $this.prev('label');

if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if( $this.val() === '' ) {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {

if( $this.val() === '' ) {
label.removeClass('highlight');
}
else if( $this.val() !== '' ) {
label.addClass('highlight');
}
}

});

$('.tab a').on('click', function (e) {

e.preventDefault();

$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');

target = $(this).attr('href');

$('.tab-content > div').not(target).hide();

$(target).fadeIn(600);

});
</script>
<style>
@import "compass/css3";

$body-bg: #c1bdba;
$form-bg: #13232f;
$white: #ffffff;

$main: #1ab188;
$main-light: lighten($main,5%);
$main-dark: darken($main,5%);

$gray-light: #a0b3b0;
$gray: #ddd;

$thin: 300;
$normal: 400;
$bold: 600;
$br: 4px;

*, *:before, *:after {
box-sizing: border-box;
}

html {
overflow-y: scroll;
}

body {
background:$body-bg;
font-family: 'Titillium Web', sans-serif;
}

a {
text-decoration:none;
color:$main;
transition:.5s ease;
&:hover {
color:$main-dark;
}
}

.form {
background:rgba($form-bg,.9);
padding: 40px;
max-width:600px;
margin:40px auto;
border-radius:$br;
box-shadow:0 4px 10px 4px rgba($form-bg,.3);
}

.tab-group {
list-style:none;
padding:0;
margin:0 0 40px 0;
&:after {
content: "";
display: table;
clear: both;
}
li a {
display:block;
text-decoration:none;
padding:15px;
background:rgba($gray-light,.25);
color:$gray-light;
font-size:20px;
float:left;
width:50%;
text-align:center;
cursor:pointer;
transition:.5s ease;
&:hover {
background:$main-dark;
color:$white;
}
}
.active a {
background:$main;
color:$white;
}
}

.tab-content > div:last-child {
display:none;
}

h1 {
text-align:center;
color:$white;
font-weight:$thin;
margin:0 0 40px;
}

label {
position:absolute;
transform:translateY(6px);
left:13px;
color:rgba($white,.5);
transition:all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size:22px;
.req {
margin:2px;
color:$main;
}
}

label.active {
transform:translateY(50px);
left:2px;
font-size:14px;
.req {
opacity:0;
}
}

label.highlight {
color:$white;
}

input, textarea {
font-size:22px;
display:block;
width:100%;
height:100%;
padding:5px 10px;
background:none;
background-image:none;
border:1px solid $gray-light;
color:$white;
border-radius:0;
transition:border-color .25s ease, box-shadow .25s ease;
&:focus {
outline:0;
border-color:$main;
}
}

textarea {
border:2px solid $gray-light;
resize: vertical;
}

.field-wrap {
position:relative;
margin-bottom:40px;
}

.top-row {
&:after {
content: "";
display: table;
clear: both;
}

> div {
float:left;
width:48%;
margin-right:4%;
&:last-child {
margin:0;
}
}
}

.button {
border:0;
outline:none;
border-radius:0;
padding:15px 0;
font-size:2rem;
font-weight:$bold;
text-transform:uppercase;
letter-spacing:.1em;
background:$main;
color:$white;
transition:all.5s ease;
-webkit-appearance: none;
&:hover, &:focus {
background:$main-dark;
}
}

.button-block {
display:block;
width:100%;
}

.forgot {
margin-top:-20px;
text-align:right;
}
</style>
</head>
<body>
<div class="form">

<ul class="tab-group">
<li class="tab active"><a href="#signup">Sign Up</a></li>
<li class="tab"><a href="#login">Log In</a></li>
</ul>

<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>

<form action="/" method="post">

<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>

<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>

<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>

<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>

<button type="submit" class="button button-block"/>Get Started</button>

</form>

</div>

<div id="login">
<h1>Welcome Back!</h1>

<form action="/" method="post">

<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>

<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>

<p class="forgot"><a href="#">Forgot Password?</a></p>

<button class="button button-block"/>Log In</button>

</form>