Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@pdwilso
pdwilso authored Jun 14, 2023
1 parent e119a16 commit 4fda560
Show file tree
Hide file tree
Showing 13 changed files with 775 additions and 0 deletions.
28 changes: 28 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>about sum kittehz</title>
</head>
<body>
<div id="app">
<h1>About Us</h1>
<p>
We are sum kitthez &amp; sumkittehz.codes iz mebbe our codez & stuffz, alzo.
</p>
<p>
Any uv all uv sum uv yew sum visitorz to thiz heer site &
stuffz shoule mebbe be warned &amp; stuffz, yew. All uv sum
uv some codez whitch arr mebbe heer &amp; stuffz are soley
&amp; alzo <em>entirely</em> expirimental &amp; stuffz. Iz
mebbe haz nunn uv sum suits ov bility four mebbe sum stuffz
&amp; stuffz, sum codez. Srsly.
</p>
<p>
Butt-hurt report forms can be made available.
</p>
</div>
</body>
</html>
124 changes: 124 additions & 0 deletions analog-clock.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<!--
File: analog-clock.html
From: <https://www.w3schools.com/graphics/canvas_clock.asp>
From: https://www.w3schools.com/graphics/canvas_clock_start.asp
Note: This is an example given by W3 Schools for using the <canvas>
HTML element - the Canvas Clock example is give in sections,
there. This is the complete canvas clock example code in
a single file from the final page of the example given at
<https://www.w3schools.com/graphics/tryit.asp?filename=trycanvas_clock_start>
The example at W3 Schools starts with
-->
<head>
<title>Analog Clock</title>
<style>
body {
padding:10px;
background-color:#212121;
color:silver;
text-align:center;
}
canvas {
margin-left:auto;
margin-right:auto;
opacity:0.8;
border: 7px cyan;
box-shadow: 5px 5px 5px 5px white,
-5px -5px 5px 5px white,
5px -5px 5px 5px white,
-5px 5px 5px 5px white
;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"
style="background-color:#333"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
drawClock();

function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}

function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}

function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>

</body>
</html>
44 changes: 44 additions & 0 deletions anarchy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>cthulu</title>
<style>
* {box-sizing:border-box;}
body {
font-size: 2vh; font-family:sans-serif;
margin:0;
padding:2vh 2vw;
background-color:rgba(0,222,222,0.7);
width:100vw;
height:100vh;
}
h1 {
text-align:center;
}
#app {
margin:0;
padding:0;
text-align:center;
margin-bottom:0;
margin-top:0;
background-color:rgba(0,222,222,0.7);
border:3px double rgba(0,0,64,1);
}
#anarchy {
height:80vh;
width:80vw;
margin:1vh auto;
padding:2vh 3vw;
}
</style>
</head>
<body>
<div id="app">
<h1>Anarchy</h1>
<object id="anarchy" data="./SVG/Steren_Aranchy.svg"></object>
</div>
</body>
</html>
82 changes: 82 additions & 0 deletions animated-side-nav-ex.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<!--
File: animated-side-nav-ex.html
From: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
Desc: CSS animated side nav example from W3 Schools
Date: 2023-04-20
Auth: sumkittehz.codes
-->
<head>
<title>Animated Side Navigation Example</title>
<style>
body {
font-family: "Lato", sans-serif;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>

</body>
</html>
78 changes: 78 additions & 0 deletions animated-sidenav-ex1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<!-- https://www.w3schools.com/css/css_display_visibility.asp -->
<!-- https://www.w3schools.com/howto/howto_js_sidenav.asp -->
<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>

</body>
</html>
Loading

0 comments on commit 4fda560

Please sign in to comment.