Feedback

.github/workflows/static.yml

@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

README.md

@@ -1,15 +1,14 @@
 [![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-c66648af7eb3fe8bc4f294546bfd86ef473780cde1dea487d3c4ff354943c9ae.svg)](https://classroom.github.com/online_ide?assignment_repo_id=8041495&assignment_repo_type=AssignmentRepo)
 ![](https://img.shields.io/badge/Built%20%40-HAWK-brightgreen?style=flat)
-# {Title}
 
-Describe your project. Tell the visitor **What**, **Why** and **How** you did it. Maybe add a **Who** you are and who else was involved. Get wild here. It is the first thing a visitor of a repo sees.
+# YOU WASTE YOUR TIME
 
-## What
+## This is a useless website full of time eating stuff to explore
 
-## Why
+## Little games, easter egss and things to explore, should give you a break from work, overthinking or just a break at all. Maybe you can call ot digital meditation.
 
-## How
+## We tried to base the game parts on the p5 libary and the main structure on html.
 
-## Who
+## This is a project from Mia Vogl & Chérise Barthel
 
-## Related Projects
+## Related Projects

gameone/Tiles.js

@@ -0,0 +1,39 @@
+class Tile {
+  constructor(x, y, img) {
+    this.x = x;
+    this.y = y;
+    this.tiles = img;
+    this.r = 64;
+  }
+
+  move() {
+    this.x = this.x + random(-5, 5);
+    this.y = this.y + random(-5, 5);
+  }
+
+  clicked(px, py) {
+
+    this.px = px;
+    this.py = py;
+
+    if (px > this.x && px < this.x + 64 && py > this.y +32 && py < this.y + 48) {
+      this.tiles = random(img);
+    }
+  }
+
+  show() {
+
+    image(this.tiles, this.x, this.y, 64, 64);
+  }
+
+    bounding() {
+
+      stroke(255,50);
+      strokeWeight(1);
+      noFill();
+
+      rect(this.x, this.y + 32, 64, 16);
+    }
+
+
+}

gameone/gameone.css

@@ -0,0 +1,113 @@
+html {
+  font-size: 100%;
+} /*16px*/
+
+body {
+  background-color: black;
+  display: flex;
+  flex-direction: column;
+  margin: 0 0;
+  color: #1d2429;
+
+  font-family: "M PLUS 1 Code", sans-serif;
+  font-family: "Press Start 2P", cursive;
+  background-color: black;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  margin-top: 50px;
+  margin-bottom: 10vw;
+}
+.flex-item {
+  align-self: center;
+  flex-direction: column;
+}
+
+a {
+  display: flex;
+  justify-content: center;
+  color: white;
+  text-decoration: none;
+  font-weight: 100;
+  font-size: 4vw;
+}
+
+a:hover {
+  color: red;
+  font-weight: bolder;
+}
+
+.text {
+  color: red;
+
+  font-weight: 500;
+  font-size: 2vw;
+  display: flex;
+
+  justify-content: center;
+  text-align: center;
+  line-height: 200%;
+}
+
+.discription {
+  color: white;
+
+  font-weight: 300;
+  font-size: 1.5vw;
+  display: flex;
+
+  justify-content: center;
+  text-align: center;
+  line-height: 200%;
+}
+
+.Information {
+  color: white;
+  margin-bottom: 100px;
+  font-weight: 400;
+  font-size: 0.9vw;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  line-height: 200%;
+}
+
+.linebreak {
+  margin-top: 50vw;
+}
+
+.btn-1 {
+  background: white;
+  color: black;
+  border-radius: 30px;
+  transition: transform 0.3 ease;
+}
+
+.btn-1::after {
+  content: "";
+  position: absolute;
+  opacity: 0.3;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  left: 110%;
+  bottom: 0;
+  z-index: -1;
+  transition: transform 0.3 ease;
+}
+
+.btn-1:hover {
+  transform: translate(-12px, -12px);
+}
+
+.btn-1:hover::after {
+  transform: translate(6px, 6px);
+}
+
+.btn-1:hover::before {
+  transform: translate(12px, 12px);
+}

gameone/gameone.html

@@ -0,0 +1,49 @@
+<!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.0">
+
+  <title>YOU WASTE YOUR TIME</title>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100;200;300;400;500;600;700&family=Press+Start+2P&display=swap" rel="stylesheet">
+
+<link href="gameone.css" rel="stylesheet">
+
+</head>
+
+
+
+<body class="container"></body>
+<div id="sketch" class="flex-item"></div>
+
+<div><h1 class="text">BUILD YOUR CITY</h1></div>
+<div><h3 class="discription" >Click on the tiles to change their look</h3></div>
+
+
+<script
+      src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"
+      integrity="sha512-NxocnqsXP3zm0Xb42zqVMvjQIktKEpTIbCXXyhBPxqGZHqhcOXHs4pXI/GoZ8lE+2NJONRifuBpi9DxC58L0Lw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+
+
+
+    <script src="Tiles.js"></script>
+    <script src="gameone.js"></script>
+
+
+  </body>
+
+
+
+
+
+
+</html>