Hugging Face's logo

Spaces:
eaglelandsonce
/
DOGE_Hackathon
Running

App Files Community
eaglelandsonce commited on
Commit
0bf7c14
·
verified ·
1 Parent(s): 03a5885

Update index.html

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