Skip to content

Commit

Permalink
suji upload
Browse files Browse the repository at this point in the history
  • Loading branch information
jon-marchos committed Aug 16, 2024
1 parent d67a56d commit e149939
Show file tree
Hide file tree
Showing 12 changed files with 278 additions and 69 deletions.
Binary file added work/suji-lee/assets/crime-data.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added work/suji-lee/assets/crime-viz.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added work/suji-lee/assets/daylighting.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added work/suji-lee/assets/energy-usage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added work/suji-lee/assets/google.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added work/suji-lee/assets/laptop.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added work/suji-lee/assets/window.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added work/suji-lee/assets/yelp.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added work/suji-lee/assets/zillow.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
135 changes: 83 additions & 52 deletions work/suji-lee/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,61 +3,92 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Authorship Philosophy</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Vollkorn:wght@400&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,100&display=swap"
/>
<link rel="stylesheet" href="index.css" />
<title>Interactive Content Display</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="main-container">
<span class="authorship-philosophy">Authorship <br />Philosophy</span>
<span class="user-interface-design">
Different users require different levels of interaction with the system.
Non-experts need a simple, guided interface that minimizes
decision-making complexity, while experts may require advanced options
for fine-tuning recommendations based on nuanced preferences. This
differentiation in user interface design impacts what needs to be
encoded in the technology, ensuring that the system is accessible and
functional for all users.
</span>
<div class="rectangle"></div>
<span class="concept-authorship">
The concept of authorship in the context of the Optimal Space Navigator
encompasses several layers. Users who generate content, such as reviews
or preferences, should be credited for their contributions, as their
input directly influences the system’s recommendations. While AI itself
should not hold copyrights, the content created using AI tools should
have clear ownership attributed to the users. Similarly, data used to
train AI models should acknowledge the original authors to maintain
transparency and respect intellectual property rights.<br /><br />Responsibility
in authorship involves accountability for the accuracy and ethical use
of data. Users, developers, and businesses must ensure that the
recommendations provided are based on reliable data and that privacy is
maintained. Developers must be accountable for encoding ethical
guidelines and ensuring the system does not perpetuate biases.<br /><br />Control
within the Optimal Space Navigator should be balanced. Users need
control over their preferences and the ability to provide feedback,
which influences the system’s adaptability. Developers should have
control over the core algorithms and ethical guidelines, ensuring the
system functions correctly and fairly. The masses, represented by the
data sets and collective input, should shape the system’s evolution,
ensuring it remains relevant and responsive to changing needs.<br /><br />In
conclusion, the Optimal Space Navigator must balance lock-in and
flexibility, provide clear authorship credit, and distribute control
appropriately among users, developers, and data contributors. This
approach ensures a robust, user-friendly, and ethically sound system.
</span>
<div class="frame"><span class="suji-lee">Suji Lee</span></div>
<div class="decision-fatigue">Decision Fatigue</div>
<div class="better-choices">
Which apps and data prevent decision paralysis and help us make better
choices without causing decision fatigue?
</div>

<!-- Description Box -->
<div class="description-box" id="description-box">
<!-- Description will appear here -->
</div>

<div class="container">
<div class="laptop-container">
<img
src="./assets/laptop.png"
alt="Laptop"
class="laptop"
id="laptop"
/>
<div class="window-overlay" id="window-overlay">
<img src="./assets/window.png" alt="Window" class="window" />

<!-- Content Images -->
<div
class="content"
id="content1"
data-description="Google maps is providing unlimited information of geological location, distance and ADs."
>
<img src="./assets/google.gif" alt="Google" />
</div>

<div
class="content"
id="content2"
data-description="The Zillow website provides an overwhelming amount of options, including prices, photos, and layouts."
>
<img src="./assets/zillow.gif" alt="Zillow" />
</div>

<div
class="content"
id="content3"
data-description="The Yelp website also provides information on sponsored restaurants, salons, and their reviews."
>
<img src="./assets/yelp.png" alt="Yelp" />
</div>

<div
class="content"
id="content4"
data-description="Data from the facts provided by the NYPD cannot be manipulated."
>
<img src="./assets/crime-data.png" alt="Crime Data" />
</div>

<div
class="content"
id="content5"
data-description="Based on the data, there is a possibility of automating the visualization process by mapping."
>
<img src="./assets/crime-viz.gif" alt="Crime Viz" />
</div>

<div
class="content"
id="content6"
data-description="Daylighting simulation to determine the number of natural light hours we receive throughout the year."
>
<img src="./assets/daylighting.gif" alt="Daylighting" />
</div>

<div
class="content"
id="content7"
data-description="Energy usage intensity analysis to estimate the amount of utility fees we will incur based on our consumption patterns."
>
<img src="./assets/energy-usage.png" alt="Energy Usage" />
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
Expand Down
61 changes: 44 additions & 17 deletions work/suji-lee/script.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,47 @@
const images = [];
for (let i = 1; i <= 17; i++) {
const img = document.createElement('img');
img.src = `source/image${i}.png`;
img.alt = `Image ${i}`;
img.style.display = 'none';
document.querySelector('.rectangle').appendChild(img);
images.push(img);
}
document.addEventListener('mousemove', (e) => {
const contents = document.querySelectorAll('.content');
const descriptionBox = document.getElementById('description-box');

let currentImageIndex = 0;
let isHovering = false;

function showNextImage() {
images[currentImageIndex].style.display = 'none'; // Hide the current image
currentImageIndex = (currentImageIndex + 1) % images.length; // Move to the next image
images[currentImageIndex].style.display = 'block'; // Show the next image
}
contents.forEach((content) => {
const rect = content.getBoundingClientRect();
const dx = e.clientX - rect.left - rect.width / 2;
const dy = e.clientY - rect.top - rect.height / 2;
const distance = Math.sqrt(dx * dx + dy * dy);

images[currentImageIndex].style.display = 'block'; // Show the first image initially
setInterval(showNextImage, 1000); // Change image every 1 second (1000 ms)
if (distance < 100) {
content.classList.add('clear');
const description = content.getAttribute('data-description');
descriptionBox.textContent = description;

// Change description box color based on content
if (
content.id === 'content1' ||
content.id === 'content2' ||
content.id === 'content3'
) {
descriptionBox.classList.add('red-background');
descriptionBox.classList.remove('green-background');
} else if (
content.id === 'content4' ||
content.id === 'content5' ||
content.id === 'content6' ||
content.id === 'content7'
) {
descriptionBox.classList.add('green-background');
descriptionBox.classList.remove('red-background');
}

isHovering = true;
} else {
content.classList.remove('clear');
}
});

// Reset description box color if not hovering over any content
if (!isHovering) {
descriptionBox.classList.remove('red-background', 'green-background');
descriptionBox.textContent = ''; // Clear description when not hovering
}
});
151 changes: 151 additions & 0 deletions work/suji-lee/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.decision-fatigue {
/* display: flex; */
align-items: flex-start;
justify-content: center;
position: relative;
width: 388px;
height: 41px;
margin: 20px 0 0 400px;
color: rgba(0, 0, 0, 0.8);
font-family: Manrope, var(--default-font-family);
font-size: 50px;
font-weight: 500;
line-height: 41px;
text-align: center;
white-space: nowrap;
z-index: 30;
}

.better-choices {
/* display: flex; */
align-items: flex-start;
justify-content: center;
position: relative;
width: 400px;
height: 51px;
margin: 34px 20px 20px 400px;
color: #686868;
font-family: Manrope, var(--default-font-family);
font-size: 17px;
font-weight: 300;
line-height: 16.83px;
text-align: center;
z-index: 32;
}
.description-box {
/* position: absolute; */
/* top: 150px; /* Adjust based on where you want the box */
left: 50%;
display: flex;
margin-bottom: 20px;
align-items: flex-start;
justify-content: center;
position: relative;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.9);
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
width: 388px;
height: 40px;
text-align: center;
z-index: 35;
}

.red-background {
background-color: rgba(255, 148, 148, 0.9); /* Light red background */
}

.green-background {
background-color: #a9ffa9e6; /* Light green background */
}

.container {
position: relative;
}

.laptop-container {
position: relative;
}

.laptop {
width: 1200px;
}

.window {
width: 1040px;
margin-left: 80px;
margin-top: -20px;
}

.window-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

.content {
position: absolute;
cursor: pointer;
filter: blur(8px);
transition: filter 0.2s ease;
width: 100%;
}

img {
width: 100%;
}

/* Specific content positions and sizes */
#content1 {
top: 12%;
left: 12%;
max-width: 350px;
}
#content2 {
top: 20%;
left: 30%;
max-width: 400px;
}
#content3 {
top: 55%;
left: 58%;
max-width: 350px;
}
#content4 {
top: 13%;
left: 57%;
max-width: 350px;
}
#content5 {
top: 55%;
left: 35%;
max-width: 310px;
}
#content6 {
top: 54%;
left: 12%;
max-width: 350px;
}
#content7 {
top: 10%;
left: 45%;
max-width: 370px;
}

.clear {
filter: blur(0px);
}

0 comments on commit e149939

Please sign in to comment.