diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 4a2cf3f..0000000 --- a/.travis.yml +++ /dev/null @@ -1,9 +0,0 @@ -language: generic -deploy: - provider: s3 - access_key_id: AKIAI7FVPLJBUEWDKRLQ - secret_access_key: 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 - bucket: git-to-amazon-s3-outputbucket-2d5ah8mghcn6 - on: - repo: glushik/lab2 - acl: public_read diff --git a/clock.js b/clock.js new file mode 100644 index 0000000..7336b8d --- /dev/null +++ b/clock.js @@ -0,0 +1,96 @@ + +function displayCanvas(){ + var canvasHTML = document.getElementById('clock'); + var contextHTML = canvasHTML.getContext('2d'); + contextHTML.strokeRect(0,0,canvasHTML.width, canvasHTML.height); + // Расчет координат центра и радиуса часов + var radiusClock = canvasHTML.width/2 - 10; + var xCenterClock = canvasHTML.width/2; + var yCenterClock = canvasHTML.height/2; + + // console.log(radiusClock); + //Очистка экрана. + contextHTML.fillStyle = "#ffffff"; + contextHTML.fillRect(0,0,canvasHTML.width,canvasHTML.height); + + //Рисуем контур часов + contextHTML.strokeStyle = "#000000"; + contextHTML.lineWidth = 1; + contextHTML.beginPath(); + contextHTML.arc(xCenterClock, yCenterClock, radiusClock, 0, 2*Math.PI, true); + contextHTML.moveTo(xCenterClock, yCenterClock); + contextHTML.stroke(); + contextHTML.closePath(); + + //Рисуем рисочки часов + var radiusNum = radiusClock ; //Радиус расположения рисочек + var radiusPoint; + for(var tm = 0; tm < 60; tm++){ + contextHTML.beginPath(); + if(tm % 5 == 0){radiusPoint = 3;}else{radiusPoint = 1;} //для выделения часовых рисочек + var xPointM = xCenterClock + radiusNum * Math.cos(-6*tm*(Math.PI/180) + Math.PI/2); + var yPointM = yCenterClock - radiusNum * Math.sin(-6*tm*(Math.PI/180) + Math.PI/2); + contextHTML.arc(xPointM, yPointM, radiusPoint, 0, 2*Math.PI, true); + contextHTML.stroke(); + contextHTML.closePath(); + } + + + + //Рисуем стрелки + var lengthSeconds = radiusNum - 10; + var lengthMinutes = radiusNum - 15; + var lengthHour = lengthMinutes / 1.5; + var d = new Date(); //Получаем экземпляр даты + var t_sec = 6*d.getSeconds(); //Определяем угол для секунд + var t_min = 6*(d.getMinutes() + (1/60)*d.getSeconds()); //Определяем угол для минут + var t_hour = 30*(d.getHours() + (1/60)*d.getMinutes()); //Определяем угол для часов + + //Рисуем секунды + contextHTML.beginPath(); + contextHTML.strokeStyle = "#FF0000"; + contextHTML.moveTo(xCenterClock, yCenterClock); + contextHTML.lineTo(xCenterClock + lengthSeconds*Math.cos(Math.PI/2 - t_sec*(Math.PI/180)), + yCenterClock - lengthSeconds*Math.sin(Math.PI/2 - t_sec*(Math.PI/180))); + contextHTML.stroke(); + contextHTML.closePath(); + + //Рисуем минуты + contextHTML.beginPath(); + contextHTML.strokeStyle = "#000000"; + contextHTML.lineWidth = 3; + contextHTML.moveTo(xCenterClock, yCenterClock); + contextHTML.lineTo(xCenterClock + lengthMinutes*Math.cos(Math.PI/2 - t_min*(Math.PI/180)), + yCenterClock - lengthMinutes*Math.sin(Math.PI/2 - t_min*(Math.PI/180))); + contextHTML.stroke(); + contextHTML.closePath(); + + //Рисуем часы + contextHTML.beginPath(); + contextHTML.lineWidth = 3; + contextHTML.moveTo(xCenterClock, yCenterClock); + contextHTML.lineTo(xCenterClock + lengthHour*Math.cos(Math.PI/2 - t_hour*(Math.PI/180)), + yCenterClock - lengthHour*Math.sin(Math.PI/2 - t_hour*(Math.PI/180))); + contextHTML.stroke(); + contextHTML.closePath(); + + //Рисуем центр часов + contextHTML.beginPath(); + contextHTML.strokeStyle = "#000000"; + contextHTML.fillStyle = "#ffffff"; + contextHTML.lineWidth = 3; + contextHTML.arc(xCenterClock, yCenterClock, 5, 0, 2*Math.PI, true); + contextHTML.stroke(); + contextHTML.fill(); + contextHTML.closePath(); + + return; +} + +window.setInterval( + function(){ + var d = new Date(); + //document.getElementById("current time:").innerHTML = d.toLocaleTimeString(); + displayCanvas(); + } + , 1000); diff --git a/draw.js b/draw.js new file mode 100644 index 0000000..92f9451 --- /dev/null +++ b/draw.js @@ -0,0 +1,43 @@ +const paintCanvas = document.querySelector( '.js-paint' ); +const context = paintCanvas.getContext( '2d' ); +context.lineCap = 'round'; + +const colorPicker = document.querySelector( '.js-color-picker'); + +colorPicker.addEventListener( 'change', event => { + context.strokeStyle = event.target.value; +} ); + +const lineWidthRange = document.querySelector( '.js-line-range' ); +const lineWidthLabel = document.querySelector( '.js-range-value' ); + +lineWidthRange.addEventListener( 'input', event => { + const width = event.target.value; + lineWidthLabel.innerHTML = width; + context.lineWidth = width; +} ); + +let x = 0, y = 0; +let isMouseDown = false; + +const stopDrawing = () => { isMouseDown = false; } +const startDrawing = event => { + isMouseDown = true; + [x, y] = [event.offsetX, event.offsetY]; +} +const drawLine = event => { + if ( isMouseDown ) { + const newX = event.offsetX; + const newY = event.offsetY; + context.beginPath(); + context.moveTo( x, y ); + context.lineTo( newX, newY ); + context.stroke(); + [x, y] = [newX, newY]; + } +} + +paintCanvas.addEventListener( 'mousedown', startDrawing ); +paintCanvas.addEventListener( 'mousemove', drawLine ); +paintCanvas.addEventListener( 'mouseup', stopDrawing ); +paintCanvas.addEventListener( 'mouseout', stopDrawing ); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..aa45011 --- /dev/null +++ b/index.html @@ -0,0 +1,105 @@ + + + + + + Олег Винник - Біографія + + + + + +
+ logo + + + + + + + + + +
+ +
+
+

ОЛЕГ ВИННИК

+ Олег Винник + + + + + + + + + + + + + + + + + + + + + + +
Повне ім'я:Винник Олег Анатолійович
Дата народження:31 липня 1973 року
Місце народження:Вербовка, Камянський район Черкаська область
Найвідомоші пісні:"Счастье", "Нино", "Вовчиця", "Аромат моей любви"
Соціальні мережі + +
+
+

+ Суспільство розділилося на дві категорії: тих, хто обожнює Олега Винника, і тих, хто його категорично не сприймає. Середнього не дано. Ця людина здатна викликати тільки яскраві емоції, такі ж, втім, як і він сам. Мачо-мен українського шоу-бізнесу, рекордсмен за кількістю аншлагових концертів, кумир жінок різного віку. Багатьох цікавить, в чому ж секрет його феноменального успіху? То в харизмі, то в незвичайному таланті ... А може, вся справа в тому, що нашому шоу-бізнесу гостро не вистачає героїв? А поки народ ламає списи, Винник продовжує тріумфальний хід концертними майданчиками країни і стає зіркою телеекранів. +

+

+ Олег Винник народився 31 липня 1973 року в селі Вербівка Черкаської області. У школі майбутній артист навчався в іншому селищі - Червоний Кут. Уже в дитячі та юнацькі роки він освоював улюблену справу - грав на електрогітарі, співав, брав участь у художній самодіяльності. Здобувши середню освіту, Олег Винник надійшов на хормейстерське відділення Канівського училища культури. Після нього молодий музикант влаштувався на роботу в Черкаську обласну філармонію, а вже в 20 років виконував соло в Черкаському народному хорі. +

+

+ Незабаром Олегу представилася можливість пройти стажування в Німеччині, і він нею скористався. У німецькому місті Люнебург Винник виконував партії в опері «Тоска» та опереті «Паганіні», потім переїхав до Гамбурга, де продовжив навчання і удосконалив свої навички вокалу. Подальші творчі кроки співак робив вже в жанрі мюзиклу: він грав в постановках «Цілуй мене, Кет», «Горбань із Нотр-Дама», «Знедолені», «Елізабет». +

+

+ У 2011 році Олег Винник повернувся в Україну, щоб зосередитися на поп-кар'єрі, і не пошкодував. Саме тут співак знайшов небувалу славу, яка почалася з пісні «Щастя». Авторські композиції швидко знайшли відгук в серцях українських слухачів, а концерти Винника по всій Україні стали збирати повні зали. Через кілька років активної роботи Олег Винник став самим гастролюємо артистом країни. У 2017 році Олег Винник вперше з'явився в масштабному телешоу, зайнявши одне з суддівських місць в проекті «Х-фактор» на СТБ. +

+

+ Особисте життя Олега Винника - тема, яка цікавить мільйони його шанувальниць, однак на яку співак категорично відмовляється говорити. За неофіційною інформацією, у артиста є дружина і син. +

+
+
+ + + + + + + + + + + + + + diff --git a/lab3.css b/lab3.css index a79eeee..8e4ab34 100644 --- a/lab3.css +++ b/lab3.css @@ -1,103 +1,67 @@ - #two{ +.two{ right: calc((100% - (100% - 700px)/2) + 3px); - position: fixed; - bottom: 0; - top: 0; left: 0; + background-color: pink; } -#seven{ - +.seven{ + right: 0; left: calc((100% - (100% - 700px)/2) + 3px); + background-color: aqua; +} +.beach{ position: fixed; bottom: 0; top: 0; - right: 0; - -} -#two{ - background-color: pink; -} -#seven{ - background-color: aqua; -} -#one{ - background-color: orangered; } -#three{ +.three{ background-color: orange; } -#four{ +.four{ background-color: yellow; } -#five{ - background-color: limegreen; -} -#six{ - background-color: skyblue; +.four a{ + margin: 0; } -#eight{ +.eight{ background-color: blue; + height: 160px; } -#nine{ +.nine{ background-color: violet; -} -/* -#content{ - display: flex; -} -#one{ - width: 700px; - margin: 0 auto; + height: 175px; } -#five{ - width: 200px; - float: left; -} -#six{ - width: 250px; - float: left; -} -#three-four{ - width: 250px; - margin:0 auto; - float: left; - align-self: center; -} */ -p{ - margin:0px; -} -#one, #two, #three, #four, #five,#six,#seven,#eight,#nine{ + +.all{ border: 3px solid black; } img{ - height: 140px; - width: 150px; + height: 140px; + width: 150px; margin: auto; } -body{ +p, body{ margin:0; } -#one, #eight, #nine{ +.center-blocks{ margin: auto; - - + min-width: 700px; + max-width: 700px; + height: 172px; } -#one{ +.one{ font-size: 22px; + background-color: orangered; + height: 160px; } -#eight, #nine{ +.eight, .nine{ font-size: 18px; } -#one, #eight, #nine{ - min-width: 700px; - max-width: 700px; - height: 150px; -} -#three, #four{ + +.inner-blocks{ /* position: fixed; */ min-width: 244px; max-width: 244px; @@ -105,18 +69,19 @@ body{ left: 0; } -#five{ +.five{ min-width: 294px; max-width: 294px; height: 146px; + background: greenyellow; } -#six{ +.six{ min-width: 150px; max-width: 150px; display: flex; - + background-color: skyblue; } -#six p{ +.six p{ display: flex; } @@ -136,8 +101,8 @@ body{ flex-grow: 1; } - - #row1 div,#one, #two, #three, #four, #five,#six,#seven,#eight,#nine{ + + .row1 div,.all{ min-width: 100%; max-width: 100%; width: 100%; @@ -145,7 +110,7 @@ body{ font-size: medium; border-radius: 10px; } - #two, #seven{ + .beach{ display: none; } } @@ -157,119 +122,9 @@ body{ - - - -/* - */ \ No newline at end of file +} */ \ No newline at end of file diff --git a/lab3.html b/lab3.html index 64300c2..00b18bc 100644 --- a/lab3.html +++ b/lab3.html @@ -4,44 +4,39 @@ lab3 - - + - + -
2
-
7
-
ОЛЕГ ВИННИК - Популярный украинский певец и покоритель женских сердец ухватил кусочек славы не только в Украине, но и Германии. За ним охотились многие зарубежные педагоги по вокалу, но достался он самому Джону Леману. Олег Винник довольно скрытный человек, редко дает интервью и тщательно охраняет свою личную жизнь от журналистов.
+
+
+
ОЛЕГ ВИННИК - Популярный украинский певец и покоритель женских сердец ухватил кусочек славы не только в Украине, но и Германии. За ним охотились многие зарубежные педагоги по вокалу, но достался он самому Джону Леману. Олег Винник довольно скрытный человек, редко дает интервью и тщательно охраняет свою личную жизнь от журналистов.
-
+
-
+

Профессия Певец

Дата рождения 31 июля 1973

Рост и вес 175 см и 74 кг

- -
В Германии Олег Винник всерьез занимался бодибилдингом, но был вынужден прекратить тренировки из-за роли Жана Вальжана, чтобы не смущать зрителей своими накаченными бицепсами. Вернувшись в родную Украину, певец не прекратил концертную деятельность в Германии.
-
+
В Германии Олег Винник всерьез занимался бодибилдингом,но был вынужден прекратить тренировки из-за роли Жана Вальжана,чтобы не смущать зрителей своими накачеными бицепсами. Вернувшись в Украину,певец не прекратил концертную деятельность в Германии.
+
фото лолега винника
- -
После окончания училища, Олег поступил на работу в Черкасскую филармонию, где в 20 лет одаренный юноша стал ее солистом. В рамках программы культурного обмена Винник проходил стажировку в Германии, где по некоторым данным сначала работал гувернеров в одной из семей, учил немецкий язык, а уже потом с подачи своей подружки решился попробовать в свои силы в Люнебургском театре.
-
Певец начал исполнять основные партии практически во всех крупных спектаклях: «Тоска», «Паганини», «Олег», «Поцелуй меня, Кейт!», «Собор Парижской Богоматери», «Титани», «Отверженные» и других. Несмотря на казалось бы идеальные вокальные способности, Олег продолжал учиться и не отказался от уроков по вокалу американского преподавателя Джона Лемана. - +
После окончания училища, Олег поступил на работу в Черкасскую филармонию, где в 20 лет одаренный юноша стал ее солистом. В рамках программы культурного обмена Винник проходил стажировку в Германии, где по некоторым данным сначала работал гувернеров в одной из семей, учил немецкий язык, а уже потом с подачи своей подружки решился попробовать в свои силы в Люнебургском театре.
+
Певец начал исполнять основные партии практически во всех крупных спектаклях: «Тоска», «Паганини», «Олег», «Поцелуй меня, Кейт!», «Собор Парижской Богоматери», «Титани», «Отверженные» и других. Несмотря на казалось бы идеальные вокальные способности, Олег продолжал учиться и не отказался от уроков по вокалу американского преподавателя Джона Лемана.
- - \ No newline at end of file diff --git a/loleg.js b/loleg.js new file mode 100644 index 0000000..57c9dbf --- /dev/null +++ b/loleg.js @@ -0,0 +1,16 @@ +animate(function(timePassed){ + loleg.style.left = timePassed / 5 + 'px'; +}, 2000); + +function animate(draw, duration){ + var start = performance.now(); + requestAnimationFrame(function animate(time){ + var timePassed = time - start; + console.log(time, start); + if (timePassed > duration ) timePassed = duration; + draw(timePassed); + if (timePassed + + + + + Олег Винник - Тексти пісень + + + + + + +
+ logo + + + + + + + + + +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ + + +
+ + + + + + + + + + + + + diff --git a/lyrics.js b/lyrics.js new file mode 100644 index 0000000..c35090a --- /dev/null +++ b/lyrics.js @@ -0,0 +1,189 @@ +function scroll_to_top(){ + window.scroll({top: 0, behavior: 'smooth'}); +} +function showLyrics( name ){ + + $.ajax({ + url: "./src/lyrics/"+name+".txt", + crossDomain: true, + contentType: "text/html;charset=utf-8", + success: function(data){ + + show (name, data) + // console.log(data); + } + }) + // show("happiness", "lollosdfjk#sdjfknsdf\nsdf,#sbdfbsdf,ns#dfsl\nsdf,h#sdkfjblfjsdf"); + + oleg(); + +} +var butjson = document.getElementById('JSONBUT'), +reqjson = new XMLHttpRequest(); +butjson.onclick = function () { +//запрос для json файла +reqjson.open('GET', 'songs.json', false); +reqjson.send(); +if (reqjson.status != 200) {//выводим ошибки + alert(reqjson.status + ': ' + reqjson.statusText); +} else { + var i = 0, + documjson = JSON.parse(reqjson.responseText), + table = ''; + for (name in documjson) { + table += '' + name + ''; + } + table += ''; + for (name in documjson['1']) { + table += '' + documjson['1'][name] + '' + documjson['2'][name] + '' + documjson['3'][name] + '';//создаём таблицу для полученных данных + i++; + } + document.getElementById('tabforjson').innerHTML = table;//выводим результат +} +}; +var kek = document.getElementById('XMLBUT'); +var lol = new XMLHttpRequest(); + kek.onclick = function () { + //запрос для xml файла + lol.open('GET', 'pesni.xml', false); + lol.send(); + if (lol.status != 200) {//выводим ошибки + alert(lol.status + ': ' + lol.statusText); + } else { + var i, + //создаём тамблицу для полученных данных + xmlDoc = lol.responseXML, + table = 'НазваниеГодСсылка', + x = xmlDoc.getElementsByTagName('song'); + for (i = 0; i < x.length; i++) { + table += '' + x[i].getElementsByTagName('name')[0].childNodes[0].nodeValue + '' + x[i].getElementsByTagName('year')[0].childNodes[0].nodeValue + 'тут'; + } + document.getElementById('kek').innerHTML = table;//выводим таблицу + } + }; +showJSON(); +function showJSON(){ + $.ajax({ + url: "./src/songs.json", + crossDomain: true, + contentType: "application/json; charset =utf-8", + success: function(data){ + + data = data["songs"]; + var first = data[0][1]; + // console.log(first); + console.log(data); + document.getElementById("f_n").innerHTML = first.name; + document.getElementById("f_r").innerHTML = first.ref; + document.getElementById("f_d").innerHTML = first.year; + + var first = data[1][2]; + console.log(first); + + document.getElementById("s_n").innerHTML = first.name; + document.getElementById("s_r").innerHTML = first.ref; + document.getElementById("s_d").innerHTML = first.year; + + var first = data[2][3]; + console.log(first); + + document.getElementById("t_n").innerHTML = first.name; + document.getElementById("t_r").innerHTML = first.ref; + document.getElementById("t_d").innerHTML = first.year; + // console.log(data); + } + }) +} +function showJS(){ + document.getElementById("JSON").classList.remove("hidden"); + document.getElementsById("JSONBUT").classList.add("hidden"); +} +function show (name, data){ + + var select = document.getElementById(name.toString()); + select.classList.remove("hidden"); + select.classList.add("poem"); + data=data.split("#").join("
"); + // console.log(data); + + select.innerHTML = data; + + // for (var str in data){ + // console.log(str); + // $(select).append("

"+str+"

"); + // } +} +function crXMLHttpRequest() { + var res = false; + if (window.XMLHttpRequest) { + res = new XMLHttpRequest(); + } else if (window.ActiveXObject) { + if (new ActiveXObject("Microsoft.XMLHTTP")) { + res = new ActiveXObject("Microsoft.XMLHTTP"); + } else if (new ActiveXObject("Msxml2.XMLHTTP")) { + res = new ActiveXObject("Msxml2.XMLHTTP"); + } else { + res = false; + } + } + return res; +} +function showXML(){ + + var xhttp2 = crXMLHttpRequest(); + + xhttp2.open("GET", 'forajax/pesni.xml', false); + xhttp2.send(); + var xmlDoc = xhttp2.responseXML; + var x = xmlDoc.getElementsByTagName("song"); + alert(x); + // data.getElementsByTagName("") + // console.log(first); + // console.log(data); + document.getElementById("f_n").innerHTML = first.name; + document.getElementById("f_r").innerHTML = first.ref; + document.getElementById("f_d").innerHTML = first.year; + + var first = data[1][2]; + console.log(first); + + document.getElementById("s_n").innerHTML = first.name; + document.getElementById("s_r").innerHTML = first.ref; + document.getElementById("s_d").innerHTML = first.year; + + var first = data[2][3]; + console.log(first); + + document.getElementById("t_n").innerHTML = first.name; + document.getElementById("t_r").innerHTML = first.ref; + document.getElementById("t_d").innerHTML = first.year; + + + + // console.log(data); + +} +function oleg(){ + document.getElementById("loleg").classList.remove("hidden"); + animate(function(timePassed){ + loleg.style.left = timePassed / 5 + 'px'; + }, document.body.clientWidth*4.45); + + function animate(draw, duration){ + var start = performance.now(); + requestAnimationFrame(function animate(time){ + var timePassed = time - start; + // console.log(time, start); + if (timePassed > duration ) { + timePassed = duration; + document.getElementById("loleg").classList.add("hidden"); + + } + draw(timePassed); + if (timePassed + + + Счастье + https://www.youtube.com/watch?v=n8fUyiMAPJw + 2015 + + + Волчица + https://www.youtube.com/watch?v=YvFwjiJPVEA +2014 + + + Нино +2017 + https://www.youtube.com/watch?v=TVxFtpHM3IE + + \ No newline at end of file diff --git a/songs.json b/songs.json new file mode 100644 index 0000000..eefec4a --- /dev/null +++ b/songs.json @@ -0,0 +1,21 @@ +{ + + "1": [ "https://www.youtube.com/watch?v=n8fUyiMAPJw", + "2015", + "Счастье" + ], + + "2": [ + "https://www.youtube.com/watch?v=YvFwjiJPVEA", + "2014", + "Волчица" + ], + + "3": [ + "https://www.youtube.com/watch?v=TVxFtpHM3IE", + "2017", + "Нино" + ] + + +} \ No newline at end of file diff --git a/start.css b/start.css new file mode 100644 index 0000000..60955a2 --- /dev/null +++ b/start.css @@ -0,0 +1,125 @@ +body{ + /* background: azure; */ + top:0; + margin: 0; +} +header{ + position: relative; + display: flex; + justify-content: left; + background: rgb(238, 133, 133); + height: 50px; + padding-left: 75px; + z-index: 15; +} + +header img{ + height: 50px; + width: 50px; +} +header button{ + margin-left:25px; + padding-left: 40px; + padding-right: 40px; + font-size: 20px; + background: rgb(238, 133, 133); + height: 50px; + border: none; + cursor: pointer; + font-family: "Georgia"; + border-left: 2px solid rgb(122, 30, 30); + border-radius: 10px; + +} +ul{ + list-style-type: none; + +} +li{ + display: inline; + padding-right: 25px; +} +.small{ + width: 30px; + height: 30px; + border-radius: 10px !important; +} +article{ + margin: 20px 12% !important; + font-size: 17px; + font-family: Arial; +} +article p{ + + text-indent: 15px; + +} +.content{ + display: flex; + flex-direction: column; + justify-content: center; + margin: 25px; + /* margin: 20px 15%; */ +} +.content *{ + margin: 10px auto; +} +.content img{ + border-radius: 45px; +} +.content div{ + margin: 5px 15%; + display: flex; + /* justify-content: center; */ + text-align: left; +} +.red{ + color:rgb(194, 63, 63);; +} +table{ + font-family: 'HaginCaps'; + font-size: 20px; + border-spacing: 50px 12px; + text-transform: uppercase; + /* border: 1px solid black; */ +} + + +h1{ + font-size: 50px; + font-family: gabriola; + background-color: white; + z-index: 2; +} + +.pod{ + position: absolute; + display: block; + content: ''; + left: 100px; + right: 100px; + top: 120px; + z-index: 1; + border-top: 2px solid rgb(238, 133, 133);; +} +.up{ + position: fixed; + top:0px; + bottom: 0; + width: 60px; + background-color: white; + border: none; + z-index: 4; +} +.up span{ + position: absolute; + bottom: 10px; + left: 0; +} +button{ + outline: none; + cursor: pointer; +} +.hidden{ + display: none; +} \ No newline at end of file diff --git a/start.js b/start.js new file mode 100644 index 0000000..9e65a8d --- /dev/null +++ b/start.js @@ -0,0 +1,33 @@ +function scroll_to_top(){ + window.scroll({top: 0, behavior: 'smooth'}); + // $("html,body").animate({"scrollTop":0}, 650); +} +// showVideo(); +function showVideo(){ + progressBar(); + // show(null); + $.ajax({ + url: "./nino.mp4", + crossDomain: true, + contentType: "video/mp4", + success: function(data){ + show(data); + } + }) +} +function show(data){ + document.getElementById("showV").classList.add("hidden"); + document.getElementById("prog").classList.add("hidden"); + document.getElementById("vid").classList.remove("hidden"); + +} + + +function progressBar(){ + var pr = document.getElementById("prog"); + setTimeout(function(){ + pr.value = pr.value+1; + if (pr.value === 100) show(); else + progressBar(); + }, Math.random()*250); +} \ No newline at end of file diff --git a/upload.css b/upload.css new file mode 100644 index 0000000..4e550bc --- /dev/null +++ b/upload.css @@ -0,0 +1,158 @@ +body{ + /* background: azure; */ + top:0; + margin: 0; + margin-bottom: 50px; +} +header{ + position: relative; + display: flex; + justify-content: left; + background: rgb(238, 133, 133); + height: 50px; + padding-left: 75px; + z-index: 15; +} + +header img{ + height: 50px; + width: 50px; +} +header button{ + margin-left:25px; + padding-left: 40px; + padding-right: 40px; + font-size: 20px; + background: rgb(238, 133, 133); + height: 50px; + border: none; + cursor: pointer; + font-family: "Georgia"; + border-left: 2px solid rgb(122, 30, 30); + border-radius: 10px; + +} + +.content{ + margin-left: 100px; + display: flex; + flex-direction: column; + justify-content: center; + /* margin: auto; */ + /* margin: 20px 15%; */ + margin-top: 100px; +} +.red{ + color:rgb(194, 63, 63); + font-size: 25px; + font-family: gabriola; + font-weight: bold; +} +.content div{ + /* margin: 0 15%; */ + display: flex; + /* justify-content: center; */ + text-align: left; + +} +.up{ + position: fixed; + top:0px; + bottom: 0; + width: 60px; + background-color: white; + border: none; + z-index: 4; +} +.up span{ + position: absolute; + bottom: 10px; + left: 0; +} +button{ + outline: none; + cursor: pointer; +} +.content button{ + background: white; + border: 0px; +} +.hidden{ + visibility: hidden; +} +form * { + margin: 5px auto; + text-align: center; +} +#drop-zone{ + border: 3px dashed black; + height: 100px; + width: 200px; + text-align: center; + /* margin-left: 100px; */ +} +#drop-info { + display:flex; + flex-direction: column; +} +#drop-info p{ + margin-left:25px; + margin-top:0; + +} +.inline { + display: inline-block; + align-content: center; +} +.block{ + display: block; +} +.none{ + display: none; +} +.left{ + left:0; +} +input{ + margin-top: 15px; +} +.small{ + margin-left: 50px; + width:100px; + height: 100px; +} +.flex{ + display: flex; + flex-direction: column; +} +#clock{ + position: fixed; + right: 50px; + bottom: 10px; +} +.js-paint{ + width: 250px; + height: 250px; + border: 3px double black; +} +.sent input { + margin: 0; + margin-left:5px; +} +.js-line-range{ + width: 200px +} +.fav div{ + display: block; + /* flex-direction: row; */ +} +.left{ + margin-left: 100px; +} +.flex-row{ + display: flex; + flex-direction: row; +} +#ball{ + margin-left: 250px; +} \ No newline at end of file diff --git a/upload.html b/upload.html new file mode 100644 index 0000000..648f4b6 --- /dev/null +++ b/upload.html @@ -0,0 +1,100 @@ + + + + + + Винник - пісні + + + + + + + +
+ logo + + + + + + + + + +
+ +
+
+
+ Перетащите файл сюда... +
+
+
+ +
+
+
+ + +
+
+
Намалюйте Лолега Винника
+ +
+ + Px +
+ +
+
+
+
+ +
Ваш e-mail:
+ +
Дата рождения
+ +
Ваша любимая песня Винника:
+
+
Счастье
+
Нино
+
Волчица
+
+ +
+
+
+
+
Посмотреть любимую свою песню
+
Ваш e-mail:
+ +
+
+
+
+
+ + +
+
Прогресс загрузки
+
+
+ + + + + + + + + + + + + + + + diff --git a/upload.js b/upload.js new file mode 100644 index 0000000..7b0b1ba --- /dev/null +++ b/upload.js @@ -0,0 +1,149 @@ +function scroll_to_top(){ + window.scroll({top: 0, behavior: 'smooth'}); +} +function dropHandler(ev){ + ev.stopPropagation(); + ev.preventDefault(); + var file = ev.dataTransfer.files[0]; + //console.log(file); + // document.getElementById("reset").createEvent() + // .('click'); + document.forms["ff"].reset(); + showInfo(file); + if ( file.type.match(/image\/(jpeg|jpg|png|gif)/)) showThumbnail(file); + + // removeDragData(ev); +} +function showThumbnail(data){ + var reader = new FileReader(); + reader.addEventListener('load', function(event){ + // var img = document.createElement('img'); + // var itemPreview = itemPreviewTemplate.clone(); + // var itemPreview; + // $("#thumbnails-zone").attr('src',event.target.result); + var zz = document.getElementById("thumbnails-zone"); + //zz.innerHTML =""; + // $("#drop-info").html(""); + var p = new Image(); + p.classList.add('small'); + p.src = URL.createObjectURL( data); + zz.appendChild(p); + // zz.append(""); + // itemPreview.data('id', data.name) + }); + reader.readAsDataURL(data); + // var fr = new FileReader(); + // $("#thumbnails-zone").html(""); + // $("#thumbnails-zone").append("") ; + +} +function dragOverHandler(ev){ + ev.stopPropagation(); + ev.preventDefault(); +} + +function showInfo(data){ + console.log(data); + var di = document.getElementById("drop-info"); + di.classList.remove("hidden"); + di.innerHTML = ""; + document.getElementById("thumbnails-zone").innerHTML = ""; + //var ab = document.createElement('p').value = "File name:"+data.name+"\r\n" + "File type:"+data.type+'\r\n' +"File size:"+data.size+"byte"+'\r\n'; + di.innerText = "File name:"+data.name+"\r\n" + "File type:"+data.type+'\r\n' +"File size:"+data.size+"byte"+'\r\n'; + + //di.append(ab); + // di.append(document.createElement("p").innerHTML = "File type:"+data.type+"

"); + // di.append("

File size:"+data.size+"

"); +} +function uploadFile(data){ + data = data[0]; + // document.getElementsByTagName('input[type=file]')[0]; + // var data = document.getElementsByName("choose-file1").file; + console.log(data); + showInfo(data); + if (data.type.substring(0,5) ==="image" ) showThumbnail(data); +} + +function bestSong(){ + var radio = document.getElementsByName("song"); + var result; + for (var i = 0; i < radio.length; ++i){ + if (radio[i].checked) result = radio[i].value; + } + var year = document.getElementById("birth").value; + console.log(year); + var obj = { + email: document.getElementById("email").value, + song: result, + birth: year + }; + localStorage.setItem(document.getElementById("email").value, JSON.stringify(obj)); + //console.log(document.getElementById("email").value); + //console.log(JSON.parse(localStorage.getItem(document.getElementById("email").value))); + return false; +} + +function showSong(){ + + var email = document.getElementById("checkemail").value; + if (JSON.parse(localStorage.getItem(email)).song != undefined){ + var r = new Date(JSON.parse(localStorage.getItem(email)).birth); + var let = (new Date().getTime() - r) / (24 * 3600 * 365.25 * 1000); + //var let = (new Date() - r ); + //console.log(let/60/60/24/365); + alert( + "Вам " + Math.floor(let) + " лет и вы слушаете Виника????!!!!\n"+JSON.parse(localStorage.getItem(email)).song+" - это ваша любимая песня"); + return false; + } + console.log(email); + alert("У вас нет любимой песни Виника, сердечно поздравляю"); + return false; +} + + + + +/////////////////////////////////// +var ball = document.getElementById('clock'); + + +ball.onmousedown = function(e) { + + var coords = getCoords(ball); + var shiftX = e.pageX - coords.left; + var shiftY = e.pageY - coords.top; + + ball.style.position = 'absolute'; + document.body.appendChild(ball); + moveAt(e); + + ball.style.zIndex = 1000; // над другими элементами + + function moveAt(e) { + ball.style.left = e.pageX - shiftX + 'px'; + ball.style.top = e.pageY - shiftY + 'px'; + } + + document.onmousemove = function(e) { + moveAt(e); + }; + + ball.onmouseup = function() { + document.onmousemove = null; + ball.onmouseup = null; + }; + +} + +ball.ondragstart = function() { + return false; +}; + +function getCoords(elem) { // кроме IE8- + var box = elem.getBoundingClientRect(); + return { + top: box.top + pageYOffset, + left: box.left + pageXOffset + }; +} + diff --git "a/\320\227\320\262\321\226\321\202.pdf" "b/\320\227\320\262\321\226\321\202.pdf" new file mode 100644 index 0000000..32a5f81 Binary files /dev/null and "b/\320\227\320\262\321\226\321\202.pdf" differ