Тестовое сообщение

Поделиться12023-08-26 12:16:59

Автор: daddy issues
Администратор
Сообщений: 11
Уважение: +0

[hideprofile]

Тематика проекта: real life;
Рейтинг проекта: NС-21;
Место действия: США;
Игровая система: эпизодическая.

Доброго времени суток, уважаемый путник! Встречай – место, где реальность сливается с творчеством, а мистика остается за порогом. Мы – команда творческих умов: дизайнер, текстовики, организаторы и мастера развлечений. Но для чего мы здесь, спросите вы? Естественно, чтобы вместе создать форум, который останется в памяти навсегда, укрепив свои корни в сердцах каждого участника.
Мы ищем: графистов, кодеров, текстовиков, организаторов и пиарщиков, людей, которые будут «гореть» форумом и развивать его. От вас ждем: умение слушать и слышать, спокойно относиться к критике, творческий подход к решению проблем, желание развивать форум и готовность посвящать ему время. Если вы разделяете наши взгляды на вещи, приглашаем вас присоединиться! Заполняйте код ниже, и волшебство начнется.
А если вы до сих пор колеблетесь и не уверены, чем именно хотели бы заняться, то добро пожаловать во флуд, где шутки играют на струнах смеха, а активные дискуссии кружатся вокруг погоды за окном. Ведь в конечном итоге, зачем мы здесь, если не для поиска вдохновения, поиска соигроков и сюжетов, что вскружат наши головы?

заполни меня

Код:

[hide=99999999999][b]меня зовут[/b]
представьтесь, пожалуйста
[b]что ты умеешь?[/b]
коды, текст, графика, конкурсы, организация или пиар
[b]примеры ваших работ[/b]
покажи текст, графику или форумы, которые админил
[b]на какую должность идешь?[/b]
администратор/модератор
[b]сколько времени готов уделять форуму[/b]
ответ
[b]связь[/b]
телеграмм[/hide]

0

Поделиться22023-08-26 15:53:36

Автор: daddy issues
Администратор
Сообщений: 11
Уважение: +0

:question:

0

Поделиться32023-08-26 15:53:41

Автор: daddy issues
Администратор
Сообщений: 11
Уважение: +0

Код:

blah

0

Поделиться42023-08-26 15:53:47

Автор: daddy issues
Администратор
Сообщений: 11
Уважение: +0

0

Поделиться52023-08-26 15:53:53

Автор: daddy issues
Администратор
Сообщений: 11
Уважение: +0

daddy issues написал(а):

Отказаться от полученного приза, а также его обмен или возврат, к сожалению, невозможно. В справедливости ради, давайте ограничимся одним выбранным номером, чтобы у всех был шанс. Так что, не теряйте времени – выбирайте свою счастливую цифру и позвольте нам подарить вам незабываемые эмоции!

0

Поделиться62023-08-26 17:28:46

Автор: daddy issues
Администратор
Сообщений: 11
Уважение: +0

тут текст

0

Поделиться72023-08-27 17:21:35

Автор: daddy issues
Администратор
Сообщений: 11
Уважение: +0

Tell me baby

0

Поделиться82023-08-28 13:19:56

Автор: daddy issues
Администратор
Сообщений: 11
Уважение: +0

0

Поделиться92023-08-28 14:44:07

Автор: daddy issues
Администратор
Сообщений: 11
Уважение: +0

0

Поделиться102023-08-28 16:41:19

Автор: daddy issues
Администратор
Сообщений: 11
Уважение: +0

[html]
<style>
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
--trans-dur: 0.3s;
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}

.icon-btns {
display: grid;
grid-gap: 3em;
grid-template-columns: repeat(2,1fr);
margin: auto;
padding: 3em 0;
}
.icon-btn {
background-color: transparent;
outline: transparent;
position: relative;
width: 4.5em;
height: 4.5em;
perspective: 24em;
transform-style: preserve-3d;
-webkit-tap-highlight-color: transparent;
border: none;
}
.icon-btn__back,
.icon-btn__front,
.icon-btn__label {
transition:
opacity var(--trans-dur) cubic-bezier(0.83,0,0.17,1),
transform var(--trans-dur) cubic-bezier(0.83,0,0.17,1);
}
.icon-btn__back,
.icon-btn__front {
border-radius: 1.25em;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.icon-btn__back {
background: linear-gradient(hsl(var(--hue),10%,50%),hsl(208,10%,50%));
box-shadow: 0.5em -0.5em 0.75em hsla(var(--hue),10%,10%,0.15);
display: block;
transform: rotate(15deg);
transform-origin: 100% 100%;
}
.icon-btn__front {
background-color: hsla(0,0%,100%,0.3);
box-shadow: 0 0 0 0.125em hsla(0,0%,100%,0.3) inset;
backdrop-filter: blur(0.75em);
-webkit-backdrop-filter: blur(0.75em);
display: flex;
transform-origin: 80% 50%;
}
.icon-btn--blue .icon-btn__back {
background: linear-gradient(hsl(var(--hue),90%,50%),hsl(208,90%,50%));
}
.icon-btn--green .icon-btn__back {
background: linear-gradient(hsl(123,90%,40%),hsl(108,90%,40%));
}
.icon-btn--indigo .icon-btn__back {
background: linear-gradient(hsl(253,90%,50%),hsl(238,90%,50%));
}
.icon-btn--purple .icon-btn__back {
background: linear-gradient(hsl(283,90%,50%),hsl(268,90%,50%));
}
.icon-btn--red .icon-btn__back {
background: linear-gradient(hsl(3,90%,50%),hsl(348,90%,50%));
}
.icon-btn--orange .icon-btn__back {
background: linear-gradient(hsl(43,90%,50%),hsl(28,90%,50%));
}
.icon-btn__icon {
margin: auto;
width: 1.5em;
height: 1.5em;
}
.icon-btn__label {
font-size: 0.75em;
line-height: 2;
opacity: 0;
position: absolute;
top: 100%;
right: 0;
left: 0;
transform: translateY(0);
color: #fff;
}
.icon-btn:focus-visible .icon-btn__back,
.icon-btn:hover .icon-btn__back {
transform: rotate(22.5deg);
}
.icon-btn:focus-visible .icon-btn__front,
.icon-btn:hover .icon-btn__front {
transform: translateZ(3em) rotateX(20deg) rotateY(20deg);
}
.icon-btn:focus-visible .icon-btn__label,
.icon-btn:hover .icon-btn__label {
opacity: 1;
transform: translateY(20%);
}
.sprites {
display: block;
position: fixed;
transform: translateY(-100%);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,30%);
--fg: hsl(var(--hue),10%,90%);
}
}

/* Beyond mobile */
@media (min-width: 768px) {
.icon-btns {
grid-template-columns: repeat(3,1fr);
}
}
</style>

<container style="background: #6e5a5a;
display: block;
padding: 20px 0px 10px 60px;">
<svg class="sprites" display="none">
<defs>
<linearGradient id="icon-grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fff" />
<stop offset="100%" stop-color="#222" />
</linearGradient>
<mask id="icon-mask">
<rect x="0" y="0" width="24" height="24" fill="url(#icon-grad)" />
</mask>
<symbol id="files" viewBox="0 0 24 24">
<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
<path d="m2.003,3h3.997c1.105,0,2,.895,2,2h0s14.005,0,14.005,0c1.102,0,1.995.893,1.995,1.995v1.005H0v-2.997c0-1.106.897-2.003,2.003-2.003Z"/>
<path d="m22.005,21H1.996c-1.102,0-1.996-.893-1.996-1.996v-9.004l24-.172v9.177c0,1.102-.893,1.995-1.995,1.995Z"/>
</g>
</symbol>
<symbol id="books" viewBox="0 0 24 24">
<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
<path d="m14.113,22.696c-.356.389-1.022.176-1.022-.351V3.287c1.091-1.091,2.277-1.558,3.509-1.83,2.182-.481,4.125-.377,5.314-.222,1.317.171,2.087,1.342,2.087,2.495v14.357c0,1.553-1.296,2.777-2.802,2.727-1.246-.041-2.975.003-4.541.382-1.195.289-1.954.856-2.544,1.501Z"/>
<path d="m9.887,22.696c.356.389,1.022.176,1.022-.351V3.287c-1.091-1.091-2.277-1.558-3.509-1.83-2.182-.481-4.125-.377-5.314-.222C.77,1.406,0,2.577,0,3.729v14.357c0,1.553,1.296,2.777,2.802,2.727,1.246-.041,2.975.003,4.541.382,1.194.289,1.954.856,2.544,1.501Z"/>
</g>
</symbol>
<symbol id="graph" viewBox="0 0 24 24">
<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
<rect rx="1" ry="1" x="0" y="12" width="6" height="12" />
<rect rx="1" ry="1" x="9" y="0" width="6" height="24" />
<rect rx="1" ry="1" x="18" y="6" width="6" height="18" />
</g>
</symbol>
<symbol id="weather" viewBox="0 0 24 24">
<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
<path d="m2.65,10.95c.916-.546,1.986-.858,3.129-.858.138,0,.276.004.414.013.388-1.331,1.13-2.499,2.113-3.403-.187-2.126-1.971-3.791-4.144-3.791-2.299,0-4.162,1.863-4.162,4.162,0,1.766,1.1,3.273,2.65,3.877Z"/>
<path d="m19.687,12.464s-.003,0-.005,0c.002-.072.005-.144.005-.216,0-3.454-2.8-6.254-6.253-6.254-3.235,0-5.897,2.457-6.22,5.607-.454-.14-.936-.216-1.435-.216-2.679,0-4.852,2.172-4.852,4.852s2.172,4.852,4.852,4.852h13.908c2.382,0,4.313-1.931,4.313-4.312,0-2.382-1.931-4.313-4.313-4.313Z"/>
</g>
</symbol>
<symbol id="pen" viewBox="0 0 24 24">
<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
<path d="M3.1,0C2.5-0.1,2.1,0.6,2.5,1L10,8.5c0.2,0,0.4-0.1,0.6-0.1c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2c0-0.2,0-0.4,0.1-0.6L1,2.5C0.6,2.1-0.1,2.5,0,3.1L3.4,17c0.1,0.4,0.4,0.7,0.9,0.8l6.4,1.3c-0.2,0.4-0.1,0.9,0.2,1.2l3.3,3.3c0.4,0.4,1.1,0.4,1.6,0l7.8-7.8c0.4-0.4,0.4-1.1,0-1.6l-3.3-3.3c-0.3-0.3-0.8-0.4-1.2-0.2l-1.3-6.4c-0.1-0.4-0.4-0.8-0.8-0.9L3.1,0z"/>
</g>
</symbol>
<symbol id="heart" viewBox="0 0 24 24">
<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
<path d="m.204,9.117c.272,1.039.791,1.942,1.558,2.709l10.238,10.597,10.238-10.597c.767-.767,1.287-1.67,1.558-2.709.272-1.039.272-2.07,0-3.093-.272-1.023-.791-1.918-1.558-2.685-.767-.767-1.662-1.287-2.685-1.558-1.023-.272-2.062-.272-3.117,0-1.055.272-1.95.791-2.685,1.558l-1.75,2.11-1.75-2.11c-.767-.767-1.662-1.287-2.685-1.558s-2.054-.272-3.093,0c-1.039.272-1.942.791-2.709,1.558-.767.767-1.287,1.662-1.558,2.685-.272,1.023-.272,2.054,0,3.093Z"/>
</g>
</symbol>
</defs>
</svg>
<div class="icon-btns">
<button class="icon-btn icon-btn--blue" type="button">
<span class="icon-btn__back"></span>
<span class="icon-btn__front">
<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
<use xlink:href="#files" />
</svg>
</span>
<span class="icon-btn__label">Files</span>
</button>
<button class="icon-btn icon-btn--purple" type="button">
<span class="icon-btn__back"></span>
<span class="icon-btn__front">
<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
<use xlink:href="#books" />
</svg>
</span>
<span class="icon-btn__label">Books</span>
</button>
<button class="icon-btn icon-btn--red" type="button">
<span class="icon-btn__back"></span>
<span class="icon-btn__front">
<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
<use xlink:href="#heart" />
</svg>
</span>
<span class="icon-btn__label">Health</span>
</button>
<button class="icon-btn icon-btn--indigo" type="button">
<span class="icon-btn__back"></span>
<span class="icon-btn__front">
<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
<use xlink:href="#weather" />
</svg>
</span>
<span class="icon-btn__label">Weather</span>
</button>
<button class="icon-btn icon-btn--orange" type="button">
<span class="icon-btn__back"></span>
<span class="icon-btn__front">
<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
<use xlink:href="#pen" />
</svg>
</span>
<span class="icon-btn__label">Notes</span>
</button>
<button class="icon-btn icon-btn--green" type="button">
<span class="icon-btn__back"></span>
<span class="icon-btn__front">
<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
<use xlink:href="#graph" />
</svg>
</span>
<span class="icon-btn__label">Spreadsheets</span>
</button>
</div>
</container>
[/html]

0

Поделиться112023-08-28 16:42:49

Автор: daddy issues
Администратор
Сообщений: 11
Уважение: +0

[html]
<style>
h5 {
opacity: 0.66;
font-weight: normal;
font-size: 1.25rem;
}

.container {
position: relative;
width: 430px;
height: 350px;
margin: 50px auto;
background: #fafafa;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
}

.time {
padding: 10px;
display: flex;
justify-content: space-around;
}

.time-item {
flex: 1 1 auto;
border-radius: 5px;
margin-right: 5px;
height: 10px;
background-color: rgba(0,0,0,0.10);
position: relative;
overflow: hidden;
}

.time-item:last-child {
margin-right: 0;
}

.time-item > div {
position: absolute;
width: 0%;
height: 100%;
background-color: rgba(255,255,255,0.5);
}

.content {
position: absolute;
height: 350px;
width:430px;
background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, rgba(0,0,0,0.15) 100%);

display: flex;
flex-direction: column;
justify-content: flex-end;
}
.texts {
padding: 7%;
}

#back, #next {
position: absolute;
top: 0;
}

#back {
left: 0;
height: 100%;
width: 50%;
}

#next {
left: 50%;
height: 100%;
width: 50%;
}

</style>
<script>

const stories = [
{
title: 'Story 1',
description: 'description 1',
image: 'https://i.pinimg.com/736x/2e/be/62/2ebe623d6d27d70ea13731a01b4210e9.jpg',
time: 3500
},
{
title: 'Story 2',
description: 'description 2',
image: 'https://i.pinimg.com/736x/7c/f8/18/7cf818809ed21f9d21263b8a8417d504.jpg',
time: 4000
},{
title: 'Story 3',
description: 'description 3',
image: 'https://i.pinimg.com/736x/b7/7b/e1/b77be1a020e21187490bb65859d2832c.jpg',
time: 2500
},
{
title: 'Story 4',
description: 'description 4',
image: 'https://i.pinimg.com/736x/8d/77/5e/8d775e040b58466a44518ad6b5c2a678.jpg',
time: 7500
}
]

const container = document.querySelector('.container')
const nextButton = document.querySelector('#next')
const backButton = document.querySelector('#back')

function Storyfier(storiesArray, rootEl) {
this.stories = storiesArray
this.root = rootEl
this.times = rootEl.querySelector('#times')
this.currentTime = 0
this.currentIndex = 0

// create breakpoints for when the slides should change
this.intervals = this.stories.map((story, index) => {
// TODO change so that it just uses the previous value + current time
let sum = 0
for (let i = 0; i < index; i++){
sum += this.stories[i].time
}
return sum
})

// necessary to make sure the last slide plays to completion
this.maxTime = this.intervals[this.intervals.length - 1] + this.stories[this.stories.length - 1].time

// render progress bars
this.progressBars = this.stories.map(() => {
const el = document.createElement('div')
el.classList.add('time-item')
el.innerHTML = '<div style="width: 0%"></div>'
return el
})

this.progressBars.forEach((el) => {
this.times.appendChild(el)
})

// methods
this.render = () => {
const story = this.stories[this.currentIndex]
this.root.style.background = `url('${story.image}')`
this.root.querySelector('#title').innerHTML = story.title
this.root.querySelector('#description').innerHTML = story.description
}

this.updateProgress = () => {
this.progressBars.map((bar, index) => {
// Fill already passed bars
if (this.currentIndex > index) {
bar.querySelector('div').style.width = '100%'
return
}

if (this.currentIndex < index) {
bar.querySelector('div').style.width = '0%'
return
}

// update progress of current bar
if (this.currentIndex == index) {
const timeStart = this.intervals[this.currentIndex]

let timeEnd;
if (this.currentIndex == this.stories.length - 1){
timeEnd = this.maxTime
} else {
timeEnd = this.intervals[this.currentIndex + 1]
}

const animatable = bar.querySelector('div')
animatable.style.width = `${((this.currentTime - timeStart)/(timeEnd - timeStart))*100}%`

}
})
}
}

Storyfier.prototype.start = function(){
// Render initial state
this.render()

// START INTERVAL
const test = setInterval(() => {
this.currentTime += 10
this.updateProgress()

if (this.currentIndex >= this.stories.length - 1 && (this.currentTime > this.maxTime)){
clearInterval(test)
return
}

const lastIndex = this.currentIndex
if (this.currentTime >= this.intervals[this.currentIndex + 1]){
this.currentIndex += 1
}

if (this.currentIndex != lastIndex) {
this.render()
}
}, 10)
}

Storyfier.prototype.next = function(){
const next = this.currentIndex + 1
if (next > this.stories.length - 1){
return
}

this.currentIndex = next
this.currentTime = this.intervals[this.currentIndex]
this.render()
}

Storyfier.prototype.back = function(){
if ((this.currentTime > (this.intervals[this.currentIndex] + 350)) || this.currentIndex === 0){
this.currentTime = this.intervals[this.currentIndex]
return
}

this.currentIndex -= 1
this.currentTime = this.intervals[this.currentIndex]
this.render()
}

const setup = async () => {
const loadImages = stories.map(({ image }) => {
return new Promise((resolve, reject) => {
let img = new Image()
img.onload = () => {
resolve(image)
}
img.src = image
})
})

await Promise.all(loadImages)

const s = new Storyfier(stories, container);
s.start()

nextButton.addEventListener('click', () => {
s.next()
})

backButton.addEventListener('click', () => {
s.back()
})
}

setup()

</script>
<div class="container">
<div id="times" class="time">
</div>

<div id="back"></div>
<div id="next"></div>
</div>
[/html]

0

DADDY ISSUES

Меню навигации

Пользовательские ссылки

Информация о пользователе