Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Your Paper Title | ICLR 2024</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-pattern { | |
| background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .paper-shadow { | |
| box-shadow: 0 10px 30px -10px rgba(0,0,0,0.2); | |
| } | |
| .citation-box { | |
| position: relative; | |
| } | |
| .citation-box::before { | |
| content: '"'; | |
| position: absolute; | |
| font-size: 5rem; | |
| color: rgba(0,0,0,0.05); | |
| top: -2rem; | |
| left: -1rem; | |
| z-index: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans antialiased"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <span class="text-gray-900 font-semibold">ICLR 2024</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#abstract" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">Abstract</a> | |
| <a href="#authors" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">Authors</a> | |
| <a href="#paper" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">Paper</a> | |
| <a href="#citation" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">Citation</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="hero-pattern"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Your Innovative Paper Title Goes Here</h1> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">A Breakthrough in Machine Learning Presented at ICLR 2024</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-20"> | |
| <!-- Paper Card --> | |
| <div class="bg-white rounded-xl paper-shadow overflow-hidden mb-16"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8"> | |
| <img src="https://via.placeholder.com/600x400?text=Paper+Teaser" alt="Paper Teaser" class="w-full h-auto rounded-lg"> | |
| </div> | |
| <div class="md:w-1/2 p-8"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-4">Key Information</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Conference</h3> | |
| <p class="text-gray-900">International Conference on Learning Representations (ICLR) 2024</p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Date</h3> | |
| <p class="text-gray-900">May 7-11, 2024</p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Links</h3> | |
| <div class="flex space-x-4 mt-2"> | |
| <a href="#" class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-file-pdf mr-2"></i> PDF | |
| </a> | |
| <a href="#" class="bg-purple-100 text-purple-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-code mr-2"></i> Code | |
| </a> | |
| <a href="#" class="bg-green-100 text-green-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-video mr-2"></i> Video | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Abstract Section --> | |
| <section id="abstract" class="mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Abstract</h2> | |
| <div class="bg-white p-8 rounded-xl paper-shadow"> | |
| <p class="text-gray-700 leading-relaxed"> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. | |
| </p> | |
| <p class="text-gray-700 leading-relaxed mt-4"> | |
| Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Authors Section --> | |
| <section id="authors" class="mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Authors</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Author 1 --> | |
| <div class="bg-white p-6 rounded-xl paper-shadow text-center"> | |
| <div class="w-24 h-24 rounded-full bg-gray-200 mx-auto mb-4 overflow-hidden"> | |
| <img src="https://via.placeholder.com/150?text=Author+1" alt="Author 1" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900">First Author</h3> | |
| <p class="text-gray-600">University Name</p> | |
| <div class="flex justify-center space-x-3 mt-3"> | |
| <a href="#" class="text-gray-500 hover:text-blue-600"><i class="fab fa-google"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| <!-- Author 2 --> | |
| <div class="bg-white p-6 rounded-xl paper-shadow text-center"> | |
| <div class="w-24 h-24 rounded-full bg-gray-200 mx-auto mb-4 overflow-hidden"> | |
| <img src="https://via.placeholder.com/150?text=Author+2" alt="Author 2" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900">Second Author</h3> | |
| <p class="text-gray-600">Institution Name</p> | |
| <div class="flex justify-center space-x-3 mt-3"> | |
| <a href="#" class="text-gray-500 hover:text-blue-600"><i class="fab fa-google"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-twitter"></i></a> | |
| </div> | |
| </div> | |
| <!-- Author 3 --> | |
| <div class="bg-white p-6 rounded-xl paper-shadow text-center"> | |
| <div class="w-24 h-24 rounded-full bg-gray-200 mx-auto mb-4 overflow-hidden"> | |
| <img src="https://via.placeholder.com/150?text=Author+3" alt="Author 3" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900">Third Author</h3> | |
| <p class="text-gray-600">Company Name</p> | |
| <div class="flex justify-center space-x-3 mt-3"> | |
| <a href="#" class="text-gray-500 hover:text-blue-600"><i class="fab fa-google"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-linkedin"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| <!-- Author 4 --> | |
| <div class="bg-white p-6 rounded-xl paper-shadow text-center"> | |
| <div class="w-24 h-24 rounded-full bg-gray-200 mx-auto mb-4 overflow-hidden"> | |
| <img src="https://via.placeholder.com/150?text=Author+4" alt="Author 4" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900">Senior Author</h3> | |
| <p class="text-gray-600">Research Lab</p> | |
| <div class="flex justify-center space-x-3 mt-3"> | |
| <a href="#" class="text-gray-500 hover:text-blue-600"><i class="fab fa-google"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Paper Section --> | |
| <section id="paper" class="mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Paper & Resources</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white p-6 rounded-xl paper-shadow"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4">Download Paper</h3> | |
| <div class="space-y-3"> | |
| <a href="#" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-file-pdf text-red-500 mr-3 text-xl"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Conference Version (PDF)</p> | |
| <p class="text-sm text-gray-500">ICLR 2024, 12 pages</p> | |
| </div> | |
| </a> | |
| <a href="#" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-file-alt text-blue-500 mr-3 text-xl"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Supplementary Material</p> | |
| <p class="text-sm text-gray-500">Additional results and proofs</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl paper-shadow"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4">Additional Resources</h3> | |
| <div class="space-y-3"> | |
| <a href="#" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-code-branch text-purple-500 mr-3 text-xl"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">GitHub Repository</p> | |
| <p class="text-sm text-gray-500">Implementation code and models</p> | |
| </div> | |
| </a> | |
| <a href="#" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-video text-green-500 mr-3 text-xl"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Presentation Video</p> | |
| <p class="text-sm text-gray-500">5-minute conference presentation</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Citation Section --> | |
| <section id="citation" class="mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Citation</h2> | |
| <div class="bg-white p-8 rounded-xl paper-shadow citation-box"> | |
| <div class="relative z-10"> | |
| <code class="text-gray-700 font-mono text-sm leading-relaxed"> | |
| @inproceedings{<br> | |
| author = {Author1, First and Author2, Second and Author3, Third and Author4, Senior},<br> | |
| title = {Your Innovative Paper Title Goes Here},<br> | |
| booktitle = {International Conference on Learning Representations (ICLR)},<br> | |
| year = {2024}<br> | |
| } | |
| </code> | |
| </div> | |
| <div class="mt-6 flex space-x-3"> | |
| <button onclick="copyCitation()" class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="far fa-copy mr-2"></i> Copy Citation | |
| </button> | |
| <button onclick="copyBibtex()" class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-quote-right mr-2"></i> Copy BibTeX | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Acknowledgements --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Acknowledgements</h2> | |
| <div class="bg-white p-8 rounded-xl paper-shadow"> | |
| <p class="text-gray-700 leading-relaxed"> | |
| We would like to thank our colleagues for their valuable feedback and suggestions. This work was supported by the National Science Foundation under Grant No. XXXXXXX and the XYZ Research Initiative. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the funding agencies. | |
| </p> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 py-8"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="flex justify-center md:order-2 space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| </div> | |
| <div class="mt-8 md:mt-0 md:order-1"> | |
| <p class="text-center text-base text-gray-500"> | |
| © 2024 Author Names. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| function copyCitation() { | |
| const citation = `Author1, First, et al. "Your Innovative Paper Title Goes Here." International Conference on Learning Representations (ICLR). 2024.`; | |
| navigator.clipboard.writeText(citation).then(() => { | |
| alert('Citation copied to clipboard!'); | |
| }); | |
| } | |
| function copyBibtex() { | |
| const bibtex = `@inproceedings{\n author = {Author1, First and Author2, Second and Author3, Third and Author4, Senior},\n title = {Your Innovative Paper Title Goes Here},\n booktitle = {International Conference on Learning Representations (ICLR)},\n year = {2024}\n}`; | |
| navigator.clipboard.writeText(bibtex).then(() => { | |
| alert('BibTeX entry copied to clipboard!'); | |
| }); | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=anonymousatom/thinktoground" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |