|
|
| (4 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| [[/Special Issue 25 |Special Issue 25]] | | [[/Special Issue 25 |✨ Special Issue 25]] |
| | |
| | |
| <!DOCTYPE html>
| |
| <html lang="en">
| |
| <head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>Personal Web of Interests</title>
| |
| <style>
| |
| body, html {
| |
| margin: 0;
| |
| padding: 0;
| |
| height: 100%;
| |
| font-family: Arial, sans-serif;
| |
| background-color: #f0f0f0;
| |
| }
| |
| .container {
| |
| width: 100%;
| |
| height: 100%;
| |
| position: relative;
| |
| overflow: hidden;
| |
| }
| |
| .node {
| |
| position: absolute;
| |
| background-color: #fff;
| |
| border: 2px solid #333;
| |
| border-radius: 50%;
| |
| width: 100px;
| |
| height: 100px;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| text-align: center;
| |
| cursor: pointer;
| |
| transition: all 0.3s ease;
| |
| }
| |
| .node:hover {
| |
| transform: scale(1.1);
| |
| box-shadow: 0 0 15px rgba(0,0,0,0.2);
| |
| }
| |
| #svg-container {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| z-index: -1;
| |
| }
| |
| .info-panel {
| |
| position: fixed;
| |
| bottom: 20px;
| |
| left: 20px;
| |
| background-color: rgba(255, 255, 255, 0.9);
| |
| padding: 15px;
| |
| border-radius: 10px;
| |
| box-shadow: 0 0 10px rgba(0,0,0,0.1);
| |
| max-width: 300px;
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <div class="container" id="web-container">
| |
| <svg id="svg-container"></svg>
| |
| </div>
| |
| <div class="info-panel" id="info-panel">
| |
| <h2>Your Personal Web</h2>
| |
| <p>Click on a node to learn more about each topic.</p>
| |
| </div>
| |
| | |
| <script>
| |
| const interests = [
| |
| {id: 'publishing', name: 'Physical Publishing', x: 50, y: 30, info: 'Exploring the art of tangible media creation and distribution.'},
| |
| {id: 'archive', name: 'Art Labour Archive', x: 70, y: 70, info: 'Documenting and preserving the process and effort behind artistic creations.'},
| |
| {id: 'sound', name: 'Sound Recording', x: 30, y: 70, info: 'Capturing and manipulating audio for various creative projects.'},
| |
| {id: 'collective', name: 'Collective Organization', x: 20, y: 40, info: 'Studying and implementing collaborative structures in creative endeavors.'},
| |
| {id: 'assignments', name: 'Course Assignments', x: 80, y: 40, info: 'Current projects: 1. Media analysis (due 10/15) 2. Sound installation (due 11/20)'}
| |
| ];
| |
| | |
| function createNode(interest) {
| |
| const node = document.createElement('div');
| |
| node.className = 'node';
| |
| node.id = interest.id;
| |
| node.style.left = `${interest.x}%`;
| |
| node.style.top = `${interest.y}%`;
| |
| node.innerHTML = interest.name;
| |
| node.onclick = () => showInfo(interest);
| |
| document.getElementById('web-container').appendChild(node);
| |
| }
| |
| | |
| function createConnections() {
| |
| const svg = document.getElementById('svg-container');
| |
| interests.forEach((interest, i) => {
| |
| interests.slice(i + 1).forEach(other => {
| |
| const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
| |
| line.setAttribute('x1', `${interest.x}%`);
| |
| line.setAttribute('y1', `${interest.y}%`);
| |
| line.setAttribute('x2', `${other.x}%`);
| |
| line.setAttribute('y2', `${other.y}%`);
| |
| line.setAttribute('stroke', '#333');
| |
| line.setAttribute('stroke-width', '1');
| |
| svg.appendChild(line);
| |
| });
| |
| });
| |
| }
| |
| | |
| function showInfo(interest) {
| |
| const panel = document.getElementById('info-panel');
| |
| panel.innerHTML = `
| |
| <h2>${interest.name}</h2>
| |
| <p>${interest.info}</p>
| |
| `;
| |
| }
| |
| | |
| interests.forEach(createNode);
| |
| createConnections();
| |
| </script>
| |
| </body>
| |
| </html>
| |
