moving files to Webdev folder

Kouddo · Oct 16, 2022 · 9ac7bf2 · 9ac7bf2
1 parent 7aba308
commit 9ac7bf2
Show file tree

Hide file tree

Showing 12 changed files with 706 additions and 0 deletions.
diff --git a/webdev/README.md b/webdev/README.md
@@ -0,0 +1 @@
+# CalHacks22
diff --git a/webdev/close.png b/webdev/close.png
diff --git a/webdev/criteria.txt b/webdev/criteria.txt
@@ -0,0 +1 @@
+im
diff --git a/webdev/facebook.png b/webdev/facebook.png
diff --git a/webdev/instagram.png b/webdev/instagram.png
diff --git a/webdev/logo.png b/webdev/logo.png
diff --git a/webdev/menu.png b/webdev/menu.png
diff --git a/webdev/page1.html b/webdev/page1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CrunchTime</title>
+    <link rel="stylesheet" href="style1.css"/>
+</head>
+
+<body>
+<section>
+    <div class="circle"></div>
+    <header>
+        <a href="#"><img src="logo.png" class="logo"/></a>
+        <div class="toggle" onclick="toggleMenu();"></div>
+        <ul>
+            <li><a href="page1.html">Home</a></li>
+            <li><a href="page2.html">Tools</a></li>
+            <li><a href="page3.html">What's new</a></li>
+            <li><a href="page4.html">Contact</a></li>
+        </ul>
+    </header>
+
+    <div class="content">
+        <div class="textBox">
+            <h2><br/><span>Crunch Time</span></h2>
+            <p>
+                Assigned reading made easy!
+            </p>
+            <a href="page2.html">Continue</a>
+            <input type="submit" style="color: transparent; background-color: transparent; border-color: transparent; cursor: default; onclick="location.href='page3.html'>
+        </div>
+        <div class="imgBox">
+            <iframe src='https://my.spline.design/4keycopy-0b065e49d75696619c3296ed4a5ccb08/' frameborder='0' width=300 height=300 class="starbucks"></iframe>
+        </div>
+    </div>
+</section>
+
+<script type="text/javascript">
+    function toggleMenu() {
+        var menuToggle = document.querySelector('.toggle')
+        var navigation = document.querySelector('.navigation')
+        menuToggle.classList.toggle('active')
+        navigation.classList.toggle('active')
+    }
+</script>
+</body>
+</html>
diff --git a/webdev/page2.html b/webdev/page2.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CrunchTime</title>
+  <link rel="stylesheet" href="style2.css"/>
+</head>
+<body>
+<section>
+  <div id="drop-area">
+    <form class="my-form">
+      <span></span><p>Drop image here</p></span>
+      <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
+      <label class="button" for="fileElem">Select some files</label>
+    </form>
+    <progress id="progress-bar" max=100 value=0></progress>
+  </div>
+  <div class="circle__wrapper"></div>
+  <header>
+    <a href="#"><img src="logo.png" class="logo"/></a>
+    <div class="toggle" onclick="toggleMenu();"></div>
+    <ul>
+      <li><a href="page1.html">Home</a></li>
+      <li><a href="page2.html">Tools</a></li>
+      <li><a href="page3.html">What's new</a></li>
+      <li><a href="page4.html">Contact</a></li>
+    </ul>
+  </header>
+
+  <div class="content">
+    <div class="textBox">
+    </div>
+  </div>
+
+  <ul class="sci">
+    <li><a href="#"><img src="facebook.png"></img></a></li>
+    <li><a href="#"><img src="twitter.png"></img></a></li>
+    <li><a href="#"><img src="instagram.png"></img></a></li>
+  </ul>
+</section>
+
+<script type="text/javascript">
+
+  function toggleMenu() {
+    var menuToggle = document.querySelector('.toggle')
+    var navigation = document.querySelector('.navigation')
+    menuToggle.classList.toggle('active')
+    navigation.classList.toggle('active')
+  }
+
+  let dropArea = document.getElementById("drop-area")
+
+// Prevent default drag behaviors
+  ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    dropArea.addEventListener(eventName, preventDefaults, false)
+    document.body.addEventListener(eventName, preventDefaults, false)
+  })
+
+// Highlight drop area when item is dragged over it
+  ;['dragenter', 'dragover'].forEach(eventName => {
+    dropArea.addEventListener(eventName, highlight, false)
+  })
+
+  ;['dragleave', 'drop'].forEach(eventName => {
+    dropArea.addEventListener(eventName, unhighlight, false)
+  })
+
+  // Handle dropped files
+  dropArea.addEventListener('drop', handleDrop, false)
+
+  function preventDefaults (e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  function highlight(e) {
+    dropArea.classList.add('highlight')
+  }
+
+  function unhighlight(e) {
+    dropArea.classList.remove('active')
+  }
+
+  function handleDrop(e) {
+    var dt = e.dataTransfer
+    var files = dt.files
+
+    handleFiles(files)
+  }
+
+  let uploadProgress = []
+  let progressBar = document.getElementById('progress-bar')
+
+  function initializeProgress(numFiles) {
+    progressBar.value = 0
+    uploadProgress = []
+
+    for(let i = numFiles; i > 0; i--) {
+      uploadProgress.push(0)
+    }
+  }
+
+  function updateProgress(fileNumber, percent) {
+    uploadProgress[fileNumber] = percent
+    let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
+    progressBar.value = total
+  }
+
+  function handleFiles(files) {
+    files = [...files]
+    initializeProgress(files.length)
+    files.forEach(uploadFile)
+    files.forEach(previewFile)
+  }
+
+  function previewFile(file) {
+    let reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onloadend = function() {
+      let img = document.createElement('img')
+      img.src = reader.result
+      document.getElementById('gallery').appendChild(img)
+    }
+  }
+
+  function uploadFile(file, i) {
+    var url = 'https://api.cloudinary.com/v1_1/joezimim007/image/upload'
+    var xhr = new XMLHttpRequest()
+    var formData = new FormData()
+    xhr.open('POST', url, true)
+    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
+
+    // Update progress (can be used to show progress indicator)
+    xhr.upload.addEventListener("progress", function(e) {
+      updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
+    })
+
+    xhr.addEventListener('readystatechange', function(e) {
+      if (xhr.readyState == 4 && xhr.status == 200) {
+        updateProgress(i, 100) // <- Add this
+      }
+      else if (xhr.readyState == 4 && xhr.status != 200) {
+        // Error. Inform the user
+      }
+    })
+
+    formData.append('upload_preset', 'ujpu6gyk')
+    formData.append('file', file)
+    xhr.send(formData)
+  }
+</script>
+</body>
+</html>