Changes to popcharts.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Top 50 Pop Celebrities of the Year
+   Ranking based on chart performance over the past year.
+ 
+ 
+   
+ 
+ 
+   Discover the most influential pop artists of the year.
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://popcharts.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Top 50 Pop Celebrities of the Year
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "436d7947-1805-458c-804a-b485f116c237",
+   "object": "chat.completion",
+   "created": 1735320209,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\npopcharts.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://popcharts.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Top 50 Pop Celebrities of the Year\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Top 50 Pop Celebrities of the Year\n  Ranking based on chart performance over the past year.
\n\n\n  
\n\n\n  Discover the most influential pop artists of the year.
\n\n---style.css---\n:root {\n  --primary-color: #ff6f61;\n  --secondary-color: #6b5b95;\n  --background-color: #f4f4f4;\n  --text-color: #333;\n  --font-family: 'Arial', sans-serif;\n}\n\nbody {\n  font-family: var(--font-family);\n  color: var(--text-color);\n  background-color: var(--background-color);\n  margin: 0;\n  padding: 0;\n  line-height: 1.6;\n}\n\nheader {\n  background-color: var(--primary-color);\n  color: white;\n  padding: 20px;\n  text-align: center;\n}\n\nheader h1 {\n  margin: 0;\n  font-size: 2.5rem;\n}\n\nheader p {\n  margin: 10px 0 0;\n  font-size: 1.2rem;\n}\n\nmain {\n  padding: 20px;\n}\n\n.grid-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n  gap: 20px;\n}\n\n.artist-card {\n  background-color: white;\n  border-radius: 10px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  text-align: center;\n  transition: transform 0.3s ease;\n}\n\n.artist-card:hover {\n  transform: translateY(-10px);\n}\n\n.artist-card img {\n  width: 100%;\n  height: auto;\n  border-bottom: 2px solid var(--primary-color);\n}\n\n.artist-card h2 {\n  margin: 10px 0;\n  font-size: 1.2rem;\n  color: var(--secondary-color);\n}\n\nfooter {\n  background-color: var(--primary-color);\n  color: white;\n  text-align: center;\n  padding: 10px;\n  margin-top: 20px;\n}\n\nfooter p {\n  margin: 0;\n  font-size: 1rem;\n}\n\n@media (max-width: 768px) {\n  .grid-container {\n    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n  }\n\n  header h1 {\n    font-size: 2rem;\n  }\n\n  header p {\n    font-size: 1rem;\n  }\n\n  .artist-card h2 {\n    font-size: 1rem;\n  }\n}\n---script.js---\nconst artistList = document.getElementById('artist-list');\n\nconst artists = [\n  { name: 'Artist 1', image: 'images/artist1.jpg' },\n  { name: 'Artist 2', image: 'images/artist2.jpg' },\n  // Add more artists here...\n];\n\nartists.forEach(artist => {\n  const artistCard = document.createElement('div');\n  artistCard.className = 'artist-card';\n\n  const img = document.createElement('img');\n  img.src = artist.image;\n  img.alt = artist.name;\n\n  const h2 = document.createElement('h2');\n  h2.textContent = artist.name;\n\n  artistCard.appendChild(img);\n  artistCard.appendChild(h2);\n\n  artistList.appendChild(artistCard);\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 262,
+     "completion_tokens": 831,
+     "total_tokens": 1093,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 262
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # popcharts.scroll.pub

+ Website generated by DeepSeek from prompt: I want a website that rank pop celebrities based on charts that they make in the past year. bring the top 50 artists and their photos

script.js

Changed around line 1
+ const artistList = document.getElementById('artist-list');
+ 
+ const artists = [
+   { name: 'Artist 1', image: 'images/artist1.jpg' },
+   { name: 'Artist 2', image: 'images/artist2.jpg' },
+   // Add more artists here...
+ ];
+ 
+ artists.forEach(artist => {
+   const artistCard = document.createElement('div');
+   artistCard.className = 'artist-card';
+ 
+   const img = document.createElement('img');
+   img.src = artist.image;
+   img.alt = artist.name;
+ 
+   const h2 = document.createElement('h2');
+   h2.textContent = artist.name;
+ 
+   artistCard.appendChild(img);
+   artistCard.appendChild(h2);
+ 
+   artistList.appendChild(artistCard);
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #ff6f61;
+   --secondary-color: #6b5b95;
+   --background-color: #f4f4f4;
+   --text-color: #333;
+   --font-family: 'Arial', sans-serif;
+ }
+ 
+ body {
+   font-family: var(--font-family);
+   color: var(--text-color);
+   background-color: var(--background-color);
+   margin: 0;
+   padding: 0;
+   line-height: 1.6;
+ }
+ 
+ header {
+   background-color: var(--primary-color);
+   color: white;
+   padding: 20px;
+   text-align: center;
+ }
+ 
+ header h1 {
+   margin: 0;
+   font-size: 2.5rem;
+ }
+ 
+ header p {
+   margin: 10px 0 0;
+   font-size: 1.2rem;
+ }
+ 
+ main {
+   padding: 20px;
+ }
+ 
+ .grid-container {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+   gap: 20px;
+ }
+ 
+ .artist-card {
+   background-color: white;
+   border-radius: 10px;
+   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+   overflow: hidden;
+   text-align: center;
+   transition: transform 0.3s ease;
+ }
+ 
+ .artist-card:hover {
+   transform: translateY(-10px);
+ }
+ 
+ .artist-card img {
+   width: 100%;
+   height: auto;
+   border-bottom: 2px solid var(--primary-color);
+ }
+ 
+ .artist-card h2 {
+   margin: 10px 0;
+   font-size: 1.2rem;
+   color: var(--secondary-color);
+ }
+ 
+ footer {
+   background-color: var(--primary-color);
+   color: white;
+   text-align: center;
+   padding: 10px;
+   margin-top: 20px;
+ }
+ 
+ footer p {
+   margin: 0;
+   font-size: 1rem;
+ }
+ 
+ @media (max-width: 768px) {
+   .grid-container {
+     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+   }
+ 
+   header h1 {
+     font-size: 2rem;
+   }
+ 
+   header p {
+     font-size: 1rem;
+   }
+ 
+   .artist-card h2 {
+     font-size: 1rem;
+   }
+ }