Код:
<!--HTML--><center><div class="ytheme1"><div class="ythimg" style="background-image: url(https://forumstatic.ru/files/0018/11/de/97710.png);"></div> <titl>свайп вправо</titl> <text style="margin: 35px 0px 0px -140px!important;">Во времена расцвета высоких технологий правила поиска чего-либо просто перечеркнули все, что было ранее. Мы тут не расклеиваем объявления о поиске пропавших, конечно, нет! Сейчас эпоха репостов о поиске той девушки, которая понравилась в кафе две недели назад и одета была в розовую кофточку с цветными узорами. Можно даже создать сообщество и искать эту таинственную незнакомку. С таким количеством сообщников мы с вами найдем всех, кто дорог нашему сердцу. </text> </div></center><br><br>
Код:
<!--HTML-->
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script>
$( document ).ready(function() {
user_login = window.UserLogin;
$("#store_unique_login").val(user_login);
$("#pun-viewtopic .post .post-content p").each(function() {
if($(this).text().indexOf('<!--post-->')!=-1){
$(this).wrap('<div class="htmldemo"></div>');
$(this).replaceWith($('.htmldemo').text().split('<!--post-->')[1])
}});
$("#search_link_button").click(function(){
img_src = $('#search_link_input').val();
console.log(img_src);
$('#search_link').hide();
$('#search_link_button').hide();
$('#search_img_link').show();
$("#search_img_link").attr('src', img_src);
});
$(".close_helper").click(function() {
$('.theme_helper').hide();
});
//search_link_button
});
</script>
<style>
#search_name { position: absolute;
left: 69px;
top: 174px;
width: 450px;
height: 16px;
text-align: center;
color: white;
font-family: 'Akrobat';
font-weight: 900;
font-style: normal;
text-transform: uppercase;
font-size: 22px;
}
#search_profession { position: absolute;
left: 97px;
top: 199px;
width: 400px;
height: 16px;
font-size: 11px;
text-align: center;
color: white;
font-family: 'Roboto';
text-transform: lowercase;
}
#search_img {
position: absolute;
left:224px;
top:14px;
}
#search_img img {
width:150px;
height:150px;
object-fit: cover;
border-radius: 70px;
}
#search_img_link {
display: none;
}
#search_link {
background:white;
position: absolute;
width:150px;
max-height:30px;
left:224px;
top:80px;
font-size:9px;
font-family: 'Akrobat';
font-weight: 900;
font-style: normal;
opacity: 0.4;
overflow: hidden;
}
#search_link_button{background: #85417a;
position: absolute;
width: 120px;
max-height: 30px;
left: 238px;
top: 120px;
color: white;
cursor: pointer;
font-family: 'Akrobat';
font-weight: 900;
font-style: normal;
text-transform: uppercase;
font-size: 12px;
}
#search_link_input { font-family: Roboto Condensed;
font-size: 11px;
width:150px;
}
.close_helper {
position:absolute;
width:20px;
height:20px;
left:175px;
top:8px;
cursor:pointer;
z-index:12;
}
</style>
<body>
<center>
<div class="theme_helper"><div style=" font-family: Roboto;
top: 50px;
width: 90px;
left: 32px;
height: 151px;
position: absolute;
text-align: center;
font-size: 11px;
line-height: 13px;
color: #989898;
text-shadow: 0 1px 0 #ffffff94;">Чтобы найти нужного персонажа, просто введите свою заявку на картинке и нажмите «отправить»</div><div class="close_helper" title="закрыть подсказку"></div></div>
<div id="search_wrapper">
<div id="search_link">
<input type="text" id="search_link_input" name="name" size="18" placeholder="введите ссылку на картинку">
</div>
<div id="search_link_button">загрузить</div>
<div id="search_img">
<img src="" id="search_img_link">
</div>
<div id="search_name" contentEditable="plaintext-only">Name Surname</div>
<div id="search_profession" contentEditable="plaintext-only">имя внешности</div>
<div id ="search_quote" contentEditable="plaintext-only">короткое описание персонажа</div>
<div id ="search_content" contentEditable="plaintext-only">подробное описание персонажа</div>
<div id ="search_remarks_1" contentEditable="plaintext-only">пожелания к соигроку</div>
<div id ="search_remarks_2" contentEditable="plaintext-only">дополнительно</div>
</div></center>
<script>
$( document ).ready(function() {
$("#search_copyhtml").click(function(){
element = $('#search_wrapper').clone();
element .find('*').attr('contenteditable','false');
element = element.html();
$('.search_copyhtml_content').val('<!--post--> <center> <div id="search_wrapper">' + element + '</div></center> ');
});
});
</script>
<div id="post-form" class="formal" style="visibility:visible">
<form id="post" class="container" style="background:transparent; border:0px;" method="post" action="/post.php?tid=5" onsubmit="return RusffCore.TopicPostHandler(this)">
<fieldset>
<div class="fs-box hashelp">
<div id="formkey"></div>
<div id="formetc" style="display:none"></div>
<input type="hidden" name="form_sent" value="1">
<input type="hidden" name="form_user" id="store_unique_login" value="">
<p class="areafield required">
<span class="input"><textarea class="search_copyhtml_content" id="main-reply" style="display:none;" name="req_message" rows="13">s</textarea></span></p><p class="formsubmit"><input type="submit" id="search_copyhtml" class="button" name="submit" value="Отправить заявку" accesskey="s" title="Отправить" style="margin-left: 245px;
margin-top: 10px;"></p>
</div>
</fieldset>
</form>
</div>
<style>
.theme_helper { background-image: url(https://forumstatic.ru/files/0018/11/de/75849.png);
position: absolute;
/* left: 809px; */
/* top: 953px; */
margin: 10px 0px 0px 450px;
width: 200px;
height: 200px;
z-index: 10;
}
#search_remarks_2 {
position: absolute;
top: 514px;
color: white;
font-family: 'Roboto';
text-transform: lowercase;
left: 320px;
width: 210px;
padding: 10px;
height: 45px;
text-align: justify;
font-size: 11px;
overflow: auto;
border-radius: 20px;
}
#search_remarks_1 {
position: absolute;
top: 512px;
color: white;
font-family: 'Roboto';
text-transform: lowercase;
left: 44px;
width: 210px;
padding: 10px;
height: 45px;
text-align: justify;
font-size: 11px;
overflow: auto;
border-radius: 20px;
}
#search_content {position: absolute;
top: 286px;
color: white;
font-family: 'Roboto';
text-transform: lowercase;
left: 40px;
width: 490px;
padding: 10px;
height: 180px;
text-align: justify;
font-size: 11px;
overflow: auto;
border-radius: 20px;
background-color: transparent;
}
#search_quote {position: absolute;
top: 224px;
color: white;
font-family: 'Akrobat';
font-weight: 900;
font-style: normal;
left: 80px;
width: 430px;
padding: 5px;
height: 12px;
text-transform: uppercase;
text-align: center;
font-size: 12px;
overflow: hidden;
}
#search_wrapper {
position: relative;
width:600px;
height:609px;
background-image: url('https://forumstatic.ru/files/0018/11/de/17073.png');
}
</style>
</body>
</html>
