Changes to univiz.scroll.pub

root

17 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Univiz
+   Your guide to comparing North American universities
+ 
+ 
+ 
+   
+     
+       
+       
+     
+   
+ 
+   
+     
+       Filters
+       
+         Location:
+         
+       
+       
+         Max Tuition:
+         
+         $50,000
+       
+     
+ 
+     
+       University Comparison
+       
+         
+       
+     
+   
+ 
+ 
+ 
+   Made with ❤️ for students
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://univiz.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Univiz - Compare North American Universities for High School Students
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "209ab940-b409-434a-a596-d075ab29d448",
+   "object": "chat.completion",
+   "created": 1736035791,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nuniviz.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://univiz.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Univiz - Compare North American Universities for High School Students\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Univiz\n  Your guide to comparing North American universities
\n\n\n\n  \n    \n      \n      \n    
\n  \n\n  \n    \n      Filters\n      \n        Location:\n        \n      
\n      \n        Max Tuition:\n        \n        $50,000\n      
\n    
\n\n    \n      University Comparison\n      \n        \n      
\n    
\n  \n\n\n\n  Made with ❤️ for students
\n\n---style.css---\n:root {\n  --primary-color: #1a73e8;\n  --secondary-color: #202124;\n  --background-color: #f8f9fa;\n  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Segoe UI', system-ui, sans-serif;\n  line-height: 1.6;\n  color: var(--secondary-color);\n  background-color: var(--background-color);\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\nheader {\n  background: var(--primary-color);\n  color: white;\n  padding: 2rem 1rem;\n  text-align: center;\n}\n\nheader h1 {\n  font-size: 2.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.search-section {\n  padding: 2rem 1rem;\n  background: white;\n  box-shadow: var(--card-shadow);\n}\n\n.search-container {\n  max-width: 800px;\n  margin: 0 auto;\n  display: flex;\n  gap: 1rem;\n}\n\n#searchInput {\n  flex: 1;\n  padding: 0.75rem;\n  border: 2px solid #ddd;\n  border-radius: 8px;\n  font-size: 1rem;\n}\n\n#searchButton {\n  padding: 0.75rem 2rem;\n  background: var(--primary-color);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.3s ease;\n}\n\n#searchButton:hover {\n  background: #1557b0;\n}\n\n.comparison-section {\n  display: grid;\n  grid-template-columns: 250px 1fr;\n  gap: 2rem;\n  max-width: 1200px;\n  margin: 2rem auto;\n  padding: 0 1rem;\n}\n\n.filters {\n  background: white;\n  padding: 1.5rem;\n  border-radius: 8px;\n  box-shadow: var(--card-shadow);\n}\n\n.filter-group {\n  margin-bottom: 1.5rem;\n}\n\n.filter-group label {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-weight: 500;\n}\n\n.filter-group select,\n.filter-group input {\n  width: 100%;\n  padding: 0.5rem;\n  border: 2px solid #ddd;\n  border-radius: 4px;\n}\n\n.university-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 1.5rem;\n}\n\n.university-card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: var(--card-shadow);\n  overflow: hidden;\n  transition: transform 0.3s ease;\n}\n\n.university-card:hover {\n  transform: translateY(-5px);\n}\n\n.university-card img {\n  width: 100%;\n  height: 180px;\n  object-fit: cover;\n}\n\n.university-card-content {\n  padding: 1.5rem;\n}\n\n.university-card h3 {\n  margin-bottom: 0.5rem;\n}\n\n.university-card p {\n  color: #666;\n  margin-bottom: 0.5rem;\n}\n\nfooter {\n  margin-top: auto;\n  text-align: center;\n  padding: 1.5rem;\n  background: var(--secondary-color);\n  color: white;\n}\n\n@media (max-width: 768px) {\n  .comparison-section {\n    grid-template-columns: 1fr;\n  }\n  \n  .search-container {\n    flex-direction: column;\n  }\n  \n  #searchButton {\n    width: 100%;\n  }\n}\n---script.js---\n// Sample university data\nconst universities = [\n  {\n    name: \"Harvard University\",\n    location: \"USA\",\n    tuition: 51000,\n    image: \"harvard.jpg\",\n    description: \"Ivy League university in Cambridge, Massachusetts\"\n  },\n  {\n    name: \"University of Toronto\",\n    location: \"Canada\",\n    tuition: 45000,\n    image: \"toronto.jpg\",\n    description: \"Leading Canadian university in Ontario\"\n  },\n  {\n    name: \"Stanford University\",\n    location: \"USA\",\n    tuition: 53000,\n    image: \"stanford.jpg\",\n    description: \"Private research university in California\"\n  },\n  {\n    name: \"Universidad Nacional Autónoma de México\",\n    location: \"Mexico\",\n    tuition: 800,\n    image: \"unam.jpg\",\n    description: \"Public research university in Mexico City\"\n  }\n];\n\n// DOM Elements\nconst searchInput = document.getElementById('searchInput');\nconst searchButton = document.getElementById('searchButton');\nconst locationFilter = document.getElementById('location');\nconst tuitionFilter = document.getElementById('tuition');\nconst tuitionValue = document.getElementById('tuitionValue');\nconst universityGrid = document.getElementById('universityGrid');\n\n// Event Listeners\nsearchButton.addEventListener('click', filterUniversities);\nlocationFilter.addEventListener('change', filterUniversities);\ntuitionFilter.addEventListener('input', updateTuitionValue);\ntuitionFilter.addEventListener('change', filterUniversities);\n\n// Initial render\nrenderUniversities(universities);\n\nfunction renderUniversities(data) {\n  universityGrid.innerHTML = data.map(university => `\n    \n      \n      \n        ${university.name}\n        ${university.description}
\n        Location: ${university.location}
\n        Tuition: $${university.tuition.toLocaleString()}
\n      
\n    
\n  `).join('');\n}\n\nfunction filterUniversities() {\n  const searchTerm = searchInput.value.toLowerCase();\n  const location = locationFilter.value;\n  const maxTuition = parseInt(tuitionFilter.value);\n\n  const filtered = universities.filter(university => {\n    const matchesSearch = university.name.toLowerCase().includes(searchTerm);\n    const matchesLocation = location === 'all' || university.location.toLowerCase() === location;\n    const matchesTuition = university.tuition <= maxTuition;\n    return matchesSearch && matchesLocation && matchesTuition;\n  });\n\n  renderUniversities(filtered);\n}\n\nfunction updateTuitionValue() {\n  tuitionValue.textContent = `$${parseInt(tuitionFilter.value).toLocaleString()}`;\n}\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 245,
+     "completion_tokens": 1852,
+     "total_tokens": 2097,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 245
+   },
+   "system_fingerprint": "fp_3a5770e1b4"
+ }

readme.scroll

Changed around line 1

+ # univiz.scroll.pub

+ Website generated by DeepSeek from prompt: a website to compare north america universities for high school students

script.js

Changed around line 1
+ // Sample university data
+ const universities = [
+   {
+     name: "Harvard University",
+     location: "USA",
+     tuition: 51000,
+     image: "harvard.jpg",
+     description: "Ivy League university in Cambridge, Massachusetts"
+   },
+   {
+     name: "University of Toronto",
+     location: "Canada",
+     tuition: 45000,
+     image: "toronto.jpg",
+     description: "Leading Canadian university in Ontario"
+   },
+   {
+     name: "Stanford University",
+     location: "USA",
+     tuition: 53000,
+     image: "stanford.jpg",
+     description: "Private research university in California"
+   },
+   {
+     name: "Universidad Nacional Autónoma de México",
+     location: "Mexico",
+     tuition: 800,
+     image: "unam.jpg",
+     description: "Public research university in Mexico City"
+   }
+ ];
+ 
+ // DOM Elements
+ const searchInput = document.getElementById('searchInput');
+ const searchButton = document.getElementById('searchButton');
+ const locationFilter = document.getElementById('location');
+ const tuitionFilter = document.getElementById('tuition');
+ const tuitionValue = document.getElementById('tuitionValue');
+ const universityGrid = document.getElementById('universityGrid');
+ 
+ // Event Listeners
+ searchButton.addEventListener('click', filterUniversities);
+ locationFilter.addEventListener('change', filterUniversities);
+ tuitionFilter.addEventListener('input', updateTuitionValue);
+ tuitionFilter.addEventListener('change', filterUniversities);
+ 
+ // Initial render
+ renderUniversities(universities);
+ 
+ function renderUniversities(data) {
+   universityGrid.innerHTML = data.map(university => `
+     
+       
+       
+         ${university.name}
+         ${university.description}
+         Location: ${university.location}
+         Tuition: $${university.tuition.toLocaleString()}
+       
+     
+   `).join('');
+ }
+ 
+ function filterUniversities() {
+   const searchTerm = searchInput.value.toLowerCase();
+   const location = locationFilter.value;
+   const maxTuition = parseInt(tuitionFilter.value);
+ 
+   const filtered = universities.filter(university => {
+     const matchesSearch = university.name.toLowerCase().includes(searchTerm);
+     const matchesLocation = location === 'all' || university.location.toLowerCase() === location;
+     const matchesTuition = university.tuition <= maxTuition;
+     return matchesSearch && matchesLocation && matchesTuition;
+   });
+ 
+   renderUniversities(filtered);
+ }
+ 
+ function updateTuitionValue() {
+   tuitionValue.textContent = `$${parseInt(tuitionFilter.value).toLocaleString()}`;
+ }

style.css

Changed around line 1
+ :root {
+   --primary-color: #1a73e8;
+   --secondary-color: #202124;
+   --background-color: #f8f9fa;
+   --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', system-ui, sans-serif;
+   line-height: 1.6;
+   color: var(--secondary-color);
+   background-color: var(--background-color);
+   min-height: 100vh;
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ header {
+   background: var(--primary-color);
+   color: white;
+   padding: 2rem 1rem;
+   text-align: center;
+ }
+ 
+ header h1 {
+   font-size: 2.5rem;
+   margin-bottom: 0.5rem;
+ }
+ 
+ .search-section {
+   padding: 2rem 1rem;
+   background: white;
+   box-shadow: var(--card-shadow);
+ }
+ 
+ .search-container {
+   max-width: 800px;
+   margin: 0 auto;
+   display: flex;
+   gap: 1rem;
+ }
+ 
+ #searchInput {
+   flex: 1;
+   padding: 0.75rem;
+   border: 2px solid #ddd;
+   border-radius: 8px;
+   font-size: 1rem;
+ }
+ 
+ #searchButton {
+   padding: 0.75rem 2rem;
+   background: var(--primary-color);
+   color: white;
+   border: none;
+   border-radius: 8px;
+   cursor: pointer;
+   transition: background 0.3s ease;
+ }
+ 
+ #searchButton:hover {
+   background: #1557b0;
+ }
+ 
+ .comparison-section {
+   display: grid;
+   grid-template-columns: 250px 1fr;
+   gap: 2rem;
+   max-width: 1200px;
+   margin: 2rem auto;
+   padding: 0 1rem;
+ }
+ 
+ .filters {
+   background: white;
+   padding: 1.5rem;
+   border-radius: 8px;
+   box-shadow: var(--card-shadow);
+ }
+ 
+ .filter-group {
+   margin-bottom: 1.5rem;
+ }
+ 
+ .filter-group label {
+   display: block;
+   margin-bottom: 0.5rem;
+   font-weight: 500;
+ }
+ 
+ .filter-group select,
+ .filter-group input {
+   width: 100%;
+   padding: 0.5rem;
+   border: 2px solid #ddd;
+   border-radius: 4px;
+ }
+ 
+ .university-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+   gap: 1.5rem;
+ }
+ 
+ .university-card {
+   background: white;
+   border-radius: 8px;
+   box-shadow: var(--card-shadow);
+   overflow: hidden;
+   transition: transform 0.3s ease;
+ }
+ 
+ .university-card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .university-card img {
+   width: 100%;
+   height: 180px;
+   object-fit: cover;
+ }
+ 
+ .university-card-content {
+   padding: 1.5rem;
+ }
+ 
+ .university-card h3 {
+   margin-bottom: 0.5rem;
+ }
+ 
+ .university-card p {
+   color: #666;
+   margin-bottom: 0.5rem;
+ }
+ 
+ footer {
+   margin-top: auto;
+   text-align: center;
+   padding: 1.5rem;
+   background: var(--secondary-color);
+   color: white;
+ }
+ 
+ @media (max-width: 768px) {
+   .comparison-section {
+     grid-template-columns: 1fr;
+   }
+ 
+   .search-container {
+     flex-direction: column;
+   }
+ 
+   #searchButton {
+     width: 100%;
+   }
+ }