commit 77d12ceaf1760339aac750a47ddb97aa76a3a860 Author: Аржанников Данил Владимирович Date: Wed Dec 3 16:24:02 2025 +0500 Init diff --git a/assets/logo.svg b/assets/logo.svg new file mode 100644 index 0000000..7abf3ff --- /dev/null +++ b/assets/logo.svg @@ -0,0 +1,17 @@ + diff --git a/assets/logo_with_title.png b/assets/logo_with_title.png new file mode 100644 index 0000000..e208801 Binary files /dev/null and b/assets/logo_with_title.png differ diff --git a/random.css b/random.css new file mode 100644 index 0000000..a522705 --- /dev/null +++ b/random.css @@ -0,0 +1,315 @@ +* { + padding: 0; + margin: 0; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, body { + height: 100%; +} + +body{ + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header" + "main" + "footer"; + height: 100%; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + background-color: #F4F4F4; +} + +/* --- HEADER --- */ +header{ + padding: 16px; + grid-area: header; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + background-color: #333333; + color: #FFFFFF; + /* УСИЛЕННАЯ ТЕНЬ для лучшего визуального эффекта */ + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); + + height: auto; + flex-wrap: wrap; + position: relative; /* Для контекста z-index, если понадобится */ +} + +header img { + width: 25%; + max-width: 100px; + height: auto; + transition: transform 0.3s ease; + margin-bottom: 8px; +} +header img:hover { + transform: scale(1.05); +} + +h1{ + font-size: 30px; + margin: 0; + text-align: center; + letter-spacing: 1px; +} + +/* --- MAIN CONTENT --- */ +main{ + grid-area: main; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + padding: 20px; +} + +.blockRandom{ + width: 90%; + max-width: 400px; + height: 150px; + + border: 2px solid #5A5A5A; + border-radius: 8px; + background-color: #FFFFFF; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + + display: flex; + justify-content: center; + align-items: center; + font-size: 2em; + font-weight: bold; +} +.numberRandom{ + width: 90%; + max-width: 400px; + height: 150px; + + border: 2px solid #5A5A5A; + border-radius: 8px; + background-color: #FFFFFF; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + + display: flex; + justify-content: center; + align-items: center; + font-size: 2em; + font-weight: bold; +} + +/* --- FOOTER --- */ +footer{ + grid-area: footer; + display: flex; + height: auto; + padding: 16px 20px; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: #4A4A4A; + color: #DDDDDD; + font-size: 0.9em; + border-top: 3px solid #777777; + /* ДОБАВЛЕНИЕ ТЕНИ для футера (тень вверх) */ + box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.15); +} + +footer p { + margin: 4px 0; + font-size: small; +} + + +/* ======================================= */ +/* 🖥️ СТИЛИ ДЛЯ ДЕСКТОПОВ (min-width: 768px) */ +/* ======================================= */ +@media (min-width: 768px) { + + /* --- HEADER --- */ + header{ + flex-direction: row; + /* Используем space-between для разделения элементов */ + justify-content: space-between; + padding: 12px 50px; + height: 100px; /* Сохраняем высоту */ + } + + header img { + /* Увеличение размера изображения */ + width: 80px; + max-width: 80px; + margin-right: 40px; /* Увеличиваем отступ справа от логотипа */ + margin-bottom: 0; + } + + h1{ + font-size: 25px; + flex-grow: 1; + text-align: left; + /* Сдвиг текста чуть правее: используем margin-left */ + margin-left: 20px; + } + + /* --- MAIN CONTENT --- */ + .blockRandom{ + width: 500px; + height: 600px; + font-size: larger; + display: flex; + flex-direction: column; + gap: 10px; + padding: 20px; + align-items: center; + justify-content: space-evenly; + } + .numbers{ + display: flex; + gap: 5px; + } + .pool{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-bottom: 10%; + } + .countBlock{ + display: flex; + flex-direction: column; + } + .numberRandom{ + width: 250px; + height: 200px; + } + + + /* --- FOOTER --- */ +footer{ + padding: 12px 50px; + flex-direction: row; + justify-content: center; + } +.custom-btn { + width: 130px; + height: 40px; + color: #fff; + border-radius: 5px; + padding: 10px 25px; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-weight: 500; + background: transparent; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + display: inline-block; + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), + 7px 7px 20px 0px rgba(0,0,0,.1), + 4px 4px 5px 0px rgba(0,0,0,.1); + outline: none; + font-size: large; +} +.btn-3 { + background: rgb(0,172,238); + background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); + width: 250px; + height: 80px; + line-height: 80px; + padding: 0; + border: none; + +} +.btn-3 span { + position: relative; + display: block; + width: 100%; + height: 100%; +} +.btn-3:before, +.btn-3:after { + position: absolute; + content: ""; + right: 0; + top: 0; + background: rgba(2,126,251,1); + transition: all 0.3s ease; +} +.btn-3:before { + height: 0%; + width: 2px; +} +.btn-3:after { + width: 0%; + height: 2px; +} +.btn-3:hover{ + background: transparent; + box-shadow: none; +} +.btn-3:hover:before { + height: 100%; +} +.btn-3:hover:after { + width: 100%; +} +.btn-3 span:hover{ + color: rgba(2,126,251,1); +} +.btn-3 span:before, +.btn-3 span:after { + position: absolute; + content: ""; + left: 0; + bottom: 0; + background: rgba(2,126,251,1); + transition: all 0.3s ease; +} +.btn-3 span:before { + width: 2px; + height: 0%; +} +.btn-3 span:after { + width: 0%; + height: 2px; +} +.btn-3 span:hover:before { + height: 100%; +} +.btn-3 span:hover:after { + width: 100%; +} +.btn{ + display: flex; + flex-direction: column; + justify-content: center; + padding-top: 30%; +} +#num1{ + width: 75px; + height: 20px; +} +#num2{ + width: 75px; + height: 20px; +} +#count{ + width: 100px; + height: 20px; +} +.countBlock{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-top: 30%; +} +} \ No newline at end of file diff --git a/random.html b/random.html new file mode 100644 index 0000000..4a1751f --- /dev/null +++ b/random.html @@ -0,0 +1,54 @@ + + + + + + Рандомайзер + + + +

Генератор случайных чисел

+ Выберите необходимые значения +

+ +

+ + + + \ No newline at end of file diff --git a/random.js b/random.js new file mode 100644 index 0000000..e69de29