Merge pull request #1 from glushik/glushik-patch-1

README.md

@@ -1 +1,2 @@
 # lab2
+add background color and mobile version of site

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);

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 );

index.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
+    <title>Олег Винник - Біографія</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="./start.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+</head>
+<body id ="body">
+    <header>
+        <img src="./src/images/v.png" alt="logo"/>
+        <a href="./index.html">
+            <button id ="about">Про Винника</button>
+        </a>
+            <a href="./lyrics.html">
+            <button id ="lyrics">Тексти пісень </button>
+        </a>
+        <a href = "./upload.html">
+            <button id ="upload">Пісні</button>
+        </a>
+    </header>
+    <button class="up" onclick="scroll_to_top()">
+        <span>Нагору↑</span>    
+    </button>
+    <div class= "content">
+    <div class = "pod"></div>   
+    <h1 class="title">ОЛЕГ ВИННИК</h1>
+    <img src="https://viva.ua/storage/crop/stars/avatar_189_max.jpg" alt="Олег Винник">
+    <table>
+    <tr>
+        <td class="red first">Повне ім'я:</td>
+        <td class = "first">Винник Олег Анатолійович</td>
+    </tr>
+    <tr>
+        <td class="red">Дата народження:</td>
+        <td>31 липня 1973 року</td>
+    </tr>                
+    <tr>
+        <td class="red">Місце народження:</td>
+        <td>Вербовка, Камянський район Черкаська область</td>
+    </tr>
+
+    <tr>
+        <td class="red">Найвідомоші пісні:</td>
+        <td>"Счастье", "Нино", "Вовчиця", "Аромат моей любви"</td>
+    </tr>
+    <tr>
+        <td class = "red">Соціальні мережі</td>
+        <td>
+            <ul>
+                <li>
+                    <a href = "https://www.facebook.com/Olegg.Vynnyk">
+                        <img class = "small" src = "./src/images/facebook.png">
+                    </a>
+                </li>
+                <li>
+                    <a href = "https://www.instagram.com/olegg.vynnyk/">
+                        <img class = "small" src = "./src/images/instagram.png">
+                    </a>
+                </li>
+                <li>
+                    <a href = "https://www.youtube.com/user/OleggVynnyk">
+                        <img class = "small" src = "./src/images/youtube.png">
+                    </a>
+                </li>
+            </ul>
+        </td>
+    </tr>
+    </table>
+    <article>
+        <p>
+            Суспільство розділилося на дві категорії: тих, хто обожнює Олега Винника, і тих, хто його категорично не сприймає. Середнього не дано. Ця людина здатна викликати тільки яскраві емоції, такі ж, втім, як і він сам. Мачо-мен українського шоу-бізнесу, рекордсмен за кількістю аншлагових концертів, кумир жінок різного віку. Багатьох цікавить, в чому ж секрет його феноменального успіху? То в харизмі, то в незвичайному таланті ... А може, вся справа в тому, що нашому шоу-бізнесу гостро не вистачає героїв? А поки народ ламає списи, Винник продовжує тріумфальний хід концертними майданчиками країни і стає зіркою телеекранів.
+        </p>
+        <p>
+            Олег Винник народився 31 липня 1973 року в селі Вербівка Черкаської області. У школі майбутній артист навчався в іншому селищі - Червоний Кут. Уже в дитячі та юнацькі роки він освоював улюблену справу - грав на електрогітарі, співав, брав участь у художній самодіяльності. Здобувши середню освіту, Олег Винник надійшов на хормейстерське відділення Канівського училища культури. Після нього молодий музикант влаштувався на роботу в Черкаську обласну філармонію, а вже в 20 років виконував соло в Черкаському народному хорі.
+        </p>
+        <p>   
+            Незабаром Олегу представилася можливість пройти стажування в Німеччині, і він нею скористався. У німецькому місті Люнебург Винник виконував партії в опері «Тоска» та опереті «Паганіні», потім переїхав до Гамбурга, де продовжив навчання і удосконалив свої навички вокалу. Подальші творчі кроки співак робив вже в жанрі мюзиклу: він грав в постановках «Цілуй мене, Кет», «Горбань із Нотр-Дама», «Знедолені», «Елізабет».
+        </p>
+        <p>    
+            У 2011 році Олег Винник повернувся в Україну, щоб зосередитися на поп-кар'єрі, і не пошкодував. Саме тут співак знайшов небувалу славу, яка почалася з пісні «Щастя». Авторські композиції швидко знайшли відгук в серцях українських слухачів, а концерти Винника по всій Україні стали збирати повні зали. Через кілька років активної роботи Олег Винник став самим гастролюємо артистом країни. У 2017 році Олег Винник вперше з'явився в масштабному телешоу, зайнявши одне з суддівських місць в проекті «Х-фактор» на СТБ.
+        </p>
+        <p>    
+            Особисте життя Олега Винника - тема, яка цікавить мільйони його шанувальниць, однак на яку співак категорично відмовляється говорити. За неофіційною інформацією, у артиста є дружина і син.
+        </p>
+    </article>
+    <div class = "video"></div>
+    <button onclick = "showVideo()" id ="showV">Показать видео</button>
+    <progress value="0" max = "100" id = "prog"></progress>
+    <video width="480" height="320" controls class="hidden" id ="vid">
+        <source src="nino.mp4" type="video/mp4">
+    </video>
+    <script src="./start.js"></script>
+
+</body>
+</html>
+
+
+
+
+
+
+