Hugging Face's logo

Spaces:
eaglelandsonce
/
DOGE_Hackathon
Running

App Files Community
eaglelandsonce commited on
Commit
e73accb
·
verified ·
1 Parent(s): 83f8583

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +23 -31
index.html CHANGED
@@ -10,7 +10,6 @@
10
  padding: 0;
11
  box-sizing: border-box;
12
  }
13
-
14
  body {
15
  font-family: Arial, sans-serif;
16
  display: flex;
@@ -19,7 +18,6 @@
19
  min-height: 100vh;
20
  background-color: #f0f0f0;
21
  }
22
-
23
  .container {
24
  position: relative;
25
  width: 100%;
@@ -29,7 +27,6 @@
29
  overflow: hidden;
30
  border: 5px solid #444;
31
  }
32
-
33
  .top-bar {
34
  position: absolute;
35
  top: 0;
@@ -39,38 +36,39 @@
39
  text-align: center;
40
  padding: 10px;
41
  z-index: 10;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  }
43
-
44
  .main {
45
  display: flex;
46
  height: 100%;
47
  }
48
-
49
  .side-bar {
50
  width: 100px;
51
  background-color: #444;
52
  display: flex;
53
  flex-direction: column;
54
  align-items: center;
55
- justify-content: space-between;
56
  padding: 20px;
57
  z-index: 10;
58
  }
59
-
60
- .side-bar button {
61
- background-color: #666;
62
- color: white;
63
- border: none;
64
- margin: 10px 0;
65
- padding: 10px;
66
- cursor: pointer;
67
- text-align: center;
68
- }
69
-
70
- .nav-buttons {
71
- margin-top: auto;
72
- }
73
-
74
  .content {
75
  flex: 1;
76
  display: flex;
@@ -79,7 +77,6 @@
79
  position: relative;
80
  background-color: #000;
81
  }
82
-
83
  .content img {
84
  max-width: 100%;
85
  max-height: 100%;
@@ -91,12 +88,14 @@
91
  <body>
92
  <div class="container">
93
  <div class="top-bar">
 
 
 
 
94
  <h1 id="slide-title">Slide Viewer</h1>
95
  </div>
96
  <div class="main">
97
  <div class="side-bar">
98
- <button id="prev-btn">Previous</button>
99
- <button id="next-btn">Next</button>
100
  </div>
101
  <div class="content">
102
  <img id="slide-image" src="images/01_mg.png" alt="Slide Image">
@@ -109,10 +108,8 @@
109
  const slideImage = document.getElementById('slide-image');
110
  const prevBtn = document.getElementById('prev-btn');
111
  const nextBtn = document.getElementById('next-btn');
112
-
113
  let data = [];
114
  let currentIndex = 0;
115
-
116
  // Fetch slide configuration
117
  async function fetchSlideConfig() {
118
  try {
@@ -124,25 +121,20 @@
124
  console.error('Error loading slide configuration:', error);
125
  }
126
  }
127
-
128
  function loadSlide(index) {
129
  if (data.length === 0) return;
130
-
131
  const slide = data[index];
132
  slideTitle.textContent = slide.id.replace('_', ' ');
133
  slideImage.src = slide.image;
134
  }
135
-
136
  prevBtn.addEventListener('click', () => {
137
  currentIndex = (currentIndex - 1 + data.length) % data.length;
138
  loadSlide(currentIndex);
139
  });
140
-
141
  nextBtn.addEventListener('click', () => {
142
  currentIndex = (currentIndex + 1) % data.length;
143
  loadSlide(currentIndex);
144
  });
145
-
146
  // Initialize
147
  fetchSlideConfig();
148
  </script>
 
10
  padding: 0;
11
  box-sizing: border-box;
12
  }
 
13
  body {
14
  font-family: Arial, sans-serif;
15
  display: flex;
 
18
  min-height: 100vh;
19
  background-color: #f0f0f0;
20
  }
 
21
  .container {
22
  position: relative;
23
  width: 100%;
 
27
  overflow: hidden;
28
  border: 5px solid #444;
29
  }
 
30
  .top-bar {
31
  position: absolute;
32
  top: 0;
 
36
  text-align: center;
37
  padding: 10px;
38
  z-index: 10;
39
+ display: flex;
40
+ align-items: center;
41
+ justify-content: space-between;
42
+ }
43
+ .top-bar h1 {
44
+ flex: 1;
45
+ text-align: center;
46
+ }
47
+ .nav-buttons {
48
+ display: flex;
49
+ gap: 10px;
50
+ }
51
+ .nav-buttons button {
52
+ background-color: #666;
53
+ color: white;
54
+ border: none;
55
+ padding: 10px;
56
+ cursor: pointer;
57
  }
 
58
  .main {
59
  display: flex;
60
  height: 100%;
61
  }
 
62
  .side-bar {
63
  width: 100px;
64
  background-color: #444;
65
  display: flex;
66
  flex-direction: column;
67
  align-items: center;
68
+ justify-content: center;
69
  padding: 20px;
70
  z-index: 10;
71
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  .content {
73
  flex: 1;
74
  display: flex;
 
77
  position: relative;
78
  background-color: #000;
79
  }
 
80
  .content img {
81
  max-width: 100%;
82
  max-height: 100%;
 
88
  <body>
89
  <div class="container">
90
  <div class="top-bar">
91
+ <div class="nav-buttons">
92
+ <button id="prev-btn">&#8592;</button>
93
+ <button id="next-btn">&#8594;</button>
94
+ </div>
95
  <h1 id="slide-title">Slide Viewer</h1>
96
  </div>
97
  <div class="main">
98
  <div class="side-bar">
 
 
99
  </div>
100
  <div class="content">
101
  <img id="slide-image" src="images/01_mg.png" alt="Slide Image">
 
108
  const slideImage = document.getElementById('slide-image');
109
  const prevBtn = document.getElementById('prev-btn');
110
  const nextBtn = document.getElementById('next-btn');
 
111
  let data = [];
112
  let currentIndex = 0;
 
113
  // Fetch slide configuration
114
  async function fetchSlideConfig() {
115
  try {
 
121
  console.error('Error loading slide configuration:', error);
122
  }
123
  }
 
124
  function loadSlide(index) {
125
  if (data.length === 0) return;
 
126
  const slide = data[index];
127
  slideTitle.textContent = slide.id.replace('_', ' ');
128
  slideImage.src = slide.image;
129
  }
 
130
  prevBtn.addEventListener('click', () => {
131
  currentIndex = (currentIndex - 1 + data.length) % data.length;
132
  loadSlide(currentIndex);
133
  });
 
134
  nextBtn.addEventListener('click', () => {
135
  currentIndex = (currentIndex + 1) % data.length;
136
  loadSlide(currentIndex);
137
  });
 
138
  // Initialize
139
  fetchSlideConfig();
140
  </script>