Spaces:
Running
Running
| <html><head><base href="https://websim.ai/tools/csv-to-timeline" /> | |
| <title>CSV to Timeline Converter | websim.ai</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| h1 { | |
| color: #2c3e50; | |
| } | |
| .input-section, .output-section { | |
| margin-bottom: 20px; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 200px; | |
| margin-bottom: 10px; | |
| } | |
| #convertBtn { | |
| background-color: #3498db; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| #convertBtn:hover { | |
| background-color: #2980b9; | |
| } | |
| .timeline { | |
| position: relative; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .timeline::after { | |
| content: ''; | |
| position: absolute; | |
| width: 6px; | |
| background-color: #3498db; | |
| top: 0; | |
| bottom: 0; | |
| left: 50%; | |
| margin-left: -3px; | |
| } | |
| .container { | |
| padding: 10px 40px; | |
| position: relative; | |
| background-color: inherit; | |
| width: 50%; | |
| } | |
| .container::after { | |
| content: ''; | |
| position: absolute; | |
| width: 25px; | |
| height: 25px; | |
| right: -17px; | |
| background-color: white; | |
| border: 4px solid #3498db; | |
| top: 15px; | |
| border-radius: 50%; | |
| z-index: 1; | |
| } | |
| .left { | |
| left: 0; | |
| } | |
| .right { | |
| left: 50%; | |
| } | |
| .left::before { | |
| content: " "; | |
| height: 0; | |
| position: absolute; | |
| top: 22px; | |
| width: 0; | |
| z-index: 1; | |
| right: 30px; | |
| border: medium solid #3498db; | |
| border-width: 10px 0 10px 10px; | |
| border-color: transparent transparent transparent #3498db; | |
| } | |
| .right::before { | |
| content: " "; | |
| height: 0; | |
| position: absolute; | |
| top: 22px; | |
| width: 0; | |
| z-index: 1; | |
| left: 30px; | |
| border: medium solid #3498db; | |
| border-width: 10px 10px 10px 0; | |
| border-color: transparent #3498db transparent transparent; | |
| } | |
| .right::after { | |
| left: -16px; | |
| } | |
| .content { | |
| padding: 20px 30px; | |
| background-color: white; | |
| position: relative; | |
| border-radius: 6px; | |
| border: 1px solid #3498db; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>CSV to Timeline Converter</h1> | |
| <div class="input-section"> | |
| <h2>Input CSV</h2> | |
| <p>Enter your CSV data below. Format: Date,Event</p> | |
| <textarea id="csvInput" placeholder="YYYY-MM-DD,Event description"></textarea> | |
| <button id="convertBtn">Convert to Timeline</button> | |
| </div> | |
| <div class="output-section"> | |
| <h2>Timeline Output</h2> | |
| <div id="timelineOutput" class="timeline"></div> | |
| </div> | |
| <script> | |
| document.getElementById('convertBtn').addEventListener('click', function() { | |
| const csvInput = document.getElementById('csvInput').value; | |
| const timelineOutput = document.getElementById('timelineOutput'); | |
| // Clear previous output | |
| timelineOutput.innerHTML = ''; | |
| // Parse CSV | |
| const rows = csvInput.split('\n'); | |
| rows.forEach((row, index) => { | |
| const [date, event] = row.split(','); | |
| if (date && event) { | |
| const container = document.createElement('div'); | |
| container.className = `container ${index % 2 === 0 ? 'left' : 'right'}`; | |
| const content = document.createElement('div'); | |
| content.className = 'content'; | |
| const dateElem = document.createElement('h2'); | |
| dateElem.textContent = date; | |
| const eventElem = document.createElement('p'); | |
| eventElem.textContent = event; | |
| content.appendChild(dateElem); | |
| content.appendChild(eventElem); | |
| container.appendChild(content); | |
| timelineOutput.appendChild(container); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body></html> |