CenterForDigitalHumanities · sarah-fidahussain-SLU · Sep 15, 2024 · Sep 16, 2024 · Sep 16, 2024 · Sep 16, 2024
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -0,0 +1 @@
+* @MutyaSowmya123
diff --git a/components/classroom/README.md b/components/classroom/README.md
@@ -0,0 +1,46 @@
+# T-PEN Project Overview
+
+T-PEN (Transcription for Paleographical and Editorial Notation) is a web-based tool 
+designed for working with images of manuscripts. It allows users to attach transcription 
+data to the actual lines of the original manuscript in a simple, flexible interface.
+
+## T-PEN API
+
+The T-PEN API provides various endpoints to interact with the T-PEN system programmatically. 
+Here are some key features:
+
+- **Authentication**: Secure access to the T-PEN system.
+- **Project Management**: Create, update, and manage transcription projects.
+- **Image Handling**: Upload and manage manuscript images.
+- **Transcription Services**: Submit and retrieve transcriptions linked to manuscript images.
+
+## T-PEN Data Services
+
+T-PEN provides multiple tools to help with transcribing and annotating manuscripts.
+
+- **Image Annotation**: Users can annotate specific lines or sections of manuscript images.
+- **Data Export**: Transcriptions and annotations can be exported in numerous formats for further analysis or publication.
+- **Collaboration Tools**: Multiple users can work on the same project, with tools for tracking changes and managing contributions.
+
+## Connecting to T-PEN Data Services
+
+1. **Create an Account**: Sign up for a T-PEN account on the website https://t-pen.org/TPEN/
+2. **Upload Manuscripts**: Upload digital images of manuscripts you wish to transcribe.
+3. **Start Transcribing**: Use the transcription interface to begin transcribing the text.
+4. **Annotate and Collaborate**: Utilize the annotation tools and invite collaborators to join your project.
+5. **Export Data**: Once your transcription is complete, export the data in your preferred format.
+
+## User Guide Best Practices
+
+* `index.html`: The default interface to launch,
+* TPEN interface suports many files e.g. `*js`, `*.css`, `*.html`, etc.,
+* Configuration files: `manifest.yml` or `manifest.json`
+
+## Useful APIs for Classroom Group Interface
+
+For a classroom group interface, the following APIs might be useful:
+
+1. **User Management API**: To handle user authentication, roles, and permissions.
+2. **Project Collaboration API**: To manage group projects, track contributions, and facilitate collaborative work.
+3. **Annotation API**: To allow students to annotate and comment on manuscript images.
+4. **Export API**: To enable students to export their work in various formats for presentations or further study.
diff --git a/components/classroom/fetchProjectData.mjs b/components/classroom/fetchProjectData.mjs
@@ -0,0 +1,17 @@
+import { getProjectIDFromURL } from './project.js';
+export async function fetchProjectData(projectId) {
+    try {
+        const response = await fetch(`https://api.t-pen.org/project/${projectId}`);
+
+        if (!response.ok) {
+            throw error;
+        }
+
+        const data = response.json();
+        console.log(data);  // Log the data to inspect its structure
+
+        return data;  // Return data for further use if needed
+    } catch (error) {
+        console.error(`Failed to fetch project data: ${error}`);
+    }
+}
diff --git a/components/classroom/index.html b/components/classroom/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <title>"TPEN Classroom Interface: Home"</title>
+</head>
+    <body>
+        <div class="header">
+            <h1>TPEN Classroom Interface</h1>
+            <div class="hamburger-menu" onclick="toggleMenu()">
+                &#9776 <!-- Hamburger icon -->
+            </div>
+        </div>
+            <div class ="navbar" id="navbar">
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#annotations">Annotations</a></li>
+                <li><a href="#groups">Groups</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+            </div>
+
+            <div class="page-container">
+                <h1>Welcome!</h1>
+                <div class="input-container">
+                    <div class="label-container">
+                        <form class="input-form">
+                            <label for="username">Username:</label>
+                            <input id="username" name="username" type="text" placeholder="John Smith">
+                        </form>
+                        <form class="input-form">
+                            <label for="password">Password:</label>
+                            <input id="password" name="password" type="password">
+                        </form> 
+                    </div>
+                    <button class="submit-button" type="submit">Submit</button>
+                </div>
+            </div>
+
+        <footer>
+            <p>TPEN Classroom Interface</p>
+        </footer>
+
+        <script src="./menutoggle.js"></script>
+    </body>
+</html>
diff --git a/components/classroom/menutoggle.js b/components/classroom/menutoggle.js
@@ -0,0 +1,25 @@
+function toggleMenu() {
+    var navbar = document.getElementById("navbar");
+    if (navbar.className === "navbar") {
+        navbar.className += " responsive";
+    } else {
+        navbar.className = "navbar";
+    }
+}
+
+// Function to display login alert
+function loginAlert() {
+    const username = document.getElementById("username").value;
+    if (username) {
+        alert("Welcome Back " + username + "!");
+    }
+}
+
+// Event listener for the login button
+document.addEventListener("DOMContentLoaded", function() {
+    const loginButton = document.querySelector(".submit-button");
+    loginButton.addEventListener("click", function(event) {
+        event.preventDefault(); // Prevent form submission
+        loginAlert();
+    });
+});
diff --git a/components/classroom/project.js b/components/classroom/project.js
@@ -0,0 +1,25 @@
+// function extracts projectID from URL of the page
+export function getProjectIDFromURL() {
+    const params = new URLSearchParams(window.location.search); //searches the query parameters (everything after ?)
+    let projectIdQuery = params.get('projectId');
+    console.log('Query Parameter Project ID:', projectIdQuery); 
+
+    if (!projectIdQuery) {
+        const hash = window.location.hash; //searches the fragment identifier (everything after #)
+        let projectIdHash = hash.substring(1); 
+        console.log('Hash Project ID:', projectIdHash);
+        return projectIdHash;
+    }
+    else {
+        return projectIdQuery;
+    }
+}
+
+/* // Call the function to get the ProjectID and display it
+const projectID = getProjectIDFromURL();
+if (projectID) {
+    document.getElementById('project-info').textContent = 'Project ID: ' + projectID;
+}
+else {
+    document.getElementById('project-info').textContent = 'Project ID not found in URL';
+} */
diff --git a/components/classroom/styles.css b/components/classroom/styles.css
@@ -0,0 +1,214 @@
+* {
+    box-sizing: border-box;
+}
+
+*::before, *::after {
+    padding: 0;
+
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    background-color: rgb(240, 241, 241);
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    overflow-x: hidden;
+}
+
+.header {
+    display: grid;
+    padding: 30px;
+    text-align: center;
+    background: #516059; 
+    color: white;
+}
+
+.header h1 {
+    font-size: 30px;
+}
+
+.page-container h2 {
+    color: #516059;
+}
+
+.navbar {
+    font-size: clamp(1rem, 2vh, 2rem);
+    background-color: #516059;
+}
+
+.navbar ul {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    padding-bottom: 0.5rem;
+}
+
+li a {
+    display: block;
+    color: #fff;
+    padding: 10px 10px;
+    text-decoration: none;
+}
+
+li a:hover {
+    background-color: #ffffff;
+    color: #516059;
+    border-radius: 10px;
+}
+
+.page-container {
+    text-align: center;
+}
+
+.input-container {
+    padding-top: 1rem;
+}
+
+.input-form {
+    padding-bottom: 0.5rem;
+}
+
+footer {
+    padding: 10px;
+    text-align: center;
+    background: #516059; 
+    color: white;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+/* Hamburger icon */
+.hamburger-menu {
+    display: none;
+    font-size: 25px;
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
+/* Mobile (Portrait and Landscape) */
+@media (max-width: 600px) {
+    .header h1 {
+        font-size: 24px;
+    }
+
+    .navbar {
+        background-color: #516059;
+    }
+
+    .navbar ul {
+        display: none;
+        flex-direction: column;
+        width: 100%;
+        text-align: center;
+    }
+
+    .navbar.responsive ul {
+        display: flex;
+    }
+
+    .hamburger-menu {
+        display: block;
+    }
+
+    .input-container {
+        padding-top: 1rem;
+    }
+
+    .input-form {
+        display: grid;
+        padding-inline: 5rem;
+        gap: 0.5rem;
+    }
+}
+
+/* Tablet (Portrait and Landscape) */
+@media (min-width: 600px) and (max-width: 900px) {
+    /* Styles for tablets */
+}
+
+/* Small Desktop or Large Tablet */
+@media (min-width: 900px) and (max-width: 1200px) {
+    /* Styles for small desktops or large tablets */
+}
+
+/* Desktop (Large screens) */
+@media (min-width: 1200px) {
+    /* Styles for desktop devices */
+}
+=======
+  }  
+  body {
+      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+      background-color: rgb(240, 241, 241);
+      margin: 0;
+      padding: 0;
+  }
+
+  .header {
+      padding: 30px;
+      text-align: center;
+      background: #516059; 
+      color: white;
+    }
+
+
+  .header h1 {
+      font-size: 30px;
+    }
+
+
+  .navbar {
+      float: left;
+      background: #ccc;
+      padding: 20px;
+      width: 150px;
+      height: 100%;
+      position: fixed;
+  }
+
+  .navbar ul {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+
+
+  }
+
+  li a {
+      display: block;
+      color: #000;
+      padding: 10px 0;
+      text-align: center;
+      text-decoration: none;
+      width: 100%;
+      box-sizing: border-box;
+  }
+
+  li a:hover {
+      background-color: #ddd;
+      color: #516059;
+  }
+
+  .main{
+      text-align: center;
+  }
+
+  footer{
+      padding: 10px ;
+      text-align: center;
+      background: #516059; 
+      color: white;
+      position:fixed;
+       bottom:0;
+      width: 100%;
+    }
+