front-end
This commit is contained in:
Kenneth Jao
parent
872330dd6a
commit
102114ea43
120
gyrio/index.css
120
gyrio/index.css
@ -1,5 +1,4 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Raleway');
|
||||
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
|
||||
|
||||
html {
|
||||
font-family: 'Raleway';
|
||||
@ -8,4 +7,123 @@ html {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 7vh;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
#title {
|
||||
margin: 0;
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
font-family: "Raleway";
|
||||
line-height: 5vh;
|
||||
color: white;
|
||||
font-weight: 100;
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
float: left;
|
||||
}
|
||||
|
||||
#urlInput {
|
||||
padding: 2%;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
font-family: "Raleway";
|
||||
transform: translateY(-50%);
|
||||
outline: none;
|
||||
color: white;
|
||||
font-size: 110%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fa-search, .fa-cog {
|
||||
color: white;
|
||||
float: left;
|
||||
font-size: 140%;
|
||||
display: inline-block;
|
||||
height: 7vh;
|
||||
width: 7vh;
|
||||
line-height: 7vh !important;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: rgba(255,255,255,0);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.fa-search:hover, .fa-cog:hover {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
#settings {
|
||||
position: absolute;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown h1 {
|
||||
width: 100%;
|
||||
font-size: 80%;
|
||||
text-align: center;
|
||||
line-height: none;
|
||||
padding: 0;
|
||||
font-family: "Raleway";
|
||||
font-weight: 100;
|
||||
font-size: 120%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#speedContainer div {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.dropdown input {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
background-color: rgba(255,255,255, 0.1);
|
||||
transition: background-color 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dropdown input:hover {
|
||||
background-color: rgba(255,255,255, 0.12);
|
||||
}
|
||||
|
||||
.dropdown input::-webkit-slider-thumb {
|
||||
background: rgba(255,255,255,0.2);
|
||||
-webkit-appearance: none;
|
||||
height: 30%;
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
width: 300%;
|
||||
height: 150%;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
@ -3,14 +3,28 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Gyrio</title>
|
||||
<link rel="icon" href="../assets/favicon.ico">
|
||||
<link rel="stylesheet" href="./index.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
</head>
|
||||
<header>
|
||||
<h1 id="title">Gyrio</h1>
|
||||
<input id="urlInput" name="URL" placeholder=" Insert a URL...">
|
||||
<i class="fa fa-search" aria-hidden="true" onclick="this.blur();"></i>
|
||||
<div class="dropdown">
|
||||
<i class="fa fa-cog" aria-hidden="true"></i>
|
||||
<div id="speedContainer" class="dropdown-content">
|
||||
<h1>Speed</h1>
|
||||
<div>
|
||||
<input type="range" min="5" max="100" value="5">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="settings">
|
||||
|
||||
</div>
|
||||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<canvas id="canvas"></canvas>
|
||||
</body>
|
||||
<script src="./index.js"></script>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -45,19 +45,19 @@ function generateFrames(frame, string, width, height, rate) {
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
function drawFrame(frame ,input) {
|
||||
visualCtx.fillRect(0,0, canvas.width, canvas.height);
|
||||
visualCtx.beginPath();
|
||||
var frame1 = generateFrames(frame, input, 100, 100, 5);
|
||||
console.log(frame1);;
|
||||
visualCtx.moveTo(0,(canvas.height/2)-100);
|
||||
for(var i = 1; i < frame1.length; i++) {
|
||||
visualCtx.lineTo(frame1[i][0],frame1[i][1]);
|
||||
}
|
||||
visualCtx.strokeStyle="#006064";
|
||||
visualCtx.stroke();
|
||||
visualCtx.beginPath();
|
||||
var frame1 = generateFrames(frame, input, 100, 100, 5);
|
||||
visualCtx.moveTo(0,(canvas.height/2)-100);
|
||||
for(var i = 1; i < frame1.length; i++) {
|
||||
visualCtx.lineTo(frame1[i][0],frame1[i][1]);
|
||||
}
|
||||
visualCtx.strokeStyle="#006064";
|
||||
visualCtx.stroke();
|
||||
}
|
||||
|
||||
function drawFrame2(frame ,input) {
|
||||
visualCtx.fillRect(0,0, canvas.width, canvas.height);
|
||||
var ColorList = ["006064"/*,"00838F","0097A7","00ACC1","00B8D4","00E5FF","18FFFF","84FFFF"*/];
|
||||
@ -81,6 +81,7 @@ function drawFrame2(frame ,input) {
|
||||
function toRad(theta){
|
||||
return theta*(Math.PI/180);
|
||||
}
|
||||
|
||||
function rotate(list,theta){
|
||||
var output = [];
|
||||
for(var i=0;i < list.length;i++){
|
||||
@ -88,10 +89,21 @@ function rotate(list,theta){
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
function getWebsite(url) {
|
||||
var proxy = "https://cors-anywhere.herokuapp.com/";
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", proxy+url, false);
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
if(xhr.readyState === 4) {
|
||||
if(xhr.status === 200) {
|
||||
} else {
|
||||
document.getElementById("urlInput").value = "";
|
||||
alert("Invalid URL!");
|
||||
}
|
||||
}
|
||||
}
|
||||
xhr.send();
|
||||
return xhr.responseText;
|
||||
}
|
||||
@ -102,6 +114,31 @@ function animate(n , input) {
|
||||
setTimeout(function() { animate(n+1, input) }, 100/3);
|
||||
}
|
||||
|
||||
var doAnimate = true;
|
||||
var visualCtx = canvas.getContext("2d");
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
visualCtx.fillStyle = "#1a1a1a";
|
||||
visualCtx.fillRect(0,0, canvas.width, canvas.height);
|
||||
|
||||
document.getElementsByClassName("fa-search")[0].onclick = function() {
|
||||
var input = document.getElementById("urlInput");
|
||||
var value = input.value;
|
||||
if(value === "") return;
|
||||
var data;
|
||||
data = convertData(getWebsite(value),2);
|
||||
doAnimate = false;
|
||||
setTimeout(function() {
|
||||
doAnimate = true;
|
||||
animate(0, data);
|
||||
}, 100/3);
|
||||
}
|
||||
|
||||
document.getElementsByClassName("fa-cog")[0].onclick = function() {
|
||||
document.getElementById("speedContainer").classList.toggle("show");
|
||||
}
|
||||
|
||||
/*function sound(n, input) {
|
||||
if(n === 0) {
|
||||
osc.connect(audioCtx.destination);
|
||||
@ -113,22 +150,9 @@ function animate(n , input) {
|
||||
setTimeout(function() { sound(n+1, input); }, 500);
|
||||
}
|
||||
*/
|
||||
var doAnimate = true;
|
||||
var visualCtx = canvas.getContext("2d");
|
||||
/*var audioCtx = new window.AudioContext();
|
||||
var osc = audioCtx.createOscillator();
|
||||
|
||||
var freq = [440, 494, 523, 587, 660, 698, 784, 880];
|
||||
*/
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
visualCtx.fillStyle = "#000";
|
||||
visualCtx.fillRect(0,0, canvas.width, canvas.height);
|
||||
|
||||
|
||||
animate(0, convertData(getWebsite("https://www.google.com"), 2));
|
||||
//sound(0, convertData(getWebsite("https://www.google.com"), 8));
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user